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 설치방법은 여기를 참고하세요.
- Windows - command 프로그램을 실행합니다.
- command 창에 아래의 명령어를 실행하여 create-react-app을 설치합니다.
- npm에서 종속된 관련 라이브러리를 다운받아 설치를 진행합니다.
- 설치가 완료되면 아래와 같이 완료 화면을 확인할 수 있습니다.
- 설치가 완료되면 어디에 설치가 되었는지 친절하게 표시합니다.
설치 확인 방법
- windows command 창에서 아래의 명령어를 실행하세요.
create-react-app 을 사용하여 샘플프로젝트를 생성하고 페이지 실행(확인) - (Windows 환경 기준)
- create-react-app을 사용하면 손쉽게 프로젝트를 생성할 수 있습니다.
- Windows의 command 에서 아래와 같이 명령어를 실행 해보세요.
- $project_home$ > create-react-app hello-world
- 위의 화면과 같이 설치가 실행됩니다.
- 프로젝트의 설치는 해당 폴더에 프로젝트의 지정된 이름 (위 예제에서는 hello-world)으로 실행됩니다.
- 필요한 라이브러리를 다운받는 과정이 지나가고 설치가 끝나면 happy hacking! 이라는 메시지와 함께 종료됩니다.
- 설치로그 (참고)
- 위의 설치로그를 확인하여 무엇을 작업하였는지 확인할 수 있습니다.
- 샘플 프로젝트를 생성할 때 860개의 새로운 dependencies가 함께 저장된 것을 볼 수 있습니다.
- 샘플 프로젝트 실행
프로젝트가 설치된 폴더로 이동
yarn start
를 이용하여 프로젝트 실행- 실행 확인
locahost:3000
create-react-app 을 이용하여 생성된 프로젝트의 구성요소 확인
- 샘플 프로젝트를 설치한 이후 소스의 위치를 찾아보면 아래와 같이 구성되어 있음을 확인할 수 있습니다.
- 프로젝트를 빌드하기 위한 필수구성요소 파일 (즉, 없으면 안되는 중요한 파일) ※삭제금지※
- public/index.html
- 페이지 템플릿
- src/index.js
- javascript 진입점. (임의 수정할 경우 올바르게 표시되지 않을 수 있습니다.)
- public/index.html
- hello-world / 프로젝트의 ROOT
- package.json (임의 수정 및 편집 금지)
- 프로젝트에 사용되는 dependencies 를 정의한 파일
- package.json (임의 수정 및 편집 금지)
- src 디렉터리 (하위 포함)
- Webpack이 인지하는 폴더이며 이외의 다른 폴더에 위치한 js 혹은 css 파일은 Webpack이 관여하지 않습니다.
'Front-end > ReactJS' 카테고리의 다른 글
[ReactJS] Ant Design에 대한 이야기 (0) | 2018.04.13 |
---|---|
[ReactJS] Ant Design Custom Theme 사용하기 (0) | 2018.04.13 |
[ReactJS] React JSX, VirtualDOM, Component, Prop, State (0) | 2018.04.13 |