Angular-CLI를 사용하여 다음의 명령어를 실행한다

ng add @angular/material

이 포스트에서는 material에 관련된 module을 한 곳에 모아서 Angular의 핵심 모듈이 되는

app.module에서 활용할 것이다. 이렇게 material을 모으면 더 정리되어 있어 더 편하게 쓸 수 있을 것이라

고 생각한다. 아래그림에서 시작하자.

#material.ts

material.ts 파일을 생성하고 이 파일에 NgModule을 import 한다.

메인 모듈인 app.module에서 materialModule을 import한다.

다시 material.ts 파일로 돌아와서 위 그림과 같이 필요한 material모듈을 import하여 @NgModule에 import와 exports 안에 집어넣어준다.

#Material?

-Angular에서 매끄럽게 사용하기 위해서 Angular 팀에 의해서 설계되었다. -웹과 모바일 데스크탑에서 사용하고 있는 현대 UI 컴포넌트를 포함하여 사용되고 있다.

굉장히 혼란스러웠고 지금도 쉽지만은 않습니다.

그럼에도 불구하고 프로젝트 과정에서 깨닫게 되었던 점과 output의 역할에 대해서

정리해보겠습니다.

#1 @output? 무슨 뜻인가.

거두절미하고 angular에서의 output은 어떤 의미를 내포하고 있는지 알아보겠습니다.

말 그대로 '바깥으로 나가다' 의 의미를 갖고있는데, output의 개념이 어떤 상황에서 쓰일 수 있는지 그 예제를 통해 먼저 알아보겠습니다.

Angular는 부모와 자식 컴포넌트의 개념이 있습니다. 어떤 컴포넌트가 있다고 가정을 해보고 그 안에 그 컴포넌트의 html파일에서 다른 컴포넌트를 다루고 있다면 그 관계가 부모자식간의 컴포넌트가 되는 것입니다.

이 부모자식간의 컴포넌트에서 @output은 자식이 되는 컴포넌트에서 부모가 되는 컴포넌트로 무엇을 전달하기 위해서 사용하는 angular의 디렉티브(지시자)입니다.

즉, '디렉티브'라고 말하는 놈이 말그대로 어딘가 속해있는 컴포넌트(A)를 (A)를 포함하고 있는 컴포넌트(B)에 무언가를 전달하라고 지시해주는 것입니다.

#2 실전 예제

로그인에 성공한 순간에 @output을 이용하여 자식이 부모에게 어떤 값을 보내면서 sign을 전달해준다.

다음 설명드릴 예제에서는 app.component가 부모 컴포넌트이고 login.component가 자식 컴포넌트가 됩니다. #1의 설명에 의하면 login.component에서 app.component로 어떤 데이터를 전달하는데 이 때 @output을 이용해서 전달할 데이터를 지정한다는 것이죠. 먼저 login.component의코드를 살펴보겠습니다.

**로그인컴포넌트.ts**

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

 @Output() loginState = new EventEmitter<any>();


 login(){
 this.loginstate.emit(true);
 }

만약 login() 메소드가 실행이 된다면 EventEmitter의 emit 메소드에 의해서 true를 방출하게 되는 것이죠(emit) 그럼 이 방출된 true를 어디서받느냐, 바로 부모인 app.component에서 받게되는 것입니다.

즉 정리하자면, login컴포넌트에서 true 라는 값을 app.component에 전달하기위해(방출 혹은 emit) output 데코레이터를 이용한것이다.

그렇다면 이제 자식이 전달한 true라는 값을 부모가 어떻게 받느냐?

**app.component.html = 부모**

<app-login (loginState)="login_handler($event)" *ngIf="!loginOn"></app-login>

**app.component.ts**

login_handler(e){
    console.log(e);
    this.loginOn=e;
  }

위와 같이 앱 컴포넌트에는 로그인컴포넌트( <app-login> )를 자식으로 품고있다. $event @output에서 전달(방출)한 데이터를 기억하는 angular의 약속된 형태이다. 그러므로 $event에는 로그인컴포넌트에서 방출한 true라는 값이 저장이 되어있다.

결국 앱컴포넌트의 login_handler 메소드로 true가 인자로 전달이 된다.<위 그림>

그래서 login_handler가 true를 받게되고 프로퍼티 loginOn까지 true를 전달하게 되는 것이죠. 결국 ngIf에 true가 오게 되므로써 로그인 성공시 *ngIf=!true가 되면소 로그인 창은 사라지는 알고리즘이 짜여진다.

이제 코딩을 막 따라해보기 시작한 초보 코더입니다. 'A'서버의 DB 데이터를 'B'서버의 DB로 똑같이 옮겨야하는 문제를 해결하기위해 데이터를 select하여 ajax로 전송을 시도하였습니다. 콘솔 창에서 error를 확인했고 이것이 cors 정책과 관련있다는 것을 깨닫게 됬습니다.

CORS = Cross-Origin-Resource-Sharing

cors는 Cross-Origin-Resource-Sharing 약자로서 해석하자면

'교차 출처 자원 공유' 라는 뜻인데,

서로 다른 서버간에 이 '교차 출처 자원 공유'를 설정하지 않으면 error 가 발생하는 것이다.

즉 서로 다른 서버끼리 데이터를 보낼 일이 있다면 이 cors 설정을 해주면 된다.

이 CORS는 SOP 정책에 의하여 필요하게 되었다. SOP는 Same-Origin-Policy 정책으로 이것은

'어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식입니다.

동일 출처 정책은 잠재적으로 해로울 수 있는 문서를 분리함으로써 가능한 공격 경로를 줄이는데 도움을 줍니다.' 라고 MDN에서 정의하였다.

두 URL의 프로토콜 ,포트, 호스트가 모두 같아야 동일한 출처라고 말한다.

여기서 중요한 것은 나중에 프로토콜이나 포트 호스트 중 하나라도 다르면 동일출처정책에 의해서 막힐 수도 있다는 것을 기억해놓는게 좋겠다는 생각이 든다.

HEADER

header는 클라이언트에서 서버로 요청에 대한 정보를 서버로 보낼 때 , 서버에서 응답할 때의 header가 있다.

즉, 요청 헤더와 응답 헤더가 있는데,

요청 헤더로는

1. Origin
2. Access-Control-Request-Method
3. Access-Control-Request-Headers

응답 헤더로는

1. Access-Control-Allow-Origin
2. Access-Control-Allow-Credentials
3. Access-Control-Expose-Headers
4. Access-Control-Max-Age
5. Access-Control-Allow-Methods
6. Access-Control-Allow-Headers

가 있다.

CORS 요청을 수신하는 서버는 요청을 처리하며, 요청된 컨텐츠와 함께 일련의 CORS 응답 헤더를 다시 브라우저로 전송할 수 있다.

이러한 CORS 응답 헤더는 현재 웹 페이지가 해당 리소스에 액세스하도록 허용되는지 여부, 전송된 헤더가 해당 요청에 대해 허용되는

지 여부 등을 지정하는 값을 포함한다.

브라우저가 CORS 응답 헤더에 의해 충족된 CORS 요청을 파악할 수 없으면 자동으로 컨텐츠에 대한 액세스 및 컨텐츠 로드를 금지한

다.

그렇지 않으면 CORS 원본이 리소스를 사용할 수 있는 지정된 권한이 있는지 파악하고 요청된 컨텐츠에 대한 액세스 및 컨텐츠 로

드를 허용한다.

설정

여러가지 상황에 따라서 설정이 달라질거라 예상하지만 나의 경우 간단한 데이터 보내기였기 때문에 이 때 설정 header는 간단했다.

(하지만 다 써놓고보니 그랬던 것일 뿐 CORS 자체를 몰랐으니 정말 해맸다 ;)

나의 업무가 PHP서버를 유지 보수 하는 일이었기 때문에 PHP에서 HEADER를 설정했다.

위 이미지에서 알 수 있듯이

header('Access-Control-Allow-Origin: *)

에스타르크 * 는 모든 origin을 의미하고 특정 url에서의 요청만을 허용하겠다하면 *(에스타르크) 부분에 특정 url을 적어주면 된다.

header('Access-Control-Allow-Headers: )

여기서는 지정한 header에 대해서 응답할 수 있게 해주는 처리부분이다.

header('Access-Control-Allow-Method': GET,POST,OPTION)

error

서버에서 타 호스트/포트에 대한 origin의 설정이 없을 경우에 이러한 error를 반환한다.

스코프란 범위라는 의미를 가지고 있습니다. 먼저 2가지 유형의 스코프가 있는데, 바로 전역스코프와, 지역스코프입니다.

저는 초보개발자입니다. 아직 개발공부를 시작한지 얼마 안되었는데요, 제가 혼란을 많이 가지게 되는 원인 중에 하나는 영어와 한글이 혼용되어 사용하다보니 의미의 전달이 헷갈릴때가 많았습니다.

그래서 저는 여기에 의미를 분명하게 밝혀 우리가 배우고자 하는 것들의 존재 이유에 대해서도 잘 정리해보고자 합니다.

scope , 범위 , 변수 헷갈리네?

조금 공부를 하시다 보면 전역변수, 지역변수 혹은 누구는 전역스코프, 지역스코프 이렇게 혼용해서 부르는 경우를 간간히 보게 됩니다. 저는 주제가 scope 이니 scope를 기준으로 정리해보겠습니다. 일단은 global = 전역 , local = 지역 , scope = 범위 라고 생각하세요.

Global scope, Local scope ,영향을 미치는 범위

위에서 scope는 범위라고 하였죠. 한국말로 생각해보면 global scope는 전역 범위입니다. 전역범위의 뜻을 잘 이해할 필요가 있는데요. 쉽게 풀어서 "전 지역에 자신의 영향력을 미친다."

예를 들어 어떤 변수에 값을 부여했다고 해봅시다.

var a = "yes";

function test(){
    var a = "no";
        console.log(a);
        }

test();

console.log(a);

자 위의 예시를 보면 변수 a에 "yes" 라는 값을 부여했고(할당했고), 밑에는 test라는 function이 선언되어있습니다.

하지만 a라는 변수가 test 함수 내에도 존재하죠? 이 때 변수가 미치는 영향력이 달라집니다. 결론적으로, test 안에 있는 var a 는 test 함수 안에서만 영향력을 미칩니다.

test함수 윗 줄에 존재하는 var a는 함수 내에 존재하지 않기 때문에 전 범위, 즉 전역에 영향을 미치는 것입니다. 이게 global scope 이죠.

그렇다면 test(); 맨 밑줄의 console.log(a)는 어떤 값을 콘솔에 출력하게 될까요?

test()는 함수 내에 영향을 미치는 var a ="no"라는 local scope가 존재하기 때문에 변수의 "no"값이 console.log("no")가 되기 때문에 "no"라는 결과를 콘솔창에 실행시킬 것입니다.

하지만 마지막 console.log는 가장 맨 윗줄의 a 변수의 영향을 받습니다. 왜냐하면 맨 윗줄의 var a ="yes" 는 어느 함수에 포함되어있지 않기 때문이죠.(위의 로직 기준)

그러므로 맨 윗줄은 global 즉, 전역에 영향을 미치기 때문에 마지막 console.log는 "yes"값을 콘솔에 실행시킬 것입니다.

전역에 영향을 미치는 global scope의 의미를 하나 더 보여드리겠습니다.

var a = "yes";

function test(){
    console.log(a);
    }

test();    //  yes

예제를 조금 바꾸어 보았습니다. test함수에 위의 예제에 있던 지역변수가 사라졌습니다. 그렇다면 test함수를 실행시킨 값은 어떻게 나올까요? 정답은 yes입니다. 왜냐하면 지역에서 영향력을 미치는 변수가 사라지면서 test함수는 a값을 이제 자신 함수 외부에서 찾습니다. 이때 전역에 영향을 미치던 var a = "yes"의 영향을 받은 것이죠. 그 영향을 받아 console.log(a)가 실행되어 test() 는 콘솔창에 yes를 실행시키게 됩니다.

정리하자면 local scope는 함수내에서 영향력을 미친다는 뜻이고 local variable(지역변수)이 그렇습니다. 그러므로 지역변수가 함수내에 존재한다면 그 함수는 지역범위의 영향을 받는 것이고 그 변수가 존재하지 않는다면 전역에 영향을 미치는 즉, global scope의 영향을 받아 전역변수의 값을 부여받게 되는 것입니다.

이제 조금 이해가 가시나요? 부족한 설명이지만 저도 너무 어렵게 이해하려하기 보다 최대한 쉬운 방향으로 이해하는게 초심자의 입장에서는 더 낫겠다는 생각이 들었습니다. 혹시 글을 읽어보시고 수정해야 할 부분이 있다면 알려주시면 감사합니다. 저에게 큰 도움이 됩니다. 읽어주셔서 감사합니다.