방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com Angular tutorial39 Nestjs 프레임워크 서버(인터셉터) -6 #인터셉터(Interceptor) 인터셉터는 컨트롤러가 동작하기 전에 사용자가 정의하는 행동을 하는 것을 의미 합니다. nestjs에서 인터셉터를 만드는 것은 어렵지 않습니다. NestInterceptor 라는 인터페이스를 상속받은 뒤에 @Injectable 데코레이터를 붙여주면 기본적인 인터셉터 모양을 만들 수 있습니다. * 파일이름 : app.일반인터셉터.ts import { Injectable, NestInterceptor, ExecutionContext, CallHandler, } from '@nestjs/common'; import { Observable } from 'rxjs'; import { tap } from 'rxjs/operators'; @Injectable() export class.. 2022. 8. 10. Nestjs 프레임워크 서버(구조 및 컨트롤러) -2 nest.js에서 기본적인 구조는 메인 - 모듈 - 컨트롤러의 3단계를 따르고 있습니다. * 아..앵귤러(Angular)! 메인(Main)파일은 가장 먼저실행할 모듈을 정하거나 글로벌하게 사용할 기능을 추가하는 역할을 담당 합니다. 또한 포트번호를 바꾼다던지 cors관련 설정을 한다 던지 웹 어플리케이션의 전체의 기능을 관리 합니다. 모듈(Module)은 실제 동작을 수행하는 컨트롤러를 묶어주는 역할을 합니다. 또한 providers라는 속성을 통하여 컨트롤러에게 각종 데이터를 공유해주는, 의존성을 주입(inject) 해주는 역할을 제공 하기도 합니다. 이러한 모듈은 단위모듈로 생성이 가능하여 다른 모듈에서 사용 가능하게 export 하거나 import를 할 수 있습니다. 컨트롤러(Controller)는.. 2022. 6. 29. 앵귤러 튜토리얼(Angular tutorial) - 35 : 프록시(proxy) 이번 시간에는 개발과 관련된 프록시(proxy)라는 주제로 살펴보려 합니다. 프록시의 기본 의미는 간접, 대신 의 의미로 무언가 대신하여 주는 기능을 의미 합니다. 이번에 소개할 앵귤러에서의 프록시는 프로젝트 개발 중 에서 다른 서버와의 연동을 의미 합니다. 앵귤러 프로젝트는 순수 클라이언트 언어로 구성되어 있습니다. * 조금 더 상세한 구성을 알고 싶으면 아래 링크를 통해 확인하여 주세요. lts0606.tistory.com/329 앵귤러 튜토리얼(Angular tutorial) - 2 : 구성 앵귤러 환경구성은 문제없이 잘 끝내셨는지요! 이번시간에는 앵귤러를 왜 쓰는지, 어떻게 사용해서 실제로 적용하는지에 대해서 먼저 살펴보도록 하겠습니다. 예전의 HTML에서의 개 lts0606.tistory.com.. 2020. 12. 21. 앵귤러 튜토리얼(Angular tutorial) - 34 : 이벤트와 애니메이션(2) 저번시간에는 마우스 이벤트를 감지하여 앵귤러에서 어떻게 데이터와 화면을 구성하는지에 대해서 살펴 보았습니다. 이번시간에는 비슷한 내용인 에니메이션(animations)에 대해서 살펴 보겠습니다. Javascript의 라이브러리 중 유명한 Jquery라는 라이브러리가 있습니다. animate, fadeIn, fadeOut 및 draggable등 다양한 함수를 통해서 이벤트를 지원해주는 멋진 라이브러리 입니다. 마찬가지로, 앵귤러에서도 이러한 애니메이션 이벤트를 직접 다루어 볼 수 있습니다. 버튼을 눌러서 특정 애니메이션을 주는 기능을 만들어 보겠습니다. 프로젝트는 저번과 동일한 프로젝트인 sixStudy에 진행하겠습니다. 먼저 모듈을 설정하여 줍니다. * 대상 : app.module.ts import { .. 2020. 10. 28. 앵귤러 튜토리얼(Angular tutorial) - 33 : 이벤트와 애니메이션(1) 저번시간에 우리는 Validator와 관련된 내용을 살펴 보았습니다. 이번시간에는 브라우저 이벤트를 감지하여 처리하는 방법에 대해서 조금씩 살펴 보겠습니다. 프로젝트는 기존에 만든 sixStudy를 그대로 사용하겠습니다. 먼저 살펴볼 내용은 마우스와 관련된 이벤트 처리방법 입니다. 사용자의 마우스와 관련된 이벤트 감지는 간단하게 속성만 달아주면 손쉽게 부여할 수 있습니다. 이를 위해 사용자가 특정 영역을 드래그(drag)하는 기능을 만들어 보도록 하겠습니다. * 대상 : app.component.html Drag Area div 테그에 4개의 속성과, ngStyle이라는 디렉티브를 추가하였습니다. ngStyle에는 해당 테그의 스타일과 관련된 내용이 들어갈 예정이며 나머지 4개의 속성에는 이벤트를 위한 .. 2020. 10. 16. 앵귤러 튜토리얼(Angular tutorial) - 31 : 디렉티브 활용 저번시간까지 라우터, 모듈 등에 대해서 살펴보았습니다. 이번시간에는 디렉티브(directive)에 대해서 동작원리를 살펴보려고 합니다. 디렉티브는 일반적으로 html 페이지에서 사용하며 자주 사용한 디렉티브(지시자)로는 ngIf나 ngFor등이 있었습니다. 디렉티브(지시자)를 활용하면 화면을 구성할 때 매우 편리하게 만들수가 있었습니다. 이러한 디렉티브(지시자)는 사용자에 의해서 만들수도 있습니다. 앵귤러의 규칙답게 디렉티브 데코레이터와 class파일을 통해서 지시자를 만들수가 있습니다. 프로젝트는 새로 만들거나 아니면 기존 프로젝트를 이어서해도 상관 없습니다. 여기서는 fiveStudy프로젝트를 그대로 사용하였습니다. 아래 명령어를 입력하여 봅니다. * 명령어를 통해 만든 디렉티브는 모듈에 자연스럽게 .. 2020. 9. 28. 이전 1 2 3 4 ··· 7 다음
