create-reac-app 라이브러리를 통해 1분만에 React 프로젝트를 구축해보겠습니다.
1. Nodejs 설치하기
Windows
Nodejs 공식 홈페이지 접속 -> 내 운영체제에 맞는 .msi 파일 다운로드 후 설치
* LTS : Long-Term Support (Stable 버전)
Mac (Linux 도 동일)
mac에선 nvm (Node Version Manager) 을 이용해서 설치합니다.
nvm 설치 -> nvm install 명령어로 npm LTS ver. 설치
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
nvm install -- LTS Ver.
2. create-react-app 설치
create-react-app 라이브러리는 facebook에서 제작한 것으로 번거로운 react 환경 구축 절차를 쉽고 빠르게 구축할 수 있게 만든 라이브러입니다.
npm을 이용해서 create-react-app을 설치해줍니다.
npm install -g create-react-app
3. create-react-app 실행
react 프로젝트를 만들고 싶은 경로에 들어간 후 heolloworld 프로젝트 생성 명령어를 실행해줍니다.
3~5분정도 소요됩니다.
create-react-app helloworld
명령어를 실행하면 라이브러리에 대한 정보가 위에 쭈르륵 나오는데 무시해주시고 좀 기다리면 아래와 같이 success가 나옵니다.
4. npm start
생성된 프로젝트에 접속 -> npm start
cd helloworld
npm start
명령어를 실행하면 아래와 같이 접속 URl이 나옵니다. Local에 나와 있는 주소로 접속
(별도 설정을 하지 않았기 때문에 http://localhost:3000로 접속하시면 됩니다.)
http://localhost:3000으로 접속하면 아래와 같은 화면이 나오면서 react 프로젝트 구축 끝!
읽어주셔서 감사합니다.
'Javascript' 카테고리의 다른 글
[Javascript] error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style 해결 방법 (0) | 2021.01.24 |
---|---|
[Javascript] ajax 라이브러리 사용 방법 (jQuery, axios) (0) | 2020.06.08 |
[React] IE 11에서 create-react-app 프로젝트 실행 시 SCRIPT1002 오류 해결법 (0) | 2020.06.07 |
[Javascript] IE 11 Ajax Caching 끄기 (jQuery, axios) (0) | 2020.06.07 |
댓글