[Javascript] Node.js 설치와 VScode 설치하기

java와 javascript는 크게 관련이 없다.

 

웹페이지뿐만 아니라 다른 곳에서도 많이 쓰이는 언어이다.

 

코드는 vs에서 연습을 할 것이다.

 

cmd로 들어가서 node -v를 입력해준다.

아무것도 뜨지 않으면 node.js가 깔려있지 않은 것이다.

node.js는 자바를 할 때 무조건 깔아 주는 것이 좋다.

 

그럼 node.js를 먼저 설치를 해보자!

https://nodejs.org/en/

Node.js

위의 페이지에 들어가서 node.js를 깔아줄 것이다.

12.16.2 LTS를 다운로드한다.

처음에 나오는 동의하라는 체크박스를 눌러주고 계속 next를 눌러준 다음에 설치를 해준다.

설치 경로는 특별한 논리가 없으면 원래 경로로 설치해주는 것이 제일 좋다.

 

다시 cmd에서 node -v를 확인해주면 node.js의 버전을 확인할 수 있다.

---

이제 javascript를 연습할 vs코드를 설치하도록 하겠다.

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

구글에 vs코드라고 입력하면 나오는 첫 번째 페이지이다.

Download for windows 버튼을 누르면 페이지가 이동되고 저절로 다운로드 받아진다.

설치된 파일을 실행시켜준다.

동의를 누르고 쭉 넘어간다.

여기서는 바탕화면 바로가기 만들기와 PATH만 체크하고 넘어갔다.

vs코드의 설치도 완료했다!

 

왼쪽을 보면 네모 블록이 있는데 extention이 있는데 그게 마켓이다.

여기서 필요한 옵션을 다운받아서 쓰게되는데 기본적으로 3개정도는 다운받아서 쓰게 된다.

설치할 때 엄청 빨리 설치되는데 install 버튼이 없고 톱니바퀴 모양이 있으면 이미 설치된 프로그램이다.

 

1. 처음으로 extensions에 들어가서 esl을 검색해준다.

그리고 ESLint를 설치해준다.

2. rela를 검색해서

Relative Path를 설치해준다.

3. guid를 검색해서

Guides를 설치한다.

 

VScode에는 New Folder라는 것이 없기 때문에 Open Folder를 눌러서 폴더를 생성해주겠다.

나는 c드라이브에 vscode라는 폴더를 만들어주고 js01 폴더를 만든 후 폴더 선택을 하고 완료한다.

js01 폴더가 선택되었고 네모로 표시해둔 New File 버튼을 눌러 sample01.js를 생성해준다.

js 실행이 되는지 확인을 위해 출력을 해보자.

console.log는 출력을 하기 위한 코드이다.

js는 세미콜론(;)을 붙여도 되고 안 붙여도 된다. 근데 대부분은 쓰지 않는다.

 

실행 단축키는 ctrl + f5이다.

실행해줬는데 저런 오류창이 뜬다면 vscode를 한번 껐다가 다시 실행해주면 정상 작동한다.

보통은 node.js가 설치되어있지 않거나 정상 경로가 아니어서 생기는 오류이다.

node.js가 깔려있으므로 프로그램을 껐다 키니 정상 작동하는 것을 볼 수 있다.

log를 친다음에 2번째 log를 선택하면 자동으로 console.log();가 생긴다.

 

줄 맞춤이 필요할 경우에는 블록을 잡아준 다음에 ctrl + k + f  를 누르면 자동 줄 맞춤이 된다.

 

.div>ul>li*2 라고 작성하고 tab을 누르면 vs code에서는

<div class="div">
  <ul>
    <li></li>
    <li></li>
  </ul>
</div>

.div>ul>li*2^button 이라고 작성하고 tab을 누르면

<div class="div">
  <ul>
    <li></li>
    <li></li>
  </ul>
  <button></button>
</div>

이렇게 바로 입력이 가능하다.

 

css peek

ctrl 누르면 css페이지로 이동하는게 활성화된다.

아래처럼 post-body를 누르게되면 바로 해당 css파일의 post-body부분으로 이동한다.

 

 

bracket pair colorizer

{ , ( 가 많아지면 헷갈리는 부분을 컬러로 나타내준다.

{ 와 ( 는 많아질수록 헷갈리는 클릭하면 선으로 이어주고 색깔별로 나타내주어서 더 편리하다.

 

gitLens와 Git History를 설치해주면 git을 gui로 편하게 사용할 수 있다.