Node, VSCODE 개발 환경 구성

Node.js 설치

node.js 홈페이지에 들어가면 최신 lts 버전을 설치할 수 있지만 개발자들은 일반적으로 nvm을 사용해서 노드를 설치합니다.

그래도 들어가 보고 싶다면 → (node.js 홈페이지 링크) https://nodejs.org/ko/

• nvm이란?
  • Node Version Manager의 약자입니다.
  • 간단한 명령어로 Node버전을 스위칭, 설치, 삭제할 수 있습니다.
  • 설치 및 사용 방법: https://kjchoi.co.kr/20
  • nvm-setup.exe를 실행해 설치한 후 node.js의 lts버전 설치(lts버전은 node.js 홈페이지에서 확인 가능)
  • 현재 기준 node 18.12.1이 LST 버전이므로
  • nvm install 18.12.1
  • nvm use 18.12.1
  • node -v
  • 을 실행해주면 node 버전이 18.12.1이 되는 것을 볼 수 있음!

nvm 설정이 끝났다면 vscode를 설치해봅니다.

VSCODE 설치

• 구글에 vscode 설치 입력(옆의 링크로 들어가도 됨: https://code.visualstudio.com/)
• Download for Windows 버튼 클릭
• 다운로드 된 파일 실행해줌.
• 동의합니다 클릭 > 다음 클릭> 체크 박스 모두 클릭 > 설치 클릭 > 설치 완료!

VSCODE 익스텐션 설치

익스텐션 탭을 클릭한 후 아래 목록들을 검색해서 설치해줍니다.

• Auto Complete Tag: html 태그를 자동으로 닫아주며 html 태그 이름을 다시 쓸 시 짝 태그와 함께 변경해줍니다.
• Color Highlight: 색상 코드(예: #ffffff)를 에디터 상에서 색을 입혀서 보여줍니다.
• DotEnv: DotEnv 파일의 문법과 코드 하이라이팅을 도오
• Eslint: Eslint 설정을 추가합니다.
• Prettier: Prettier 설정을 추가합니다.
• Git Graph: Git을 편하게 그래프로 볼 수 있게 해줍니다.
• Material Icon Theme: 머터리얼 디자인 아이콘으로 vscode 아이콘을 변경해줍니다.
• Sass: Sass에 대한 포멧, 하이라이트를 지원해줍니다.
• TODO Highlight: 주석에 형광펜 쳐줍니다.
• Typescript Vue Plugin (Volar): Vue의 최신 문법을 지원하는 신텍스 하이라이터입니다.
• Vue Language Features (Volar): Vue의 최신 타입스크립트 문법을 지원하는 신텍스 하이라이터입니다.
• Vitest: Vitest의 신텍스 하이라이터이며 Vitest를 에디터에서 돌릴 수 있게 해줍니다.

에디터 자동 정렬 설정

• 가장 대중적으로 사용하는 eslint + prettier 조합을 사용합니다.
• 더 자세히 알고 싶다면? : https://overcome-the-limits.tistory.com/entry/협업-ESLint-Prettier-Airbnb-Style-Guide로-코드-컨벤션-설정하기
• 컨트롤 + 쉬프트 + P > user settings (Json 아닌걸로) > 검색에서 “default formatter” 검색 > Default Formatter에서 Prettier - Code formatter 선택
• 검색창에 default formatter 지우고 format on save 검색
• Editor: Format On Save 체크
• 이제 컨트롤 + s 를 누를 때 마다 자동정렬됩니다.

에디터 기본 터미널 CMD로 변경

• 컨트롤 + 쉬프트 + P > user settings (Json 아닌걸로) > 검색에서 “Default Profile: Windows” 검색
• 셀렉트에서 Command Prompt 선택

VSCODE 편리한 단축키 정리

• 컨트롤 + 쉬프트 + n : 새로운 프로젝트 열기
• 컨트롤 + R : 최근 프로젝트 열기
• 위 두 개 조합하면 새로운 프로젝트 열기 > 최근 프로젝트 열기로 다른 프로젝트로 쉽게 이동 가능
• 컨트롤 + t : 검색한 객체 위치로 이동(함수, 변수, 클래스 등)
• 컨트롤 + w: 창 닫기
• 컨트롤 + p : 파일 이름 검색
• 컨트롤 + 쉬프트 + p : 에디터 명령어 입력
• 컨트롤 + f : 찾기
• 컨트롤 + h : 바꾸기
• 컨트롤 + 쉬프트 + f : 전체 찾기
• 컨트롤 + 쉬프트 + h : 전체 바꾸기
• 컨트롤 + 스페이스바 : 자동 완성 띄우기
• 컨트롤 + . : 코드 액션 띄우기
• 컨트롤 + , : user settings 들어가기
• 컨트롤 + 알트 + 위 or 아래 방향키 : 위 아래로 커서 여러개 확장하기
• 알트 + 왼쪽 or 오른쪽 방향키 : 커서 이전, 후로 이동하기
• 좌측 사이드바에서 파일 아무거나 클릭하고 컨트롤 + f : 파일 목록에서 찾기(접힌 폴더에선 검색 안되므로 열고 검색하기)
• 컨트롤 + l : 한 줄 선택, 계속 누르면 아래로 확장됨
• 컨트롤 + d : 커서 레인지 안에 있는 단어 추가 선택하기(test를 마우스로 범위 선택하고 단축키 하면 test가 여러 개 선택됨, 커서도 추가됨, 여러개 동시 변경 가능)
• 변수, 클래스 등 객체 위에 커서 놓고 f2 : 이름 일괄 변경(에디터에서 자동으로 인식한 이름 전체 변경해줌, 가끔 라이브러리들은 안될 때도 있으니 변경 후 주의 깊게 볼 것)
• f5 : 런타임 실행 (간단한 코드 실행 등)