[리액트] 리액트 프로젝트를 생성하기 전에 필요한 도구

⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술을 공부하고 정리한 블로그 포스팅입니다. ⚠️

 

포스팅에 해당하는 목차는 다음과 같습니다:

3장 컴포넌트

• 1.3 작업 환경 설정

 

---

 

리액트 프로젝트를 생성하기 전에 필요한 도구

1. 터미널

터미널은 그래픽 유저 인터페이스(GUIs) 없이 컴퓨터에 명령을 내릴 수 있는 도구다. 여기서 그래픽 유저 인터페이스는 전자기기의 UI를 그래픽화시켜 일반 사용자들이 컴퓨터에게 쉽게 명령을 내릴 수 있게 하는 방식이다. 우리가 친구에게 메시지를 보낼때 전송버튼을 눌러 보낸다. 이때 버튼이라는 UI가 메시지를 전송하게 하는 기능을 가진 GUI 그래픽 유저 인터페이스다.

2. Node.js

Node.js는 자바스크립트를 서버에서 실행할 수 있게하는 자바스크립트 엔진이다. 리액트에서 직접적으로 Node.js를 쓰지는 않지만 리액트 프로젝트를 만들때 필요한 도구들이 Node.js를 사용한다. (i.e. 바벨, 웹팩)

터미널에서 Node.js 설치되어 있는지 확인하는 코드. Node.js가 설치되어 있으면 버전을 알려준다.

$ node -v

Node.js 설치하기 👉  https://nodejs.org/en/

 

 

3. npm

npm은 Node.js를 설치할때 함께 설치되는 패키지 매니저다. npm을 사용하면 외부 라이브러리를 설치, 업데이트, 삭제할때 쉽게 관리할 수 있다. 만약 npm이 없다면 프로젝트에 외부 라이브러리를 사용하고 싶을땐 라이브러리를 직접 사이트에서 다운받고 프로젝트에 옮겨주어야하며 라이브러리가 업데이트를 하면 예전 라이브러리를 삭제한 후 새버전을 다운받아 프로젝트에 넣어주어야하는 불편함이 있다. npm을 사용하면 코드 한줄로 외부라이브러리를 설치, 업데이트할 수 있어 편리하다.

터미널에서 npm이 설치되어 있는지 확인하는 코드. npm이 설치되어 있으면 버전을 알려준다.

$ npm -v

 

4. 소스 코드 에디터

컴퓨터 프로그램의 소스코드를 편집하기위한 텍스트 에디터 도구.종류는 Atom, Sublime Text, Brackets, Visual Studio Code로 종류가 다양하다. 개인적으로 비주얼 스튜디오를 추천한다.

비주얼 스튜디오 설치하기 👉  https://code.visualstudio.com/

 

 

5. Git

소스코드를 버전관리해주는 도구.

깃 설치하기 👉  https://git-scm.com/downloads

터미널에서 git이 설치되어 있는지 확인하는 코드. git이 설치되어 있으면 버전을 알려준다.

$ git --version

 

이 중에 하나라도 없다면 React를 실행할 수 없으니 반드시 시작전 설치를 완료해야한다. 

 

create-react-app으로 리액트 첫 프로젝트 만들기 👉  [리액트] create react app으로 리액트 프로젝트 생성하기