ASP.NET Core

ASP.NET ์ฝ”์–ด ๋ฐ TypeScript ์„ค์น˜ (Install ASP.NET Core and TypeScript)

๋จผ์ € ํ•„์š”ํ•œ ๊ฒฝ์šฐ์—๋Š” ASP.NET Core๋ฅผ ์„ค์น˜ํ•ฉ๋‹ˆ๋‹ค.์ด ํ€ต ์Šคํƒ€ํŠธ ๊ฐ€์ด๋“œ๋ฅผ ์œ„ํ•ด์„œ๋Š” Visual Studio 2015 ๋˜๋Š” 2017์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

๋‹ค์Œ์œผ๋กœ ์‚ฌ์šฉ ์ค‘์ธ Visual Studio์— ์ตœ์‹  TypeScript๊ฐ€ ์„ค์น˜๋˜์ง€ ์•Š์€ ๊ฒฝ์šฐ ์—ฌ๊ธฐ์„œ ์„ค์น˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ƒˆ ํ”„๋กœ์ ํŠธ ๋งŒ๋“ค๊ธฐ (Create a new project)

  1. File ์„ ํƒํ•ฉ๋‹ˆ๋‹ค
  2. New Project ์„ ํƒํ•ฉ๋‹ˆ๋‹ค (Ctrl + Shift + N)
  3. ํ”„๋กœ์ ํŠธ ๊ฒ€์ƒ‰์ฐฝ์—์„œ .NET Core๋ฅผ ์ฐพ์Šต๋‹ˆ๋‹ค
  4. ASP.NET Core Web Application์„ ์„ ํƒํ•˜๊ณ  Next ๋ฒ„ํŠผ์„ ๋ˆ„๋ฆ…๋‹ˆ๋‹ค

Visual Studio Project Window Screenshot

  1. ํ”„๋กœ์ ํŠธ๋ช…๊ณผ ์†”๋ฃจ์…˜๋ช…์„ ์ •ํ•˜๊ณ  Create ๋ฒ„ํŠผ์„ ๋ˆ„๋ฆ…๋‹ˆ๋‹ค

Visual Studio New Project Window Screenshot

  1. ์ด์ „ ์ฐฝ์—์„œ Empty ํ…œํ”Œ๋ฆฟ ์„ ํƒ ํ›„ Create ๋ฒ„ํŠผ์„ ๋ˆ„๋ฆ…๋‹ˆ๋‹ค

Visual Studio Web Application Screenshot

์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์‹คํ–‰๋˜๋Š”์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค

A screenshot of Edge showing "Hello World" as success

์„œ๋ฒ„ ์„ค์ • (Set up the server)

๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋“ค์–ด๊ฐ€ Dependencies > Manage NuGet Packages > Browse. Microsoft.AspNetCore.StaticFiles์™€ Microsoft.TypeScript.MSBuild๋ฅผ ๊ฒ€์ƒ‰ํ•˜์—ฌ ์„ค์น˜ํ•ฉ๋‹ˆ๋‹ค:

The Visual Studio search for Nuget

Startup.cs ํŒŒ์ผ์„ ์—ด๊ณ  Configure ํ•จ์ˆ˜๋ฅผ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ˆ˜์ •ํ•ฉ๋‹ˆ๋‹ค:

public void Configure(IApplicationBuilder app, IHostingEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } app.UseDefaultFiles(); app.UseStaticFiles(); }

UseDefaultFiles ์™€ UseStaticFiles ๋ฐ‘์— ๋นจ๊ฐ„ ์„ ์ด ๋ณด์ธ๋‹ค๋ฉด ๋น„์ฃผ์–ผ ์ŠคํŠœ๋””์˜ค๋ฅผ ์žฌ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ถ”๊ฐ€ (Add TypeScript)

์ด์ œ ์ƒˆ๋กœ์šด ํด๋”๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  scripts๋ผ๊ณ  ์ด๋ฆ„์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.

The Path of "Add" then "New Folder" in Visual Studio from a Web Project

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ ์ถ”๊ฐ€ (Add TypeScript code)

scripts๋ฅผ ๋งˆ์šฐ์Šค ์˜ค๋ฅธ์ชฝ ๋ฒ„ํŠผ์œผ๋กœ ํด๋ฆญํ•˜๊ณ  New Item์„ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ๋‹ค์Œ TypeScript File ์„ ์„ ํƒํ•˜๊ณ  app.ts์˜ ์ด๋ฆ„์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.

A highlight of the new folder

์˜ˆ์ œ ์ฝ”๋“œ ์ถ”๊ฐ€ (Add example code)

app.ts์— ๋‹ค์Œ ์ฝ”๋“œ๋ฅผ ์ž…๋ ฅํ•˜์‹ญ์‹œ์˜ค

ts
function sayHello() {
const compiler = (document.getElementById("compiler") as HTMLInputElement)
.value;
const framework = (document.getElementById("framework") as HTMLInputElement)
.value;
return `Hello from ${compiler} and ${framework}!`;
}

๋นŒ๋“œ ์„ค์ • (Set up the build)

TypeScript ์ปดํŒŒ์ผ๋Ÿฌ ์„ค์ •

๋จผ์ € TypeScript์— ๋นŒ๋“œ ๋ฐฉ๋ฒ•์„ ์•Œ๋ ค์ค˜์•ผ ํ•ฉ๋‹ˆ๋‹ค. scripts ํด๋”๋ฅผ ๋งˆ์šฐ์Šค ์˜ค๋ฅธ์ชฝ ๋ฒ„ํŠผ์œผ๋กœ ํด๋ฆญํ•˜๊ณ  New Item์„ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ๋‹ค์Œ TypeScript ConfigurationFile์„ ์„ ํƒํ•˜๊ณ  ๊ธฐ๋ณธ ์ด๋ฆ„์ธ tsconfig.json์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

A screenshot showing the new file diaglogue with TypeScript JSON Config selected

๊ธฐ๋ณธ tsconfig.json๋ฅผ ๋‹ค์Œ์œผ๋กœ ๋Œ€์ฒดํ•ฉ๋‹ˆ๋‹ค:

{
"": true,
"": true,
"": true,
"": "es6"
},
"": ["./app.ts"],
"compileOnSave": true
}
  • noEmitOnError : ์˜ค๋ฅ˜ ๋ฐœ์ƒ ์‹œ ์•„์›ƒํ’‹์„ ๋‚ด๋ณด๋‚ด์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
  • noImplicitAny : ํ‘œํ˜„๊ณผ ์„ ์–ธ์— ์•”๋ฌต์ ์œผ๋กœ any ํƒ€์ž…์„ ์‚ฌ์šฉํ•œ ๊ฒฝ์šฐ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.
  • sourceMap : .map ํŒŒ์ผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.
  • target : ECMAScript ํƒ€๊ฒŸ ๋ฒ„์ „์„ ๋ช…์‹œํ•ฉ๋‹ˆ๋‹ค.

Note: "ESNext" ๋Š” ์ตœ์‹  ๋ฒ„์ „์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

"noImplicitAny" ๋Š” ์ƒˆ๋กœ ์ฝ”๋“œ๋ฅผ ์งค ๋•Œ๋งˆ๋‹ค ์“ฐ๋ฉด ์ข‹์Šต๋‹ˆ๋‹ค. ์‹ค์ˆ˜๋กœ ํƒ€์ž…์„ ์ง€์ •ํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ๋ฅผ ๋ฐฉ์ง€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. "compileOnSave" ๋Š” ์›น ์•ฑ ์‹คํ–‰ ์ค‘์— ์ฝ”๋“œ๋ฅผ ์‰ฝ๊ฒŒ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.

NPM ์„ค์ •

์ด์ œ JavaScript ํŒจํ‚ค์ง€๋ฅผ ๋‹ค์šด๋กœ๋“œํ•  ์ˆ˜ ์žˆ๋„๋ก NPM์„ ์„ค์ •ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ํ”„๋กœ์ ํŠธ๋ฅผ ๋งˆ์šฐ์Šค ์˜ค๋ฅธ์ชฝ ๋ฒ„ํŠผ์œผ๋กœ ๋ˆ„๋ฅด๊ณ  New Item์„ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ๋‹ค์Œ NPM Configuration File์„ ์„ ํƒํ•˜๊ณ  ๊ธฐ๋ณธ ์ด๋ฆ„ package.json์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

Screenshot of VS showing new file dialog with 'npm configuration file' selected

package.json ํŒŒ์ผ์˜ "devDependencies"์— gulp ์™€ del์„ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค

"devDependencies": {
"gulp": "4.0.2",
"del": "5.1.0"
}

Visual Studio๋Š” ํŒŒ์ผ์„ ์ €์žฅํ•˜๋Š” ์ฆ‰์‹œ gulp ๋ฐ del ์„ค์น˜๋ฅผ ์‹œ์ž‘ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ ‡์ง€ ์•Š์€ ๊ฒฝ์šฐ package.json์„ ๋งˆ์šฐ์Šค ์˜ค๋ฅธ์ชฝ ๋ฒ„ํŠผ์œผ๋กœ ๋ˆ„๋ฅด๊ณ  Restore Packages๋ฅผ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค.

์†”๋ฃจ์…˜ ์ต์Šคํ”Œ๋กœ๋Ÿฌ์— npm ํด๋”๊ฐ€ ์ƒ๊ธด ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Screenshot of VS showing npm folder

gulp ์„ค์ •

ํ”„๋กœ์ ํŠธ๋ฅผ ๋งˆ์šฐ์Šค ์˜ค๋ฅธ์ชฝ ํด๋ฆญ์„ ํ•˜๊ณ  New Item ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค. JavaScript File๋ฅผ ์„ ํƒํ•œ ๋‹ค์Œ gulpfile.js๋ผ๋Š” ์ด๋ฆ„์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

js
/// <binding AfterBuild='default' Clean='clean' />
/*
์ด ํŒŒ์ผ์€ Gulp์˜ ์ž‘์—…์„ ์ •์˜ํ•˜๊ณ  ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•œ entry point์ž…๋‹ˆ๋‹ค.
์ž์„ธํ•œ ๋‚ด์šฉ์„ ๋ณด๋ ค๋ฉด ์—ฌ๊ธฐ๋ฅผ ํด๋ฆญํ•˜์‹ญ์‹œ์˜ค. http://go.microsoft.com/fwlink/?LinkId=518007
*/
var gulp = require("gulp");
var del = require("del");
var paths = {
scripts: ["scripts/**/*.js", "scripts/**/*.ts", "scripts/**/*.map"],
};
gulp.task("clean", function () {
return del(["wwwroot/scripts/**/*"]);
});
gulp.task("default", function () {
gulp.src(paths.scripts).pipe(gulp.dest("wwwroot/scripts"));
});

์ฒซ ๋ฒˆ์งธ ์ค„์€ Visual Studio์—๊ฒŒ ๋นŒ๋“œ๊ฐ€ ๋๋‚œ ํ›„์— ์ž‘์—…์„ โ€˜defaultโ€™๋กœ ์‹คํ–‰ํ•˜๋„๋ก ์ง€์‹œํ•ฉ๋‹ˆ๋‹ค. Visual Studio์— ๋นŒ๋“œ๋ฅผ ์ •๋ฆฌํ•˜๋„๋ก ์š”์ฒญํ•˜๋ฉด โ€˜cleanโ€™์ž‘์—…๋„ ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค.

์ด์ œ gulpfile.js๋ฅผ ๋งˆ์šฐ์Šค ์˜ค๋ฅธ์ชฝ ๋ฒ„ํŠผ์œผ๋กœ ํด๋ฆญํ•˜๊ณ  Task Runner Explorer๋ฅผ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค.

Screenshot of right clicking on the "Gulpfile.js" with 'Task Runner Exploere' selected

โ€˜defaultโ€™ ๋ฐ โ€˜cleanโ€™์ž‘์—…์ด ํ‘œ์‹œ๋˜์ง€ ์•Š์œผ๋ฉด ํƒ์ƒ‰๊ธฐ๋ฅผ ์ƒˆ๋กœ๊ณ ์นจ ํ•ฉ๋‹ˆ๋‹ค :

Screenshot of task explorer with "Gulpfile.js" in it

HTML ํŽ˜์ด์ง€ ์ž‘์„ฑ (Write an HTML page)

wwwroot ํด๋”๋ฅผ ๋งˆ์šฐ์Šค ์˜ค๋ฅธ์ชฝ ํด๋ฆญํ•˜๊ณ  (๋งŒ์•ฝ ํด๋”๊ฐ€ ๋ณด์ด์ง€ ์•Š๋Š”๋‹ค๋ฉด ํ”„๋กœ์ ํŠธ๋ฅผ ๋นŒ๋“œํ•ฉ๋‹ˆ๋‹ค) ์ƒˆ๋กœ์šด ํŒŒ์ผ์„ ์ถ”๊ฐ€ํ•˜๊ณ  index.html๋กœ ์ด๋ฆ„์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค. index.html ์— ๋‹ค์Œ ์ฝ”๋“œ๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="scripts/app.js"></script> <title></title> </head> <body> <div id="message"></div> <div> Compiler: <input id="compiler" value="TypeScript" onkeyup="document.getElementById('message').innerText = sayHello()" /><br /> Framework: <input id="framework" value="ASP.NET" onkeyup="document.getElementById('message').innerText = sayHello()" /> </div> </body> </html>

ํ…Œ์ŠคํŠธ (Test)

  1. ํ”„๋กœ์ ํŠธ๋ฅผ ์‹คํ–‰ํ•˜์‹ญ์‹œ์˜ค.
  2. ์ž…๋ ฅ ์ƒ์ž์— ์ž…๋ ฅํ•  ๋•Œ ๋ฉ”์‹œ์ง€๊ฐ€ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค :

A GIF of Edge showing the code you have just wrote

๋””๋ฒ„๊ทธ (Debug)

  1. Edge์—์„œ F12 ํ‚ค๋ฅผ ๋ˆ„๋ฅด๊ณ  Debugger ํƒญ์„ ํด๋ฆญํ•˜์‹ญ์‹œ์˜ค.
  2. ์ฒซ ๋ฒˆ์งธ localhost ํด๋”๋ฅผ ์ฐพ์€ ๋‹ค์Œ scripts/app.ts๋ฅผ ์ฐพ์Šต๋‹ˆ๋‹ค.
  3. return ๋ผ์ธ์ด ์žˆ๋Š” ๋ผ์ธ์— breakpoint๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค
  4. Type ์ƒ์ž์— ๋‚ด์šฉ์„ ์ž…๋ ฅํ•˜๊ณ  breakpoint๊ฐ€ TypeScript ์ฝ”๋“œ์— ๋“ค์–ด๊ฐ€๊ณ  ๊ฒ€์‚ฌ๊ฐ€ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์ž‘๋™ํ•˜๋Š”์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.

An image showing the debugger running the code you have just wrote

TypeScript๋ฅผ ์‚ฌ์šฉํ•œ ๋‹น์‹ ์˜ ์ฒซ .NET ์ฝ”์–ด ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ์„ ์ถ•ํ•˜ํ•ฉ๋‹ˆ๋‹ค.

The TypeScript docs are an open source project. Help us improve these pages by sending a Pull Request โค

Contributors to this page:
BKBowden Kelly  (56)
GCGabrielle Crevecoeur  (11)
  (6)
DRDaniel Rosenwasser  (3)
LZLimin Zhu  (2)
9+

Last updated: 2024๋…„ 3์›” 27์ผ

ย