[리액트 기초 스터디 #1] 클론 코딩 수업 준비하기 - Node.js, npm, npx, 비주얼 스튜디오 코드, 깃 설치하기

---

[리액트 기초 스터디 #1]

클론 코딩 수업 준비하기

---

---

오늘부터 시작할 스터디 주제는 리액트를 이용해서 영화 평점 웹 서비스를 그대로 따라서 만들어 보는 것이다. 노마드 코더 니콜라스 선생님의 신작 <Do it! 클론코딩 영화 평점 웹 서비스(이지스퍼블리싱)>을 가지고 정말 그대로 따라 만들면서 스터디를 진행해볼 예정이다.

 

리액트도, Node.js도 전혀 모르는 상태라서 긴장되기도 하고, 걱정되기도 하지만! 작품을 하나 만들어가면서 차근차근 연습하다보면 무언가를 배울 수 있지 않을까? 완성될 작품을 기대하며 신나게 출발!!

 

오늘은 그 첫 순서로 리액트 앱을 만들기 위한 기본 환경 설정을 시작한다.

---

클론 코딩 수업 준비하기

리액트로 영화 앱을 클론 코딩하려면 준비해야 할 도구들이 있다. 이번 스터디에서는 Node.js, npm, npx, 비주얼 스튜디오 코드, 깃을 설치할 예정이다.

---

:: Node.js 설치하기 ::

Node.js 공식 사이트에 접속한 다음 <LTS 버전>이 적힌 버튼을 눌러 Node.js 설치 파일을 내려받아 설치한다.

 

https://nodejs.org/

Node.js

 

사이트에 접속해서 자신의 컴퓨터 사양에 맞는 버번의 Node.js를 다운로드 받아 설치한다. 나는 윈도우(x64)를 사용하고 있으니 이걸 다운로드 받아서 설치하였다.

 

 

그런데 Node.js가 뭐지?

 

Node.js는 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 자바스크립트를 활용하며 Non-blocking I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있다. 내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 아파치 등의 별도의 소프트웨어 없이 동작하는 것이 가능하며 이를 통해 웹 서버의 동작에 있어 더 많은 통제를 가능케 한다.

라고 위키백과(https://ko.wikipedia.org/wiki/Node.js)에 나와 있다. 무슨 말인지는 잘 모르겠지다. 공부하다보면 개념이 조금 잡히려나? 아무튼 어렵지 않게 설치를 완료했다.

 

윈도우 명령 프롬프트에 다음과 같이 명령어를 입력해 Node.js가 설치되어 있는지 확인해볼 수 있다.

 

node -v

 

설치된 버전이 제대로 출려되므로 설치 성공!

 

---

:: npm 설치 확인하기 ::

Node.js를 설치하면 노드 패키지 매니저(node package manager: npm)도 함께 설치된다. 제대로 설치되었는지 확인해보자.

 

npm -v

 

명령어 프롬프트 창에 명령어를 입력하였더니 아래와 같이 출력되었다.

 

 

에러 메시지가 보이지 않고 버전이 출력되는 걸 보니 제대로 설치된 듯 하다.

---

:: npx 설치하기 ::

npx가 뭔지는 읽어봐도 잘 이해가 안 되므로 일단 그냥 설치해본다. 아래와 같이 명령어를 입력하였다.

 

npm install npx -g

 

잠시 후에 설치가 완료된 것이 보여 앞에서와 마찬가지로 버전을 확인해보았다. npx도 명령어를 입력하니 간단하게 설치되었다.

 

---

:: VSCode 설치하기 ::

VSCode 공식 사이트에서 설치 파일을 내려받아 설치하자.

 

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

마찬가지로 자신의 운영체제에 맞는 버전을 다운로드 받아서 설치한다.

 

 

다운로드 받고 설치 중. 개인적인 문제인지 모르겠는데 50여 메가 정도 되는 크기인데 다운로드가 오래 걸리네. 인내하며 기다리다가 설치 완료. 실행도 해 봄.

 

---

:: 깃 설치하기 ::

깃 공식 사이트에 접속해 깃 설치 파일을 내려받아 설치하자.

 

https://git-scm.com/

Git

 

말로만 듣던 깃(git)을 처음 만나는 날이네. 두근두근. 반갑다!

 

 

설치할 때, 뭔가 물어 보는게 많았는 데 그냥 다 [ Next ] 눌렀다. 

 

설치가 잘 완료 되었는지 버전을 확인해보자. 이번에는 버전 확인하는 옵션이 조금 다르다. 주의!

 

git --version

 

다행히 버전도 잘 출력되었다.

 

 

성공적으로 설치 완료. 이로써 이 책에서 설치하라고 한 프로그램들은 모두 설치가 끝났다!! 클론 코딩답게 뭔지도 잘 모르면서 책에 나오는 대로 클론 설치(?)를 했다.

---

리액트 기초 스터디는 <Do it! 클론 코딩 영화 평점 웹서비스>(노마드 코더 니꼴라스, 김형태 지음, 이지스퍼블리싱) 책을 가지고 진행한다. 관심이 있는 분은 아래 링크를 통해 책에 대한 자세한 정보를 볼 수 있다. 

 

bit.ly/3dPLiWd

Do it! 클론 코딩 영화 평점 웹서비스

---