[Rookies 개발 2기] 프론트엔드를 위한 세팅(Node.js 및 Vscode설치)

1. NodeJS

NodeJS란? 

Node.js는 서버 측 애플리케이션을 개발하기 위한 JavaScript 런타임 환경입니다.

주로 비동기 I/O 기반의 네트워크 애플리케이션을 개발하는 데 사용됩니다.

설치 방법
https://nodejs.org/en

Node.js — Run JavaScript Everywhere

 

 

 

1. Node.js 사이트에 접속합니다.

 

 

 

그다음 Download Node.js를 설치 후 실행합니다.

설치에는 별다른 버튼을 누르지 않고 쭉 설치해 줍니다.

 

전부 설치 후에 윈도우+R을 입력하고 cmd를 실행시켜 줍니다.

 

저는 맥 환경이기 때문에 터미널에서 보여드리겠습니다.

(윈도우도 같습니다.)

 

 

`node` 를 입력하시고 버전이 뜨면 설치가 완료된 것입니다.

 

 

VsCode 설치

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

해당 페이지에 들어가 다운로드하여주시면 됩니다

 

왜 Visual Studio Code를 사용하나요?

장점

 

강력한 Extension, git 등 확장 프로그램이 강력하고 무엇보다 프로그램 구동 시 가벼우며 대부분의 언어를 지원합니다.

 

단점

하지만 결국 IDE가 아닌 텍스트 에디터 이기 때문에 한계가 있습니다.

여기서 IDE란 통합 개발 환경(Integrated Development Environment)이란 의미이며, 텍스트에디터뿐 아니라 컴파일러, 디버거, 코드완성 등 많은 기능을 지원합니다.

하지만 대부분 가벼운 프로젝트에서는 vscode 또한 디버깅과 컴파일러도 지원하므로 배우는 단계에선 설치하셔도 관계가 없습니다.

 

그 외

하지만 저는 JetBrain에서 제작하는 WebStorm을 통해 공부할 예정입니다.

 

vscode extemtion 설치

개발에 도움 되는 extension이며 이중 첫 번째는 code runner입니다.

이는 다양한 언어를 지원하는데 그중 js 코드 작동 시 내부에서 바로 실행가능하게끔 해줍니다.

 

두 번째는 Live Preview입니다.

대부분의 강의나 강사님 또한 live server를 추천하는데 Live Preview를 쓰는 이유는 Microsoft에서 지원하는 점, 실시간으로 업데이트되며 사용환경에 제일 편하기 때문이었습니다.

 

세 번째는 prettier-code formatter

띄어쓰기나 줄 라인 기본 등 제목 그대로 코드를 이쁘게 만들어줍니다. 무엇보다 팀 내에서 동일한 스타일의 코드를 통해 유지보수 할 수 있고 저장만 하면 자동으로 되어 필수 Extension 중 하나입니다.

 

해당 Extension은 WebStorm에도 동일하게 있기때문에 따로 설명은 하지 않겠습니다..