관리 메뉴

잉블~!

Visual Studio Code에서 node.js 개발 환경 구성 본문

Programming

Visual Studio Code에서 node.js 개발 환경 구성

환상경 2016.11.28 23:25

2016년 3월 즈음인가? Microsoft에서 Visual Studio Code라는 Editor를 발표했었습니다.
Visual Stuido Code (이하 vscode)를 발표하면서 Multiplatform (Win, Mac, Linux)를 지원한다기에
저도 설치를 해서 사용을 해봤습니다.


당시에 첫 느낌은 Sublime Text EditorAtom Editor의 혼종 느낌이었습니다.
나중에 알게 된거지만 Atom Editor이 사용하고 있는 Electron 기반이라고 하더군요


당시에는 제가 이미 Sublime Text Editor3 License를 구입한 이후인데다가
vscode에서 Win version을 제외한 다른 플랫폼에서는 한글 입력에 문제가 있어서
설치만 해두고 방치아닌 방치를 했었습니다.

그러다가 최근에 Electron이라는걸 알게 되었고
Electronnode.js + Chromium 조합이라해서

"어? Editornode가 내장?? 그럼 node.js랑 궁합이 좋겠네??"

라는 생각에 vscode에서 node.js 개발 환경을 구성해보았습니다.





Visual Studio Code 설치

- [홈페이지]

- [다운로드]


- 저는 개발은 주로 Mac에서 진행하기때문에 Mac 버전을 받아서 설치 했습니다.



Visual Studio Code 기본 화면

기본적인 환경설정


- 저는 개발할때 기본적으로 가장먼저 설정하는게 font, wordwrap 등이 있습니다.

- vscode에서 위의 항목들을 설정하는 방법으로는 Mac 기준으로


Menu -> Code -> 기본설정 -> 사용자 설정


을 선택하게되면 다음과 같이 분활된 창으로 설정을 할 수 있게 됩니다.


설정창


- 왼쪽창에는 기본적으로 설정되어있는 설정값들이 항목별로 folding이 되어있습니다.

- 저기서 설정하고자 하는 항목들을 펼쳐서 어떤식으로 하면되는지 예시가 되어있으므로 설정하고자 하는 값을 복사해서 오른쪽에 붙여넣으면 됩니다.

- 저는 다음과 같이 설정을 했습니다.

{
    "editor.fontFamily": "D2Coding",
    "editor.fontSize": 16,
    "editor.wrappingColumn": 0,
    "editor.wordWrap": true,
    "editor.rulers": [
        100, 120
    ],
    "editor.cursorStyle": "block",
    "editor.cursorBlinking": "phase",
    "files.autoSave": "afterDelay"
}


node.js 개발환경 구성



- 임의의 디렉토리를 만들고 test.js 라는 파일을 생성합니다.

- node.js를 위한 간단한 테스트 코드를 작성합니다.

'use strict';

var printFunc = function(name) {
    console.log(name);
}

printFunc('vscode & node.js');


- 이 코드를 실행하는 방법으로는 F5키를 눌러줍니다.

- 처음 실행하는 것이기 때문에 다음과 같은 창이 뜨게 됩니다.



- Node.js를 선택합니다. 그럼 다음과 같은 파일이 나타나게 됩니다.


- test.js 파일이 위치한 디렉토리에 .vscode라는 숨김 폴더가 생성이 되고 그안에 launch.json 이라는 파일이 생성이 됩니다.

- 이 파일에서 여러가지 실행에 필요한 설정을 할 수 있게 됩니다.

- 이 설정파일에 자세한 정보는 저 주석에 나와있듯이 https://go.microsoft.com/fwlink/?linkid=830387 에 가보시면 많은 옵션들을 확인할 수 있습니다.


- launch.json 파일 내용중에서 "program" 항목을 다음과 같이 변경을 해줍니다.

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "프로그램 시작",
            "program": "${file}",
            "cwd": "${workspaceRoot}"
        },
        {
            "type": "node",
            "request": "attach",
            "name": "프로세스에 연결",
            "port": 5858
        }
    ]
}


- 기존의 설정값인 "program": "${workspaceRoot}/app.js" 는 실행했을때 entry pointapp.js 파일을 지정한다는 의미인데 저는 단순히 test case를 만들고 바로 실행결과를 원하기 때문에 현재 파일명으로 설정을 했습니다.


- 다시 test.js 파일로 돌아가서 F5를 눌러줍니다.


test.js 실행 결과



- 왼쪽 탭이 debug로 전환되면서 하단에 debug console에 결과값이 출력이 됩니다.

- 다만 debug로 실행이 되다보니 test.js가 다 실행이 되었음에도 종료가 안되고 break 상태가 됩니다.

- 저는 일단 test.js 마지막에 다음 코드를 적어서 해결을 했습니다.

process.exit(0);


nvm으로 설치한 node.js 적용


- 현재 제가 개발에 사용하는 node.js 버전은 production용으로 4.x (LTS argon)입니다. 하지만 최신 node.jsLTS6.x (LST boron)으로 넘어간데다가  javascript의 새로운 표준인 ES6를 공부하고 있는 중이라 개발 장비에 nvm (이전포스팅 참고)을 이용해서 현재 production용과 test용으로 설치해서 사용하고 있습니다.




- jetbrains사에서 만든 webstorm에서는 다음과 같이 nvm에 설치되어있는 node.js를 선택을 할 수 있습니다.



- 다시 launch.json 파일로 갑니다.

- 아래 코드와 같이 "runtimeExecutable" 항목을 입력해줍니다.

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "프로그램 시작",
            "program": "${file}",
            "runtimeExecutable": "/Users/user/.nvm/versions/node/v6.9.1/bin/node",
            "cwd": "${workspaceRoot}"
        },
        {
            "type": "node",
            "request": "attach",
            "name": "프로세스에 연결",
            "port": 5858
        }
    ]
}

- 경로는 자신의 환경에 맞게 수정해주시면 됩니다.

- 제대로 v6.9.1이 적용되었는지 test.js 파일에 다음 코드를 추가 해줍니다.

'use strict';

var printFunc = function(name) {
    console.log(name);
}

printFunc('vscode & node.js');

console.log(process.version);

process.exit(0);

- F5를 눌러서 실행 결과를 확인합니다.



- v6.9.1 이 정상적으로 출력되는걸 확인 할 수 있습니다.


Debugging


- test.js 에서 break point를 찍고자 하는 line number 왼쪽에 클릭을 하게 되면 이미지와 같이 빨간 점이 나타납니다.

- 이 방법은 여타 다른 IDE에서 하는 방식과 동일합니다.

- break point를 설정하고 F5를 누르게되면 다음과 같이 왼쪽 창에 정보가 표시가 됩니다.


- 조사식 패널에 watch 하고자 하는 변수를 입력도 가능합니다.

- 조사식 패널에 마우스를 위치시키게되면 + 아이콘이 나타나게 되고 그걸 클릭하게되면 변수나 식을 입력할 수 있게 됩니다.


마무리


Sublime Text Editor도 그렇지만 이 Visual Studio Code또한 여러가지 Extension을 지원합니다.

node.js같은 경우는 기본적으로 내장이 되어있어서 바로 환경구성이 가능했지만 다른 언어들 또한 Extension을 설치함으로서 비슷하게 개발환경 구성이 가능 하다고 합니다.


지금까지는 회사 projectwebstorm을 이용해서 개발을 하고있고
간단한 test code를 작성하는건 그때그때 상황에따라

1. Sublime Text Editor + Terminal
2. Vim + Terminal


조합으로 작성하고 실행 테스트를 한뒤
webstorm에 적용하는 방식을 써왔었습니다.

그런데 이번에 vscode를 이용해서 code 작성 및 실행 그리고 디버깅까지 할 수 있다는걸 알게되었으니 앞으로는 메인 개발은 webstorm으로 test case 및 code 작성은 vscode로 그리고 Sublime Text Editor는 단순히 Text Editor로만 사용하게 될거 같습니다.



여러가지 Extension을 설치하고 설정해서 사용하는 모습


0 Comments
댓글쓰기 폼