[DRF / React] 장고 리액트 연동하기 - 2. 리액트 프로젝트 세팅하기

들어가기 전에

이 글은 WSL 혹은 Macbook 위에서 돌아갑니다.

터미널에 대한 기초적인 지식을 가지고 있다는 가정 하에 진행되니, 모르시는 분들은 따로 학습을 하시고 오시길 추천드립니다.

https://velog.io/@dev_space/React-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0

React 시작하기

 

https://narup.tistory.com/183?category=1001170

[React] React.js 강좌 1. 기초 개념 정리

위 두 링크를 참고해서 작성했습니다.

Node.js / yarn 설치

Node.js 설치

우선 Node.js 를 설치해주세요.

(글을 작성하고 있는 2022.08.25 현재 기준으로 Node.js의 LTS 버전은 16.17.0입니다. LTS 버전을 추천드려요)

sudo apt-get install nodejs

노드 버전 변경 방법은 아래 링크를 참조해주세요

https://www.deok.me/entry/n-%EC%9D%84-%ED%86%B5%ED%95%98%EC%97%AC-NodeJS-%EB%B2%84%EC%A0%84-%EB%B3%80%EA%B2%BD%ED%95%98%EA%B8%B0

[NodeJS] n 을 통하여 NodeJS 버전 변경하기

 

yarn 설치

패키지 매니저로는 yarn을 사용할 예정입니다.

yarn도 설치해보도록 하겠습니다.

sudo npm install --global yarn

 

Create-React-App 으로 새 프로젝트 시작하기

프로젝트를 열고 싶은 폴더로 이동해서 아래 명령어를 터미널에 작성해주세요

# yarn create react-app {내 프로젝트명}
yarn create react-app myReact

( 설마 진짜 {내 프로젝트명} 을 그대로 적는 사람은 없겠죠?)

 

이후 프로젝트 폴더로 들어가 

yarn start

명령어를 작성해주면 자동으로 사이트가 열리는 것을 확인하실 수 있습니다.