24 ASP.NET Core 6.0 웹 응용프로그램 프로젝트 이번 강의에서는 ASP.NET Core 6.0 웹 응용프로그램 기본 템플릿을 사용하여 하나의 프로젝트를 구성하고 관리하고 지속적으로 내용을 추가하면서 구현해 나가는 방식으로 ASP.NET Core 6.0의 주요 개념을 학습해 나갑니다. 로컬에서 새 프로젝트를 ASP.NET Core 6.0 웹 응용프로그램으로 만들고 주요 기능들을 따라하기로 학습해보겠습니다. 24.1 새로운 프로젝트 시스템 ASP.NET Core부터는 기존 ASP.NET 환경과는 다른 새로운 기본 폴더 구조를 제공합니다. ASP.NETCore 프로젝트 루트에 있는 wwwroot 폴더는 정적인 HTML/CSS/JavaScript/이미지 등의 파일이 실행되는 공용(public) 성격을 가지는 폴더입니다. 웹 사이트의 루트 폴더라고 보면 됩니다. 기타 나머지 폴더는 전용(private) 성격을 가지는 MVC, Razor Pages 관련 코드가 들어오는 폴더입니다. 파일 기반 프로젝트 시스템을 제공하여 Visual Studio와 탐색기가 동기화되어 Visual Studio가 아닌 파일 탐색기에서 메모장과 Visual Studio Code 같은 다른 에디터를 통해 소스를 수정해도 바로 반영됩니다. 이는 동적 컴파일 환경을 제공하는 로즐린(Roslyn)이라고 부르는 .NET Compiler Platform에 의해 가능합니다. 파일 탐색기에서 폴더를 생성하면 VS에 자동으로 적용되고, 파일을 생성해도 똑같이 바로 적용됩니다. 동적 컴파일 기능에 의해서 cs 파일을 메모장(또는 Visual Studio Code) 등으로 만들고 실행해도 바로 실행됩니다. 24.1.1 참고: Microsoft.AspNetCore.All (2.0.0) ASP.NET Core 2.0으로 업그레이드되면서 주요 NuGet 패키지들은 모두 하나의 어셈블리에 포함되어 처음 로드시 로드 속도와 깔끔함을 제공합니다. 24.1.2 참고: global.json: 1.X 버전 전용 Visual Studio에서 ASP.NET Core 프로젝트를 생성하면 하나의 솔루션에 프로젝트가 포함됩니다. 솔루션 생성시 Solution Items 폴더에 생성된 global.json 파일은 다음 코드와 같이 src 폴더와 test 폴더로 나누어 프로젝트가 저장됨을 표시합니다. 솔루션에 하나 이상의 ASP.NET Core 프로젝트를 추가하면 모두 src 폴더에 저장됩니다.
// global.json
{
"projects": [ "src", "test" ],
"sdk": {
"version": "1.0.0-preview2-003121"
}
}
만약, ASP.NET Core 프로젝트를 생성한 솔루션에 ASP.NET 4.8 프로젝트를 추가하면 src 폴더가 아닌 솔루션 루트에 저장되어 구분됩니다. 다음 그림에서와 같이 ASP.NET Core 웹 프로젝트인 DotNetNote와 ASP.NET Core 클래스 라이브러리 프로젝트인 DotNetNote.Dul 프로젝트는 src 폴더에서 저장되고, ASP.NET 4.8 웹 프로젝트인 MemoEngine과 SQL Server 데이터베이스 프로젝트인 DotNetNote.Database 프로젝트는 솔루션 루트에 저장되는 식으로 .NET Core 관련 프로젝트를 따로 관리하고 있습니다. 그림 24 1 src 폴더에 저장되는 ASP.NET Core 프로젝트
24.1.3 참고: project.json: 닷넷코어 1.X 버전 전용 웹 프로젝트 루트에 있는 project.json은 프로젝트의 주요 설정 사항을 구성하는 파일로 서버 측 의존성 라이브러리를 관리할 수 있습니다. project.json 파일의 dependencies 섹션에 항목을 추가하면 자동으로 NuGet을 통해서 프로젝트에 관련 패키지(어셈블리)가 추가되는 형태입니다. 물론 NuGet 패키지 관리자를 열고 항목을 추가해도 project.json 파일에 바로 반영됩니다. 24.1.4 wwwroot 폴더 기존 ASP.NET은 프로젝트 루트 폴더 자체가 웹 사이트의 루트 경로를 나타냈는데 ASP.NET Core는 wwwroot 폴더가 웹 사이트의 루트 폴더입니다. 프로젝트 루트 폴더는 MVC, Razor Pages 관련 기능이 들어오고 이에 대한 반영은 wwwroot 폴더를 통해서 서비스가 진행되는 형태입니다. 외부에서는 wwwroot에 올려진 파일들만 서비스가 될 수 있는 구조입니다. 물론 wwwroot 폴더의 정적인 파일(html, css, js, images 등)이 실행되려면 프로젝트 루트에 있는 Program.cs 파일 또는 Startup.cs 파일에서 **app.UseStaticFiles()**와 같은 미들웨어가 코드로 등록되어 실행되어야 합니다. 이러한 내용은 뒤에서 자세히 다루겠습니다. 24.1.4.1 wwwroot 폴더와 도메인의 관계 www.dotnetkorea.com/images/logo.png <==> wwwroot/images/logo.png 24.1.4.2 wwwroot 폴더의 lib 폴더 </> Visual Studio에서 ASP.NET Core 프로젝트를 생성하면 wwwroot 폴더에 css, lib 폴더가 생성되고 기본으로 jQuery와 Bootstrap 관련 JavaScript와 CSS 파일을 제공합니다. 닷넷 초기버전에서는 Bootstrap은 3.0, 4.0, 그리고 최신 버전의 닷넷 프로젝트에는 5.0 버전의 부트스트랩이 제공됩니다. 여기서 제공되는 부트스트랩 파일들은 부트스트랩 공식 사이트에서 직접 받아도 되고 CDN을 통해서 링크를 제공받아 프로젝트에서 업데이트된 버전을 사용할 수 있습니다. 강의에서 사용된 모든 소스는 각각의 강의 다운로드 링크 또는 GitHub의 다음 경로에 있습니다. https://github.com/VisualAcademy/DotNetNote
24.1.5 Startup.cs 프로젝트 루트에 있는 Startup.cs 파일은 ASP.NET Core 응용 프로그램의 시작 지점으로 ConfigureServices() 메서드에 필요한 서비스를 추가하고, Configure() 메서드에서 사용 관련 설정 정보를 구성할 수 있습니다. Visual Studio에서 제공하는 ASP.NET Core 프로젝트의 빈 템플릿을 사용했을 때 기본으로 생성되는 Startup.cs 파일의 내용은 다음 코드 조각과 같습니다. 닷넷 6 이후로는 Startup.cs 파일의 내용이 Program.cs 파일에서 처리가 되어 Startup.cs 파일이 없습니다. <코드>Startup.cs using Microsoft.AspNetCore.Builder; using Microsoft.AspNetCore.Hosting; using Microsoft.AspNetCore.Http; using Microsoft.Extensions.DependencyInjection;
namespace DotNetNote { public class Startup { public void ConfigureServices(IServiceCollection services) { }
public void Configure(IApplicationBuilder app)
{
app.Run(async (context) =>
{
await context.Response.WriteAsync("Hello World!");
});
}
}
}
24.1.5.1 Startup.cs - ConfigurServices() 메서드
프레임워크 레벨 서비스들 등록
* services.AddMvc();
사용자 정의 서비스들 등록
24.1.6 appsettings.json
ASP.NET Core은 XML 기반이 아닌 JSON 기반으로 환경 설정 파일을 관리합니다. 기존의 ASP.NET이 Web.config 파일을 사용했던 것과는 다른 방식입니다. JSON은 XML보다 읽기 쉽고 빠릅니다.
ASP.NET Core 프로젝트 루트에 있는 appsettings.json 파일은 주요 환경 설정 파일과 데이터베이스 연결 문자열 정보가 들어오는 파일로 기본 생성 코드는 다음과 비슷합니다. 이 appsettings.json 파일의 내용은 주로 Startup.cs 파일의 ConfigureServices() 메서드에서 읽어 와 사용합니다.
<코드>
{
"ConnectionStrings": {
"DefaultConnection":
"Server=(localdb)\\mssqllocaldb;Database=DB명;Trusted_Connection=True;"
},
"Logging": {
"IncludeScopes": false,
"LogLevel": {
"Default": "Debug",
"System": "Information",
"Microsoft": "Information"
}
}
}
ASP.NET 4.6은 Web.config 파일에 데이터베이스 연결 문자열을 설정하고 ASP.NET Core은 appsettings.json 파일에 저장합니다.
24.1.6.1 appsettings.json 파일의 내용을 가져오기
// appsettings.json
{
"Logging": {
"LogLevel": {
"Default": "Warning"
}
},
"SymmetricSecurityKey": "DotNetNote1234567890"
}
// Startup.cs ConfigureServices() 메서드
// ConfigureServices가 호출되기 전에는 DI(종속성 주입)가 설정되지 않습니다.
// Configuratin 개체 주입
services.AddSingleton<IConfiguration>(Configuration);
// Startup.cs ConfigureServices() 메서드에서 사용
// 보안키 문자열 길게 설정할 것
IssuerSigningKey = new SymmetricSecurityKey(
Encoding.UTF8.GetBytes(
Configuration["SymmetricSecurityKey"])),
// SignServicesController.cs 코드 일부
public class SignServicesController : Controller
{
private readonly ISignRepository _repository;
private readonly IConfiguration _configuration;
public SignServicesController(ISignRepository repository, IConfiguration configuration)
{
_repository = repository;
_configuration = configuration;
}
[HttpPost("Login")]
public IActionResult Login([FromBody] SignViewModel model)
{
if (!IsLogin(model))
{
return NotFound("이메일 또는 암호가 틀립니다.");
}
//[1] 보안키 생성
var key = _configuration.GetSection("SymmetricSecurityKey").Value;
24.1.7 bundleconfig.json <완 /> Visual Studio의 확장 도구인 Bundler & Minifier를 설치하면 ASP.NET Core 웹 응용 프로그램 생성 시 번들링 기능(Bundler & Minifier)을 사용하여 특정 CSS 파일 또는 JavaScript 파일을 축소하거나 합칠 수 있습니다. Visual Studio에서 CSS 파일 또는 JavaScript에 마우스 오른쪽 버튼을 클릭 후 나타나는 상황 메뉴에서 <Bundler & Minifier>를 선택하면 파일을 축소 또는 합칠 수 있습니다. 이러한 설정은 bundleconfig.json 파일에 JSON 파일로 저장됩니다. 다음 샘플 코드 조각은 기본 제공되는 bundleconfig.json 파일의 내용입니다.
// bundleconfig.json
// Configure bundling and minification for the project.
// More info at https://go.microsoft.com/fwlink/?LinkId=808241
[
{
"outputFileName": "wwwroot/css/site.min.css",
// An array of relative input file paths. Globbing patterns supported
"inputFiles": [
"wwwroot/css/site.css"
]
},
{
"outputFileName": "wwwroot/js/site.min.js",
"inputFiles": [
"wwwroot/js/site.js"
],
// Optionally specify minification options
"minify": {
"enabled": true,
"renameLocals": true
},
// Optinally generate .map file
"sourceMap": false
}
]
24.1.8 모던 웹 개발 도구들 ASP.NET Core 6.0 기본 웹 프로젝트에는 커뮤니티 기반의 최신 웹 도구가 다수 포함되어 있습니다. 이러한 도구들은 모두 Visual Studio 2019에서 기본으로 제공합니다. 만약 크로스 플랫폼 환경에서 ASP.NET Core로 개발할 때는 각각의 웹 개발 도구 관련 명령줄 도구를 따로 사용해서 기능을 구현해야 합니다. 이 강의가 나온 이후로 2019년 이후로는 Bower는 이제 사용되지 않습니다.
24.1.8.1 NPM, Gulp, Bower NPM은 Node Package Manager의 약자로 Node 기반 도구와 컴포넌트를 설치하는 목적으로 사용됩니다. NPM의 역할은 Visual Studio의 NuGet 패키지 관리자와 같습니다. Bower는 CSS, JavaScript, 이미지, 폰트 등의 정적인 파일에 대한 패키지 관리자다. .NET 패키지(어셈블리)는 NuGet으로, 클라이언트 측 패키지는 bower로 내려받습니다. Gulp는 태스크 러너라고 하며 주로 빌드 자동화를 할 때 사용됩니다. 여기서 빌드 자동화란 웹 프로젝트 빌드 또는 배포 시에 특정 JavaScript 코드를 축소하거나 난독화 처리를 할 때 사용하는 기술입니다. NPM, Gulp, Bower는 프로젝트에 나타나 있지는 않지만, 필요할 때 해당 기능을 사용하도록 기본으로 내장되어 있습니다.
24.1.8.2 웹 개발 도구들 정리 커뮤니티 기반으로 오픈된 웹 개발 도구들을 정리해보면 다음과 같습니다. 패키지 관리자
- NPM, Bower, NuGet
- NPM 설치(Node.js 설치 포함) Node.js 설치 패키지 다운로드(https://nodejs.org/en/download/) 태스크 러너(빌드 자동화)
- Gulp / Grunt Gulp 설치(npm install -g gulp) 언어 변환
- TypeScript: https://www.typescriptlang.org/ TypeScript 설치(npm install -g typescript) TypeScript Definition Manager(TS 도움말 파일) 설치(npm install -g tsd) 프로젝트 생성(Scaffolding)
- Yeoman: http://yeoman.io/ Yeoman 설치(npm install -g yo)
24.2 [실습] DotNetNote 프로젝트 생성 및 실행 <완 /><끝 />
24.2.1 소개 <완 /><끝 />
Visual Studio를 사용하여 ASP.NET Core 6.0 웹 프로젝트를 하나 생성해서 ASP.NET Core MVC의 주요 기능을 학습하겠습니다. 특별한 설명을 위한 프로젝트 생성 이외에는 이번 실습에서 DotNetNote 이름으로 프로젝트를 하나 만들고, 앞으로 끝나는 강의까지 이곳에서 모든 내용을 구현해가면서 내용을 학습할 것입니다.
24.2.2 따라하기 <완 /><끝 /> (1) Visual Studio를 열고 C:\ASP.NET\ 폴더에 DotNetNote라는 이름으로 ASP.NET Core 웹 응용 프로그램(.NET Core) 프로젝트를 생성합니다. 프로젝트 생성 위치는 원하는 아무 위치도 상관없습니다. 이름 위치 ASP.NET 템플릿 선택 DotNetNote C:\ASP.NET ASP.NET Core 6.0 템플릿- MVC 웹 응용 프로그램
그림 24 2 DotNetNote 프로젝트 생성
(2) 템플릿 선택에서는 ASP.NET Core 6.0 템플릿의 <웹 응용 프로그램 MVC>(Web Application)을 선택합니다. 이를 사용하면 ASP.NET Core 6.0의 주요 특성이 모두 적용된 상태로 프로젝트가 만들어집니다. 이 안에 들어가는 프로젝트 구성 요소의 내용을 이해함으로써 좀 더 빨리 MVC의 주요 구성 요소 및 사용법을 익힐 수 있습니다. <비어 있음>(Empty)으로 두고 하나 하나 기능을 추가하면서 작업하는 것도 가능하지만, 이번 실습에서는 마이크로소프트 ASP.NET 팀에서 추천하는 웹 응용프로그램의 구조를 익혀봅니다. 그림 24 3 웹 응용 프로그램 프로젝트 생성
<인증 변경> 버튼을 눌러 인증은 <개별 사용자 계정>을 선택합니다. 인증을 포함된 상태로 프로젝트를 생성하겠습니다. 물론, <인증 안 함>을 선택하고 나중에 추가할 수 있습니다. 그림 24 4 인증 변경
(3) 프로젝트를 생성하면 다음과 같이 NuGet, NPM과 같은 패키지 관리자 기능에 의해 프로젝트 관련 주요 패키지와 참조 기능을 업데이트합니다. 패키지 복원 중, 참조(복원하는 중…) 등의 메뉴가 잠시 나타나고 관련된 패키지를 내려받으면 프로젝트를 시작할 수 있습니다.
그림 24 5 생성된 프로젝트
(4) 기본 생성된 웹 프로젝트를 실행해보겠습니다. 해당 프로젝트를 시작 프로젝트로 설정하고, <디버그하지 않고 시작> 메뉴인 [Ctrl] + [F5]를 눌러 프로젝트를 실행하면 기본 제공 템플릿의 웹 사이트가 다음과 같이 실행됩니다. 반응형 레이아웃을 갖는 완성된 웹 사이트이며 기본적인 UI는 CSS 라이브러리인 부트스트랩(Bootstrap)에 의해서 결정됩니다. 이 구조는 웹 폼과 MVC에서 모두 같은 레이아웃으로 보여집니다. 그림 24 6 기본 제공 템플릿에 의해 실행된 웹 사이트
24.2.3 마무리 <완 /><끝 /> Visual Studio에서 기본 제공하는 웹 응용 프로그램 템플릿으로 ASP.NET Core 6.0 웹 프로젝트를 만들고 실행해 본 간단한 실습입니다. 이번 실습에서 만든 DotNetNote 프로젝트에 몇몇 새로운 개념을 소개할 때를 제외하고, 이 강의가 끝날 때까지 모든 소스 코드를 작성할 것입니다.
24.3 HTTP 파이프라인(PipeLine)과 미들웨어 <완 /> 파이프라인은 하나의 통로를 의미합니다. ASP.NET Core에서의 파이프라인은 웹 앱을 실행하는 데 필요한 여러 가지 모듈, 즉 미들웨어를 파이프라인에 등록해서 사용할 수 있도록 하는 것을 말합니다. HTTP 파이프라인은 HTTP 서비스를 통해서 무엇인가 서비스를 제공할 때마다 해당 서비스를 구현하는 미들웨어를 하나씩 추가해줘야 합니다. 미들웨어는 HTTP 파이프라인에 추가되는 순서대로 기능이 적용됩니다. 프로젝트 루트에 있는 Startup.cs 클래스 파일의 Configure 메서드에 미들웨어를 추가하는 작업을 ‘HTTP 파이프라인에 미들웨어 추가’라고도 표현합니다.
24.4 정적 파일 실행을 위한 UseStaticFiles() 미들웨어 추가 <완 /> UseStaticFiles() 확장 메서드는 ASP.NET Core 프로젝트의 wwwroot(더블유 더블유 루트) 폴더에 위치할 정적 파일들(HTML, CSS, JavaScript, Image, 폰트 파일 등)을 실행하기 위한 미들웨어입니다. ASP.NET Core 프로젝트는 서버 측 기능과 클라이언트 측 기능을 분리해서 폴더로 관리합니다. MVC의 기능은 Models, Views, Controllers 등의 폴더에서 관리하며 정적인 파일인 HTML, CSS, JavaScript, 이미지 등은 프로젝트 루트에 있는 wwwroot 폴더에 위치한 후 웹 사이트의 루트 경로(/) 요청 시 wwwroot와 매핑되어 실행됩니다. ASP.NET Core 프로젝트의 wwwroot 폴더가 정적 파일의 루트 폴더가 되는 것은 프로젝트 루트에 있는 Program.cs 파일의 Main 메서드에서 다음과 같이 코드가 추가되어 있기 때문입니다. 최근 ASP.NET Core에서는 기본값으로 설정되어 있어 따로 다음 코드의 모양을 볼 수 없습니다.
// Program.cs
using System.IO;
using Microsoft.AspNetCore.Hosting;
namespace DotNetNote
{
public class Program
{
public static void Main(string[] args)
{
var host = new WebHostBuilder()
.UseKestrel()
.UseContentRoot(Directory.GetCurrentDirectory())
.UseIISIntegration()
.UseStartup<Startup>()
.Build();
host.Run();
}
}
}
wwwroot 폴더에 Index.html 파일로 HTML 파일을 두면 웹 사이트 루트 경로에서 Index.html 파일을 요청할 수 있습니다. 이렇게 wwwroot 폴더에 위치한 정적인 파일을 실행하도록 하려면 최소한의 절차가 필요합니다. Startup.cs 파일의 Configure() 메서드에 다음과 같이 해당 기능을 하는 미들웨어인 UseStaticFiles() 메서드를 호출해줘야 합니다. app.UseStaticFiles() 대신에 추가 기능이 더 들어 있는 app.UseFileServer() 메서드만 호출해줘도 됩니다.
// Startup.cs 파일의 일부
public void Configure(IApplicationBuilder app)
{
app.UseStaticFiles();
app.UseFileServer();
}
24.4.1.1 참고: 구버전의 ASP.NET Core 1.0의 패키지 관리 <참고> ASP.NET Core가 버전이 올라가면서 모든 기본 패키지가 포함된 형태로 프로젝트가 생성됩니다. ASP.NET Core 1.0 버전에서는 UseStaticFiles() 메서드는 기본적으로 비어 있음(Empty) 프로젝트에 관련 패키지가 포함되지 않습니다. 따라서 Visual Studio의 NuGet에서 Microsoft.AspNetCore.StaticFiles 패키지를 추가하거나 또는 app.UseStaticFiles 메서드에 커서를 두고 [Ctrl]+[.]을 실행하여 관련 패키지를 추가합니다. 그러면 Project.json 파일에 다음과 같이 StaticFiles 관련된 한 줄이 추가됩니다. 만약 ASP.NET Core 웹 응용프로그램 템플릿을 사용하여 프로젝트를 구성했다면 이미 모든 항목이 추가된 상태에서 진행할 수 있습니다.
// project.json 파일의 일부
"dependencies": {
…
"Microsoft.AspNetCore.Server.IISIntegration": "1.0.0",
"Microsoft.AspNetCore.Server.Kestrel": "1.0.0",
"Microsoft.AspNetCore.StaticFiles": "1.0.0",
"Microsoft.Extensions.Logging": "1.0.0",
…
}
</참고>
24.4.1.2 참고: UseEnvironment(“Staging”) <참고> UseEnvironment(“Staging”) Program.cs 파일에 UseEnvironment() 메서드를 사용하여 Development, Staging, Production 등의 환경을 설정할 수 있습니다. 물론 이 메서드를 직접 사용하는 일은 별로 없습니다. using System; using Microsoft.AspNetCore.Builder; using Microsoft.AspNetCore.Hosting; using Microsoft.AspNetCore.Http;
namespace ConsoleApplication { public class Program { public static void Main(string[] args) { var host = new WebHostBuilder() .UseKestrel() .UseEnvironment("Staging") .Configure(app=> { app.Run( context => context.Response.WriteAsync("Hello from")); }).Build(); host.Run(); } } } </참고>
24.5 [실습] wwwroot 폴더에 정적 파일 생성 후 실행하기 <완 /> 24.5.1 소개 ASP.NET Core 프로젝트의 wwwroot 폴더에 HTML 파일을 생성 후 바로 웹 브라우저로 실행해봅니다.
24.5.2 따라하기 (1) Visual Studio를 사용하여 C:\ASP.NET\DotNetNote 프로젝트를 실행합니다.
(2) 구버전 참고: 프로젝트 루트에 있는 Program.cs 파일을 열고 UseContentRoot() 메서드가 호출된 것을 확인합니다. 이 코드가 지정됨으로써 프로젝트 루트에 있는 wwwroot 폴더가 정적인 파일을 실행하기 위한 기본 폴더로 설정됩니다. 그림 24 7 Program.cs 살펴 보기
Figure 6 Program.cs 살펴 보기
(3) 구버전 참고: project.json 파일을 열고 StaticFiles 패키지가 추가되어 있는지 확인합니다. 그림 24 8 project.json 파일에 등록된 StaticFiles 패키지
Figure 7 project.json 파일에 등록된 StaticFiles 패키지
(4) Startup.cs 파일을 열고 Configure() 메서드 안에 정적 파일 서비스를 위한 UseStaticFiles() 확장메서드가 호출되고 있는지 확인합니다. 그림 24 9 UseStaticFiles() 메서드 호출
Figure 8 UseStaticFiles() 메서드 호출
(5) 프로젝트 루트의 wwwroot 폴더에 마우스 오른쪽 버튼 클릭 후 <추가 > 새 항목 추가>를 선택 후 HTML 문서를 UseStaticFiles.html 이름으로 생성한 후 아래와 같이 코드를 작성합니다.
// DotNetNote/wwwroot/UseStaticFiles.html
<!DOCTYPE html>
<html>
<head>
<title>HTML 페이지 실행</title>
</head>
<body>
<h1>UseStaticFiles()</h1>
<p>
ASP.NET Core에서 정적 파일들(HTML, CSS, JavaScript 등)을 실행하려면
app.UseStaticFiles() 메서드 호출
</p>
</body>
</html>
(6) DotNetNote 웹 프로젝트를 [Ctrl]+[F5]를 눌러 실행 후 /UseStaticFiles.html 경로를 웹 브라우저로 실행하면 wwwroot 폴더에 위치한 정적인 HTML 파일이 실행됩니다. 그림 24 10 정적인 HTML 페이지가 실행된 모습
24.5.1 마무리 ASP.NET Core가 아닌 ASP.NET 프로젝트는 프로젝트 루트가 웹 사이트의 루트였지만, ASP.NET Core 프로젝트에서는 정적 파일을 실행하기 위한 영역은 따로 wwwroot 폴더에서 처리합니다. ASP.NET Core 웹 응용 프로그램 템플릿을 사용하여 프로젝트를 생성하면 기본적으로 이 폴더가 HTML 실행을 위한 루트 폴더로 설정됩니다. 이번 실습으로 HTML, CSS, JavaScript 및 이미지 등은 모두 wwwroot 폴더에서 실행되는 것을 알 수 있습니다.
24.5.2 <참고> 정적 파일 폴더 추가 만약 기본으로 제공되는 wwwroot 폴더가 아닌 다른 폴더를 다른 이름으로 정적 파일들이 서비스 되는 공간으로 활용하고자 한다면 다음 코드와 같이 옵션을 변경할 수 있습니다. 다음 코드는 웹 프로젝트 루트에 MyStaticFiles 폴더를 생성하고 이곳을 StaticFiles 이름으로 접근하도록 설정하는 방법을 보여줍니다.
// app.UserStaticFiles() 메서드에 옵션 주기
// [!] 정적 파일 폴더 추가
app.UseStaticFiles(
new StaticFileOptions()
{
FileProvider = new PhysicalFileProvider(
Path.Combine(Directory.GetCurrentDirectory(), @"MyStaticFiles")),
RequestPath = new PathString("/StaticFiles")
}
);
이와 같이 설정하면 http://localhost/StaticFiles/ 식으로 호출됩니다. MyStaticFiles 폴더에 MyStaticFile.html 문서를 다음과 같이 생성합니다.
// MyStaticFiles/MyStaticFile.html
<!DOCTYPE html>
<html>
<head>
<title>정적 파일 서비스 공간</title>
</head>
<body>
<h2>또 다른 정적 파일 서비스 공간</h2>
</body>
</html>
웹 브라우저로 /StaticFiles/MyStaticFile.html 페이지를 요청하면 다음과 같이 정적 파일이 서비스되는 공간이 추가되어 HTML 문서가 실행됩니다.
24.6 주요 미들웨어 앞서 살펴본 UseStaticFiles() 확장 메서드처럼 기본으로 제공하고 있는 주요 미들웨어들은 아래와 같습니다. 이에 대한 내용은 이어지는 절에서 따로 설명이 됩니다. 다만, 주요 미들웨어에 대한 내용은 반드시 웹 프로젝트에 넣어야하는 부분은 아닙니다. 그러기에 따라하기로 진행하지 않고 코드와 실행 결과만 참고로 봐도 무관하기에 코드와 실행 결과만을 표기하기로 합니다. 디렉터리 목록 보기: UseDirectoryBrowser() 기본 문서 제공: UseDefaultFiles() 상태 코드 표시: UseStatusCodePages() 환영 페이지 출력: UseWelcomePage() 자세한 에러 메시지 표시: UseDeveloperExceptionPage()
24.6.1 빈 프로젝트에 MVC 사용 설정 코드 조각 <완 /> services.AddContrllersWithViews(); endpoints.MapDefaultControllerRoute();
24.7 디렉터리 목록 보기(app.UseDirectoryBrowser()) Startup.cs 파일의 ConfigureServices() 메서드에 services.AddDirectoryBrowser() 메서드를 호출하고 Configure() 메서드의 app.UserStaticFiles() 메서드 아래에 추가로 app.UseDirectoryBrowser() 메서드를 호출합니다. 그러면 기본 문서가 지정되지 않는 images 등의 폴더를 웹 브라우저로 요청 시 마치 파일 탐색기에서 파일 목록을 보여주는 것처럼 디렉터리 목록이 표시됩니다.
// Startup.cs 파일의 코드 일부
public void ConfigureServices(IServiceCollection services)
{
// [!] 디렉터리 브라우징 기능 제공(옵션)
services.AddDirectoryBrowser();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env, ILoggerFactory loggerFactory)
{
app.UseStaticFiles();
app.UseDirectoryBrowser();
}
다음은 UseDirectoryBrowser() 미들웨어가 추가된 상태에서 루트 웹 사이트를 요청했을 때의 모습입니다. 그림 24 11 디렉터리 목록 표시
24.8 기본 문서 제공(app.UseDefaultFiles()) 정적 파일들은 웹 브라우저 URL을 통해서 정확한 이름을 제공하지 않으면 실행되지 않고, 디렉터리 목록이 보여지거나 404 에러를 출력합니다. 특정 경로를 요청했을 때 정해진 순서대로 기본 파일을 호출할 수 있습니다. UseStaticFiles() 메서드 앞에 UseDefaultFiles() 메서드를 호출하면 다음과 같은 기본 파일들을 순서대로 찾아서 있으면 실행합니다. 참고로 UseDefaultFiles() 메서드는 UseStaticFiles() 메서드 앞에 먼저 호출되어야 합니다. default.htm default.html index.htm index.html
<코드> app.UserDefaultFiles(); app.UseStaticFiles();
24.8.1 <참고> app.UseDefaultFi.les()와 app.UseStaticFiles()
정적 파일을 실행하기 위해서는 app.UseStaticFiles() 확장 메서드를 호출합니다. 이에 추가로 웹 세상에서 많이 사용하는 기본 문서를 지정하려면 app.UseDefaultFiles() 확장 메서드를 앞에다 추가합니다. 이 2가지의 기능을 한꺼번에 호출하려면 app.UseFileServer() 확장 메서드를 사용합니다.
24.8.2 기본 문서 제공 옵션
기본 제공 문서도 원하는 파일명을 호출하도록 다음과 같은 형태로 옵션을 조절할 수 있습니다.
```csharp
// Startup.cs 파일의 Configure() 메서드의 코드 일부
// [!] UseDefaultFiles() 미들웨어: 기본 문서 제공
DefaultFilesOptions options = new DefaultFilesOptions();
options.DefaultFileNames.Clear();
options.DefaultFileNames.Add("NewDefault.html");
app.UseDefaultFiles(options);
// [!] UseFileServer() 미들웨어: 정적 파일 및 디렉터리 브라우징 표시 등
app.UseFileServer();
이와 같이 UseDefaultFiles()에 옵션을 설정하고, wwwroot 폴더에 NewDefault.html 파일을 생성한 후 다음과 같이 코드를 작성합니다.
// /wwwroot/NewDefault.html
<!DOCTYPE html>
<html>
<head>
<title>새로운 기본 문서</title>
</head>
<body>
<h3>UseDefaultFiles()에 의해서 기본 문서 설정 가능</h3>
</body>
</html>
웹 브라우저로 실행 후 루트 페이지를 요청하면 다음과 같이 NewDefault.html 기본 문서로 실행됩니다. 그림 24 12 새롭게 정의된 기본 문서
24.9 UseFileServer 확장 메서드 앞에서 살펴본 UseDefaultFiles(), UseStaticFiles(), UseDirectoryBrowser() 확장 메서드 기능 세 개를 한 번에 해주는 메서드가 UseFileServer() 메서드입니다. 이 또한 세부 옵션으로 세 확장 메서드의 기능을 모두 수행할 수 있습니다.
24.10 상태 코드 표시(app.UseStatusCodePages()) app.UseStatusCodePages(); 메서드를 적용하기 전에는 다음과 같이 없는 페이지를 요청하면 404 오류가 출력됩니다. 그림 24 13 app.UseStatusCodePages(); 메서드 적용 전
UseStatusCodePages() 미들웨어를 적용하고 나면 404 오류 메시지가 출력되는 페이지가 다음과 같이 출력됩니다. 그림 24 14 app.UseStatusCodePages(); 메서드 적용 후
24.11 환영 페이지 출력(app.UseWelcomePage()) Startup.cs 파일의 Configure() 메서드 상단에서 UseWelcomePage() 메서드를 호출하면 다른 페이지가 실행되지 않고 샘플 웹 페이지가 실행됩니다.
// Startup.cs 파일의 Configure() 메서드
//[!] 샘플 페이지 출력 미들웨어
app.UseWelcomePage(); // 하나의 샘플 페이지 출력
UseWelcomePage() 미들웨어가 실행되면 다른 페이지들은 실행되지 않고 다음 화면만 실행됩니다. 그림 24 15 UseWelcomePage() 실행 결과
<참고> UseWelcomePage() 미들웨어는 다른 미들웨어 이전에 실행되면 샘플 페이지가 실행되고 파이프라인을 종료합니다. Startup.cs 파일에 등록될 미들웨어의 순서는 중요합니다. 먼저 등록된게 먼저 실행됩니다.
UseWelcomePage(“/Welcome”) 식으로 따로 경로를 요청해서 실행도 가능합니다. app.UseWelcomePage(new WelcomePageOptions { Path = "Welcome" }); 식으로도 접근이 가능합니다. </참고>
24.12 자세한 에러 메시지 표시 (app.UseDeveloperExceptionPage()) 운영 환경이 아닌 개발 환경에서는 에러 발생 시 좀 더 자세히 표시해주면 디버깅할 때 유리합니다. 이때 사용하는 미들웨어가 UseDeveloperExceptionPage()입니다. 이 미들웨어를 사용하려면 프로젝트에에 Microsoft.AspNetCore.Diagnostics 패키지 등록이 필요합니다. 만약 Startup.cs 파일의 Configure() 메서드에 다음과 같은 코드가 있다고 가정합니다. throw절에 의해서 인위적으로 에러를 발생시키는 코드입니다.
// Startup.cs – Configure()
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.Run(async (context) =>
{
throw new Exception();
await context.Response.WriteAsync("Hello World!");
});
}
웹 브라우저로 프로젝트를 실행하면 다음과 같은 형태로 에러가 발생합니다. 만약 UseDeveloperExceptionPage() 미들웨어가 포함되어 있지 않다면 어떠한 에러 메시지도 출력하지 않습니다. 그림 24 16 자세한 에러 메시지 표시
만약 현재 상태를 개발환경이 아닌 다른 상태로 구성하려면 ASP.NET Core 웹 프로젝트의 속성 창의 디버그 영역에서 환경 변수인 ASPNETCORE_ENVIRONMENT를 제거하거나, 값을 다른 값으로 대체하는 방법이 있습니다. 그림 24 17 환경 변수 변경
Development 환경이 아닌 다른 환경일 때는 자세한 에러 메시지가 아닌 다음과 같이 일반적인 에러 메시지가 출력됩니다. 그림 24 18 간단한 에러 메시지 표시
24.13 기타 미들웨어 참고로 ASP.NET Core 기본 템플릿에서 많이 사용하는 주요 미들웨어는 다음과 같습니다. 이 책(강의)은 ASP.NET Core 웹 응용 프로그램 템플릿 중에서 인증을 사용하지 않는 템플릿으로 진행하기 때문에 모든 미들웨어가 필요하지 않습니다. 참고로 목록만 읽어보기 바랍니다. app.UseBrowserLink(); app.UseDeveloperExceptionPage(); app.UseDatabaseErrorPage(); app.UseExceptionHandler("/Home/Error"); app.UseIISPlatformHandler(); app.UseStaticFiles(); app.UseIdentity(); app.UseMvc();
24.13.1 참고: HTTPS 사용을 위한 미들웨어 app.UseHttpsRedirection(); app.UseHsts(); <참고> HSTS http://www.kinews.net/news/articleView.html?idxno=71865 IT 전문 외신 엔가젯은 구글이 HSTS(HTTP Strict Transport Security)를 도입해 데이터 암호화를 강화할 것이라고 보도했습니다. 대부분의 구글 데이터는 이미 암호화 되어있습니다. 그러나 구글은 HSTS를 도입해 이보다 더 한 단계 앞서 사용자가 잘못된 URL을 입력해 안전하지 않은 웹에 접속하기 보다 더 안전한 웹으로 우회시킵니다. 따라서 사용자가 잘못된 URL을 주소창에 입력해 원치 않은 사이트에 접속될 때 HSTS는 이 때문에 생겨날 수 있는 문제를 사전에 차단하는 것입니다. 구글은 이 시스템을 빠른 시일 내로 도입할 계획이지만 다른 도메인과 구글 서비스에 적용되기 전 까지 추가적인 보완 작업이 필요한 것으로 보인다. </참고> </추가>
24.14 패키지 관리자(Package Manager) ASP.NET Core 5.0에는 NuGet 패키지 관리자, NPM 패키지 관리자 그리고 LibMan 패키지 관리자를 사용할 수 있습니다. 기존 ASP.NET Core 1.0이 처음 나왔을 때 새롭게 추가된 기능 중에는 Bower 패키지 관리자가 있었지만 지금은 사용되지 않습니다. CSS 라이브러리와 JavaScript 라이브러리 등의 클라이언트 측 패키지를 관리해주던 Bower는 NPM 패키지 관리자로 그 기능이 흡수되었습니다. 참고로, 최근 Anguar, React 등을 지원하기 위해 Webpack도 사용이 가능합니다.
24.14.1 패키지 관리자(Package Manager) 현재 프로젝트(소스)에 외부 패키지(소스, 라이브러리, 자원)를 자동으로 설치/포함/복사하는 작업을 자동화 해주는 도구를 패키지 관리자라고 합니다. 버전 관리가 가능하고, 온라인 또는 오프라인으로 가져오기 및 나만의 패키지를 만들어서 관리할 수 있습니다. 패키지 관리자는 분야별로 여러 종류가 있는데 ASP.NET Core와 관련이 있는 것은 LibMan, NuGet, NPM이 있고, 주요 패키지 관리자에 대한 요약 설명은 다음과 같습니다. LibMan
- 클라이언트(Front-End) 패키지 관리
- Visual Studio 전용 도구 NuGet
- Visual Studio 기반 패키지 관리자 NPM
- Node.js 기반 패키지 관리자
- https://www.npmjs.com/
- https://nodejs.org/download/
24.14.2 LibMan을 사용하여 ASP.NET Core에서 클라이언트 쪽 라이브러리 획득 https://docs.microsoft.com/ko-kr/aspnet/core/client-side/libman/?view=aspnetcore-3.1
<그림> LibMan 라이브러리 관리자
ASP.NET Core 프로젝트에서 jQuery를 사용한 유효성 검사를 진행하기 위해서는 다음 세 가지 자바스크립트 라이브러리가 필요합니다. 참고로, 이 라이브러리들은 ASP.NET Core MVC 기본 템플릿에 기본으로 포함되어 있습니다. jquery.js jquery.validate.js jquery.validate.unobtrusive.js
24.14.3 Bower 사용 전 미리 필요한 프로그램 Visual Studio를 사용하는 환경이라면 Bower가 이미 내장되어 있습니다. 솔루션 탐색기에서 기본으로 보이지는 않지만 웹 프로젝트 루트에 있는 bower.json 파일 또는 bower 패키지 관리자를 설정하여 쉽게 사용할 수 있습니다. 만약 명령 프롬프트 기반으로 Bower를 사용하고자 한다면 Bower 사용 전에 Node의 npm과 Git이 미리 설치되어 있어야 합니다. 내려받는 경로는 다음을 참고합니다.
Node와 npm
- https://nodejs.org/ Git for windows
- https://git-for-windows.github.io/
Visual Studio가 아닌 환경에서는 명령줄 도구로 사용합니다. 명령줄 도구 기반 Bower 사용법은 참고로 살펴보겠습니다. npm과 git을 설치한 상태라면 다음과 같이 npm –v 명령어와 git --version 명령어로 현재 로컬 컴퓨터에 설치된 버전을 확인할 수 있습니다. 이 도구 두 개가 설치된 상태라면 bower를 설치할 수 있습니다. 그림 24 19 bower 사용 전 필수 프로그램 확인
24.14.4 [Obsolete] Bower 설치 npm과 git이 설치된 상태에서 명령 프롬프트를 열고 npm install -g bower를 실행하면 bower 명령 도구가 로컬 컴퓨터에 설치됩니다. C:\npm install -g bower 그림 24 20 bower 설치
bower --version 명령어를 통해서 현재 설치된 bower 도구의 버전을 확인할 수 있습니다. 그림 24 21 bower 설치 버전 확인
24.14.5 패키지 검색 bower search 명령어로 특정 자바스크립트 라이브러리를 검색할 수 있습니다.
bower search <패키지명> – bower search angular – bower search lodash
그림 24 22 bower search 명령어로 패키지 검색하기
24.14.6 패키지 설치 및 제거 bower install 명령어로 패키지를 설치하고, bower uninstall 명령어로 패키지를 제거할 수 있습니다.
bower install <패키지명>
- bower install jQuery bower uninstall <패키지명>
- bower uninstall jQuery
그림 24 23 bower install 명령어로 제이쿼리 설치하기
24.14.7 폴더 및 파일 구조 bower install 명령어로 특정 패키지를 설치하면 다음과 같은 폴더 구조로 설치됩니다.
./bower_components 폴더에 패키지 설치됨(기본값)
- .bowerrc 파일에서 재정의 가능
- Visual Studio 2019(ASP.NET Core)에서는 /wwwroot/lib/ 폴더로 설정됨
./bower.json 파일이 Bower에 대한 환경 설정 파일임
- npm의 package.json 파일과 같은 의미임
다음은 Visual Studio가 아니라 bower 명령어를 통해서 jQuery를 설치한 그림입니다. bower_components 폴더의 jquery 폴더에 설치됩니다. 그림 24 24 제이쿼리가 설치된 폴더 확인하기
bower install angular로 특정 패키지를 설치하고, bower list로 설치된 목록을 확인하고, bower uninstall 명령어로 설치된 패키지를 제거할 수 있습니다. 그림 24 25 패키지 설치 및 확인, 삭제
24.14.8 특정 버전의 패키지 설치 특정 버전의 JavaScript 패키지를 설치하려면 # 기호 뒤에 버전명을 붙이면 됩니다.
bower install 패키지명#버전정보
- bower install jQuery#2.0.0 패키지 관련 정보 보기
- bower info 패키지명
- bower info 패키지명#Version
24.14.9 구버전 패키지 최신 버전으로 업데이트 bower update 명령어를 통해 현재 설치된 패키지 중 업데이트 된 버전이 있으면 업데이트가 진행됩니다.
bower update
- 전체 패키지 업데이트
- 버전이 업데이트된 것 있으면 업데이트 Bower install <패키지명>
- 특정 패키지만 최신 버전으로 업데이트
24.14.10 Bower 환경 설정 파일 Bower 환경 설정 파일은 bower.json 파일과 .bowerrc 파일입니다. 24.14.10.1 bower.json 파일
현재 웹 사이트 프로젝트가 Bower를 사용한다는 의미
- npm의 package.json과 같은 의미
- NuGet의 package.config와 같은 의미이지만 설정도 포함됨
환경 설정과 등록된 패키지 리스트 관리
- 의존성 리스트 관리는 bower.json 파일을 통해서 가능 각각의 패키지 폴더 안에 설정과 의존성 관련 bower.json 존재
- jQuery 폴더에 bower.json 파일 있음
bower init 명령어로 bower.json 파일을 생성할 수 있습니다. npm init과 같은 형식입니다. 그림 24 26 bower init 명령어로 bower.json 파일 생성하기
다음은 bower.json 파일의 구조를 나타냅니다. 그림 24 27 bower.json 파일의 구조
24.14.10.2 .bowerrc 파일 bower 패키지가 설치될 폴더 위치를 변경해줍니다. bower_components 폴더를 재정의해줍니다. Bower로 추가된 스크립트를 /wwwroot/lib/ 폴더에 넣고자 한다면 .bowerrc 파일에서 경로를 지정하면 됩니다.
24.14.11 --save와 --save-dev 플래그
bower install 명령어 실행 시 --save와 --save-dev, 두 플래그를 옵션으로 지정할 수 있습니다. bower.json 파일에 패키지 항목에 추가할 때 --save 플래그를 추가하여 <bower install jquery –save> 형식으로 실행하면 bower.json 파일의 dependencies 항목에 추가됩니다. --save-dev 플래그를 추가하면 <bower install jasmine --save-dev> 형식으로 devDependencies 항목에 추가됩니다.
24.14.12 Bower 패키지 제거 bower 명령어로 설치된 모든 패키지는 bower uninstall 명령어로 제거합니다. bower uninstall <패키지> --save
24.14.13 Visual Studio에서의 bower.json 파일 ASP.NET Core 웹 프로젝트의 기본 템플릿에서는 bower.json 파일이 기본으로 포함되어 있지만, 솔루션 탐색기에서는 보이지 않습니다. 이때 솔루션 탐색기 상단 메뉴의 모든 파일 표시 메뉴를 클릭하면 다음과 같이 bower.json 파일을 볼 수 있습니다.
그림 24 28 Visual Studio에서 모든 파일 표시
Visual Studio에서 ASP.NET Core 웹 응용 프로그램 템플릿으로 생성된 프로젝트의 bower.json 파일의 내용은 다음과 같은 형태로 구성됩니다. dependencies 섹션에 패키지 이름과 버전을 추가하면 Bower가 자동으로 프로젝트에 해당 패키지를 내려받습니다.
// bower.json
{
"name": "asp.net",
"private": true,
"dependencies": {
"bootstrap": "3.3.6",
"jquery": "2.2.0",
"jquery-validation": "1.14.0",
"jquery-validation-unobtrusive": "3.2.6",
"toastr": "2.1.2",
"angular": "1.5.7"
}
}
마찬가지로 .bowerrc 파일의 내용은 다음과 같습니다.
// .bowerrc
{
"directory": "wwwroot/lib"
}
24.15 Visual Studio에서 클라이언트 패키지 가져오기 Visual Studio에서는 Bower가 솔루션 탐색기 도구로 포함되어 있어 좀 더 편하게 사용할 수 있습니다. 예를 들어 DotNetNote 웹 프로젝트에 <종속성> 항목을 확장하면 다음과 같이 Bower 항목이 보이고, 이를 다시 확장하면 현재 프로젝트에 설치된 클라이언트 패키지 목록을 볼 수 있습니다. 그림 24 29 Bower 패키지 관리자
만약 새로운 패키지를 설치하려면, Bower에 마우스 오른쪽 버튼을 클릭 후 <Bower 패키지 관리> 창을 실행하여 Bower 패키지 관리 화면을 열고 NuGet 패키지와 똑같이 원하는 패키지를 검색해서 원하는 버전을 내려받을 수 있습니다. 이곳에서 패키지를 내려받으면 자동으로 bower.json 파일에 해당 정보가 반영됩니다.
그림 24 30 Bower 패키지 관리자 실행
24.16 [실습] Bower를 사용하여 자주 사용하는 클라이언트 패키지 가져오기 24.16.1 소개 Visual Studio 기반 ASP.NET Core 프로젝트에 Bower 패키지 관리자 또는 bower.json 파일을 통해서 클라이언트 측 라이브러리를 가져올 수 있습니다. 이번 실습에서는 DotNetNote 프로젝트에 bower.json 파일을 통해서 추가 라이브러리를 가져오는 실습을 진행해보겠습니다.
24.16.2 따라하기 (1) Visual Studio를 사용하여 C:\ASP.NET\DotNetNote 프로젝트를 실행합니다.
(2) 솔루션 탐색기의 상단의 아이콘 중에서 <모든 파일 표시>를 클릭하여 bower.json 파일을 표시합니다. 그림 24 31 모든 파일 표시
(3) bower.json 파일을 열어보면 그림과 같이 기본으로 bootstrap과 jquery 관련 라이브러리가 포함되어 있다(버전은 다를 수 있습니다). 그림 24 32 기본 생성된 bower.json 파일
(4) bower.json 파일의 dependencies 섹션에 클라이언트 라이브러리를 입력하면 관련 단어로 시작하는 라이브러리를 검색해서 리스트로 보여줍니다. 예를 들어 “angular”를 입력 후 나타나는 항목 중에서 “angular”를 선택해서 입력합니다. 그림 24 33 인텔리센스의 도움으로 클라이언트 라이브러리 검색
클라이언트 라이브러리 이름 입력 후 콜론(:) 기호를 입력하면 주요 버전을 표기해 줍니다. 현재 시점(2016.8)에서 안정적인 최신 버전의 패키지인 1.5.8 버전을 입력했습니다. 그림 24 34 클라이언트 라이브러리 버전 선택
(5) bower.json 파일에 직접 텍스트를 입력하는 방식으로 다음과 같이 toastr부터 moment까지 7개의 라이브러리를 추가하고 저장합니다. 이곳에 지정된 라이브러리들은 이 책 전체에서 사용되는 외부 라이브러리다.
// bower.json 파일에 코드 추가
{
"name": "asp.net",
"private": true,
"dependencies": {
"bootstrap": "3.3.6",
"jquery": "2.2.0",
"jquery-validation": "1.14.0",
"jquery-validation-unobtrusive": "3.2.6",
"toastr": "2.1.2",
"font-awesome": "4.6.1",
"angular": "1.5.8",
"angular-route": "1.5.8",
"angular-animate": "1.5.8",
"bootbox.js": "4.4.0",
"moment": "2.13.0"
}
}
(6) 파일을 저장합니다. 저장하는 순간 프로젝트의 종속성 메뉴에 “복원 중…” 메시지가 나타날 수 있습니다. 이는 bower.json 파일에 지정된 라이브러리를 내려받는 중입니다. 그림 24 35 라이브러리 내려받는 중
(7) 종속성의 Bower 항목을 확장해보면 그림과 같이 기본 제공 및 새롭게 추가된 클라이언트 라이브러리가 포함된 것을 알 수 있습니다. 그림 24 36 Bower에 추가된 클라이언트 라이브러리
(8) bower.json 파일 편집기에서 마우스 오른쪽 버튼을 클릭하면 상황 메뉴가 뜨는데 <속성 정렬>을 선택해서 각각의 항목을 이름순으로 정렬할 수 있습니다. 그림 24 37 속성 정렬
(9) 속성 정렬이 완료된 후에는 abc 순서대로 라이브러리 목록이 보여집니다. 그림 24 38 이름순으로 정렬된 라이브러리 목록
(10) 솔루션 탐색기에서 bower.json 파일 아래 .bowerrc 파일을 열어보면 bower.json 파일에 설정된 클라이언트 라이브러리가 wwwroot 폴더의 lib 폴더에 저장된 것을 알 수 있습니다. 그림 24 39 .bowerrc 파일
(11) 프로젝트 소스가 있는 wwwroot\lib 폴더를 보겠습니다. bower.json 파일에 설정된 클라이언트 라이브러리가 폴더 단위로 저장되어 있음을 알 수 있습니다. 이러한 클라이언트 라이브러리를 사용하려면 이 경로 안에 있는 각각의 css 파일 또는 js 파일을 참조해서 사용하면 됩니다. 그림 24 40 wwwroot\lib 폴더
24.16.3 마무리 이번 실습에서는 이미 추가되었거나 새롭게 추가해야 하는 라이브러리들, 이 책에서 한 번 이상 사용될 라이브러리들인 jQuery, Angular, Bootstrap 등을 모아서 bower.json 파일로 참조해보았습니다. 이제 서버 측 패키지는 NuGet 패키지 관리자로 내려받고, 클라이언트 라이브러리는 Bower 패키지 관리자 또는 bower.json 파일을 통해서 내려 받아서 사용할 수 있게 되었습니다. 만약 웹 사이트 만들 때 기존의 JavaScript에 대한 경험이 있다면 bower.json 파일을 통해서 필요한 JavaScript 라이브러리를 내려받은 후 웹 페이지에서 사용할 수 있을 것입니다.
24.17 [동영상 강의] ASP.NET Core 6.0 첫 번째 응용 프로그램 만들기(VideoApp) 2/13 24.17.1 솔루션 및 프로젝트 생성
24.17.2 VideoApp_02_솔루션 및 프로젝트 생성 그리고 GitHub에 소스 공개.mp4
24.18 [동영상 강의] 24_99_DotNetNote.Blazor_Blazor 앱을 사용하여 DotNetNote 프로젝트 생성 및 기본 기능 실행 데모
24.19 SponsorApp_후원자 관리 앱 만들기 미니 프로젝트 24.19.1 SponsorApp 솔루션 생성 빈 프로젝트 템플릿을 사용하여 SponsorApp 솔루션을 만들고 실행합니다.