[React] WebStorm CRA 및 구성 파일

CRA(create-react-app) 란?

빌드 도구를 구성할 필요 없이 즉시 싱글 페이지 React 애플리케이션을 생성

싱글 페이지 애플리케이션 (Single-page application, SPA)

하나의 HTML 페이지와 애플리케이션 실행에 필요한 JavaScript와 CSS 같은 모든 자산을 로드하는 애플리케이션으로 페이지 또는 후속 페이지의 상호작용은 서버로부터 새로운 페이지를 불러오지 않으므로 페이지가 다시 로드되지 않는다.

---

 

CRA 프로젝트 생성

CLI 사용

// npx
npx create-react-app my-app

// npm
npm init react-app my-app

// yarn
yarn create react-app my-app

 

WebStorm 프로젝트 생성 기능 사용

WebStrom 새 프로젝트 생성 과정에서 명령어 입력 없이 아주 쉽게 CRA project 생성이 가능하다

File > New > Project

Webstorm New Project

---

개발 모드에서 앱 실행

http://localhost:3000/ 개발 서버를 켤 수 있다

// npm
npm start

// yarn
yarn start

CRA 프로젝트 생성 후 개발서버를 켠 화면

 

---

CRA 생성 파일

CRA 파일 구조

 📂 node_modules 

해당 프로젝트에서 필요한 라이브러리들이 설치되어 있는 곳

• react 모듈이 설치
• import 구문을 통해 리액트 사용 가능
• CRA에서 기본 세팅 때 개발환경에 필요한 패키지를 설치해 주기 때문에 이미 여러 패키지 폴더가 존재

---

 📂 public  

" 웹을 배포한다 " → 특정 폴더를 서버 컴퓨터에 올려두는 것
⇒ public에 특정 디렉터리, 파일을 만들어두면 서버 URL을 통해서 접근 가능

• 서버와 연결된 특정 URL로 접근하면 해당 폴더의 파일을 요청할 수 있고, 뒤에 따로 추가적인 URL을 붙이지 않으면 index.html을 요청한다는 의미
• CRA를 배포했을 때 실제 서버에 배포되는 폴더 : public 폴더
• 우리 서버 주소로 접근하면(개발 서버의 경우는 http://localhost:3000) public 폴더에 들어가는 것과 같다고 생각하면 됨

 📄 index.html  : 뼈대가 되는 html 파일, 웹 브라우저에 보여지는 파일

• 리액트는 SPA(Single Page Application)로 하나의 index.html이 존재
• 리액트에서는 index.html 파일을 직접 수정하는 것이 X
  → index.js 파일을 통해  index.html 파일의 id가 root인 div 내부에 코드를 추가, 화면에 그려진다

 📄 favicon  : 로고 이미지

 📄 manifest.json : 모바일에서 저장하는 웹 어플리케이션을 만들 때 필요

 📄 robots.txt  : 크롤링을 위해 이용되는 파일

---

 📂 src  

핵심 파일, 개발에 사용되는 소스 파일들을 모아두는 폴더
  ex) index.js, 리액트 컴포넌트 같은 js파일, css파일 등

 📄 index.js : 최상위 루트, 리액트의 시작(Entry Point)이 되는 파일

 📄 App.js : CRA설치 후 웹 애플리케이션의 첫 화면에 그려지고 있는 파일, 데모를 위한 초기 컴포넌트

---

 📄 gitignore 

• 해당 파일 안 명시되어 있는 폴더나 파일들은 git에 올라가지 않음 → git으로 추적 X
• 용량, 보안 등 여러 가지 문제로 Github에 올리지 않아야 하는 파일을 추가

 📄 package.json 

• CRA 기본 패키지 외에 추가로 설치된 라이브러리나 패키지의 종류, 버전 등의 정보기록
• 관련된 패키지의 실제 코드는 node_modules 폴더에 존재
• npm으로 설치하면, package.json의 dependencies에 라이브러리 혹은 패키지의 정보가 자동으로 추가됨

 📄 package-lock.json : npm 사용할 때 생성

 📄 yarn.lock - yarn : yarn 사용할 때 생성

• npm / yarn을 사용해서 패키지를 설치하거나 업데이트하면 자동으로 생성되거나 수정되는 파일
  
• 프로젝트에 패키지에 최초로 추가될 당시에 정확히 어떤 버전이 설치가 되었는지 기록
  
• package-lock.json이나 yarn.lock과 같은 패키지 잠금 파일 ⇒ git ignore에 추가되면 안 됨 !!
  ( ex ) 개발자가 여러 명이 있는 개발팀에서 프로젝트에 투입되는 시간이 달라서 react 버전이 다를 수 있음
    → 개발자 a: 16.1.1, 개발자 b: 16.2.2, 개발자 c: 16.3.3, 개발자 d: 16.4.4
         개발자 a는 제대로 작동하지만 b에게서는 작동이 안 되는 경우 → 패키지 잠금필요

 📄 README.md 

• GitHub에서 사용자가 읽는 첫 번째 파일로 프로젝트에 대해서 설명하는 파일
• 소프트웨어, 프로젝트, 코드 또는 게임에 대한 사용자 정보를 포함하는 텍스트 파일이거나 패치 또는 업데이트에 대한 지침, 도움말 또는 세부 정보를 포함
• 파일 형식은 md : Markdown → 쉽게 텍스트로 변환할 수 있는 경량 마크업 언어

 

---

패키지를  📂 node_modules 와  📄 package.json 에서 이중으로 관리하는 이유

1. CRA를 통해 프로젝트를 설치하게 되면 node_modules는 개발환경에 필요한 여러 가지 패키지로 구성됨
2. node_modules는 모든 패키지의 소스 코드가 들어있는 만큼 많은 용량을 차지
   → .gitignore에 추가해 git으로 관리하지 않음
   
3. 개인이 설치한 패키지에 관한 정보는 package.json에 기록되어 있기 때문에
   package.json의 패키지 정보를 통해 npm install 명령어로 패키지의 이름과 버전 정보를 확인해 필요한 패키지를 자동으로 설치 가능