본문 바로가기

Front-end/ReactJS

[ReactJS] create-react-app 설치와 샘플 실행

create-react-app에 대하여

  • 이 오픈소스는 facebook incubator라는 Github에 위치
  • create-react-app을 사용하는 주요한 이유는 React를 사용함에 있어 발생하는 많은 설정의 어려움을 해소하기 위해 개발되었습니다. ( 참고: https://techstory.shma.so/create-react-app%EC%97%90-%EA%B4%80%ED%95%98%EC%97%AC-1-935a21297550)
  • 기본적으로 ES2015문법을 지원하며 watchify가 기본설정으로 지정되어 있어 쉽게 작업할 수 있습니다.
    • create-react-app 덕분에 npm과 yarn을 설치하고 create-react-app을 설치한 후 샘플 프로젝트를 실행하는 시간은 불과 몇 분안에 끝이 납니다.
    • npm (혹은 yarn) 설치 > create-react-app 설치 > create-react-app [hello-world](샘플프로젝트가칭) 프로젝트 생성 > 실행 끝

npm을 이용하여 create-react-app설치하기 (Windows 환경 기준)

  • npm 설치방법은 여기를 참고하세요.

  1. Windows - command 프로그램을 실행합니다.
  2. command 창에 아래의 명령어를 실행하여 create-react-app을 설치합니다.
    • $ npm -g install create-react-app

        • npm에서 종속된 관련 라이브러리를 다운받아 설치를 진행합니다.
        • 설치가 완료되면 아래와 같이 완료 화면을 확인할 수 있습니다.

      • 설치가 완료되면 어디에 설치가 되었는지 친절하게 표시합니다.

설치 확인 방법

    • windows command 창에서 아래의 명령어를 실행하세요.
    • create-react-app --version



create-react-app 을 사용하여 샘플프로젝트를 생성하고 페이지 실행(확인) - (Windows 환경 기준)

  • create-react-app을 사용하면 손쉽게 프로젝트를 생성할 수 있습니다.
  • Windows의 command 에서 아래와 같이 명령어를 실행 해보세요.
    • $project_home$ > create-react-app hello-world
      • 위의 화면과 같이 설치가 실행됩니다.
      • 프로젝트의 설치는 해당 폴더에 프로젝트의 지정된 이름 (위 예제에서는 hello-world)으로 실행됩니다.
    • 필요한 라이브러리를 다운받는 과정이 지나가고 설치가 끝나면 happy hacking! 이라는 메시지와 함께 종료됩니다.
    • 설치로그 (참고)

        • 위의 설치로그를 확인하여 무엇을 작업하였는지 확인할 수 있습니다.
        • 샘플 프로젝트를 생성할 때 860개의 새로운  dependencies가 함께 저장된 것을 볼 수 있습니다.
  • 샘플 프로젝트 실행
    1. 프로젝트가 설치된 폴더로 이동

      cd $project_folder$/hello-world
    2. yarn start 를 이용하여 프로젝트 실행
    3. 실행 확인 locahost:3000

create-react-app 을 이용하여 생성된 프로젝트의 구성요소 확인

  • 샘플 프로젝트를 설치한 이후 소스의 위치를 찾아보면 아래와 같이 구성되어 있음을 확인할 수 있습니다.
  • 프로젝트를 빌드하기 위한 필수구성요소 파일 (즉, 없으면 안되는 중요한 파일) ※삭제금지
    • public/index.html
      • 페이지 템플릿
    • src/index.js
      • javascript 진입점. (임의 수정할 경우 올바르게 표시되지 않을 수 있습니다.)
  • hello-world / 프로젝트의 ROOT
    • package.json (임의 수정 및 편집 금지)
      • 프로젝트에 사용되는 dependencies 를 정의한 파일
  • src 디렉터리 (하위 포함)
    • Webpack이 인지하는 폴더이며 이외의 다른 폴더에 위치한 js 혹은 css 파일은  Webpack이 관여하지 않습니다.