ASP.NET Core에서 TypeScript 사용하기
ASP.NET Core에서 TypeScript 사용하기
ASP.NET Core 웹 애플리케이션에 TypeScript 프론트엔드를 붙이는 전체 과정을 차근차근 따라가 볼게요. 프로젝트 생성부터 컴파일러 설정, NPM, gulp를 거쳐 실제로 디버깅까지 하는 법을 하나씩 짚어 드릴게요.
ASP.NET Core와 TypeScript 설치
먼저 필요하다면 ASP.NET Core를 설치하세요. 이 빠른 시작 가이드는 Visual Studio 2015 또는 2017이 필요해요.
다음으로, Visual Studio 버전에 최신 TypeScript가 없다면 설치할 수 있어요.
새 프로젝트 만들기
- File을 선택하세요.
- New Project (Ctrl + Shift + N)를 선택하세요.
- 프로젝트 검색창에서 .NET Core를 검색하세요.
- ASP.NET Core Web Application을 선택하고 Next 버튼을 누르세요.
- 프로젝트와 솔루션 이름을 지으세요. 그다음 Create 버튼을 선택하세요.
- 마지막 창에서 Empty 템플릿을 선택하고 Create 버튼을 누르세요.
애플리케이션을 실행해 잘 동작하는지 확인하세요.
서버 설정하기
Dependencies > Manage NuGet Packages > Browse를 열고, Microsoft.AspNetCore.StaticFiles와 Microsoft.TypeScript.MSBuild를 검색해 설치하세요.
Startup.cs 파일을 열고 Configure 함수를 이렇게 되도록 수정하세요.
public void Configure(IApplicationBuilder app, IHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseDefaultFiles();
app.UseStaticFiles();
}
UseDefaultFiles와 UseStaticFiles 아래의 빨간 물결 표시가 사라지려면 VS를 다시 시작해야 할 수도 있어요.
TypeScript 추가
다음으로 scripts라는 새 폴더를 추가할게요.
TypeScript 코드 추가
scripts를 오른쪽 클릭하고 New Item을 클릭하세요. 그리고 TypeScript File을 선택해 파일 이름을 app.ts로 지으세요.
예시 코드 추가
app.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}!`;
}
빌드 설정하기
TypeScript 컴파일러 구성하기
먼저 TypeScript에 어떻게 빌드할지 알려줘야 해요. scripts를 오른쪽 클릭하고 New Item을 클릭한 뒤 TypeScript Configuration File을 선택하고 기본 이름 tsconfig.json을 사용하세요.
tsconfig.json 파일의 내용을 다음으로 교체하세요.
{
"compilerOptions": {
"noEmitOnError": true,
"noImplicitAny": true,
"sourceMap": true,
"target": "es6"
},
"files": ["./app.ts"],
"compileOnSave": true
}
noEmitOnError: 에러가 보고되면 출력물을 생성하지 않습니다.noImplicitAny:any타입이 암시된 표현식과 선언에 대해 에러를 냅니다.sourceMap: 해당하는.map파일을 생성합니다.target: ECMAScript 대상 버전을 지정합니다.
참고: "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라는 이름을 사용하세요.
/// <binding AfterBuild='default' Clean='clean' />
/*
This file is the main entry point for defining Gulp tasks and using Gulp plugins.
Click here to learn more. 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 (done) {
gulp.src(paths.scripts).pipe(gulp.dest("wwwroot/scripts"));
done();
});
첫 줄은 Visual Studio에게 빌드가 끝난 뒤 'default' 작업을 실행하라고 알려줍니다. 빌드를 clean하라고 요청하면 'clean' 작업도 실행할 거예요.
이제 gulpfile.js를 오른쪽 클릭하고 Task Runner Explorer를 클릭하세요.
'default'와 'clean' 작업이 보이지 않으면 탐색기를 새로고침하세요.
HTML 페이지 작성
wwwroot 폴더를 오른쪽 클릭하고(폴더가 안 보이면 프로젝트를 빌드해 보세요) 그 안에 index.html이라는 이름의 New Item을 추가하세요. 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>
테스트
- 프로젝트를 실행하세요.
- 입력 상자에 타이핑할 때마다 메시지가 나타나거나 바뀌는 것을 볼 수 있어요!
디버깅
- Edge에서 F12를 누르고 Debugger 탭을 클릭하세요.
- 첫 번째 localhost 폴더 안에 있는 scripts/app.ts를 찾으세요.
- return이 있는 줄에 중단점(breakpoint)을 놓으세요.
- 입력 상자에 타이핑해 보면 중단점이 TypeScript 코드에서 걸리고 검사(inspection)가 올바르게 동작하는 걸 확인할 수 있어요.
축하합니다! TypeScript 프론트엔드를 가진 나만의 .NET Core 프로젝트를 만들었어요.
더 알아보기 (Learn more)
tsconfig.json에서 이 가이드에서 쓴 옵션들(noEmitOnError,noImplicitAny,sourceMap,target)을 더 자세히 살펴보세요.- TypeScript를 다른 프레임워크에서 쓰는 법이 궁금하다면 Getting Started의 다른 튜토리얼도 둘러보세요.