NestJS

# of Posts

1 more property

NestJS Course

1. 백엔드 NestJS+내장 Express 컨테이너화 및 실행

1.1 Dockerfile 및 .dockerignore 작성

•

MP_Project/Back-end/Dockerfile 생성

•

MP_Project/Back-end/.dockerignore 생성

1.2 이미지 빌드

•

터미널 MP_Project/Back-end/ 경로(Root)에서

•

Docker-Desktop에서 생성된 NestJS 백엔드 프로젝트가 빌드된 이미지 확인

1.3 컨테이너 실행

•

CLI를 통한 이미지→컨테이너 실행 명령어

[Docker] Docker VM 활용 통합 배포와 CI/CD 파이프라인 구축

NestJS를 통한 백엔드 서버 구축

NestJS Tutorials

　｜　Main Page　｜　Category　｜　 Tags　｜　About Me　｜　Contact　｜　Portfolio

[NestJS] 0. NestJS 들어가기

1. NestJS의 공식 문서 살펴보기

Documentation | NestJS - A progressive Node.js framework

Nest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with TypeScript and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Reactive Programming).

https://docs.nestjs.com/

1.1 소개

NestJS?

1.2 철학

NestJS의 방향성

2. NestJS의 기술 선택 근거

2.1 서버 프레임워크 중 높은 인지도를 가지고 있는 Node.js 기반

Node.js의 흥행, 그러나 문제점이 될 수 있는 부분도 존재

[NestJS] 1. NestJS 소개

1. 프로젝트 기본구조

1.1 프로젝트 생성

프로젝트 생성 하기

1.2 프로젝트 기본 요소

src 폴더

그 외 중요 요소

[NestJS] 2. NestJS 기본 요소

1. 게시글 엔터티 설계

엔터티란?

게시글이 가지게되는 속성은 어떤것들이 있을까?

board.entity.ts

board-status.enum.ts

2. READ 1 - 모든 게시글을 조회하는 기능

boards.service.ts

[NestJS] 3. NestJS CRUD Operation 개발

1. 유효성 검사에 대하여

올바르지 않은 데이터를 걸러내고 보안을 유지하기 위한 기본 검사

프론트엔드에서의 유효성 검사

2. 파이프(Pipe) 개념과 종류

Documentation | NestJS - A progressive Node.js framework

https://docs.nestjs.com/pipes

Pipe란?

[NestJS] 4. Pipe를 통한 유효성 체크와 예외처리

1. 데이터베이스 환경 구축

1.1 데이터베이스란?

데이터베이스(Database)는 데이터를 체계적으로 저장하고 관리하는 시스템, 데이터의 집합을 이야기 한다.

DBMS란? DBMS(Database Management System)

RDBMS란?

NoSQL? Not Only SQL

1.2 MySQL 설치

[NestJS] 5. DB와 TypeORM 연동

1. Service 계층 리팩토링

임시DB에서 MySQL, TypeORM을 적용했으므로 Service 계층 코드를 전체적으로 수정한다.

2. Controller 계층 리팩토링

위 Service 계층 수정사항에 따라 일부 반환 타입등에 Promise가 추가되었으므로 아래처럼 Controller도 수정한다.

•

임시 주석을 해제하고 일부 변경 사항을 확인하여 수정한다.

•

단일 객체 반환은 Promise<Board> 리스트 배열 반환은 Promise<Board[]> 와 같다.

•

boards.controller.ts

[NestJS] 6. DB+TypeORM → CRUD Operation 연동 리팩토링 | 🎯 중요

1. 인증과 인가 구현을 위한 배경 지식

1.1 인증과 인가의 용어 정리

인증(Authentication)

인가(Authorization)

1.2 웹 어플리케이션의 특수한 환경의 이해

인증과 인가를 구현하기 전에 우리가 개발하고 있는 웹 서비스가 어떠한 환경을 기반으로 하고 있는지 좀 더 정확하게 이해할 필요가 있다.

[NestJS] 7. 회원가입 및 로그인 인증 구현과 JWT | 🎯 중요

논리적 문제 해결 프로세스

1. User와 Board 엔터티의 현재 상황(문제의 인식)

1.1 엔터티 관계 설계 시 기본 과정(문제해결방안 탐색1)

[NestJS] 8. 엔터티의 연관 관계(Relationships) feat. 문제 인식과 해결

1. Log란?

2. NestJS의 로깅

Documentation | NestJS - A progressive Node.js framework

https://docs.nestjs.com/techniques/logger

[NestJS] 9. 로깅과 AOP

1. 현재까지 진행된 상태에서 짚어 볼 수 있는 문제점

1.1 컨벤션(Convention) 이란?

1.2 명명 규칙 오류 발견하기

[NestJS] 10. 프로젝트 문제 인식과 컨벤션 리팩토링, 트러블 슈팅

1. 파일 업로딩과 스트리밍

1.1 뷰 템플릿 엔진

•

목표: NestJS에서 뷰 템플릿 엔진을 사용하여 서버 사이드 렌더링(SSR) 구현

•

문서: NestJS - View Template Engine

Documentation | NestJS - A progressive Node.js framework

https://docs.nestjs.com/techniques/mvc

•

서버 측에서 HTML 템플릿을 렌더링하여 클라이언트에 동적인 콘텐츠를 제공

1.2 파일 업로드

•

목표: 파일을 서버로 업로드하고 관리하는 기능 구현

•

문서: NestJS - File Upload

Documentation | NestJS - A progressive Node.js framework

https://docs.nestjs.com/techniques/file-upload

•

사용자 파일 업로드, 프로필 사진 등 다양한 파일을 서버에 저장

1.3 파일 스트리밍

•

목표: 서버에서 클라이언트로 대용량 파일을 스트리밍하는 기능 구현

[NestJS] 11. 심화 목표 키워드

1. 다음 우편번호 API 서비스 활용하기

Daum 우편번호 서비스

우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.

https://postcode.map.daum.net/guide

[NestJS] 12. Kakao 다음 우편번호 API 주소 입력 추가

1. 페이징 기능 추가

2. 프론트엔드 무한스크롤 참고 자료

[NestJS] 13. 게시글 페이징(Pagenation)과 무한스크롤(Infinity Scroll)

1. OAuth란?

2. 카카오 개발자(Kakao Developers) 앱 생성

3. API 사용을 위한 여러 환경 구축

[NestJS] 14. Kakao API 소셜 로그인 기능 구현(OAuth)

1. Client Side Rendering이란?

2. IONIC, Angular 환경 구축해보기

[NestJS] 15. CSR과 프론트엔드의 API 요청(Fetch API / HttpClient API)

1. File Input/Output이란?

2. Multipart/form-data란?

3. Multer 라이브러리

[NestJS] 16. 파일 입출력(I/O) 기능 구현

1. MVP 기능 구현 추가 계획

2. 게시글 CRUD 구성

2.1 현재 상태 점검

[NestJS] 17. 게시글 및 회원 관리 기능 보완(CRUD) 리팩토링

1. 인증(Authentication)과 인가(Authorization)의 이해 복습

1.1 인증과 인가의 용어 정리

인증(Authentication)

인가(Authorization)

1.2 Angular에서의 Guard 사용

Angular

The web development framework for building modern apps.

https://angular.dev/guide/routing/common-router-tasks#preventing-unauthorized-access

[NestJS] 18. 프론트엔드의 접근 권한 설정(Guard)과 데이터 로드(Resolver)

Migrating from ion-slides to Swiper.js | Ionic Documentation

Set Up Swiper.js for Angular Slides [Example] | Ionic

https://ionicframework.com/docs/angular/slides

Swiper - The Most Modern Mobile Touch Slider

The Most Modern Mobile Touch Slider

https://swiperjs.com/

Swiper API

The Most Modern Mobile Touch Slider

https://swiperjs.com/swiper-api#css-styles

1. 프론트엔드 Slide 기능 구현

1. Swiper.js 설치

2. Swiper 설정

[NestJS] 19. Slide(Swiper) 기능 구현

1. 시스템 아키텍쳐(System Architecture)

1.1 System Architecture란?

1.2 문서화(Documentation)

[NestJS] 20. Architecture Diagram 그리기와 README.md 프로젝트 소개 꾸미기

1. AWS란?

클라우드 서비스 | 클라우드 컴퓨팅 솔루션| Amazon Web Services

Amazon Web Services는 안정성이고 확장 가능하며 저렴한 클라우드 컴퓨팅 서비스를 제공합니다. 무료로 가입하여 사용량에 따라 요금을 지불하세요.

https://aws.amazon.com/ko/

2. AWS 사용 준비

2.1 회원 등록(최초 1회)

[NestJS] 21. AWS 클라우드 서비스와 배포

클라이언트 약식 소셜 로그인(OAuth)을 백엔드 서버 중심 인증방식으로 변경

•

보안 및 관례상 프로덕션 환경에서는 Credential 획득 및 관리를 백엔드에서 처리하는 것이 일반적인 관례이자 더 안전한 방식

•

따라서 이전 클라이언트 사이드로 Credential을 전달하던 약식 구현에서 백엔드 중앙집중식 구현으로 변경하고자 한다.

1. 백엔드에서의 Passport를 통한 구글 로그인 전략 구성

•

백엔드의 기존 JWT 활용 인증/인가 구현의 방식처럼 Passport를 통한 Google Auth Strategy를 추가 구성하려고 한다.

1-1. Google Auth 라이브러리 설치

•

아래 명령어를 통해 Google 인증 모듈을 설치할 수 있다. 이는 카카오 로그인 처럼 해당 모듈에 이미 정의된 내장 함수들을 통해 쉽고 빠르게 구현 할 수 있다.

1-2. GoogleStrategy 생성

•

기존 인증전략 파일이 모여있는 곳에 아래 코드를 작성한다.

[OAuth2.0] Google Social Login 구현 - 백엔드 중앙 관리식 로직 구현

소셜 로그인은 모두 비슷한 과정

•

이전 카카오 로그인 구현과 결과적으로 동일한 과정을 거친다.

•

실제 애플리케이션에서 구현하는 과정을 정리

1. 구글에서 애플리케이션 생성

console.cloud.google.com

https://console.cloud.google.com/

•

프로젝트 만들기

1-1. 동의화면 구성

•

콘솔에서 OAuth 동의화면을 먼저 생성해준다.

[OAuth2.0] Google Social Login 구현 - 클라이언트 사이드 약식

데이터 바인딩을 위한 @Input 데코레이터

Angular에서 데이터 바인딩을 위한 데코레이터는 주로 @Input()을 사용하여 부모 컴포넌트로부터 값을 받아오는 데 사용됩니다. 이 데코레이터는 자식 컴포넌트에서 부모 컴포넌트의 데이터를 바인딩할 수 있게 해줍니다.

다음은 Angular에서 @Input() 데코레이터를 사용하여 데이터 바인딩을 구현하는 간단한 예시입니다.

자식 컴포넌트 생성
먼저 자식 컴포넌트를 생성하고, @Input()을 사용하여 데이터를 받을 준비를 합니다.

부모 컴포넌트 생성
부모 컴포넌트에서 자식 컴포넌트를 사용하고, 데이터를 전달합니다.

모듈에 컴포넌트 추가
모듈 파일에 자식 컴포넌트를 추가합니다.

결과
이제 Angular 애플리케이션을 실행하면, 부모 컴포넌트에서 자식 컴포넌트로 데이터가 바인딩되어 표시됩니다. 자식 컴포넌트는 부모의 데이터를 받아서 화면에 출력하게 됩니다.

이렇게 @Input() 데코레이터를 사용하여 Angular에서 데이터 바인딩을 구현할 수 있습니다.

Angular의 @Input 데코레이터 사용 방법

Standalone?

Angular에서 "Standalone" 컴포넌트는 Angular 14 이상에서 도입된 기능으로, 모듈 없이 독립적으로 사용할 수 있는 컴포넌트를 의미합니다. 이는 컴포넌트의 재사용성과 관리성을 높이며, 더 간편하게 애플리케이션을 구성할 수 있게 해줍니다.

Standalone 컴포넌트의 특징

모듈 불필요: 기존의 Angular 컴포넌트는 반드시 모듈에 포함되어야 했지만, Standalone 컴포넌트는 독립적으로 사용할 수 있습니다.

간편한 사용: 컴포넌트를 다른 컴포넌트에서 직접 사용할 수 있어, 불필요한 모듈 의존성을 줄일 수 있습니다.

Lazy Loading 지원: Standalone 컴포넌트는 Lazy Loading을 지원하여, 필요할 때만 로드할 수 있습니다.

Standalone 컴포넌트 생성 예시 다음은 Standalone 컴포넌트를 생성하는 방법입니다.

Standalone 컴포넌트 사용 이제 다른 컴포넌트에서 Standalone 컴포넌트를 사용할 수 있습니다. 예를 들어, 부모 컴포넌트에서 사용해 보겠습니다.

모듈에 등록하지 않고 사용 Standalone 컴포넌트는 모듈에 등록할 필요가 없으므로, 다음과 같이 사용할 수 있습니다.

컴포넌트의 standalone의 필요성과 적용 범위 고려