【한글자막】 Angular 완벽 가이드 : 기초 문법부터 TypeScript 기반 최신 문법까지

모듈을 소개합니다.
그리고 여러분이 배울 내용을 설명하겠습니다.

첫 번째 앱이 브라우저에서 실행되는 것을 보았지만,
어떻게 거기에 도달했는지 아시나요? 이 강의는 그 질문에 답합니다.

Angular는 컴포넌트에 관한 모든 것! 이 강의에서는 컴포넌트가 실제로 무엇인지 자세히 살펴보고, 그를 설명합니다.

지금까지 AppComponent로 작업했습니다.
이것을 변경하여 우리의 첫 번째 컴포넌트를 만들 시간입니다.

해당 AppModule 파일을 알고 계셨나요?
그것은 매우 중요합니다. 이 강의는 그것이 무엇인지 설명합니다!

이제 자체 컴포넌트를 만들고 등록하는 방법을 배웠으므로,
이제 이를 사용하는 방법에 대해 알아보겠습니다.

CLI를 사용하여 컴포넌트를 생성할 수도 있습니다.
이 강의에서는 그 작동 방식을 알아보고, 컴포넌트를 중첩하는 방법에 대해 설명합니다.

컴포넌트에는 템플릿이 있어야 합니다. 절대적으로 필요합니다.
이 강의에서는 템플릿에 대해 자세히 설명합니다.

컴포넌트에는 템플릿이 있어야 하지만 스타일은 선택 사항입니다.
이 강의에서는 스타일을 추가하는 방법을 설명합니다.

컴포넌트 셀렉터는 다른 템플릿에 포함하려는 경우 중요합니다.
이 강의에서는 해당 셀렉터가 실제로 어떻게 작동하는지 설명하며,
그 주의해야 할 사항에 대해알려드립니다.

지금은 컴포넌트에 대해 충분합니다.
이제 마침내 더 동적인 콘텐츠를 출력해 보겠습니다.
이와 관련하여 데이터 바인딩은 매우 중요합니다.
이 강의에서는 데이터 바인딩이 무엇인지 설명합니다.

데이터 바인딩의 가장 간단한 형태 중 하나는 템플릿의 텍스트를 출력할 수 있는 문자열 보간입니다.
이 강의에서 자세히 살펴봅니다.

속성 바인딩은 데이터 바인딩의 또 다른 형태이며 콘텐츠 출력과도 관련이 있습니다.
이 강의에서 자세히 알아보겠습니다.

속성 바딩딩(Property Binding)과 문자열 보간은 모두 출력 내용과 관련이 있습니다.
그런데 어떤 것을 사용해야 할까요? 그 결정에 도움이 되는 강의가 이것입니다!

지금까지는 템플릿에 데이터만 전달했습니다.
(사용자) 이벤트에 반응하려면 어떻게 해야 하나요? 이벤트 바인딩하기가 여러분을 구출해줄 겁니다!

어떤 속성과 이벤트에 바인딩할 수 있나요? 이 아티클이 도움이 될 겁니다.

이벤트에 대해 이야기할 때, 데이터 전달을 고려해야 합니다.
이 강의는 그것이 어떻게 작동하는지 설명합니다.

양방향 데이터 바인딩을 사용하여 이벤트 및 속성 바인딩을 결합할 수도 있습니다.
이 강의에서 이에 대해 자세히 알아보세요.

우리는 다양한 형태의 데이터 바인딩에 대해 배웠습니다.
이제 그것들을 결합해 봅시다!

디렉티브는 Angular 앱의 또 다른 중요한 빌딩 블록입니다.
이 강의는 이에 대해 자세히 알아봅니다.

ngIf는 기본내장 디렉티브 중 하나입니다.
데이터를 동적으로 출력하려는 경우에 매우 유용합니다.

ngIf는 지난 강의에서 배운 사용법에 국한되지 않습니다.
이 강의에서 else 조건과 함께 사용하는 방법을 배웁니다.

일부 스타일을 동적으로 변경하고 싶으십니까?
ngStyle은 여러분이 찾고 있는 그것입니다.

일종의 동적 스타일 지정 - ngClass를 사용하여 CSS 클래스를 동적으로 적용할 수도 있습니다.

리스트를 출력하려면 어떻게 해야 합니까? 예를 들어 배열 같은 것.
ngFor는 여러분을 위해 그곳에 있습니다.

ngFor를 사용하면 현재 반복의 인덱스를 얻을 수도 있습니다.
이 강의에서는 이것이 어떻게 작동하는지 설명합니다.

교육과정 프로젝트를 시작할 시간입니다.

우리가 만들고 있는 Angular 앱은 어떻게 생겼을까요?
어떤 기능과 컴포넌트가 필요한지 설계해 보겠습니다.

이것은 중요합니다. 이 강의를 건너뛰지 마세요!!!

손을 털어 준비하고, 앱을 설정합시다.

설계했던 컴포넌트를 만들 시간입니다.
먼저 직접 해보세요!

지난 강의에서 생성한 컴포넌트로 이제 뭔가를 볼 수 있도록 사용할 차례입니다.

이 과정의 나중에, 페이지를 전환하려고 합니다.
네비게이션 바를 설정하는 것은 좋은 생각인 것 같네요.

navbar가 축소되어 햄버거 메뉴가 제공되지 않습니다.
여러분 마음대로 구현하거나, 여기에 설명된 대로 코드를 변경하세요.

이 프로젝트에서도 일부 데이터를 사용할 것입니다.
해당 데이터에 대한 모델을 생성할 시간입니다.

모델과 컴포넌트가 생성되면, 이제 컴포넌트 템플릿에 일부 콘텐츠를 추가할 수 있습니다.

결국 우리는 하나 이상의 레시피를 원하므로,
그러한 목록을 출력할 템플릿을 준비합시다.

또한 선택한 레시피에 대한 세부 정보를 표시하고 싶으므로,
그에 적절한 코드를 추가해 보겠습니다.

레시피 컴포넌트에 대해 작업했습니다.
이제 쇼핑 리스트에 대해서도 동일한 작업을 수행해 보겠습니다.

레시피와 마찬가지로 앱에서 일부 재료를 사용할 것입니다.
그 모델을 추가해 보겠습니다.

모델이 추가되면 일부 재료를 출력하는 작업을 할 수 있습니다.

쇼핑 리스트에도 새로운 재료를 추가할 수 있기를 원하므로,
해당 기능을 추가해 보겠습니다.

앱의 제1부가 완료되었습니다.
우리는 많은 것을 이루었지만 여전히 많은 기능이 빠져있습니다.
Angular에 대해 더 자세히 알아볼 시간입니다.

일이 항상 원하는 대로 진행되지는 않습니다.
Angular의 오류 메시지를 읽는 방법을 배워봅시다.

브라우저에서 앱을 디버그하는 것은 매우 유용합니다.
이 강의에서 자세히 알아봅니다.

우리는 이미 컴포넌트에 대해 몇 가지를 배웠지만,
이제 더 깊이 파고들 시간입니다!

이 강의에서는 기존 앱을 여러 개의 새 컴포넌트로 분할하는 방법을 설명합니다.

속성 및 이벤트 바인딩에 대해 이미 배웠지만, 모든 것을 배우지는 않았습니다.
이제 그렇게 할 시간입니다.

여러분은 기본내장 속성에 바인딩하는 것으로만 제한되지는 않습니다.
실제로 커스텀 속성에 대한 바인딩은 Angular 앱의 핵심 기능입니다.
그것에 대해 자세히 알아볼 시간입니다.

컴포넌트 내부와 외부에서 다른 속성 이름을 사용하려는 경우가 있습니다.
이 강의에서는 그 방법을 설명합니다.

속성 바인딩 처럼 커스텀 이벤트에도 바인딩할 수 있습니다.

커스텀 이벤트에도 별칭을 할당할 수 있습니다.

속성 및 이벤트 바인딩에 대해 배운 내용을 요약해 봅시다.

Angular를 사용하면 다양한 컴포넌트에 다양한 스타일을 적용할 수 있습니다.
이 강의에서 그것이 어떻게 작동하는지 설명합니다.

뷰 캡슐화에 대해 더 자세히 알아보겠습니다.

때로는 HTML 엘리먼트 중 일부에 액세스 하고자 할 때가 있습니다.
로컬 참조를 사용하면 그것을 할 수 있습니다.

여러분은 템플릿에서 로컬 참조를 얻었지만, TypeScript 파일에서 직접 엘리먼트에 액세스할 수도 있습니다. 이 강의에서는 그 작동 방식을 설명합니다.

구조화된 콘텐츠를 다른 컴포넌트로 전달하고 싶으신가요? 예를 들어 HTML 코드 말입니다.
이 강의에서 이에 대해 자세히 알아보세요.

컴포넌트는 특정 라이프싸이클을 따릅니다.
이 강의에서는 이 주제에 대해 더 자세히 다룹니다.

작동 중인 라이프싸이클 후크를 살펴보겠습니다.

서로 다른 라이프싸이클 후크에서 템플릿 엘리먼트에 어떻게 액세스할 수 있을까요?
알아 봅시다.

컴포넌트에 투영된 콘텐츠에 액세스할 수도 있습니다.
라이프싸이클 후크에서 어떻게 작동하는지 살펴보겠습니다.

컴포넌트 및 데이터 바인딩에 대한 이 섹션을 마무리하겠습니다.

컴포넌트에 데이터를 전달하는 방법을 배웠으므로 이제 앱을 개선해 보겠습니다.

앱 네비게이션의 첫 번째 버전을 추가하기 위해 새로운 기능을 사용해 봅시다. - 커스텀 이벤트와 ngIf를 사용함

우리는 우리 자신의 이벤트를 들을 수 있을 뿐만 아니라,
이제 데이터를 컴포넌트에 전달할 수도 있으므로 그렇게 합시다.

데이터를 전달하기 위해,
보다 복잡한 커스텀 속성 및 이벤트 바인딩 체인을 구축해 보겠습니다.

사용자는 또한 쇼핑 리스트에 재료를 추가할 수 있어야 하므로
이러한 기능을 추가해 보겠습니다.

이 모듈이 무엇인지 설명하겠습니다!

우리는 이미 그것들을 배웠습니다.
ngIf와 ngFor를 빠르게 요약해 보겠습니다.

We already know ngStyle and ngClass but let me quickly refresh our knowledge on them.

우리가 만든 디렉티브는 지금도 괜찮지만, 향상될 수 있습니다.
이제 이 강의에서 해봅시다.

이 강의를 통해 렌더러에 대해 심도있게 알아볼 수 있습니다.

디렉티브를 사용할 때 호스팅 엘리먼트의 이벤트에 쉽게 반응할 수 있습니다.
이 강의에서 이에 대해 자세히 알아볼 것입니다.

여러분은 이벤트에 반응하는 것에 국한되지 않고, 호스팅 엘리먼트의 속성에도 바인딩할 수 있습니다.
이 강의는 그것이 어떻게 작동하는지 설명합니다.

Property binding is of course not limited to components - let's bind to some directive properties!

속성 디렉티브가 있을 뿐만 아니라 구조 디렉티브도 사용합니다.
그런데 그 이상한 "*"는 무엇일까요?

우리만의 구조적 디렉티브를 만들어봅시다!

또다른 멋진 기본내장 구조적 디렉티브인 ngSwitch가 있습니다.
이 강의에서 이에 대해 자세히 알아보겠습니다.

코스 프로젝트에 커스텀 디렉티브를 추가할 시간입니다.
DropdownDirective를 빌드하여 드롭다운을 활성화하겠습니다!

서비스는 Angular의 핵심 개념입니다.
이 섹션에서 무엇을 기대할 수 있는지 설명하겠습니다.

서비스는 중요합니다만, 왜 일까요? 이 강의는 이 질문을 탐구합니다.

이제 서비스가 무엇인지 이해했으므로
로깅 서비스를 생성해 보겠습니다.

우리는 서비스를 얻었지만, 지금 그것을 어떻게 사용할 수 있을까요?
Angular가 도움이 될 것입니다. 이 강의는 그 방법을 설명합니다.

이제 기본 설정이 완료되었습니다.
다른 서비스를 구축하고 게임을 강화할 시간입니다!

우리는 서비스에 대해 많은 것을 배웠습니다.
이제 다음 단계를 수행할 시간입니다.
Angular를 사용하면 실제로 생성되는 서비스 인스턴스 수를 제어할 수 있습니다.
이 강의에서 이에 대해 자세히 알아봅시다.

서비스는 몇 개여야 할까요?

컴포넌트 또는 디렉티브에서 서비스를 사용하는 것으로 제한되지 않습니다.
이 강의에서는 서비스에서 서비스를 사용하는 방법도 설명합니다.

이 모듈에서 이미 다룬 사용 사례 외에도, 서비스는 컴포넌트 간 통신을 허용할 때,
매우 유용합니다. 이 강의는 그것을 더 깊이 파고듭니다.

Angular 6을 사용하고 있습니까?
서비스를 제공하는 이 새로운 방법을 놓치지 마세요.

서비스를 연습하고, 프로젝트에 그 일부를 추가할 시간입니다!

이 섹션에서 실제로 사용할 서비스에 대한 몇 가지 서비스 파일을 만들어 보겠습니다.

서비스에 대한 훌륭한 후보는 레시피 관리입니다. 이를 위한 서비스를 구축합시다!

우리는 서비스가 크로스 컴포넌트 통신에 사용될 수 있음을 배웠습니다.
이 기능을 앱에 추가해 보겠습니다.

앱에 쇼핑 리스트 서비스를 추가해 봅시다!

앱의 다른 "부분"에서 쿼리할 수 있는 서비스를 설정하는 것 외에도,
적극적으로 메시지를 보낼 수도 있습니다.
이 강의에서 자세히 살펴보겠습니다.

거의 다 됐습니다!
레시피의 재료를 쇼핑 리스트에 추가할 수 있도록 함으로써,
앱을 미세조정해 보겠습니다.
이를 위해서는 레시피에 재료가 필요합니다. 지금 추가해 보겠습니다.

거의 완료! 레시피의 재료를 쇼핑 리스트에 추가할 수 있도록 하여
앱을 미세 조정해 보겠습니다.