ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • React - CRA로 프로젝트 시작하기
    React/CRA 세팅 2020. 5. 25. 10:00

     

     

    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를 가진 태그에 뿌려진다.

     

    댓글

Designed by Tistory.