Setting Up Frontend Development Environment

Setting Up Frontend Development Environment

1. Node.js 설치

2. 리액트 프로젝트 생성

   • Create React App을 사용한 프로젝트 생성
     npx create-react-app 프로젝트명

• 프로젝트 폴더로 이동
  cd 프로젝트명

1. 필요한 라이브러리 설치
   • React Router: 페이지간 라우팅을 위해 사용
     npm install react-router-dom
   • Axios: HTTP 클라이언트 라이브러리로 API 요청을 쉽게 만들 수 있음
     npm install axios
   • Bootstrap 또는 Material-UI (선택사항): UI 컴포넌트 라이브러리로 디자인을 쉽게 할 수 있음
     npm install bootstrap
npm install @mui/material @emotion/react @emotion/styled
2. 구조 설정 및 개발 시작
   • 폴더 구조 설정: src 폴더 안에 components, pages, api 등의 폴더를 생성하여 파일을 구조적으로 관리
   • 라우팅 설정: App.js에서 react-router-dom을 사용해 주소에 따른 페이지 라우팅을 설정
   • API 연동: axios를 사용해 백엔드 API와 데이터를 주고받는 함수를 api 폴더에 작성
   • 컴포넌트 개발: UI를 구성하는 각종 컴포넌트를 components 폴더에 개발
   • 페이지 개발: 각 페이지를 구성하는 컴포넌트를 pages 폴더에 개발

3. 개발 서버 실행 및 테스트
   npm start

4. 배포 준비
   npm run build
   • 최적화를 위해 빌드
   • build 폴더에 생성된 정적 파일들을 웹 서버에 업로드하여 배포

폴더 구조 설정

프로젝트의 src 폴더 안에 다음과 같은 하위 폴더를 만듦
components: 재사용 가능한 UI 컴포넌트(버튼, 입력 필드, 이미지 카드 등)를 저장
pages: 각 웹페이지(홈, 로그인, 회원가입, 이미지 업로드, 이미지 목록 등)를 구성하는 컴포넌트를 저장
api: 백엔드 API와 통신하는 함수를 저장
hooks: 커스텀 훅(예: 인증 상태를 관리하는 훅)을 저장
utils: 유틸리티 함수나 상수를 저장

라우팅 설정