React.js 프로젝트 만들기

React.js

자바스크립트의 프레임워크중 1가지

웹 제작시 FrontEnd에서 사용

 

첫번째! React를 사용하기 위해 필요한 Node.js 설치

※ Node.js에 React프로젝트를 만들기위한 npm, npx가 있고 npx로 'create-react-app' 명령어를 사용하여 프로젝트를 만들 수 있음!

 

1. Node.js 홈페이지에 들아가서 'Get Node.js' 클릭

(React를 사용하는 개발 도구들이 Node.js 기반이기 때문에 설치 해야함)

링크 : https://nodejs.org/ko

Node.js — Run JavaScript Everywhere

 

2. 현재 들어가 있는 날짜 기준 최신 LTS 버전으로 선택하셔서, 제일 아래 본인 운영체제의 알맞은 것을 선택 후 다운로드를 하시면 됩니다.

LTS 버전은 Long Term Support의 약자로 장기적으로 지원해주는 버전이라고 생각하시면 됩니다. 안정적으로 사용할 수 있습니다.

 

3. msi 파일을 실행 하시면 설치가 진행 되는데 'Next' 클릭

 

4. License Agreement 체크 후, Next 클릭 하여 진행

 

5. 저장 경로 선택 후, Next 클릭하여 계속 진행

 

6. 커스텀 설정이지만 무시하고 Next 눌러서 진행

 

7. React만 사용하실꺼면 무시하고 Next 진행하시면 되고

Node.js를 활용하여 백엔드 개발하시거나 복잡한 패키지를 사용 하실꺼면 체크하여 진행하시면 됩니다.

나중에 설치 따로할 수 있습니다. 저는 체크안하고 진행하였습니다.

 

8. Install 클릭하여 설치 진행

 

9. 설치 진행 중~~

 

10. 완료!

 

11. 정상적으로 설치가 되었는지 확인 방법

CMD창을 열어서 아래 명령어를 실행하시면 됩니다.

node -v

npm -v

npx -v

를 입력하여 버전이 정상적으로 출력되는지 확인하시면 됩니다.

 

두번째! React 프로젝트 만들기

1. cmd명령어(리눅스 경우 터미널 창)에서 아래 명령어 입력

'npx create-react-app 프로젝트명'

을 입력하면 아래와 같이 프로젝트가 만들어지기 시작

저는 바탕화면에 project라는 폴더를 만들고 myproject라는 프로젝트 명으로 생성하였습니다.

 

2. 프로젝트 생성 성공!

 

3. 본인의 개발환경(IDE)에 들어가서 프로젝트 확인

public, src 폴더가 생성된것을 확인할 수 있다.

 

4. 프로젝트 실행해보기

본인의 개발환경 터미널에서 아래 명령어를 실행한다.

'npm start'

명령어를 실행하게 되면 크롬창이 켜지고 'http://localhost:3000' 주소로 들어가게 된다.

React 화면이 정상적으로 실행되는걸 확인 가능하다.