React - 개발환경 세팅

필수 프로그램 설치

(1) 크롬 브라우저

우리가 만드는 웹은 브라우저에서 구동됩니다. 브라우저는 앞으로 우리가 가장 많이 사용하는 프로그램이죠. 많은 브라우저 중에서 저는 구글 사의 크롬을 사용할 것 입니다. 브라우저를 설치해주세요.

https://www.google.co.kr/chrome/

 

(2) VScode

코드를 작성하기 위한 프로그램이 필요한데요. 우리가 가지고 있는 메모장으로도 코딩이 가능하지만, 더 효율적인 코드 작성을 위해 전문 에디터를 사용하겠습니다. 그 중에서도 MS사의 vscode를 사용할 것 입니다. vscode를 설치해주세요.

https://code.visualstudio.com/

 

(3) git 설치하기

우리가 작성한 코드를 저장 및 관리하고, 다른 사람과 공유하기 위해 git 이라는 툴을 사용합니다. git을 사용하기 위해서는 내 컴퓨터에 깃을 설치해야 합니다. git 홈페이지에서 설치 프로그램을 다운로드 받고 설치하시면 됩니다.

https://git-scm.com/downloads

 

(4) Node 설치하기

 

우리가 작성하는 자바스크립트 코드는 Node라는 플랫폼에 의해서 실행됩니다. 그래서 내 컴퓨터에 Node가 설치되어 있지 않으면 자바스크립트 코드를 실행할 수 없어요. 마찬가지로 Node 홈페이지에서 설치 프로그램을 다운로드 받고 설치하면 됩니다. 우리는 LTS 버전을 설치해줍니다(캡쳐화면의 좌측 - 안정적, 신뢰도 높음).

https://nodejs.org/ko

 

node 설치 확인하기

우리가 노드를 설치했는데, 잘 설치됐는지 확인을 해봐야겠죠? 터미널(mac), power shell 또는 git bash를 켜서 아래 코드를 입력해볼까요?

node -v

이렇게 v16.x.x 처럼 버전이 보이면 우리가 node를 잘 설치한 것 입니다.

 

npm 이란?

1. NPM(Node Package Manager)은 무수히 많은 third-party 패키지들이 모여있는 집합소 입니다. 우리는 npm에서 여러 패키지를 다운받아 활용할 수 있습니다.
2. 💡 비슷한 친구로는 yarn이 있습니다. 둘 다 "프론트엔드 의존성"을 관리하기 위한 "패키지 매니저"입니다.

(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

 

npm과 yarn에 대해 좀 더 자세히 들여다 볼까요?

공통적 특징

1. 둘다 자바스크립트 런타임 환경인 노드(Node.js)의 패키지 관리자
2. 애플의 앱스토어, 구글의 플레이스토어처럼, 전 세계의 많은 개발자들이 본인들이 만든 유용하고 다양한 패키지들 또는 프로그램을 ‘온라인 데이터베이스’에 올려놓거든요. 그걸 쉽게 설치하고 삭제할 수 있도록 도와주는 관리자에요.

차별적 특징

NPM

1. node.js를 설치할 때 자동으로 생성
2. Node Package Manager의 약자
3. NPM platform 자체에요

YARN

1. 2016년에 페이스북에서 개발한 패키지 관리자
2. npm과의 호환성이 좋고, 속도나 안정성 측면에서 npm보다 월등히 좋습니다.

요약

1. 속도 : Yarn wins
2. 보안 : Yarn wins(하지만 최근 npm의 보안 업데이트도 크게 향상됐어요)

명령어

[출처 : Cracking Vue.js]

결론

사실 어떤 것을 사용해도 괜찮아요! 지속적으로 관리되고 있고, 넓은 커뮤니티가 있기 때문입니다.