React 설치 및 프로젝트 생성 시작 방법

React 설치 및 프로젝트 생성 시작 방법

 

React는 많은 Front-end 개발 라이브러리 혹은 프레임워크들 중에서 가장 큰 생태계를 형성하고 현재까지 가장 인기있는 라이브러리입니다.

 

React를 설치하고 프로젝트를 생성하여 시작하는 방법을 알려드리도록 하겠습니다.

 

React 개발 환경 준비

npm 설치 확인

React 개발을 위해서는 npm이 설치되어 있어야 합니다.

npm -v

위 명령어를 통해 npm 설치 여부와 버전을 확인해보시고,

npm이 설치되어있지 않으시다면,

https://nodejs.org/ 

에서 설치하시면 되고,

최신 버전이 아니시라면,

npm Upgrade 방법

위 글을 참고하여 최신버전으로 업그레이드하여 사용하시는 것을 추천드립니다.

 

React 프로젝트 생성

npm 이 정상적으로 설치가 되어있다면,

이제 React 프로젝트를 생성하실 수 있는데 2가지 방법이 있습니다.

create-react-app을 설치하여 사용하는 방법과 설치하지 않고 사용하는 방법이 있습니다.

 

create-react-app을 설치하지 않고 사용하는 방법

npm 5.2.0 버전부터 새로 추가된 Node Package를 실행시켜주는 도구인,

npx를 사용하여 create-react-app을  굳이 설치하지 않고도 React 프로젝트를 시작할 수 있습니다.

npx -v

node를 설치하신 분들 대부분이 5.2.0 이상의 버전을 사용하실 것이기 때문에 기본적으로 npx가 설치되어 있겠지만,

혹시 npx가 설치되어있지 않으신 분들이라면

npm install -g npx

위 명령어로 npx 를 설치해주시면 되겠습니다.

 

npx가 설치되어있으면,

npx create-react-app appname

위 명령어의 [appname] 부분에는 원하는 프로젝트 이름을 입력하고 프로젝트를 생성하시면 되겠습니다.

 

프로젝트가 생성되면 터미널에서 위와 같은 화면을 보실 수 있습니다.

 

create-react-app을 설치하여 사용하는 방법

npm install -g create-react-app

위 명령어를 입력하여 create-react-app 을 전역으로 설치합니다.

create-react-app 설치가 끝나면,

 

create-react-app appname

위 명령어의 [appname] 부분에는 원하는 프로젝트 이름을 입력하고 프로젝트를 생성하시면 되겠습니다.

 

프로젝트가 생성되면 터미널에서 위와 같은 화면을 보실 수 있습니다.

 

프로젝트 실행

생성된 프로젝트를 실행해보도록 하겠습니다.

npm start

생성한 프로젝트로 들어간 뒤,

위 명령어를 통해 프로젝트를 실행시킵니다.

 

프로젝트가 실행되었습니다.

 

프로젝트를 실행하면,

크롬이 자동으로 실행되면서 실행된 localhost 주소로 자동으로 접속되거나,

혹은 위 터미널에서 보여지는 주소로 접속하시면 위와같이 React 생성시 기본으로 만들어지는 기본 화면을 보실 수 있습니다.

 

이상으로 React 설치 및 프로젝트 시작 방법에 대한 설명을 마치도록 하겠습니다.

 

 

도움이 되셨다면 공감, 댓글 부탁드립니다!

궁금하신 점이나 요청사항은 언제든지 말씀해주세요!

피드백도 언제나 환영입니다!

 

감사합니다.