React 프로젝트 초기 세팅 & 폴더 구조

yarn : https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable

node js : https://nodejs.org/en

 

Yarn

 

Node.js — Run JavaScript Everywhere

 

vscode : https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

 

설치 완료 후 vscode에서 gitClone 통해 프로젝트 빌드 후 터미널에서 npm start 실행!

 

 

'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는
배치 파일이 아닙니다.

 

 

이럴 경우 yarn add react-scripts 실행해서 해결

 

---

 

프로젝트 실행 후 구조를 파악하는 과정에서 폴더명만 봐서는 잘 모르겠어서 정리

 

 

CRA의 초기 폴더구조

my-app
├── node_modules
├── public
├── src
├── .gitignore
├── package.json
└── README.md

• node_modules
  현재 프로젝트에 포함된 라이브러리들이 설치되어 있는 폴더(git add x)
• public
  index.html과 같은 정적 파일

• src
  리액트 내부에서 작성하는 거의 모든 파일들이 이 폴더 내부에서 작성되며 이 폴더에 있는 파일들은 명령어에 따라 JS로 컴파일이 진행
• .gitignore
  생략
• package.json
  프로젝트에 관련된 기본적인 내용(프로젝트의 이름, 버전 등)과 라이브러리들의 목록이 포함
  
  라이브러리가 설치된 node_modules 대신에 이 package.json을 깃에 포함하여 올리게 되며 후에 누군가가 프로젝트를 클론할 때 이 package.json에 적혀있는 라이브러리의 목록을 기준으로 npm에서 설치
• README.md
  생략

src 내부 폴더구조

└─ src
 ├─ components
 ├─ assets 
 ├─ hooks (= hoc)
 ├─ pages
 ├─ constants
 ├─ config
 ├─ styles
 ├─ services (= api)
 ├─ utils
 ├─ contexts
 ├─ App.js
 └─ index.js

• components
  재사용 가능한 컴포넌트들이 위치하는 폴더
  컴포넌트는 매우 많아질 수 있기 때문에 이 폴더 내부에서 하위폴더로 추가로 분류하는 경우가 많음
• assets
  이미지 혹은 폰트와 같은 파일들이 저장되는 폴더
  이미지와 같은 파일들을 public에 직접 넣는 경우도 있는데 둘의 차이는 컴파일시에 필요한지 여부
  파비콘과 같이 index.html내부에서 직접 사용하여 컴파일 단계에서 필요하지 않은 파일들은 public에
  반면, 컴포넌트 내부에서 사용하는 이미지 파일인 경우 이 assets 폴더에 위치시켜야 함
• hooks (= hoc)
  커스텀 훅이 위치하는 폴더
• pages
  react router등을 이용하여 라우팅을 적용할 때 페이지 컴포넌트를 이 폴더에 위치
• constants
  공통적으로 사용되는 상수들을 정의한 파일들이 위치하는 폴더
• config
  config 파일이 많지 않은 경우 보통 최상위에 위치시켜놓지만 여러개의 config 파일이 있을 경우 폴더로 분리하기도 함
• styles
  css 파일들이 포함되는 폴더
• services (= api)
  보통 api관련 로직의 모듈 파일이 위치하며 auth와 같이 인증과 관련된 파일이 포함

• utils
  정규표현식 패턴이나 공통함수 등 공통으로 사용하는 유틸 파일들이 위치하는 폴더
• contexts
  contextAPI를 사용할 때 관련 파일들이 위치하는곳으로 상태관리를 위해 contextAPI 대신 redux를 사용 할 경우 폴더 이름을 store로 사용하기도 함

---

궁금한 점

 

 

훅이 뭐지?

 

커스텀 훅(Custom Hook)
React에서 커스텀 훅(Custom Hook)은 상태 로직(stateful logic)을 재사용할 수 있도록 하는 기능

 

 

package.json 은 라이브러리가 추가되면 자동으로 추가되는걸까?

 

node_modules 은

사용자는 직접적으로 node_modules 디렉토리를 작성하거나 수정하지 않고,

이 디렉토리는 패키지 매니저 (예: npm 또는 yarn)가 자동으로 관리하며, 프로젝트에 필요한 모든 의존성 패키지들을 설치하는 공간이다.

 

사용자가 직접적으로 할 수 있는 것은
package.json
파일을 편집하여 프로젝트에 필요한 패키지들을 명시하고, 패키지 매니저를 사용하여 이 패키지들을 설치하는 것 예를 들어, npm install 명령을 실행하면
package.json
파일에 명시된 모든 패키지들과 그 의존성들이 자동으로 설치되고
node_modules
디렉토리에 저장!!!

 

 

사용자 -> package.json 작성 -> npm install -> 파일, 패키지, 의존성 자동 설치 -> 설치된 녀석들이 node_modules 디렉토리에 저장!!

 

 

간단하게 리액트 공부 끝!