Node.js & VsCode 설치하기

설치 과정부터 환경설정 그리고 사용법까지

구글에 node.js 검색하여 https://nodejs.org/en 링크에 접속하여 LTS 버전을 다운로드 한다.

LTS : 기업을 위해 지원하는 안정적인 버전
Current : 6개월 단위로 계속 업데이트 되는 최신 버전 (불안정)

다운로드받은 설치파일을 통해 설치한다. 설치 경로는 C:\Program Files\nodejs\ 와 같이 C드라이브를 추천한다. Tools for Native Modules 단계에서 체크박스를 체크한다.
설치 후 노드js가 잘 설치되었다는 터미널이 나오면 성공. 터미널은 끄면 된다.

성공적으로 설치되었는지 터미널을 통해 확인한다. 버전이 나오면 성공적으로 설치 완료.

- CMD

node -v
    v20.10.0 # 현재 설치된 노드js의 버전
npm -v
    10.2.3 # npm : 노드 패키지 매니저의 약자

이제 컴퓨터에 노드js를 이용할 수 있는 환경 설정이 완료됬다.

컴퓨터에 자바스크립트 코드를 작성하기 위해 에디터를 vscode 에디터를 설치한다. 구글에 vscode 검색하여 https://code.visualstudio.com/ 링크에 접속하여 Download for Windows (Stable Build) 클릭하여 설치 파일을 다운로드 한다.
다운로드받은 설치파일을 통해 설치 후 실행한다.

vscode는 소스 코드를 컴퓨터에서 더 쉽게 편집하고 저장하고 실행까지 시켜볼 수 있게 해주는 개발 도구이다. 근본적으로는 파일이나 폴더를 관리하고 파일의 소스코드를 수정하는데 초점이 맞춰져 있다.
File - New File - Text File 클릭하여 파일을 새로 생성한다. 'Select a language'를 클릭하여 Javascript를 검색 후 클릭하면 오른쪽 아래 'JavaScript' 문구가 보이고 커서를 위에 대면 'Select Language Mode'가 표시된다. 즉 언어가 잘 선택됨을 보여준다.

- index.js

console.log("Hello VSCode");

File - Save - 경로설정/example/index.js 로 저장하면 파일이 성공적으로 저장된다.

vscode를 사용하는 이유는 프로젝트를 개발하기 위해서다. 프로젝트는 웹 쇼핑몰, 웹 사이트 등 다양하게 이루어질 수 있다. 프로젝트 개발시 하나의 파일에 모든 기능을 담아두는게 아닌 기능별로 파일을 나눠서 개발한다.
앞으로 진행할 프로젝트를 위해 여러개의 파일을 관리하기 위해 프로젝트를 위한 파일들을 모아놓은 폴더, 프로젝트 폴더 또는 루트 폴더를 만들고 vscode로 관리하는 방법을 배워본다.

Explorer 아이콘 - Open Folder - 생성한 example 폴더 선택 - 폴더와 파일들에 대한 작성자를 신뢰하는지 물음에 'Yes, I trust the authors' 클릭. 만약 'No, I don't trust the authors'를 클릭하면 이 파일과 폴더를 편집하는 기능 일부가 제한된다.
왼쪽 EXPLORER 탭에 방금 설정한 폴더와 파일이 노출된다.
추가적인 폴더를 열고 싶으면 File - Open Folder - 폴더 선택을 통해 열 수 있다.
example 폴더에 사칙연산을 담당할 calc.js 파일 생성.

코드 저장시 자동으로 코드를 정리해주는 확장 프로그램 설치.
Extensions 아이콘 - prettier 검색 후 설치 - Ctrl + Shift + P : open setting - Preferences: Open Settings (UI) - Search setting : format on save - Editor: Format On Save(저장 버튼 눌렀을 때 파일 포맷팅 해라) 체크
이후 index.js에서 아무 코드를 입력 후 저장하면 소스 코드가 이쁘게 포맷팅이 되는 것을 볼 수 있다.

확장자에 따라 파일 아이콘 미적으로 보여주는 확장 프로그램 설치(옵션).
Extensions 아이콘 - material icon 검색 후 Material Icon Theme 설치 - Ctrl + Shift + P : theme - Material Icons: Activate Icon Theme 클릭

vscode는 개발시에 매우 편리하게 이용할 수 있는 Extensions를 많이 보유하고 있다. 너무 많이 설치하면 에디터가 느려지는 단점이 있다.


참고강의 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8#

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 강의 - 인프런