다음을 통해 공유

일반적인 클라이언트 측 웹 기술

팁 (조언)

이 콘텐츠는 .NET Docs 또는 오프라인으로 읽을 수 있는 무료 다운로드 가능한 PDF로 제공되는 eBook인 'ASP.NET Core와 Azure로 현대 웹 애플리케이션 설계하기'에서 발췌한 내용입니다.

PDF 다운로드

ASP.NET Core 및 Azure를 통해 최신 웹 애플리케이션 설계에 관한 eBook 커버 썸네일입니다.

웹사이트는 내부와 외부 모두에서 잘 보여야 합니다. - 폴 쿡슨

ASP.NET Core 애플리케이션은 웹 애플리케이션이며 일반적으로 HTML, CSS 및 JavaScript와 같은 클라이언트 쪽 웹 기술을 사용합니다. 페이지 콘텐츠(HTML)를 레이아웃 및 스타일 지정(CSS)과 동작(JavaScript를 통해)에서 분리하면 복잡한 웹앱이 문제 분리 원칙을 활용할 수 있습니다. 이러한 문제가 얽혀 있지 않으면 애플리케이션의 구조, 디자인 또는 동작에 대한 향후 변경 내용을 더 쉽게 수행할 수 있습니다.

HTML 및 CSS는 비교적 안정적이지만, 개발자가 웹 기반 애플리케이션을 빌드하기 위해 사용하는 애플리케이션 프레임워크 및 유틸리티를 통해 JavaScript는 빠른 속도로 진화하고 있습니다. 이 장에서는 웹 개발자가 JavaScript를 사용하는 몇 가지 방법을 살펴보고 Angular 및 React 클라이언트 쪽 라이브러리에 대한 개략적인 개요를 제공합니다.

비고

Blazor 는 풍부한 대화형 클라이언트 사용자 인터페이스를 빌드하기 위한 JavaScript 프레임워크의 대안을 제공합니다.

HTML

HTML은 웹 페이지 및 웹 애플리케이션을 만드는 데 사용되는 표준 태그 언어입니다. 해당 요소는 서식이 지정된 텍스트, 이미지, 양식 입력 및 기타 구조를 나타내는 페이지의 구성 요소를 형성합니다. 브라우저가 페이지 또는 애플리케이션을 가져오는지 여부에 관계없이 URL을 요청할 때 가장 먼저 반환되는 것은 HTML 문서입니다. 이 HTML 문서는 CSS 형식의 모양과 레이아웃 또는 JavaScript 형식의 동작에 대한 추가 정보를 참조하거나 포함할 수 있습니다.

CSS

CSS(Cascading Style Sheets)는 HTML 요소의 모양과 레이아웃을 제어하는 데 사용됩니다. CSS 스타일은 HTML 요소에 직접 적용하거나, 동일한 페이지에서 별도로 정의하거나, 별도의 파일에 정의하고 페이지에서 참조할 수 있습니다. 스타일은 지정된 HTML 요소를 선택하는 데 사용되는 방법에 따라 계단식으로 배열됩니다. 예를 들어 스타일은 전체 문서에 적용될 수 있지만 특정 요소에 적용된 스타일에 의해 재정의됩니다. 마찬가지로 요소별 스타일은 요소에 적용된 CSS 클래스에 적용된 스타일에 의해 재정의되며, 이 스타일은 해당 ID를 통해 해당 요소의 특정 인스턴스를 대상으로 하는 스타일에 의해 재정의됩니다. 그림 6-1

CSS 특이성 규칙

그림 6-1. CSS 특이성 규칙의 순서

스타일을 고유한 스타일시트 파일에 유지하고 선택 기반 연계를 사용하여 애플리케이션 내에서 일관되고 재사용 가능한 스타일을 구현하는 것이 가장 좋습니다. HTML 내에 스타일 규칙을 배치하는 것은 피해야 하며, 특정 개별 요소(요소의 전체 클래스 또는 특정 CSS 클래스가 적용된 요소)에 스타일을 적용하는 것은 규칙이 아니라 예외여야 합니다.

CSS 전처리기

CSS 스타일시트에는 조건부 논리, 변수 및 기타 프로그래밍 언어 기능에 대한 지원이 부족합니다. 따라서 동일한 색, 글꼴 또는 기타 설정이 HTML 요소 및 CSS 클래스의 다양한 변형에 적용되므로 큰 스타일시트에는 상당한 반복이 포함되는 경우가 많습니다. CSS 전처리기는 변수 및 논리에 대한 지원을 추가하여 스타일시트가 DRY 원칙 을 따르는 데 도움이 될 수 있습니다.

가장 인기 있는 CSS 전처리기는 Sass 및 LESS입니다. 둘 다 CSS를 확장하고 이전 버전과 호환되므로 일반 CSS 파일은 유효한 Sass 또는 LESS 파일입니다. Sass는 Ruby 기반이고 LESS는 JavaScript 기반이며, 둘 다 일반적으로 로컬 개발 프로세스의 일부로 실행됩니다. 둘 다 명령줄 도구를 사용할 수 있을 뿐만 아니라 Gulp 또는 Grunt 작업을 사용하여 실행하기 위한 Visual Studio의 기본 제공 지원이 있습니다.

JavaScript

JavaScript는 ECMAScript 언어 사양에서 표준화된 동적 해석된 프로그래밍 언어입니다. 웹의 프로그래밍 언어입니다. CSS와 마찬가지로 JavaScript는 HTML 요소 내의 특성, 페이지 내의 스크립트 블록 또는 별도의 파일에서 특성으로 정의할 수 있습니다. CSS와 마찬가지로 JavaScript를 개별 파일로 구성하여 개별 웹 페이지 또는 애플리케이션 보기에 있는 HTML과 최대한 분리된 상태로 유지하는 것이 좋습니다.

웹 애플리케이션에서 JavaScript를 사용하는 경우 일반적으로 수행해야 하는 몇 가지 작업이 있습니다.

  • HTML 요소를 선택하고 해당 값을 검색 및/또는 업데이트합니다.

  • 데이터에 대한 Web API 쿼리

  • Web API에 명령을 보내고 결과를 사용하여 콜백에 응답합니다.

  • 유효성 검사를 수행합니다.

JavaScript만으로 이러한 모든 작업을 수행할 수 있지만 이러한 작업을 더 쉽게 수행할 수 있도록 많은 라이브러리가 있습니다. 이러한 라이브러리 중 첫 번째이자 가장 성공적인 라이브러리 중 하나는 jQuery로, 웹 페이지에서 이러한 작업을 간소화하기 위한 인기 있는 선택입니다. SPA(단일 페이지 애플리케이션)의 경우 jQuery는 Angular 및 React에서 제공하는 원하는 많은 기능을 제공하지 않습니다.

jQuery를 사용하는 레거시 웹앱

JavaScript 프레임워크 표준에 의해 오래되었지만 jQuery는 HTML/CSS를 사용하고 웹 API에 AJAX를 호출하는 애플리케이션을 빌드하는 데 일반적으로 사용되는 라이브러리입니다. 그러나 jQuery는 브라우저 DOM(문서 개체 모델) 수준에서 작동하며 기본적으로 선언적 모델이 아닌 명령적 모델만 제공합니다.

예를 들어 텍스트 상자의 값이 10을 초과하면 페이지의 요소가 표시되어야 한다고 상상해 보십시오. jQuery에서 이 기능은 일반적으로 텍스트 상자의 값을 검사하고 해당 값을 기반으로 대상 요소의 표시 유형을 설정하는 코드를 사용하여 이벤트 처리기를 작성하여 구현됩니다. 이 프로세스는 명령적 코드 기반 접근 방식입니다. 다른 프레임워크는 대신 데이터 바인딩을 사용하여 요소의 표시 유형을 선언적으로 텍스트 상자 값에 바인딩할 수 있습니다. 이 방법을 사용하려면 코드를 작성할 필요가 없지만 데이터 바인딩 특성과 관련된 요소만 데코레이팅하면 됩니다. 클라이언트 쪽 동작이 점점 더 복잡해짐에 따라 데이터 바인딩 접근 방식은 코드 및 조건부 복잡성을 줄이면서 더 간단한 솔루션을 만드는 경우가 많습니다.

jQuery와 SPA 프레임워크 비교

요소 jQuery 각도
DOM을 추상화합니다. 예 예
AJAX 지원 예 예
선언적 데이터 바인딩 아니요 예
MVC 스타일 라우팅 아니요 예
템플릿 아니요 예
Deep-Link 라우팅 아니요 예

jQuery가 부족한 대부분의 기능은 다른 라이브러리를 추가하여 본질적으로 추가할 수 있습니다. 그러나 Angular와 같은 SPA 프레임워크는 처음부터 모든 기능을 염두에 두고 설계되었기 때문에 이러한 기능을 보다 통합된 방식으로 제공합니다. 또한 jQuery는 명령적 라이브러리이므로 jQuery를 사용하여 작업을 수행하기 위해 jQuery 함수를 호출해야 합니다. SPA 프레임워크에서 제공하는 대부분의 작업 및 기능은 선언적으로 수행할 수 있으므로 실제 코드를 작성할 필요가 없습니다.

데이터 바인딩은 이 기능의 좋은 예입니다. jQuery에서는 일반적으로 코드 한 줄만 사용하여 DOM 요소의 값을 얻거나 요소의 값을 설정합니다. 그러나 요소의 값을 변경해야 할 때마다 이 코드를 작성해야 하며 페이지의 여러 함수에서 이 오류가 발생하는 경우도 있습니다. 또 다른 일반적인 예는 요소 표시 여부입니다. jQuery에는 특정 요소가 표시되는지 여부를 제어하는 코드를 작성하는 여러 위치가 있을 수 있습니다. 이러한 각 경우에서 데이터 바인딩을 사용할 때 코드를 작성할 필요가 없습니다. 문제의 요소의 값이나 표시 유형을 페이지의 viewmodel 에 바인딩하면 해당 viewmodel의 변경 내용이 바인딩된 요소에 자동으로 반영됩니다.

Angular SPA

Angular는 세계에서 가장 인기 있는 JavaScript 프레임워크 중 하나입니다. Angular 2 이후 팀은 처음부터( TypeScript 사용) 프레임워크를 다시 빌드하고 원래 AngularJS 이름에서 Angular로 브랜드를 변경했습니다. 이제 몇 년이 지난 지금, 새롭게 디자인된 Angular는 단일 페이지 애플리케이션을 빌드하기 위한 강력한 프레임워크가 되고 있습니다.

Angular 애플리케이션은 구성 요소에서 빌드됩니다. 구성 요소는 HTML 템플릿을 특수 개체와 결합하고 페이지의 일부를 제어합니다. Angular 문서의 간단한 구성 요소는 다음과 같습니다.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<h1>Hello {{name}}</h1>`
})

export class AppComponent { name = 'Angular'; }

구성 요소는 컴포넌트에 대한 메타데이터를 받아들이는 @Component 데코레이터 함수를 사용하여 정의됩니다. 선택기 속성은 이 구성 요소가 표시될 페이지의 요소 ID를 식별합니다. 템플릿 속성은 마지막 줄에 정의된 구성 요소의 이름 속성에 해당하는 자리 표시자를 포함하는 간단한 HTML 템플릿입니다.

DOM 요소 대신 구성 요소 및 템플릿을 사용하여 Angular 앱은 JavaScript("vanilla JS"라고도 함) 또는 jQuery를 사용하여 작성된 앱보다 더 높은 수준의 추상화 및 덜 전반적인 코드로 작동할 수 있습니다. 또한 Angular는 클라이언트 쪽 스크립트 파일을 구성하는 방법에 대한 몇 가지 순서를 적용합니다. 규칙에 따라 Angular 앱은 앱 폴더에 있는 모듈 및 구성 요소 스크립트 파일과 함께 공통 폴더 구조를 사용합니다. 앱 빌드, 배포 및 테스트와 관련된 Angular 스크립트는 일반적으로 상위 수준 폴더에 있습니다.

CLI를 사용하여 Angular 앱을 개발할 수 있습니다. Angular 개발을 로컬로 시작하는 방법은 (이미 git 및 npm이 설치되어 있다고 가정) GitHub에서 리포지토리를 복제하고 npm install와 npm start을 실행하는 것뿐입니다. 이 외에도 Angular는 프로젝트를 만들고, 파일을 추가하고, 테스트, 번들링 및 배포 작업을 지원할 수 있는 자체 CLI를 제공합니다. 이 CLI 친화성은 Angular를 ASP.NET Core와 특히 호환되며, 뛰어난 CLI 지원도 제공합니다.

Microsoft는 Angular SPA 구현을 포함하는 참조 애플리케이션인 eShopOnContainers를 개발했습니다. 이 앱에는 온라인 스토어의 장바구니를 관리하고, 카탈로그에서 항목을 로드 및 표시하고, 주문 생성을 처리하는 Angular 모듈이 포함되어 있습니다. GitHub에서 샘플 애플리케이션을 보고 다운로드할 수 있습니다.

리액트

전체 모델View-Controller 패턴 구현을 제공하는 Angular와 달리 React는 뷰에만 관심이 있습니다. 프레임워크가 아니라 라이브러리이므로 SPA를 빌드하려면 추가 라이브러리를 활용해야 합니다. 다양한 단일 페이지 애플리케이션을 생성하기 위해 React와 함께 사용하도록 설계된 여러 라이브러리가 있습니다.

React의 가장 중요한 기능 중 하나는 가상 DOM을 사용하는 것입니다. 가상 DOM은 성능(가상 DOM은 업데이트해야 하는 실제 DOM의 일부를 최적화할 수 있음) 및 테스트 용이성(React 및 해당 가상 DOM과의 상호 작용을 테스트하는 브라우저가 필요하지 않음)을 비롯한 여러 가지 이점을 React에 제공합니다.

React는 HTML에서 작동하는 방식에서도 특이합니다. 코드와 마크업을 엄격하게 분리하여 HTML 속성에 JavaScript 참조를 표시하는 대신, React는 HTML을 JavaScript 코드 내에 JSX 형식으로 직접 추가합니다. JSX는 순수 JavaScript로 컴파일할 수 있는 HTML과 유사한 구문입니다. 다음은 그 예입니다.

<ul>
{ authors.map(author =>
    <li key={author.id}>{author.name}</li>
)}
</ul>

JavaScript를 이미 알고 있는 경우 React를 쉽게 학습할 수 있습니다. Angular 또는 기타 인기 있는 라이브러리와 관련된 학습 곡선이나 특수 구문은 거의 없습니다.

React는 전체 프레임워크가 아니므로 일반적으로 다른 라이브러리에서 라우팅, 웹 API 호출 및 종속성 관리와 같은 작업을 처리하려고 합니다. 좋은 점은 이러한 각 라이브러리에 가장 적합한 라이브러리를 선택할 수 있다는 점이지만, 단점은 이러한 모든 결정을 내리고 완료되면 선택한 모든 라이브러리가 잘 작동하는지 확인해야 한다는 것입니다. 좋은 시작점을 원하는 경우 React Slingshot과 같은 시작 키트를 사용하여 React와 함께 호환되는 라이브러리 집합을 미리 패키지할 수 있습니다.

Vue

시작 가이드에서 "Vue는 사용자 인터페이스를 빌드하기 위한 점진적 프레임워크입니다. 다른 모놀리식 프레임워크와 달리 Vue는 처음부터 점진적으로 채택할 수 있도록 설계되었습니다. 핵심 라이브러리는 뷰 계층에만 초점을 맞추고 있으며 다른 라이브러리 또는 기존 프로젝트를 쉽게 선택하고 통합할 수 있습니다. 반면에 Vue는 최신 도구 및 지원 라이브러리와 함께 사용할 때 정교한 Single-Page 애플리케이션을 완벽하게 구동할 수 있습니다."

Vue를 시작하려면 HTML 파일 내에 스크립트를 포함해야 합니다.

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

프레임워크가 추가되면 Vue의 간단한 템플릿 구문을 사용하여 DOM에 데이터를 선언적으로 렌더링할 수 있습니다.

<div id="app">
  {{ message }}
</div>

다음 스크립트를 추가합니다.

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

페이지에서 "Hello Vue!"를 렌더링하는 데 충분합니다. 그러나 Vue는 단순히 메시지를 div에 한 번 렌더링하는 것이 아닙니다. 데이터 바인딩 및 동적 업데이트를 지원하므로 값이 message 변경되면 해당 값 <div> 이 즉시 업데이트되어 이를 반영합니다.

물론, 이것은 Vue가 할 수있는 표면을 긁을 뿐입니다. 그것은 지난 몇 년 동안 많은 인기를 얻었고 큰 커뮤니티가 있다. Vue와 협력하여 확장할 수 있는 지원 구성 요소 및 라이브러리의 목록이 점점 더 커지고 있습니다. 웹 애플리케이션에 클라이언트 쪽 동작을 추가하거나 전체 SPA 빌드를 고려 중인 경우 Vue를 조사할 가치가 있습니다.

Blazor WebAssembly

다른 JavaScript 프레임워크와 달리 . Blazor WebAssembly NET을 사용하여 대화형 클라이언트 쪽 웹앱을 빌드하기 위한 SPA(단일 페이지 앱) 프레임워크입니다. Blazor WebAssembly는 플러그 인이나 코드를 다른 언어로 다시 컴파일하지 않고 개방형 웹 표준을 사용합니다. Blazor WebAssembly는 모바일 브라우저를 비롯한 모든 최신 웹 브라우저에서 작동합니다.

웹 브라우저 내에서 .NET 코드를 실행하면 WebAssembly(약어 wasm)가 가능합니다. WebAssembly는 빠른 다운로드와 최대 실행 속도를 위해 최적화된 압축 바이트 코드 형식입니다. WebAssembly는 개방형 웹 표준이며 플러그 인 없이 웹 브라우저에서 지원됩니다.

WebAssembly 코드는 JavaScript 상호 운용성이라고 하는 JavaScript를 통해 브라우저의 전체 기능에 액세스할 수 있으며, 종종 JavaScript interop 또는 JS interop으로 단축됩니다. 브라우저에서 WebAssembly를 통해 실행된 .NET 코드는 브라우저의 JavaScript 샌드박스에서 클라이언트 컴퓨터의 악의적 활동에 대해 제공하는 보호를 사용하여 실행됩니다.

자세한 내용은 ASP.NET Core 소개를 참조하세요 Blazor.

SPA 프레임워크 선택

SPA를 지원하는 데 가장 적합한 옵션을 고려할 때는 다음 사항을 고려해야 합니다.

  • 팀이 프레임워크 및 해당 종속성(경우에 따라 TypeScript 포함)에 대해 잘 알고 있나요?

  • 프레임워크는 얼마나 의견이 일치하며, 기본 방식으로 작업을 수행하는 데 동의합니까?

  • 해당 라이브러리나 동반 라이브러리에 앱이 필요한 모든 기능이 포함되어 있나요?

  • 잘 문서화되어 있나요?

  • 커뮤니티는 얼마나 활발합니까? 새로운 프로젝트가 진행되고 있나요?

  • 핵심 팀은 얼마나 활발합니까? 문제가 해결되고 새 버전이 정기적으로 제공되나요?

프레임워크는 빠른 속도로 계속 진화하고 있습니다. 위에 나열된 고려 사항을 사용하여 나중에 종속되는 것을 후회하게 될 프레임워크를 선택하는 위험을 완화할 수 있습니다. 특히 위험을 반대하는 경우 상업적 지원을 제공하거나 대기업에서 개발 중인 프레임워크를 고려하세요.

참조 – 클라이언트 웹 기술

이전다음