Visual Studio Code(VSCode)에서 Node.js 개발환경 구축

VSCode를 설치를 했다고 하더라도

node.js 코딩을 하기위해서는 몇가지 더 할 일이 있습니다.

공식 홈페이지에 다 나와있는 내용이지만 설명이 뒤죽박죽이라
저도 삽질 많이 했네요

그래서 시행착오 없이 한방에 개발환경 구축을 위해
깔끔하게 정리합니다.

참고로 이 포스팅은 맥 기준입니다.

Node.js 설치

node.js를 사용하기위해서는
node.js, NPM을를 설치 해야합니다.
하지만 NPM은 node.js 설치할 때 같이 설치되므로  node.js만 설치하면 됩니다.

NPM은 node.js를 위한 Package Manager 입니다.  node.js 관련 모듈을 설치할 때 사용합니다.

install node.js for your platform
링크를 통해 다운받고 설치해줍니다.







Express 설치

Express는 가장 많이 쓰는 편한 모듈입니다.

Installation

터미널을 통해 Express 를 설치합니다. 여기서 npm이 사용됩니다. (-g 는 공식홈페이지랑 설명이 다른데 넣어주고 설치하는 게 편합니다. 아무 폴더에서든 express를 사용할 수 있게 합니다.)

$ npm install -g express

이때 애러가 뜨는 경우 관리자 권한으로 다시 실행해주면 됩니다.
그럼 패스워드를 치라고 나오는데 컴퓨터 사용자 계정 패스워드를 쳐줍니다.

$ sudo npm install -g express

Scaffolding

이제 express application generator를 설치해줍니다.
마찬가지로 터미널에서 다음을 쳐줍니다.

$ npm install -g express-generator

애러뜨면 관리자 권한으로 다시

$ sudo npm install -g express-generator

그럼이제 generator를 이용하여 node app을 생성가능합니다.

node app을 생성해줄 적당한 폴더로 이동하여 터미널에 다음을 적어주고 엔터칩니다.

$ express myExpressApp

이제 dependencies 라고 불리는 부속파일을 설치해줍니다. 
명령어를 보시면 아시겠지만 생성 폴더 안에 들어가서 설치해야합니다.

$ cd myExpressApp
$ npm install

제대로 지금까지 모든 것이 제대로 설치, 생성이 되는지 확인 해봅니다.

$ node ./bin/www

node 명령어는 Node.js 코드 파일을 컴파일 해주는 명령어 입니다.
따라서 www 파일을 컴파일 해주는 겁니다.

컴파일 되면 서버하나가 열립니다.
크롬이나 사파리를 열어 다음 주소를 입력해서 그림과 같이 서버가 정상작동하는 것을 확인합니다.

http://localhost:3000

Mono 설치
Mono는 mac, 리눅스를 지원하는 디버깅 프로그램 입니다.
이걸 설치해야 디버깅이 가능합니다.
물론 윈도우에도 설치가능하지만 아직 윈도우용 VSCode가 지원하지 않습니다.

download mono

설치가 끝났습니다.

TSD설치

TSD는 MS가 개발한 프로젝트로 node.js용 TypeScript definition manager for DefinitelyTyped 라는데
뭔소린지 모르겠고

node.js 용 IntelliSense 를 가능하게 하는거 같습니다.

IntelliSense란 다음 이미지처럼 console.log(' fucking world'); 를 입력하는데
 console. 만 치면 뒤에 나올수 있는 프로퍼티가 뜨는 기능입니다.

터미널을 통해 설치합니다.

$ npm install tsd -g

에러 (한번 에러 떴으면 계속 sudo 붙여주면 됩니다. )

$ sudo npm install tsd -g

정말 설치할게 드럽게 많습니다. 
기쁘게도 이제 모두 설치 했습니다. 

VSCode에서 node.js 개발하기

  VSCode를 실행합니다.

open folder 클릭하고

myExpressApp을 열어줍니다.


















app.js 를 열어주고 __dirname (lines 14, 23) 에 녹색 밑줄이 그어져 있는데 마우스클릭하면 전구모양이 뜹니다. 거기서 Add /// reference to /node/node.d.ts선택합니다.

이렇게 자동으로 입력되는데
그럼 IntelliSense 가 가능해집니다.






이제 확인을 해봅니다. console. 입력하면 다음처럼 나옵니다.





디버깅

launch.json 파일을 열어줍니다.

Name 프로퍼티를 Launch 로, program 프로퍼티를  ./bin/www 로 수정합니다.

세이브하고  F5 를 눌러 디버깅합니다. 그리고 화면 상단 왼쪽 녹색 삼각형을 눌러도 되는데 
이때 녹색 버튼 오른쪽이  Launch로 되어있어야 합니다. 

끝났습니다.


이제 열심히 코딩 하시기 바랍니다.

감사합니다.

맥(Mac)용 Visual Studio Code 설치 & 사용법

Visual Studio Code?

MS가 이번 서울에서 진행한 build 2015 컨퍼런스에서 VisualStudio에서 코드에디터 기능만 가져온  Viual Studio Code를 공개했습니다.

기존에 맥에서는  iOS애플리케이션 프로그래밍을 제외하고 웹프로그래밍이나 닷넷 프레임워크 node.js 등을 사용할때는  sublime Text 나 Atom 등을 보통 사용했는데  MS가 visual studio를 window에서만 지원했기 때문입니다. 기존 맥에서 사용하던 코드 에디터는 살짝 아쉬운점이 있었습니다.

하지만 visual studio code는  맥, 리눅스, 윈도우를 모두 지원하는 코드 에디터입니다. 
기존에 viusal studio는 매우 무거운 프로그램이었는데  code는 에디터와 디버깅기능이 전부 이기 때문에 아주 가볍습니다. 

그래서 애플리케이션 개발용도 보다는 웹, 클라우드 서버 용도로 사용하면 아주 좋을 것 같습니다. 
특히 visual studio Online과 github와 연동할 수 있어 더 좋습니다.



설치

1. 링크를 통해 받거나  홈페이지에 직접 접속해 받습니다.
Download Visual Studio Code for Mac OS X

https://code.visualstudio.com

2. 다운로드 받은 압축파일의 압축을 풀어줍니다.

3. visual Studio Code.app 을 Applications 폴더에 옮겨줍니다
   그럼 launchpad에 나타납니다.

이제 설치가 끝났습니다.

사용법

이제 유용한 기능들을 몇가지 익혀보겠습니다.

기본 레이아웃

• editor : 코드가 보이는 부분입니다.  파일 3개까지 분할 가능합니다.
• viewbar : explorer 나 github, search, debug 기능을 사용할 수 있습니다. 
• sidebar  : viewbar 에 따라 여러 바뀌는 곳 입니다.
• statusbar  현제 프로젝트 정보가 보이는 곳입니다. 

sidebar 단축키는 command + b 입니다.

에디터 분할

• explorer에서 파일 오른쪽 클릭 혹은 cmd + 클릭 후 open to the side
• 단축키 cmd + \

save / AutoSave

save 단축키:  ⌘S

하지만 Auto Save  기능을 켜두면 편합니다.

• ⇧⌘P 단축키로 control pallet를 열어줍니다.   auto를 쳐넣으면  list에 enable auto save 나타납니다.  엔터를 누릅니다.
• file 메뉴에서 enable auto save 를 클릭합니다.

Command Palette

잘쓰면 아주 유용한 기능입니다.

마우스없이 키보드만으로 visual studio code의 모든 기능에 접근이 가능합니다.

단축키 들입니다.

• ⌘O will let you navigate to any file or symbol by simply typing in the name
• ⌃Tab will cycle you through the last set of files opened
• ⇧⌘P will bring you directly to the editor commands
• ⇧⌘O will let you navigate to a specific symbol in a file
• ⌃G will let you navigate to a specific line in a file

또는 ? 를 적으면  무슨 기능이
있는지 볼 수 있습니다.

Selection & Multi-cursor

VSCode는 멀티 커서를 지원합니다.

Alt+Click
또는  단축키  ⌥⌘↓     ⌥⌘↑ 
를 통해  커서를 추가 할 수 있습니다.

Go to definition

만약에 프로그래밍 언어가 지원할 경우  F12  를 눌러 정의를 볼수 있습니다. 
그리고 마우스를 갖다대면 프리뷰로 정의를 확인 할 수 있습니다.

 

 그 외 다른 기능들은   Docs 를 통해 확인 하시기 바랍니다. 

Swift(스위프트) 강좌 : 빠르게 시작하기 5

함수(Functions)

상수(Constant)와 가변(Variable) 파라메터

함수의 파라미터들은 기본적으로 상수들입니다. 

그런데 파라미터를 변수로 사용하고 싶을때는  파라미터 이름 앞에 var을 붙여주면 됩니다.

func alignRight(var string: String, count: Int, pad: Character) -> String {
  let amountToPad = count - countElements(string)
  if amountToPad < 1 {
  return string
}
  let padString = String(pad)
   for _ in 1...amountToPad {
      string = padString + string
}
  return string
}
  let originalString = "hello"
  let paddedString = alignRight(originalString, 10, "-")
// paddedString is equal to "-----hello"
// originalString is still equal to "hello"

가변파라미터는 오직 함수 자신 내부에서만 변경될수 있습니다. 

값을 변경하고 함수 호출이 종료된 후에도 계속 값이 유지되길 원한다면 inout 키원드를 사용합니다.

다음 예제는 입력된 두 값을 교환합니다.

func swapTwoInts(inout a: Int, inout b: Int) {
  let temporaryA = a
  a = b
  b = temporaryA
}

클로저(Closures)

클로저는  objective-c 나 C 에서 블록(blocks)이랑 비슷합니다. 

클로저 표현 식은 다음과 같습니다.

{ (parameters) -> return type in
    statements
} 

블록을 쓰면  굳이 함수를 선언하지 않고  비교적 긴 코드를 캡슐화할 수 있습니다. 

예를 들어 다음과같이 정렬 기능을 하는 코드가 있습니다.

let names = ["Chris", "Alex", "Ewa", "Barry", "Daniella"]



  func backwards(s1: String, s2: String) -> Bool {
  return s1 > s2
}
var reversed = sorted(names, backwards)
// reversed is equal to ["Ewa", "Daniella", "Chris", "Barry", "Alex"]

정렬 기능의 함수를 정의할 수 도 있지만 클로저를 사용하면 다음과 같이 

입력 파라미터에 즉시 코드를 작성가능합니다.

reversed = sorted(names, { (s1: String, s2: String) -> Bool in return s1 > s2 } )   

열거형(Enumerations)

열거형의 표현식입니다.

enum SomeEnumeration {
  // enumeration definition goes here
}

 

예를 들면 이런식으로 사용 됩니다.

enum CompassPoint {
  case North
  case South
  case East
  case West
}



enum Planet {
  case Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune
}

열겨형을 스위치 문과 같이 쓰기

var directionToHead = CompassPoint.West

directionToHead 변수에 CompassPoint 타입이 초기화 되었습니다. 그럼  이 변수는 타입추정에 의해 다음부터 CompassPoint 를 생략하고 다른 값을 대입할 수 있습니다.

directionToHead = .South
switch directionToHead {
  case .North:
    println("Lots of planets have a north")
  case .South:
    println("Watch out for penguins")
  case .East:
    println("Where the sun rises")
  case .West:
    println("Where the skies are blue")
}
// prints "Watch out for penguins"

연관 값(Associated Values)

열거형을 이용해 값을 저장하는 것도 가능합니다.

실생활에서 바코드는 2가지 타입이 사용 됩니다. 

UPC-A바코드를 3개의 숫자 튜플로 저장하고 QR코드는 문자열로 저장하겠습니다. 

enum Barcode {
  case UPCA(Int, Int, Int, Int)
  case QRCode(String)
}

그럼 이제 2가지 방식으로 값을 저장할 수 있습니다.

var productBarcode = Barcode.UPCA(8, 85909, 51226, 3)
productBarcode = .QRCode("ABCDEFGHIJKLMNOP")

그리고 요딴식으로 사용합니다.

switch productBarcode {
  case .UPCA(let numberSystem, let manufacturer, let product, let check):
    println("UPC-A: \(numberSystem), \(manufacturer), \(product), \(check).")
  case .QRCode(let productCode):
    println("QR code: \(productCode).")
}
// prints "QR code: ABCDEFGHIJKLMNOP."

원시값(Raw Values)

지금까지 열거형 멤버들에 값을 저장하는 방법을 배웠습니다. 

다른 방법으로 기본값들로 미리 채워 질 수 있습니다.

enum ASCIIControlCharacter: Character {
  case Tab = "\t"
  case LineFeed = "\n"
  case CarriageReturn = "\r"
}

이렇게 열거형 이름 뒤에 변수 타입을 적어 주면 됩니다.

enum Planet: Int {
  case Mercury = 1, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune
}

이경우 Venus = 2 , Earth = 3 .... 이렇게 자동 증가 되어 값이 설정됩니다.