umilove98의 블로그

리액트 프로젝트 생성하기 #4 create-react-app 본문

language,framework,library/React

리액트 프로젝트 생성하기 #4 create-react-app

umilove98 2022. 9. 30. 15:54
반응형

create-react-app은 리액트 프로젝트 생성 시 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 바로 프로젝트 작업 환경을 구축해 주는 도구입니다.

 

터미널을 열고 프로젝트를 만들고 싶은 디렉터리로 이동합니다.

 

 

저는 바탕화면에 react라는 폴더를 생성한 후 이곳에 프로젝트를 생성해 보기로 했어요

 

그 후 명령어를 입력하여 리액트 프로젝트를 생성합니다.

 

yarn create react-app hello-react

 

여기서 hello-react는 자신이 원하는 프로젝트 이름을 써 주면 됩니다

 

그러면 이거 뭐 잘못된 거 아닌가 싶은 느낌으로 엄청나게 긴 메시지들이 출력되면서 프로젝트가 생성됩니다.

 

 

저는 총 51.87초가 걸렸네요

 

이렇게 생성이 완료 된 후에는 프로젝트 디렉터리로 이동 후 리액트 개발 전용 서버를 구동하겠습니다.

cd hello-react
yarn start

잠시 기다리면 

 

터미널 창이 이렇게 바뀌면서 브라우저가 자동으로 열리며 리액트 페이지가 나옵니다. 

만약 열리지 않는다면 상기 이미지에 나와있는 대로 

http://localhost:3000 을 주소창에 입력하여 열어주세요

 

 

드디어 리액트 프로젝트 생성이 끝났네요 ㅎㅎ

반응형