[Vue/Nuxt] Frontend 개발 환경 설정

토이프로젝트 진행에 앞서 환경 설정.

1. Node.js 설치

먼저 Node.js 공식 사이트(https://nodejs.org/en/)에서 node 설치.

설치 후, cmd창에서 node-v를 입력했을 때 버전 정보가 출력된다면 정상 설치된 것.

c:\user\xxx> node -v
v14.18.0

2. Visual Studio Code 설치

다음은 IDE 설치.
개인적으로 선호하는 IDE가 없다면, 무난하게 VS Code 추천.
(https://code.visualstudio.com/)

3. VS Code 플러그인 설치

생산성 향상을 위한 vs code 확장 플러그인 설치.
아래 목록은 개인 취향에 따른 추천이며 필수는 아님.

• Night Owl : 색테마
• Material Icon Theme : 파일 아이콘 테마
• ESLint : 자바스크립트 문법 검사
• TSLint : 타입스크립트 문법 검사
• Prettier : 코드 스타일 정리 (공백, 띄어쓰기 등)
• HTML Snippets : HTML 코드 자동 완성
• Vetur : Vue.js 플러그인
• Vue VSCode snippets : 뷰 코드 자동완성
• Auto Close tag : HTML 태그 자동 닫기 플러그인

4. Chrome 설치
다음으로 크롬 설치

5. Chrome 확장 프로그램 설치
Vue 디버깅을 위한 chrome Vue.js devtools 확장 프로그램 설치

6. git 설치
git bash 사용을 위한 git 설치
(https://git-scm.com/)

---

여기까지 설치가 완료되었다면, 기본적인 프론트엔드 개발환경 설정은 끝!😊
이후부터는 프로젝트에 따라 + 개인 취향에 따라 필요한 환경을 추가해나가면 된다.