Today I Learned

• 백엔드에서 API가 하나씩 완성이 되어 협업을 하다보니까 생각지 못한 변수가 생겼다. 하나를 고치면 새로운 수정 사항이 생기기를 반복하는 식이다.
• step이 4개가 되는 회원가입, 로그인과 관련된 Http 통신을 구현했다. 현재 로그인을 한 후 프로필을 등록하는 단계를 진행 중이다.
• 토요일 오늘은 React 특강을 들었다. Angular와는 다른 느낌으로 더 배워보면 재미있을 것 같다.

Today I Learned

• Home과 Movie, My List 뷰의 Header와 Footer를 통일하고 Header의 sub menu와 hover transition 등을 마무리 했다.

• bootstrap 모듈을 하나 가져다 썼다고 내가 적용했던 CSS가 먹통이 되는 일이 있었다.. 개고생 했다.

• Server에서 받아온 Data를 어떻게 다룰 것인지 고민해봐야한다.

Today I Learned

오전

• 프로젝트 구현을 시작하기 위해서 팀원들과 개발 환경을 세팅했다.

오후

• 모일 시간 등 회의
• Header Component의 Secondary Navigation과 Directive를 이용한 window scroll Fixed header를 구현

오늘 회의

1. 출퇴근 시간 정하기

• 업무 시간 : 6 ~ 7 시간 (평일: 월 ~ 금 / 주말: 토요일)

• 오전 : 오전 10시 출근 오후 6시 퇴근

• 오후 : 오후 1시 출근 오후 10시 퇴근 (저녁 시간 1 시간 30분)

2. 오늘부터 구현할 내용 발표하기

• 매일 오후 5시 반

React & Angular 비교

React

• Facebook이 만든 Frontend Framework
• 오로지 View만 관리
• Facebook, Netflix, Airbnb 등

Angular

• 구글이 만든 Frontend Framework
• Framework로서 많은 기능 내장 (Router, Auth, animation 등)

필요 Skill

Angular Guard

로그인에 성공한 사용자만 접속할 수 있는 페이지를 구현해야할 때가 있다. 이런 때에는 Angular Guard를 이용한 Authentication을 한다.

Guard는 Service의 일종이다.

SEO(Search Engine Optimization)

SPA(Single Page Application)의 단점으로 부각되는 SEO 문제를 해결하기 위해서 각 page마다 고유한 URL을 부여하는 Routing 기능이 Angular Framework에도 제공한다.

Angular Universal

SSR(Server Side Rendering)을 할 수 있도록 하는 Angular Module

Angular Routing

Routing은 Source에서 Destination까지의 경로를 결정하는 기능이다.

Application에서 Routing이란 어떤 View에서 다른 View로 View를 전환하는 Navigation을 관리하는 기능을 의미한다.

a Element의 href attribute를 이용하면 브라우저의 주소창 URL이 바뀌며 새로운 html 페이지를 렌더링한다. 이 과정에서 화면 깜빡임이 발생한다. 이를 보완하기 위한 AJAX는 브라우저 주소창의 주소가 변경되지 않아 브라우저의 뒤로가기, 앞으로가기 등의 history 관리가 되지 않는다. 하나의 주소로 동작하는 AJAX 방식은 SEO도 되지 않는다.

Angular는 위의 문제점을 보완한 2가지의 Location strategy를 제공한다.

• PathLocationStrategy : HTML5 History pushState 기반 Navigation Strategy
• HashLocationStrategy : Hasy 기반 Navigation Strategy

Angular의 Default Location Strategy는 Path Location Strategy이다.

Today I Learned

• 오전에 프로젝트 기능 분석, 컴포넌트 분리에 대해 회의를 진행했다.
• 오후에 이력서 특강을 들었다.

✨이력서 특강 요약✨

Module

Angular의 모듈은 관련이 있는 구성 요소(Component, Directive, Pipe, Service)를 하나의 단위로 묶는 메커니즘

모듈은 관련이 있는 구성 요소들로 구성된 integrated functional block으로 Application을 구성하는 하나의 단위를 말함

모듈은 다른 모듈과 결합할 수 있으며 Angular는 여러 모듈을 조합해서 Application을 구성한다.

초기 속도가 느린 SPA의 단점을 해결하기 위해서 모듈을 분리하고 Lazy Loading하는 방법이 있다.

Angular는 최소한 하나의 모듈, root Module인 app.module.ts를 갖는다.

NgModule은 @NgModule Decorator로 장식된 class이다.

• Feature Module

  하나의 View 가 하나의 Feature Module

• Shared Module

  여러 Feature Module에서 import되어 사용되는 Shared Module

• Core Module

  Application 전체에서 사용하거나 하나의 Feature Module에서 사용하는 Service

Component 하나로만 이루어진 단순한 view여도 view 단위로 모듈을 나누기로 했으면 나눠야함

@NgModule Decorator

Metadata

Decorator에 전달하는 Metadata는 Angular에 Module code를 어떻게 compile하고 실행할지를 설명한다.

declarations

Component, Direcive, Pipe를 선언하면 선언된 구성요소는 Module에서 사용할 수 있다.

imports

Module에서 사용하는 다른 Module을 선언한다. Module은 다른 Module를 사용할 수 있다.

providers

Injectable object, 즉 Service를 선언한다. Root Module에 선언된 Service는 Application 전역에서 사용할 수 있다.

최신 버전 Angular에서는 ng generate service로 생성한 service는 @Injectable Decorator의 Metadata에 proviededIn: ‘root’로 들어감

bootstrap

CSS Bootstrap 아님

Root Module에서 사용하는 Property로 Application의 entry point인 Root Component(AppComponent) 선언

Shared Module

1
2

ng generate module shared
// ng g m shared

Shared Module은 Application 전역에서 사용되는 Component, Directive, Pipe 등으로 구성된다.

Core Module

1

ng generate module core

Core Module은 Application 전역에서 사용되는 Data Service, Authentication Service, Authentication Guard 등으로 구성된다.

1
2
3
4
5

import { CoreModule} from '../core.module.ts';

@Injectable({
  providedIn: CoreModule
})

Today I Learned

TEST

• Wrapper Object

  1 2 3 4

  'string'.length; // 6 const s = 'super' String.prototype.sayHi() = () => { console.log('Hi') }; s.sayHi(); // 'Hi

  문자열을 객체처럼 사용할 경우 JavaScript 엔진이 순간 String 생성자 함수로 wrapping 한다.

• Property Key

  • Property Key 동적 생성

  1 2 3 4 5 6 7 8 9

  var obj = {}; var key = 'hello'; // ES5: 프로퍼티 키 동적 생성 obj[key] = 'world'; // ES6: 프로퍼티 키 동적 생성 // var obj = { [key]: 'world' }; console.log(obj); // {hello: "world"}

  • Property Key는 문자열이나 symbol 값 이외의 값을 사용하면 암묵적 타입 변환을 통해 문자열이 된다. 예를 들어, 프로퍼티 키로 숫자 리터럴을 사용하면 따옴표는 붙지 않지만 내부적으로는 문자열로 변환된다.
  • Property Key로 객체를 사용해도 error가 나지 않고 들어감. 배열도 마찬가지
    
  • 객체는 [object Object]라는 String으로 변환된다. obj[string]이 되어야하기 때문에 [] 내부는 문자열로 강제 형변환된다.

  1 2 3 4 5 6 7 8 9

  const a = {}; const b = { key: 'b' }; const c = { key: 'c' }; // 두 객체 모두 Property key로 쓰일 때 문자열 [object Object]로 변환되어 같은 key가 된다. a[b] = 123; a[c] = 456; console.log(a[b]);

  

  • Property Key를 중복 선언하면 나중에 선언한 Property가 이전 것을 덮어씀

• call, apply method는 함수에 this를 전달하고 호출하지만 bind는 this를 전달한 함수를 return한다.

• Function literal과 Function declaration statement의 차이

  • 함수 이름이 있는 함수 선언문은 자바스크립트 엔진이 함수명과 동일한 식별자를 생성하고 생성한 함수 객체를 할당한다.
  • 함수 이름이 필수가 아닌 함수 리터럴은 그저 평가되어 함수 객체를 생성한다. 이를 괄호로 감싸면 에러 없이 함수 객체가 된다.

    1 2 3 4

    // 즉시 실행 함수로 함수 리터럴을 사용하는 경우 (function () { ... })()

Today I Learned

• Anguler Reactive Form을 이용해서 Netflix 회원가입과 로그인 Form을 Validation까지 구현했다.
• FastCampus Final Project로 Netflix를 클론하기로 했다.
• CSS 작업은 늘 어렵다. 그래도 transition과 box size를 잘 이용하면 뭐가 되긴 된다..

🎆 Subin Angular Netflix Form