<aside> 🚩 Goal: 리액트 프로젝트를 하기 위한 여러 도구들을 설치하고 설정을 해봅시다.
</aside>
[목차]
(1) 크롬 브라우저
우리가 만드는 웹은 브라우저에서 구동됩니다. 브라우저는 앞으로 우리가 가장 많이 사용하는 프로그램이죠. 많은 브라우저 중에서 우리는 구글 사의 크롬을 사용합니다. 브라우저를 설치해주세요.
(2) VScode 설치하기
코드를 작성하기 위한 프로그램이 필요한데요. 우리가 가지고 있는 메모장으로도 코딩이 가능하지만, 더 효율적인 코드 작성을 위해 전문 에디터를 사용하겠습니다. 그 중에서도 MS사의 vscode를 사용할 것 입니다. vscode를 설치해주세요.
(3) git 설치하기
우리가 작성한 코드를 저장 및 관리하고, 다른 사람과 공유하기 위해 git 이라는 툴을 사용합니다. git을 사용하기 위해서는 내 컴퓨터에 깃을 설치해야 합니다. git 홈페이지에서 설치 프로그램을 다운로드 받고 설치하시면 됩니다.
(4) Node 설치하기
우리가 작성하는 자바스크립트 코드는 Node라는 플랫폼에 의해서 실행됩니다. 그래서 내 컴퓨터에 Node가 설치되어 있지 않으면 자바스크립트 코드를 실행할 수 없어요. 마찬가지로 Node 홈페이지에서 설치 프로그램을 다운로드 받고 설치하면 됩니다. 우리는 16.x.x LTS 버전을 설치해줍니다.
(5) yarn 설치하기
(5)-1 터미널에서 yarn 설치하기
우리는 npm의 역할과 동일하지만 npm보다 조금 성능적으로 개선된 yarn을 사용할 것 입니다. 아래 명령어를 입력해서 yarn을 설치해봅시다.
npm install -g yarn
(5)-2 yarn 설치 확인하기 (=== 버전 확인하기)
잘 설치되었다면 아래처럼 yarn -v 명령어로 yarn의 버전을 확인하실 수 있을거예요!
(5)-3 yarn으로 패키지 설치하는 방법
yarn으로 패키지를 설치할 때는 아래와 같은 명령어를 사용합니다.
yarn add [설치할 패키지 이름]
// 예시: yarn add react-router-dom
<aside> 🎉 설정 끝!
이제 본격적으로 리액트를 배워봅시다.
</aside>