JAEJAE imojeomo

1. 리액트의 기본 개념📌 리액트에서 “컴포넌트”와 “프로퍼티(props)” 에 대해 설명더보기리액트에서 컴포넌트는 UI를 구성하는 독립적인 단위입니다. 각 컴포넌트는 자체적인 상태(state)를 가질 수 있으며, 다른 컴포넌트들과 props를 통해 데이터를 주고받습니다. props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 읽기 전용 데이터입니다. 예를 들어, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 props를 사용합니다. 컴포넌트는 리액트 애플리케이션의 UI 구성 요소를 만들 때 중요한 역할을 합니다.📌 리액트에서 “상태(state)”와 속성(props)”의 차이점더보기상태(state)는 컴포넌트 내부에서 관리되는 동적인 데이터이고, 속성(props)은 부모 컴포넌트에서 자식 컴포넌..

🔹 React 란?Facebook에서 만든 JavaScript 라이브러리재사용 가능한 UI 컴포넌트로 빠르고 효율적으로 웹 애플리케이션 구축에 사용단순한 웹사이트부터 대규모 애플리케이션까지 다양하게 활용 가능 🔹 React의 핵심 가치1. 컴포넌트 기반 아키텍처컴포넌트라는 독립적인 UI 단위로 웹 어플리케이션 구성하나의 페이지를 여러 개의 작은 컴포넌트로 나누면 재사용성이 높아지고 유지보수가 쉬워짐2. 가상 DOM(Virtual DOM)실제 DOM을 직접 조작하는 대신, 가상 DOM을 사용해 성능을 최적화함변경 사항을 메모리 상에서 비교(diffing)한 후, 최소한의 업데이트만 실제 DOM에 반영해서 렌더링 성능을 향상시킴(바뀐 부분만 업데이트)예를 들어, 쇼핑몰에서 장바구니에 추가할 때 전체 페리..

1. 클라이언트 기능 명세 2. 주요 웹 화면 구현① 회원가입② 소셜 로그인③ 로그인④ 홈 화면⑤ 홈 화면 - 게시물 수정/삭제⑥ 마이페이지⑦ 게시물 업로드⑧ 메세지 3. 배포 및 기술 문서📍배포 urlhttps://instagram-clone-client-lr01.onrender.com/auth/login📍기술 문서https://spectacled-azimuth-86e.notion.site/SSinstagram-18f05e45325f807fbbc2cbb8f0c20747?pvs=74📍깃 주소https://github.com/SeungjaeLee00/Instagram_Clone📍프로젝트 포트폴리오 4. 회고10월 4일부터 시작해서 1월 22일까지. 약 4개월 동안의 프로젝트가 끝났다. 풀스택 개발자..

GitHub Actions를 이용한 React 앱 CI/CD 배포 자동화이 포스트에서는 GitHub Actions를 사용하여 React 앱을 GitHub Pages에 자동 배포하는 CI/CD 파이프라인을 설정하는 방법을 다룹니다. GitHub Actions는 소프트웨어 개발 워크플로우를 자동화할 수 있는 도구로, 다양한 작업을 자동으로 실행할 수 있습니다. React 앱을 GitHub Pages에 배포하는 프로세스를 자동화하여, 매번 수동으로 배포할 필요 없이, main 브랜치에 변경 사항이 푸시될 때마다 자동으로 빌드되고 배포되도록 설정할 수 있습니다.1. GitHub Actions 워크플로우 파일 설정GitHub Actions 워크플로우는 .github/workflows 폴더 내에 YAML 파일로 정..

이번 포스팅에서는 반응형 헤더를 구현하는 방법을 다루겠습니다. 이 헤더는 사용자가 로그인한 상태에 따라 동적으로 로그인/로그아웃 버튼을 표시하고, 모바일 화면에서는 햄버거 메뉴를 통해 메뉴 항목을 조작할 수 있도록 구성되어 있습니다. 1. 프로젝트 개요이번에 구현할 헤더는 기본적으로 2가지 중요한 기능을 제공합니다:반응형 디자인: 화면 크기에 따라 메뉴를 햄버거 메뉴로 전환해 모바일에서도 깔끔하게 표시되도록 합니다.로그인 상태에 따른 동적 버튼: 사용자가 로그인한 상태에 따라 헤더에 로그아웃 버튼을 동적으로 보여주며, 로그인하지 않은 경우 로그인이 필요하다는 메시지를 유도합니다.2. 주요 기능2.1 반응형 디자인헤더는 기본적으로 데스크탑 화면에서 모든 메뉴 항목을 수평으로 배치하며, 화면 크기가 줄어들면..