프로젝트 캠프: Next.js 과정 2기

교육 준비: Node.js 및 Visual Studio Code 설치

hanlabong 2024. 7. 14. 22:56
728x90

1. Node.js 설치

https://yoolabong.tistory.com/entry/Nodejs-%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C-%EB%B0%8F-%EC%84%A4%EC%B9%98

 

Nodejs 다운로드 및 설치

1. Nodejs 사이트 접속https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 2. Installer 설치아래 좀 더 최신 버전을 다운로드할 수 있는 링크

yoolabong.tistory.com

 

2. Visual Studio Code 설치

1. VS Code 사이트 접속 및 설치파일 다운로드

https://code.visualstudio.com/

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

2. 설치 파일 실행

동의 후 다음
다음
다음
옵션 설정 후 다음
설치

3. 플러그인 설치

태그 네인 자동 수정을 위한 익스텐션

 

CSS에서 HTML 클래스 자동 완성 익스텐션

 

HTML에서 CSS 클래스 자동 완성

 

CSS 밴더 프리픽스 자동 처리

CSS 파일 포커스된 상태에서 command pallete(또는 Ctrl + Shift + P) 선택 후 Autoprefixer: run 선택해서 밴더 프리픽서 자동 적용

 

중괄호 컬러 디자인 적용

중괄호를 편리하게 구분하기 위해 컬러를 적용하는 익스텐션인데 현재는 VSCode에 내장되어있다고 함

그래서 Setting에서 Bracket Paires Enable로 변경

 

들여쓰기 컬러 디자인 적용

Bracket Pair Colorizer와 동일하게 코드 블럭 구분을 편하게 하기 위해 적용하는 익스텐션

 

실시간 웹 브라우저

command pallete(또는 Ctrl + Shift + P) 선택 후 live server: Opend with live server 선택하면 코드 수정 자동 적용되는 브라우저 새로 띄워줌.

728x90