본문 바로가기

JavaScript/React

리액트 시작하기-기본적으로 필요한 툴

리액트를 시작하기 위해 필요한 툴을 먼저 받아보자.

터미널, node.js, git, yarn 네 개를 먼저 받아보자.

터미널 설치

윈도우에서는 window+R키를 누르고 cmd를 실행시키면 기본적인 터미널이 있다.

기본 툴 사용해도 되고, 아니면 조금 더 예쁜 거 쓰고 싶으면 cmder을 다운로드해서 사용하면 된다.

https://cmder.net/

cmder을 설치하면 git이 같이 딸려와서 추가되기 때문에 git을 따로 설치해주지 않아도 된다.

깃 설치

소스 코드의 버전을 관리할 수 있고, 깃허브나 깃랩에 올릴 수가 있다.

git 공식 사이트로 가서 다운로드 하면 된다.

잘 다운로드 됐는지 확인하는 방법은 터미널에서 git —version을 적으면 확인할 수 있다.

https://git-scm.com/

node.js와 npm

node.js

node.js는 자바스크립트를 실행할 수 있는 환경이다.

예전에는 JS를 브라우저 위에서 동작하는 웹 페이지나 웹 어플리케이션을 위해 작성하는 언어였다.

하지만 이제는 node.js 덕분에 브라우저 밖, 예를 들면 운영체제 위에서 자바스크립트 코드를 실행할 수 있게 되었다. 그래서 node.js를 자바스크립트 실행기라고도 부른다. node를 서버라고 착각하는 경우가 많은데 node는 서버가 아니다.

npm

:pm은 Package Manager이다. 외부 라이브러리르 관리해주는 툴이다. npm이 없으면 외부 소스코드를 받아서 프로젝트 안에 넣고 필요한 걸 import해서 써야한다. 일일이 다운 받아서 쓰는 게 귀찮다. 심지어 중간에 업데이트 됐다? 업데이트 될 때 마다 새로 검색해서 다운 받아서 바꿔줘야 한다.

이런 install library를 도와주는 툴이 npm이다. 라이브러리 추가, 버전 업, 삭제 등을 도와준다.

npm을 쓰면 package.json라는 파일이 생기는데.. 여기에 라이브러리 정보가 들어있게 된다.

node를 설치하면 npm은 자동으로 다운로드 된다. 홈페이지 들어가면 다음과 같이 다운로드 받을 수 있는데 조금 더 안정적인 환경에서 구현하기 위해 왼쪽버튼(LTS)를 클릭해서 다운 받자. 오른쪽은 최신버전을 다운로드 받는 버튼이다.

터미널에서 node -v, npm -v로 확인할 수 있다.

https://nodejs.org/ko/

npx?

리액트를 쓰다 보면 npm말고 npx라는 말도 많이 듣게 된다. x:executeing. 즉, 라이브러리를 실행할 수 있게 도와주는 툴이다. npm은 다운받고, 업데이트 하는 용도이다. 보통 프로젝트 자체가 실행될 때 외부 라이브러리를 쓰게 되는데.. 내가 딱 원하는 패키지 쓰고 싶다? 그러면 npx를 사용한다.

yarn

yarn은 페이스북에서 만든 package manager이다.

npm말고 조금 더 성능이(+보완) 좋은 yarn을 설치해서 사용하도록 하자. npm 호환도 문제 없다.

터미널에서 npm install yarn -g (npm install 패키지이름 -글로벌) 명령어를 이용하면 설치가 된다.

터미널에서 yarn -v로 버전을 확인할 수 있다.

반응형

'JavaScript > React' 카테고리의 다른 글

프로젝트 폴더 트리 설명  (0) 2021.03.08
create-react-app  (0) 2021.03.08
11. 합성 vs 상속  (0) 2021.02.05
6. 이벤트 처리  (0) 2021.02.02
5.1 State 올바르게 사용하기  (0) 2021.02.01