본문 바로가기

TypeScript/Angular35

Angular - Visual Studio Code 디버깅 설정 코딩을하면서 디버깅과 테스트를 많이 하게되는데 Visual Studio code에서 Angular프로젝트를 디버깅하는 방법에 대해 알려드리겠습니다. 1.확장 설치 2.launch.json 파일 만들기 3. json파일 작성 포트번호는 자신의 포트에 맞게 변경 4. 프로젝트 빌드 5. 디버깅 6. 확인 부록 자신이 원하는 부분이 중단점을 찍어가며 확인하면 됩니다. 2020. 5. 23.
Angular - Validation(유효성검사) 기능 구현 안녕하세요. 로그인, 회원가입 등 모든 양식을 좀 더 안정적으로 받으려면 유효성 검사는 필수입니다. 준비 1.프로젝트 생성 ng g serve validation cd validation 새로운 프로젝트를 생성하고 생성된 프로젝트로 디렉토리를 변경합니다 2.컴퍼넌트 생성 ng g c simple-form --module=app.module ng g c complex-form --module=app.module ng g c formvalidation --module=app.module 3개의 Component 생성 총 3가지를 진행 할 예정입니다. 3.App.Module 설정 import { BrowserModule } from '@angular/platform-browser'; import { NgMod.. 2020. 5. 21.
angular - interceptor 설정 API에 권한 인증 설정을 하게되면 header에 token 값을 넘겨줘야합니다. 번거롭게 API 요청을 할때마다 토큰 값을 header에 넣기 번거로우니 interceptor를 통해 자동으로 header에 토큰 값을 넣도록 하겠습니다. 1. 파일 생성 및 작성 token.interceptor.ts 파일을 만들어 줍니다. 제 파일 경로는 ClientApp/src/app/service/token.interceptor.ts 입니다 import { Injectable } from '@angular/core'; import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpResponse } from '@angular/common/http'; import.. 2020. 5. 20.
Angular -- build 빌드는 개발용 빌드와 프로덕션용 빌드가 있음 개발용 빌드 : ng build 프로덕션용 빌드 : ng build --prod aot가 디폴트 JIT : Just-in-Time AOT : Ahead-of-Time jit 컴파일러 용량도 같이 빠짐 aot : 빌드시간을 아예 템플릿까지 렌더링 된 것을 가지고 있다가 한번에 보여주겠다 대강 이런 기능 JIT : 우리가 올린 소스코드의 템플릿 등을 JIT가 실제로 컴파일해서 우리한테 주면 화면에 뿌려줌 2020. 5. 19.