React - CRA로 프로젝트 시작하기

 

 

create-react-app 이란?

- 페이스북에서 만든 react 웹 개발용 boilerplate이다.

- 리엑트에서 편리하게 개발하기 위한 세팅이 잘 되어있다. ex) 자동 리프레쉬

- 줄여서 CRA라고 부른다.

 

boilerplate란?

표준 문안이라는 뜻의 단어이며,

프로그래밍에서의 boilerplate code는 최소한의 변경으로 재사용할 수 있는 것과 적은 수정만으로 여러 곳에 활용 가능한 코드, 문구를 말하며, 각종 문서에서 반복적으로 인용되는 문서의 한 부분을 의미한다.

 

create-react-app 설치 하는 법

우선 설치 전에 다음과 같이 npm과 node가 설치되어 있는지 확인해야 한다.

설치가 된 것을 확인했으면,  프로젝트 폴더를 생성하고자 하는 폴더로 가서 다음과 같은 명령어를 입력해야 한다.

설치가 완료되면, 해당 폴더로 이동 후 프로젝트를 로컬에서 실행해 볼 수 있다.

실행을 하면 브라우저가 실행되면서 localhost:3000 포트에 프로젝트가 떠 있는 것을 확인해볼 수 있다.

만약, 3000번 포트를 이미 사용 중이라면 3001, 3002, … 와 같이 증가된 포트에 뜬다.

 

create-react-app 프로젝트의 구조

node_modules

- 바벨, 웹팩 등 이러한 패키지들이 들어있는 폴더이다.

- 패키지 관리 도구로 설치한 패키지들이 들어있는 폴더이다.

public

- 정적(static)으로 사용되는 콘텐츠들이 포함되어 있다.

- 핵심은 리액트에서는 SPA(Single Page Application) 방식을 사용하고 있기 때문에 모든 페이지에 대한 처리가 하나의 html 파일에서 이루어진다.

index.html 파일만 남겨두고, 모두 삭제한다.

src

- 우리가 실질적으로 작업을 할 공간이며, 작업하는 자바스크립트 파일과 css, scss 파일들이 들어있다.

index.js/index.css와 App.js/App.css를 제외하고 모두 삭제한다.

. gitignore

- 깃에 올리기 싫은 것들을 관리한다. ex) node_modules와 같은 것은 용량이 크기 때문에 gitignore에 올려놓는다.

package.json

- npm, yarn 등 패키지 관리 도구가 패키지 관리를 위해 사용하는 파일이다.

- 설치된 패키지의 정보, 스크립트 명령어 들을 포함하고 있다.

ex ) npm start -> 개발자 모드 진입 로컬 서버가 띠어짐
      npm bulid -> 배포 모드 진입

ex) 이전에 인스타그램 클론 했던 pakeage.json 파일

 

create-react-app 초기 파일 세팅

components

- 페이지마다 재사용되는 컴포넌트를 넣는다.

ex) Header 컴포넌트, Footer 컴포넌트

 

images

- 의미 그대로 이미지를 담는 폴더이다.

 

pages

- 각 페이지에 해당하는 컴포넌트들을 폴더의 하위 폴더로 관리하면 된다.

ex) Login 폴더 -> Login.js / Login.scss

 

style

- 최상위 index.js에서 import 해서 사용한다.

ex) reset.scss -> 초기 세팅( * { borderbox: border-box } )

common.scss -> 페이스북에서 파란색을 일일이 지정하는 것보다 scss로 변수를 만들어서 쓰고 싶을 때마다 쓸 수 있다.

 

index.js

- 여기에서 각 페이지의 컴포넌트들을 모아서 index.html의 root라는 id를 가진 태그에 뿌려진다.