Node.js

클라이언트 사이트, 즉 브라우저에서 동작하는 간단한 웹 애플리케이션은 브라우저만으로도 개발할 수 있다. 하지만 프로젝트의 규모가 커짐에 따라 React, Angular 같은 프레임 워크 또는 라이브러리를 도입하거나 Babel, Webpack, ESLint등 여러 도구를 사용할 필요하다

이때 Node.js와 npm이 필요하다

https://nodejs.org/ko/에 접속하면 LTS버전과 Current버전이 있다.
LTS: 장기적으로 안전된 지원이 보장된다.
Current: 최신 기능을 제공하지만 업데이트가 발생하여 안정적이진 않다.

$ node -v 
$ npm -v

Node.js가 제공하는 REPL(ReadEvalPrintLoop)를 사용하면 간단한 자바스크립트 코드를 작성해서 실행 결과를 확인할 수 있는데 Console 창과 비슷하다고 생각하면 된다.

$ node

해당 명령어를 치면 다음 줄부터 ">"가 나오면서 자바스크립트 언어를 사용할 수 있게 된다.
만약 REPL을 종료하고 싶다면, "Ctrl+C"를 연속으로 2번 누르면 된다.

$ node index.js

자바스크립트 파일이 있는 디렉토리로 이동하여 해당 명령어를 입력하게 되면 자바스크립트 파일을 실행할 수 있으며 파일 확장자인 js는 생략이 가능하다.

VSCode 설치 및 플러그인 추천

VS Code 다운로드

Live Server

라이브 서버는 코딩의 수정 결과를 새로 고침 없이 실시간으로 브라우저에서 확인할 수 있게 해줍니다. 라이브서버는 웹서버가 설정되지 않는 컴퓨터에서 가상웹서버의 역할을 해줍니다.

open in browser

Alt + B 를 누르면 해당 브라우저를 실행 가능합니다

Bracket Pair Colorizer 2

괄호가 여러 개가 겹쳐 코딩할 때 쌍이 되는 괄호의 색상을 구분해서 표시해줍니다. 색상으로 구분해주어 괄호의 쌍을 한 눈에 확인 할 수 있도록 도와주어 코드 가독성을 높여줍니다.

Prettier

코드의 들여쓰기 줄바꿈을 할 때에 지저분해지는 경우 지저분해진 코드를 코드 형식에 맞게 자동으로 정렬해 주는 기능을 제공해줍니다.

Auto Rename Tag

HTML/XML 의 태그를 수정하면 쌍을 이루는 태그를 자동으로 수정해주는 기능을 제공합니다.