[React.js] 프로젝트 생성 및 기본 구조(소스코드포함) + 초보자용 디테일 설명

1. 프로젝트 생성

1. node.js설치 (설치되어있다면 생략하시면 됩니다, 하단링크 들어가셔서 LTS 다운로드 후 실행)
   https://nodejs.org/en 
2. frontend 폴더 생성
3. visual studio code 프로그램 실행후 frontend 폴더 열기
4. TERMINAL에 npm init vite 입력 후 프로젝트 이름은 ./(현재 폴더에 생성) 치고 엔터
5. y 입력 후 framework는 React, variant는 JavaScript 선택

 

2. 프로젝트 구조

이미지와 동일하게 만들어주시면 됩니다

 

2.1 구조 설명

• components : 여러 component에서 공통 사용되는 components 생성
  • 항상 component 이름은 대문자로 시작
  • NotAuthRoutes.jsx : 로그인 된 사람이 로그인페이지나 회원가입 페이지 못들어가게, 들어가게되면 다른페이지로 redirect(넘겨준다고 이해하시면 된다)
  • ProtectedRoutes.jsx : 로그인 안 된 사람이 로그인 된 사람만 들어갈 수 있는 경로에 갔을 때 로그인 페이지로 redirect 해주는 컴포넌트
• hooks : custom hooks
• layout : footer, sidebar, header 등등
• pages : 메인페이지, 업로드 페이지 등 각 페이지들
• store : 상태관리, redux관련된것들
• utils : 여러 컴포넌트에서 사용하는 함수들
• 왜 jsx를 쓰는가? 
  • react는 html과 js를 혼합해서 사용할수있는 jsx를 쓴다
  • 확장자는 js만 쓰면 js, 혼합해서쓰면 jsx 이렇게 용도에 맞게 쓰면된다

 

2.2 스니펫 사용하여 컴포넌트 생성(기본코드 자동완성)

- rafce를 치면 함수형 컴포넌트가 자동 작성된다(기본 코드 자동완성)

- 이걸 사용하기 위해서는 ES7이라는 확장프로그램 설치 필수