Chapter01. 리엑트 설치하기

<< 학습 목표 >>

1. node를 설치할 수 있다.

2. vs code를 설치할 수 있다.

---

게임을 하려면 게임을 설치해야하고 카카오톡을 하려면 카카오톡을 설치해야하는 것처럼 리엑트로 개발을 할것이기 때문에 리엑트를 설치해야함

리엑트는 npm 으로 설치해야하는데 npm 역시 설치해야함

npm은 별도로 설치할 수도 있지만 Node.js(이하 node)를 설치하면 같이 설치 되기 때문에 node를 설치하자

node는 JS로 SPA를 개발할 수 있게 해주는 환경이라고 생각하면 됨

 

인터넷에 node.js로 검색(1) 해 첫 번째 검색 결과(2)인 node 공식 홈페이지로 들어가자

검색 결과가 다르다면 주소창에 https://nodejs.org/en 를 직접 입력해도 됨

 

node 공식 홈페이지에 들어오면 바로 보이는 [ ~ LTS ] 를 선택(1)

LTS란 Long Term Support의 약자로 해당 버전을 장기간 지원해주는 버전임

이 글을 보는 시점에 따라 18.15.0 LTS가 아닐 수 있는데 이는 큰 의미는 없음

 

곧바로 설치 프로그램이 다운 받아지며 설치 프로그램을 다운 받아 실행시켜 설치하면 되므로 별도 이미지 첨부는 하지 않음

 

여기까지 리엑트를 설치하기 위해 node를 설치했음

 

리엑트 설치는 리엑트를 적용하고 싶은 프로젝트 마다 별도로 설치해야하므로 개발툴까지 설치 후 프로젝트를 만들 때 설치하겠음

---

이번에는 개발툴인 VS Code를 설치하자

지난 글에서 리엑트를 톱에 비유했는데 개발툴은 작업대 라고 할 수 있음

나무를 자르기 위해서 톱만 있어도 되겠지만 적절한 작업대 위에 나무를 올려두고 톱질을 한다면 톱질이 더 수월할 것

 

리엑트로 웹 페이지를 만들 수 있지만 VS Code 안에서 리엑트로 웹 페이지를 만들면 더 수월하게 만들 수 있음

 

인터넷에 vs code로 검색(1) 해 첫 번째 검색 결과(2)인 vs code 공식 홈페이지로 들어가자

검색 결과가 다르다면 주소창에 https://code.visualstudio.com/ 를 직접 입력해도 됨

 

vs code 공식 홈페이지에 들어오면 바로 보이는 [ Donwload for Windows ] 클릭(1)

그러면 페이지가 이동하지만 잠시 기다리면 vs code 설치 프로그램이 다운로드 됨

 

vs code 역시 다운로드 받은 설치 프로그램을 실행시켜 설치하므로 설치 과정은 생략함

---

vs code 를 실행시켜 보면 모두 영문임

한글 언어팩을 설치해 vs code를 한글화 하자

 

vs code 내 왼쪽에서 확장 프로그램 메뉴(1) 클릭 -> korean 으로 검색(2) -> 한글 언어팩 설치(3)

 

한글 언어팩을 설치한 후 vs code 를 껐다 키자

한글화가 됬을것

만약 한글화가 안됬다고 해도 문제는 전혀 없음

꼭 한글화를 하고 싶다면 인터넷에 검색을 해서 직접 찾아보자