ASP.NET ์ฝ์ด ๋ฐ TypeScript ์ค์น (Install ASP.NET Core and TypeScript)
๋จผ์ ํ์ํ ๊ฒฝ์ฐ์๋ ASP.NET Core๋ฅผ ์ค์นํฉ๋๋ค.์ด ํต ์คํํธ ๊ฐ์ด๋๋ฅผ ์ํด์๋ Visual Studio 2015 ๋๋ 2017์ด ํ์ํฉ๋๋ค.
๋ค์์ผ๋ก ์ฌ์ฉ ์ค์ธ Visual Studio์ ์ต์ TypeScript๊ฐ ์ค์น๋์ง ์์ ๊ฒฝ์ฐ ์ฌ๊ธฐ์ ์ค์นํ ์ ์์ต๋๋ค.
์ ํ๋ก์ ํธ ๋ง๋ค๊ธฐ (Create a new project)
- File ์ ํํฉ๋๋ค
- New Project ์ ํํฉ๋๋ค (Ctrl + Shift + N)
- ํ๋ก์ ํธ ๊ฒ์์ฐฝ์์ .NET Core๋ฅผ ์ฐพ์ต๋๋ค
- ASP.NET Core Web Application์ ์ ํํ๊ณ Next ๋ฒํผ์ ๋๋ฆ ๋๋ค
- ํ๋ก์ ํธ๋ช ๊ณผ ์๋ฃจ์ ๋ช ์ ์ ํ๊ณ Create ๋ฒํผ์ ๋๋ฆ ๋๋ค
- ์ด์ ์ฐฝ์์ Empty ํ ํ๋ฆฟ ์ ํ ํ Create ๋ฒํผ์ ๋๋ฆ ๋๋ค
์ ํ๋ฆฌ์ผ์ด์ ์ด ์คํ๋๋์ง ํ์ธํฉ๋๋ค
์๋ฒ ์ค์ (Set up the server)
๋ค์๊ณผ ๊ฐ์ด ๋ค์ด๊ฐ Dependencies > Manage NuGet Packages > Browse. Microsoft.AspNetCore.StaticFiles
์ Microsoft.TypeScript.MSBuild
๋ฅผ ๊ฒ์ํ์ฌ ์ค์นํฉ๋๋ค:
Startup.cs
ํ์ผ์ ์ด๊ณ Configure
ํจ์๋ฅผ ๋ค์๊ณผ ๊ฐ์ด ์์ ํฉ๋๋ค:
public void Configure(IApplicationBuilder app, IHostingEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } app.UseDefaultFiles(); app.UseStaticFiles(); }
UseDefaultFiles
์ UseStaticFiles
๋ฐ์ ๋นจ๊ฐ ์ ์ด ๋ณด์ธ๋ค๋ฉด ๋น์ฃผ์ผ ์คํ๋์ค๋ฅผ ์ฌ์คํํฉ๋๋ค
ํ์ ์คํฌ๋ฆฝํธ ์ถ๊ฐ (Add TypeScript)
์ด์ ์๋ก์ด ํด๋๋ฅผ ์ถ๊ฐํ๊ณ scripts
๋ผ๊ณ ์ด๋ฆ์ ์ง์ ํฉ๋๋ค.
ํ์ ์คํฌ๋ฆฝํธ ์ฝ๋ ์ถ๊ฐ (Add TypeScript code)
scripts
๋ฅผ ๋ง์ฐ์ค ์ค๋ฅธ์ชฝ ๋ฒํผ์ผ๋ก ํด๋ฆญํ๊ณ New Item์ ํด๋ฆญํฉ๋๋ค. ๊ทธ๋ฐ ๋ค์ TypeScript File ์ ์ ํํ๊ณ app.ts
์ ์ด๋ฆ์ ์ง์ ํฉ๋๋ค.
์์ ์ฝ๋ ์ถ๊ฐ (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
์ ์ฌ์ฉํฉ๋๋ค.
๊ธฐ๋ณธ 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
์ ์ฌ์ฉํฉ๋๋ค.
package.json
ํ์ผ์ "devDependencies"
์ gulp ์ del์ ์ถ๊ฐํฉ๋๋ค
"devDependencies": {"gulp": "4.0.2","del": "5.1.0"}
Visual Studio๋ ํ์ผ์ ์ ์ฅํ๋ ์ฆ์ gulp ๋ฐ del ์ค์น๋ฅผ ์์ํด์ผ ํฉ๋๋ค. ๊ทธ๋ ์ง ์์ ๊ฒฝ์ฐ package.json์ ๋ง์ฐ์ค ์ค๋ฅธ์ชฝ ๋ฒํผ์ผ๋ก ๋๋ฅด๊ณ Restore Packages๋ฅผ ํด๋ฆญํฉ๋๋ค.
์๋ฃจ์
์ต์คํ๋ก๋ฌ์ npm
ํด๋๊ฐ ์๊ธด ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค.
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๋ฅผ ํด๋ฆญํฉ๋๋ค.
โdefaultโ ๋ฐ โcleanโ์์ ์ด ํ์๋์ง ์์ผ๋ฉด ํ์๊ธฐ๋ฅผ ์๋ก๊ณ ์นจ ํฉ๋๋ค :
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)
- ํ๋ก์ ํธ๋ฅผ ์คํํ์ญ์์ค.
- ์ ๋ ฅ ์์์ ์ ๋ ฅํ ๋ ๋ฉ์์ง๊ฐ ํ์๋ฉ๋๋ค :
๋๋ฒ๊ทธ (Debug)
- Edge์์ F12 ํค๋ฅผ ๋๋ฅด๊ณ Debugger ํญ์ ํด๋ฆญํ์ญ์์ค.
- ์ฒซ ๋ฒ์งธ localhost ํด๋๋ฅผ ์ฐพ์ ๋ค์ scripts/app.ts๋ฅผ ์ฐพ์ต๋๋ค.
- return ๋ผ์ธ์ด ์๋ ๋ผ์ธ์ breakpoint๋ฅผ ์ค์ ํฉ๋๋ค
- Type ์์์ ๋ด์ฉ์ ์ ๋ ฅํ๊ณ breakpoint๊ฐ TypeScript ์ฝ๋์ ๋ค์ด๊ฐ๊ณ ๊ฒ์ฌ๊ฐ ์ฌ๋ฐ๋ฅด๊ฒ ์๋ํ๋์ง ํ์ธํฉ๋๋ค.
TypeScript๋ฅผ ์ฌ์ฉํ ๋น์ ์ ์ฒซ .NET ์ฝ์ด ํ๋ก์ ํธ ์์ฑ์ ์ถํํฉ๋๋ค.