React 초기 설정

1. 프로그램 설치하기

(1) 크롬 브라우저

우리가 만드는 웹은 브라우저에서 구동된다. 

구글 사의 크롬을 사용. 브라우저 설치.

 

(2) VScode 설치하기

코드를 작성하기 위한 프로그램이 필요하다.

메모장으로도 코딩이 가능하지만, 더 효율적인 코드 작성을 위해 전문 에디터를 사용한다.

그 중에서도 MS사의 vscode를 사용한다. vscode를 설치한다.

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

(3) git 설치하기

우리가 작성한 코드를 저장 및 관리하고, 다른 사람과 공유하기 위해 git 이라는 툴을 사용한다.

git을 사용하기 위해서는 내 컴퓨터에 깃을 설치해야 한다.

git 홈페이지에서 설치 프로그램을 다운로드 받고 설치하면 된다.

 

https://git-scm.com/downloads

Git - Downloads

 

(4) Node 설치하기

우리가 작성하는 자바스크립트 코드는 Node라는 플랫폼에 의해서 실행된다.

그래서 내 컴퓨터에 Node가 설치되어 있지 않으면 자바스크립트 코드를 실행할 수 없다.

마찬가지로 Node 홈페이지에서 설치 프로그램을 다운로드 받고 설치.  16.x.x LTS 버전을 설치한다.

https://nodejs.org/ko/

Node.js

 

node 설치 확인하기

잘 설치됐는지 확인

터미널(mac), powershell 또는 git bash를 켜서 아래 코드 입력

node -v

node 버전 확인되면 설치 된것

 

npm 이란?

NPM(Node Package Manager)은 무수히 많은 third-party 패키지들이 모여있는 집합소다.

우리는 npm에서 여러 패키지를 다운받아 활용할 수 있다.

비슷한 친구로는 yarn이 있습니다. 둘 다 "프론트엔드 의존성"을 관리하기 위한 "패키지 매니저"이다.

 

(5) yarn 설치하기

터미널에서 yarn 설치하기

우리는 npm의 역할과 동일하지만 npm보다 조금 성능적으로 개선된 yarn을 사용할 것이다.

아래 명령어를 입력해서 yarn을 설치해 본다.

npm install -g yarn

 

잘 설치 되었다면 아래처럼 yarn -v 명령어로 yarn의 버전을 확인 할 수 있다.

 

yarn으로 패키지 설치하는 방법

yarn으로 패키지를 설치할 때는 아래와 같은 명령어를 사용한다.

yarn add [설치할 패키지 이름]

// 예시: yarn add react-router-dom

 

2. 더 알아보면 좋은 키워드

• yarn과 npm의 차이점은 무엇인가?
• yarn 명령어는 어떤 것이 더 있을까?

 

🎉 **설정 끝!**

이제 본격적으로 리액트 시작