🎈 리액트를 왜 해야하는가?

• 랜더링 하는과정에 있어서 DOM에게 가해지는 부담이 줄고 화면 수정 시 기존 화면을 아예 날리고 새로운 뷰를 선언하므로써 코드도 간결해지고 개발에 용이해짐
• 리액트는 자바스크립트 라이브러리로 유저 인터페이스를 만드는 데 사용합니다. 구조가 MVC, MVW 등인 프레임워크와 달리 오직 (View) 만 신경 쓰는 라이브러리
• 컴포넌트 기반의 프로그래밍 언어
  컴포넌트: 재사용 가능한 요소들

✨ 프로젝트 구조

• CRA(create-react-app)
  정해진 폴더 구조와 컴포넌트 구조는 없으며 일반적인 접근법만 있을뿐 이다.
  회사의 규모와 용도에 맞게 세팅

• node_modules
  : CRA를 구성하는 모든 패키지 소스 코드가 존재하는 폴더
  프로젝트와 관련된 라이브러리 다 설치되는 폴더
• package.json
  : CRA 기본 패키지 외 추가로 설치된 라이브러리 / 패키지 정보가 기록되는 파일
  프로젝트의 무조건 존재
• dependencies
  : 리액트를 사용하기 위한 모든 패키지 리스트, 버전 확인이 가능.
• scripts
  : start- 프로젝트 개발 모드 실행을 위한 명령어.
  build- 프로젝트 배포모드 실행을 위한 명령어.
• node.moudles와 package.json에서 이중으로 패키지를 관리하는 이유
  : 실제 내 코드와 패키지는 로컬에만 존재
  깃헙에 올릴 때, node.modules는 올리지 않음 --> 용량 차지
  따라서 선택하여 올리기 가능
• yarn
  : npm과 비슷한 동작 방식이지만 속도를 개선한 패키지 관리 도구
• package-lock.json(or yarn.lock)
  : yarn이 알아서 관리해주는 파일들
  그 패키지의 관련된 모든 정보를 포함하고 있어 다른 버전의 설치를 미연에 방지

✨ 각 디렉토리 구성

public
: index.html
data

src
1. assets
: 자산을 의미, 프로젝트에 사용할 이미지, 비디오, json 파일을 저장

2. components
   : 공통 컴포넌트 관리

3. pages
   : 페이지 단위의 컴포넌트 폴더로 구성
   라우팅 포함
   

4. styles
   : css 정의

5. services
   : 자바스크립트 모듈을 담는 폴더

6. utils
   : 상수나 공통 함수, 유틸리티를 담는 폴더

7. services
   : compenents 폴더보다는 덜 중요하지만 애플리케이션에서 여분으로 사용되는
   일반적인 자바스크립트 모듈을 만들 때 편리한 모듈을 담는 폴더

8. context
   : context API로 프로젝트를 작업 시 관련 API를 담는 폴더

9. hoc
   : 함수형 컴포넌트를 사용하면서 커스텀 훅을 모듈화하여 담아놓은 폴더

10. store
    : 상태에 저장하고 관리할 정보가 많은 대형 프로젝트에서는 리덕스와 같은 전역상태
    관리 라이브러리를 사용할 때 관련된 데이터를 저장시 모듈화해서 관리하는 폴더