React.js 리액트 설치하기 Windows 10

내용의 흐름

1. node.js 설치
2. yarn 설치
3. Visual Studio Code 에디터 설치
4. create react-app 리액트 프로젝트 생성
5. 작업 시작하기

 

---

1. node.js 설치

설치

• 다운로드 웹사이트 : https://nodejs.org/ko/
• 다운한 버전: v.16.17.0.LTS
• 운영체제: Windows 64 용
• 다운받은 파일 더블클릭 후 모두 "Next" 눌러서 설치 완료 (옵션변경 안함)

Node.js

 

설치 확인

• 명령프롬프트 실행 (제목표시줄 검색칸에 "cmd" 입력)

• cmd 창에 아래와 같이 쳤을 때, 버전 명이 v16.17.0과 같이 나오면 설치 완료

node -v

 

 

---

2. yarn 설치

 

 

yarn은 npm과 같이 패키지를 관리해주는 도구이다. Node.js를 설치할 때 패키지 관리도구인 npm도 설치가 되지만, yarn이 npm보다 더 빠르고 효율적인 캐시시스템과 기타 부가기능이 있어 사용을 권장한다. yarn 을 별도로 설치 하지 않고 기존 관리도구인 npm을 사용해도 된다. 

Yarn 공식 설치 페이지

 

설치

• Node.js 설치 과정에서 자동 설치된 npm을 이용해 yarn을 깔면 된다.
• 아까 열어둔 cmd 창에 다음 명령어를 입력한다.
• 프로그레스바들이 나오면서 설치가 자동으로 진행된다.

npm install --global yarn

 

설치확인

• 설치 확인을 위해 다음 명령어를 입력한다.
• 1.22.19와 같이 버전 번호가 나오면 완료

yarn --version

• 최종 화면 참고

 

 

---

3. Visual Studio Code 에디터 설치

 

설치

• 다운로드 웹사이트: https://code.visualstudio.com/download
• 화면 왼쪽에 Windows 버튼을 클릭하자마자 자동으로 다운로드가 진행되었다.
• 다운받은 .exe 파일 더블 클릭
• 라이센스 동의 후 [다음] 계속 눌러서 설치완료

 

 

---

4. create react-app 리액트 프로젝트 생성

 

create react-app

• cmd 실행
• cd 명령어를 써서 원하는 디렉터리로 이동
• yarn 명령어 create react-app 프로젝트명 써서 새 앱 생성해주기 (yarn  이용)
• 참고로, 프로젝트명에 대문자는 쓰면 안된다
• 언더바( _ )도 안된다

yarn create react-app 프로젝트명

 

• 참고로, npm으로 생성하는 경우 다음 명령어를 쓴다

npm init react-app 프로젝트명

• 몇 분 걸린다
• 갖가지 것들이 설치되고 삭제되고 조정을 거쳐서
• 파란색 yarn 명령어들과 함께 "Happy hacking" 이라고 나오면 생성 완료

 

예제

• cmd 창에서

> cd/    => C드라이브로 이동
> cd ReactProject   => "ReactProject" 라는 폴더로 이동 
> yarn create react-app first-project   => 그 안에 "first-project"라는 리액트 프로젝트 생성 

 

• 프로젝트 생성 성공시 마지막 부분

 

 

---

5. 작업 시작하기

 

Open Folder

• 에디터 VS Code(Visual Studio Code의 줄임말) 실행
• Open Folder 클릭
• 4에서 생성해둔 디렉토리(C:\ReactProject)로 이동
• 프로젝트 폴더 선택후 [폴더선택] 버튼 클릭

 

서버 구동

• VS Code 터미널 열어주기

• powershell 놔두고 Command Prompt 열기

• 리액트 서버 구동 명령어 입력 (yarn start)

yarn start

• 다음과 같은 화면이 뜨면 구동 성공
• 기쁜 나머지 이 인터넷창 끄면 안된다. 코드수정시 이 창에 반영됨

• 위 화면에서 구동된 로컬 리액트 서버는 http://localhost:3000 이다. 
• 만약 인터넷창이 자동으로 열리지 않으면 위 주소를 복사해서 크롬과 같은 인터넷 브라우저에 수동으로 붙여넣기 하면 된다.

 

작업시작

• 코드작업의 시작은 first-project > src > App.js 파일에서부터 시작한다고 보면 된다. 
• 바야흐로 본인이 배운 리액트 문법들을 마음껏 펼쳐볼 수 있는 시간..
• 즐리액트 하세요~!