TIL | React 02 / CRA Settings

1. CRA 설치

• React 프로젝트를 시작하기 위해서는 아래의 명령어를 입력한다

// <react-project> 에는 프로젝트명 입력
// ex. npx create-react-app westudy-front
npx create-react-app <react-project>

// <react-project> 디렉토리 진입
cd <react-project>

// 로컬 서버 띄우기
npm run start

• npm run start 입력 후 브라우저 접속창에서 http://localhost:3000 로 접속이 가능하다
  • 만약, yes / no 입력창이 나타난다면 기존에 실행되고 있는 서버가 있는지 확인!

2. CRA 기본 폴더 및 파일 구성

2-1. CRA 초기 폴더 및 파일 세팅 구성

• CRA 설치 시 초기 폴더 구성은 아래와 같다
  

2-2. node.modules, package.json, .gitignore

1) node.modules

• CRA 를 구성하는 모든 패키지 소스 코드가 존재하는 폴더

2) package.json

• CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보(종류, 버전)가 기록되는 파일
• 모든 프로젝트마다 package.json 하나씩 존재
• "dependencies"
  • 리액트를 사용하기 위한 모든 패키지 리스트, 버전 확인 가능
  • 실제 코드는 node.modules 폴더에 존재
  • Why ? node.modules 와 package.json 에서 이중으로 패키지를 관리할까?
    • 실제 내가 작성한 코드, 내가 설치한 패키지는 내 로컬에만 존재
    • github 에 올릴 때 내가 작성한 코드와 함께 package.json(추가로 설치한 패키지 정보) 넘긴다.
    • 다른 사람이 그것을 (pull) 받아서 npm install 만 입력하면 package.json 에 기록되어 있는 패키지의 이름과 버전 정보를 확인하여 자동으로 설치한다.
    • 이때, github 에 올릴 때, node.modules 는 올리면 안 되는데 (불필요한 용량 차지),
    • .gitignore 파일에 github 에 올리고 싶지 않은 폴더와 파일을 작성할 수 있다.
  • 참고) 새로운 Library(package) 설치 시
    • 누군가 만든 소스코드를 다운받는 것
    • npm으로 설치 (ex. npm install slider)
    • 설치 시 node modules 에 자동으로 설치됨.
    • 하지만 package.json - dependencies 에 추가 자동으로 되는 건 아님.
    • 그래서, npm install slider —-save
    • —-save 까지 작성해야 dependencies 에 추가됨
    • (npm 버전이 업그레이드 됨에 따라 자동으로 추가되는 경우가 많지만 여전히 불안한 패키지들이 존재하기 때문에 패키지 설치 시 —-save 까지 입력하는 것을 권장합니다.)
• "scripts"
  • start : 프로젝트를 development mode(개발 모드) 실행을 위한 명령어. npm run start.
  • build : 프로젝트 production mode(배포 모드) 실행을 위한 명령어. 서비스 상용화.
• 참고) package.json vs. package-lock.json

3) .gitignore

• .gitignore 파일에 github 에 올리고 싶지 않은 폴더와 파일을 작성할 수 있다.
• push 를 해도 .gitignore 파일에 작성된 폴더와 파일은 올라가지 않는다.

2-3. index.html, index.js, App.js

1) public - index.html

• <div id="root"></div>

2) src - index.js

• React의 시작 (Entry Point)
• ReactDOM.render( <App /> , document.getElementById('root'))
  • ReactDOM.render 함수의 인자는 두 개
  • 첫 번째 인자는 화면에 보여주고 싶은 컴포넌트
  • 두 번째 인자는 화면에 보여주고 싶은 컴포넌트의 위치
• (이름 함부로 수정하면 안 됨)

3) src - App.js

• 현재 화면에 보여지고 있는 초기 컴포넌트
• Westagram 작업 시 <Login /> 컴포넌트, <Main /> 컴포넌트를 그 자리에 대체하여 작업하면 된다.
• React Router 를 배운 후에는 <Routes /> 컴포넌트가 최상위 컴포넌트로 그 자리에 위치하게 된다.

2-4. 기타 폴더 구성

1) public 폴더

• index.html
• images - 이미지 파일 관리
• data - mock data 관리 (추후 세션을 통해 다룰 예정)
• public 폴더의 역할
  • 우리가 웹을 배포한다는 건 특정 폴더를 서버 컴퓨터에 올려두는 것
  • 그래서 서버랑 연결된 특정 url로 접근하면 해당 폴더의 파일을 요청할 수 있는 것 → 뒤에 따로 추가적인 url을 안붙이면 index.html을 요청한다.
    • e.g.) [https://naver.com](https://naver.com). → 로 접근하면 naver.com에 연결되어있는 서버 컴퓨터의 폴더에 접근해서 index.html을 가져오는 것
  • 우리가 CRA를 배포했을 때 실제 서버에 배포되는 폴더가 public폴더
  • 그래서 우리 서버 주소로 접근하면(개발서버의 경우http://localhost:3000) public 폴더에 들어가는 것과 동일하다.
  • 그래서 우리가 public에 특정 디렉토리, 파일을 만들어두면 서버 url 통해서 접근이 가능하다.
  • 예시로, public/images/test.png 파일을 만들어두면, 서버에 접속해서 해당 파일에 접근할 수 있다
    • 실제로, test.png파일을 만들고, http//localhost:3000/images/test.png 을 브라우저 주소창에 입력하면 우리가 작성해둔 파일이 오는것을 볼 수 있다.

2) src 폴더

• components - 공통 컴포넌트 관리
• assest/images - css에서 background-image로 활용할 이미지 관리
• pages - 페이지 단위의 컴포넌트 폴더로 구성
  • Login - Login.js, Login.css
  • List- List.js, List.css
  • Item- List.js, List.css
• styles 폴더
  • reset.css - css 초기화
  • commom.css - 공통으로 사용하는 css 속성 정의 (ex. font-family)
• 참고) components vs. pages
  • 여러 페이지에서 동시에 사용되는 컴포넌트의 경우 components 폴더에서 관리합니다.
    (ex. Header, Nav, Footer)
  • 페이지 컴포넌트의 경우 pages 폴더에서 관리합니다.
  • 해당 페이지 내에서만 사용하는 컴포넌트의 경우 해당 페이지 폴더 하위에서 관리합니다.