์ฃผ ์ฝ˜ํ…์ธ ๋กœ ๊ฑด๋„ˆ๋›ฐ๊ธฐ
Visual Studio
Node.js ๊ฐœ๋ฐœ์ž ๋„๊ตฌ | Visual Studio2020-10-20T10:34:36-07:00

Visual Studio์šฉ Node.js ๋„๊ตฌ

Visual Studio๋ฅผ ๊ฐ•๋ ฅํ•œ Node.js ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์œผ๋กœ ์ „ํ™˜

screenshot of project templates

ํ”„๋กœ์ ํŠธ ํ…œํ”Œ๋ฆฟ

์‹ ์†ํ•œ ๊ตฌ์ถ• ๋ฐ ์‹คํ–‰

๊ธฐ๋ณธ ์ œ๊ณต๋˜๋Š” ํ”„๋กœ์ ํŠธ ํ…œํ”Œ๋ฆฟ์„ ์‚ฌ์šฉํ•ด์„œ Visual Studio์—์„œ Node.js ์•ฑ ๊ฐœ๋ฐœ์„ ์‹œ์ž‘ํ•˜์„ธ์š”. ๋˜๋Š” ์ด๋ฏธ ์นœ์ˆ™ํ•œ ๋ช…๋ น์ค„ ์Šค์บํด๋”ฉ ๋„๊ตฌ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ํด๋ฆญ ๋ช‡ ๋ฒˆ์œผ๋กœ Visual Studio๋กœ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

IntelliSense

์ฝ”๋“œ ์ดํ•ด

์‚ฌ์šฉ์ž์˜ Node.js ์ฝ”๋“œ ๋ฐ ์‚ฌ์šฉ ์ค‘์ธ ํŒจํ‚ค์ง€๋ฅผ ์ •์ ์œผ๋กœ ๋ถ„์„ํ•˜๋Š” ๊ฐ•๋ ฅํ•œ IntelliSense ์—”์ง„์œผ๋กœ ๊ตฌ๋ฌธ์ƒ ์˜ฌ๋ฐ”๋ฅด๊ณ  ์œ ์šฉํ•œ ์ฝ”๋“œ๋ฅผ ์™„์„ฑํ•ด๋ณด์„ธ์š”.

screenshot of IntelliSense
screenshot of npm integration

npm ํ†ตํ•ฉ

์™„๋ฒฝํ•œ npm ํ†ตํ•ฉ ๊ธฐ๋Šฅ ์ง€์›

๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ์˜ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค, ๋ช…๋ น์ค„ ๋˜๋Š” ๋‘ ํ™˜๊ฒฝ ๋ชจ๋‘์—์„œ npm์„ ์™„๋ฒฝํ•˜๊ฒŒ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์–‘ํ•œ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค์—์„œ ํŒจํ‚ค์ง€๋ฅผ ์‹ ์†ํ•˜๊ฒŒ ๊ฒ€์ƒ‰ ๋ฐ ์„ค์น˜ํ•˜๊ณ , npm ํŠธ๋ฆฌ ๋ณด๊ธฐ์—์„œ ํŒจํ‚ค์ง€ ๋ฐ ์ข…์† ๊ด€๊ณ„๋ฅผ ํ™•์ธํ•˜๊ณ , ์ผ๋ถ€ ์ข…์† ๊ด€๊ณ„๊ฐ€ ๋ˆ„๋ฝ๋œ ๊ฒฝ์šฐ ๊ฒฝ๊ณ ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋Œ€ํ™”ํ˜• ์ฐฝ

์‹ ์†ํ•œ ๋ฐ˜๋ณต

Node.js ์ฝ”๋“œ๋ฅผ ์ž…๋ ฅํ•˜๊ณ  Node.js ๋Œ€ํ™”ํ˜• ์ฐฝ(REPL ์ฐฝ)์—์„œ ๊ฒฐ๊ณผ๋ฅผ ์ฆ‰์‹œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Node.js ์Šคํฌ๋ฆฝํŠธ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๊ณผ ๋™์ผํ•œ ๊ธฐ๋ณธ ์ œ๊ณต ๋ชจ๋“ˆ, ๊ตฌ๋ฌธ ๋ฐ ๋ณ€์ˆ˜๋ฅผ ๊ทธ๋Œ€๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฌผ๋ก  ํŽธ์ง‘๊ธฐ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ตฌ๋ฌธ ๊ฐ•์กฐ ํ‘œ์‹œ, IntelliSense ๊ธฐ๋Šฅ๋„ ์ฝ”๋“œ์—์„œ ์™„๋ฒฝํ•˜๊ฒŒ ์ง€์›๋ฉ๋‹ˆ๋‹ค.

screenshot of Interactive Window
screenshot of Visual Studioโ€™s interactive debugger

๊ณ ๊ธ‰ ๋””๋ฒ„๊น…

๋ชจ๋“  OS์—์„œ ๋กœ์ปฌ ๋ฐ ์›๊ฒฉ ์ง€์›

์ค‘๋‹จ์ ์„ ์ด์šฉํ•œ ๋‹จ๊ณ„๋ณ„ ์ฝ”๋“œ ์‹คํ–‰ ๋ฐ Visual Studio์˜ ๋Œ€ํ™”์‹ ๋””๋ฒ„๊ฑฐ์— ์žˆ๋Š” ์ž๋™ ์˜ˆ์™ธ ์•Œ๋ฆผ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์กฐ๊ฑด๋ถ€ ์ค‘๋‹จ์ , ์ถ”์ ์ , ์ ์ค‘ ์ˆ˜, ํŽธ์ง‘ํ•˜๋ฉฐ ๊ณ„์†ํ•˜๊ธฐ, OS ๊ฐ„(Linux/macOS/Windows) ์›๊ฒฉ ๋””๋ฒ„๊น…๊ณผ ๊ฐ™์€ ๊ณ ๊ธ‰ ๊ธฐ๋Šฅ์ด ์ง€์›๋ฉ๋‹ˆ๋‹ค.

ํ”„๋กœํŒŒ์ผ๋ง

์„ฑ๋Šฅ ๋ฌธ์ œ ์ถ”์ 

ํ”„๋กœํŒŒ์ผ๋ง ๋ณด๊ณ ์„œ๋ฅผ ํ†ตํ•ด ์†Œ์Šค ์ฝ”๋“œ ๋ผ์ธ์—์„œ ํ”„๋กœ์„ธ์Šค๊นŒ์ง€์˜ ๋‹ค์–‘ํ•œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ตฌ์กฐ ์ˆ˜์ค€์„ ํ™•์ธํ•˜๊ณ , ํŠน์ • ํ•จ์ˆ˜์˜ ํ˜ธ์ถœ ๋˜๋Š” ํ˜ธ์ถœ ๋Œ€์ƒ ํ•จ์ˆ˜๋ถ€ํ„ฐ ์ „์ฒด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ํ˜ธ์ถœ ํŠธ๋ฆฌ์— ์ด๋ฅด๋Š” ํ”„๋กœ๊ทธ๋žจ ์‹คํ–‰ ๋ฐ์ดํ„ฐ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

screenshot of profiling reports
screenshot of Node.js Tools for Visual Studio

๋‹จ์œ„ ํ…Œ์ŠคํŠธ

์ž์ฒด ํ…Œ์ŠคํŠธ ํ”„๋ ˆ์ž„์›Œํฌ ์‚ฌ์šฉ

Visual Studio์šฉ Node.js ๋„๊ตฌ์—๋Š” ์œ ๋‹› ํ…Œ์ŠคํŠธ ๊ฒ€์ƒ‰ ๋ฐ ์‹คํ–‰์„ ์œ„ํ•œ ์ง€์›์ด ํฌํ•จ๋ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ๋ช…๋ น ํ”„๋กฌํ”„ํŠธ๋กœ ์ „ํ™˜ํ•˜์ง€ ์•Š๊ณ ๋„ ๋‹จ์œ„ ํ…Œ์ŠคํŠธ๋ฅผ ์ž‘์„ฑ, ์‹คํ–‰, ๋””๋ฒ„๊น… ๋ฐ ํ•„ํ„ฐ๋งํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. mocha๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ Visual Studio๋ฅผ ํ™•์žฅํ•˜์—ฌ ์‚ฌ์šฉ์ž๊ฐ€ ์›ํ•˜๋Š” ์œ ๋‹› ํ…Œ์ŠคํŠธ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

TypeScript ํ†ตํ•ฉ

๊ฐ•๋ ฅํ•œ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ ๋นŒ๋“œ

TypeScript๋Š” ํด๋ฆฐ JavaScript ์ถœ๋ ฅ๊ณผ ํ˜ธํ™˜๋˜๋Š” JavaScript์˜ ์ƒ์œ„ ์ง‘ํ•ฉ์ž…๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์—๋Š” ์„ ํƒ์ ์ธ ์œ ํ˜•, ํด๋ž˜์Šค ๋ฐ ๋ชจ๋“ˆ์ด ์ถ”๊ฐ€๋˜์–ด ์žˆ์–ด ์œ ์ง€ ๊ด€๋ฆฌ ์„ฑ๋Šฅ์ด ๋” ๋›ฐ์–ด๋‚œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ณ  ๋ณด๋‹ค ๊ฐ•๋ ฅํ•œ ๋„๊ตฌ๋ฅผ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Visual Studio์šฉ Node.js ๋„๊ตฌ๋Š” Node.js ์•ฑ์—์„œ TypeScript๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก IntelliSense์—์„œ ๋‹จ์œ„ ํ…Œ์ŠคํŠธ์— ์ด๋ฅด๋Š” ์™„๋ฒฝํ•œ ์ข…๋‹จ ๊ฐ„ ์ง€์›์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

screenshot of TypeScript integration
screenshot of Team Explorer

์†Œ์Šค ์ œ์–ด

๋ช…๋ น์ค„ ํ•„์š” ์—†์Œ

ํŒ€ ํƒ์ƒ‰๊ธฐ๋ฅผ ์‚ฌ์šฉํ•ด์„œ Git/TFS ํ”„๋กœ์ ํŠธ, ๋ณด๋ฅ˜ ์ค‘์ธ ๋ณ€๊ฒฝ ์‚ฌํ•ญ ๋ฐ ๋ถ„๊ธฐ๋ฅผ ์‰ฝ๊ฒŒ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜๋Š” Visual Studio์—์„œ ์ œ๊ณต๋˜๋Š” ์—ฌ๋Ÿฌ ์†Œ์Šค ์ œ์–ด ํ™•์žฅ ๊ธฐ๋Šฅ ์ค‘ ํ•˜๋‚˜๋ฅผ ์„ ํƒํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

ํด๋ผ์šฐ๋“œ ํ†ตํ•ฉ

5๋ถ„ ์ด๋‚ด์— ๋งŒ๋“ค์–ด์„œ ๋ฐฐํฌ

Node.js๋กœ ์ž‘์„ฑํ•œ ์›น ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์„ ๋งŒ๋“ค๊ณ  ํ…Œ์ŠคํŠธํ•˜๊ณ  ๋ฐฐํฌํ•œ ๋‹ค์Œ, Linux ๋˜๋Š” Windows ๊ธฐ๋ฐ˜ ์„œ๋ฒ„์—์„œ ์‹คํ–‰ํ•˜๋Š” ๋™์•ˆ ๋””๋ฒ„๊ทธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ Azure์— ๋ฐฐํฌํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ์—๋„ ํ”Œ๋žซํผ ๊ฐ„ Node.js์šฉ Azure ์„œ๋น„์Šค์™€ ๋ฐ€์ ‘ํ•˜๊ฒŒ ํ†ตํ•ฉ๋œ Visual Studio๋ฅผ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, Application Insights๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์‹ค์‹œ๊ฐ„ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์„ฑ๋Šฅ ๋ฐ ์‚ฌ์šฉ์„ ๋ชจ๋‹ˆํ„ฐ๋งํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

screenshot of integration with cross-platform Azure services for Node.js
screenshot of JavaScript and Node.js extensions

๋„๊ตฌ ์‚ฌ์šฉ์ž ์ง€์ •

grunt, gulp ๋“ฑ์— ๋Œ€ํ•œ ํ™•์žฅ!

Visual Studio Gallery์—์„œ ์ œ๊ณต๋˜๋Š” ๋‹ค์–‘ํ•œ JavaScript ๋ฐ Node.js ํ™•์žฅ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•ด ์ž‘์—… ํ™˜๊ฒฝ์„ ๋ณด์กฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ํ™•์žฅ ๊ธฐ๋Šฅ:

๋ฌด๋ฃŒ ๋ฐ ์˜คํ”ˆ ์†Œ์Šค

GitHub ์ปค๋ฎค๋‹ˆํ‹ฐ ์ฐธ์—ฌ

Visual Studio์šฉ Node.js ๋„๊ตฌ๋Š” ๋ฌด๋ฃŒ์ด๋ฉฐ Microsoft ๋ฐ ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ ์ง€์›๋˜๋Š” ์˜คํ”ˆ ์†Œ์Šค Visual Studio ํ™•์žฅ์ž…๋‹ˆ๋‹ค. Microsoft๋Š” Visual Studio์—์„œ Node.js ํ™˜๊ฒฝ์„ ๊ฐœ์„ ํ•˜๊ธฐ ์œ„ํ•ด ๊ณ„์† ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์œผ๋ฉฐ, ์‚ฌ์šฉ์ž์˜ ์˜๊ฒฌ์ด๋‚˜ ์•„์ด๋””์–ด๋ฅผ ๊ธฐ๋‹ค๋ฆฌ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค(๋Œ์–ด์˜ค๊ธฐ ์š”์ฒญ ์ฐธ์กฐ).

screenshot of Node.js Tools for Visual Studio

ํ•™์ƒ, ์˜คํ”ˆ ์†Œ์Šค ๋ฐ ๊ฐœ์ธ ๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ ๋ชจ๋“  ๊ธฐ๋Šฅ์„ ๊ฐ–์ถ˜ ๋ฌด๋ฃŒ IDE

๋ฌด๋ฃŒ ๋‹ค์šด๋กœ๋“œ

์†Œ๊ทœ๋ชจ ํŒ€์„ ์œ„ํ•œ ์ „๋ฌธ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ, ์„œ๋น„์Šค ๋ฐ ๊ตฌ๋… ํ˜œํƒ

๋ฌด๋ฃŒ ํ‰๊ฐ€ํŒ

๋ชจ๋“  ๊ทœ๋ชจ ํŒ€์˜ ๊นŒ๋‹ค๋กœ์šด ํ’ˆ์งˆ ๋ฐ ํ™•์žฅ ์š”๊ตฌ ์‚ฌํ•ญ์„ ์ถฉ์กฑํ•˜๋Š” ์—”๋“œํˆฌ์—”๋“œ ์†”๋ฃจ์…˜

๋ฌด๋ฃŒ ํ‰๊ฐ€ํŒ