[바닐라 자바스크립트] 2장 - 개발 환경 구성

2.1 Visual Studio Code 설치

  - VS Code: MS에서 제공하는 개발 IDE (통합 개발 환경)

  - 맥에서 비주얼 스튜디오 코드 설치

    - 다운로드 후 별도의 설치 과정이 필요 없고, 실행 파일 더블 클릭해서 바로 실행 가능

  - 윈도우에서 비주얼 스튜디오 코드 설치

    - 환경변수 추가

2.2 Node.js 설치

  - Node.js: 확장성 있는 네트워크 애플리케이션, 즉 서버 프로그램 개발을 JS로 가능하도록 하는 JS 런타임 환경

  - JS로 클라이언트 프로그램 개발 위해서는 수많은 라이브러리(패키지)가 필요 => Node.js 설치 요구

  - 맥에서 Node.js 설치

    - LTS: 가장 안정화된 버전 설치

  - 윈도우에서 Node.js 설치

    - 노드 런타임, 노드 패키지 매니저, 온라인 문서 바로가기, 노드 명령어 사용 위한 시스템 환경 변수 (기본 모두 선택)

    - Native 모듈 필요한 툴 설치

    - NPM은 Node.js 설치하면 자동으로 설치됨

    - 윈도우 파워쉘 사용자 계정 컨트롤 창 예 클릭 => VS Code 터미널에서 노드 관련 명령어 실행 위함

  - 터미널 모드 변경

    - VS Code 터미널 모드: powershell -> cmd 모드로 변경

    - Ctrl + Shift + P -> Terminal: Select Default Profile -> Command Prompt

2.3 자바스크립트 개발을 위한 유용한 vs code Extension 설치

  - JS 개발을 좀 더 편리하게 할 수 있도록 해주는 VS Code 확장 프로그램

    - 제공자를 정확히 확인하고 올바른 확장 프로그램 설치 필요

    - Ctrl + Shift + X

  - JavaScript (ES6) code snippets

    - ES6 포함한 JS 코드 자동완성 지원 (코드 블록 자동 완성)

    - Snippet: 재사용 가능한 코드의 작은 조각

      - 미리 등록된 코드 블록을 바탕으로 코드를 좀 더 빠르고 정확하게 작성하도록 도와주는 확장 프로그램

  - HTML Snippets

    - HTML 코드 자동완성 지원

  - ESLint

    - ES(ECMAScript) + Lint

    - Lint: 소스코드 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체 표시 달아 놓기 위한 도구

      - JS 문법의 오류 찾아주는 확장 프로그램

  - Prettier - Code formatter

    - 코드를 미리 지정한 코드 포맷 스타일로 자동으로 변경해주는 확장 프로그램

    - Settings 메뉴 - 코드에 대한 포맷터를 Prettier로 설정

      - Editor: Default Formatter -> Prettier - Code formatter

      - Editor: Format On Save -> 체크

      - Formatter 적용할 프로그래밍 언어 체크

  - Live Server

    - JS 코드를 HTML 파일 안에 작성

    - JS는 HTML 파일을 웹 브라우저에서 열면 실행됨

    - 로컬에서 HTML 파일을 바로 웹 서버에서 실행할 수 있도록 해주는 확장 프로그램

---

[Reference]

 

Vanilla JavaScript (비제이 퍼블릭 출판사)