citeFred’s Blog

Blog Post

[NestJS] 0. NestJS 들어가기

Blog

About Me

citeFred’s Blog

Blog Post

[NestJS] 0. NestJS 들어가기

Blog

About Me

[NestJS] 0. NestJS 들어가기

NestJS를 통한 백엔드 서버 구축

NestJS Tutorials

[NestJS] 1. NestJS 소개

[NestJS] 2. NestJS 기본 요소

[NestJS] 3. NestJS CRUD Operation 개발

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

[NestJS] 5. DB와 TypeORM 연동

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

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

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

[NestJS] 9. 로깅과 AOP

NestJS R&D

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

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

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

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

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

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

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

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

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

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

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

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

… 계속하여 추가 기능 개발

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

[NestJS] 1. NestJS 소개

[NestJS] 2. NestJS 기본 요소

[NestJS] 3. NestJS CRUD Operation 개발

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

[NestJS] 5. DB와 TypeORM 연동

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

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

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

[NestJS] 9. 로깅과 AOP

NestJS R&D

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

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

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

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

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

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

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

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

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

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

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

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

… 계속하여 추가 기능 개발

　｜　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 클라우드 서비스와 배포

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