에러ChunkLoadError: Loading chunk 608 failed.Uncaught Error: Minified React error #423; visitvercel에 배포해놓은 몇개월 지난 애플리케이션에서 이런 에러가 생성됐다. 에러와 같이 노출된 화면에 써있던 문구application error : a client-side exception has occurred (see the browser console for more information). 잘 작동하던 애플리케이션이기 때문에 좀 당황스러웠다. 심지어 내 컴퓨터에서는 작동하는데 다른 컴퓨터에선 작동 안하는 버그였다. (이 부분은 아직도 왜 그러는지 모름ㅜㅜ)해결과정몇 시간 헤맸지만 일단 처음에는 먼저 검색을 했다.일반적으로 첫번째 에러..

이전 글에서는 GET 요청에 대해서 알아봤다.이번엔 DELETE문에 대해서 알아보자 DELETEDELETE문 도 어려운건 딱히 없다.현재 구현한 delete구문을 살펴보자Controller의 delete end-point@Delete(':id')remove(@Param('id', ParseIntPipe) id: number): Promise { return this.boardService.delete(id);}@Delete(':id') : DELETE HTTP 메서드와 경로 매개변수 정의ParseIntPipe : URL로 받은 id 문자열을 숫자로 변환main.ts의 ValidationPipe transform 설정이 true로 설정돼있다면 빼도 상관없다.커스텀으로 에러관리를 하려면 넣어주자Promis..

이전 글에서 POST 요청 하는법과 각 클래스들을 자세히 뜯어봤다.이번 글에서는 GET 요청에 대해서 간단하게 알아보려 한다. GETGET요청은 그닥 어려운건 없었지만 그래도 자세히 뜯어보자현재 구현한 코드에는 두 가지 GET요청이 있다.전체 게시글 조회// Controller@Get()getAll(): Promise { return this.boardService.getAll();}// ServicegetAll(): Promise { return this.boardRepository.find();} URL : GET /boardresponse : 모든 게시글 배열Repository메서드 : find()특정 게시글 조회// Controller@Get(':id')getOne(@Param('id', Pa..

NestJS, React, TypeORM, PostgreSQL을 사용해서 게시판을 만들어 보려고 한다.GET, POST, PATCH, DELETE, PUT을 하나하나 자세히 뜯어보고 기록하려 하기에 4챕터로 나눠서 포스팅을 하려고 한다. 시각적 흐름도NestJS를 사용하면 데이터를 Controller, Service, Module, DTO, Entity, Database를 통해 다룬다.한번에 여러게를 작업하면서 정작 데이터가 어떻게 흘러가는지 혼란이 와서 시각적으로 정리 해보려 한다.Client Request ↓ Module (조립 및 구성) ↓Controller (라우팅) ↓ DTO (검증) ↓ Service (로직) ↓ Entity (매핑) ..

why typeORM?SQL과 NoSQL DB를 통합히기 위해서, Nest는 @nestjs/typeorm 패키지를 제공함. TypeORM은 typescript에서 사용할 수 있는 가장 성숙한 ORM(Object Relational Mapper)이라고 할 수 있다. typescript로 쓰여져 잇어서 Nest 프레임워크랑도 잘 통합되어 있다.설정 방법1. 필요한 패키지 설치npm i @nest/typeorm typeorm pgnpm i @nest/config2. 데이터베이스 연결 설정app.module.ts에서 TypeORM 설정을 진행한다.import { Module } from '@nestjs/common';import { AppController } from './app.controller';impo..

MatcherJest의 Metcher는 다양한 방법으로 값을 테스트할 수 있게 해주는 메서드.모든 Matcher는 expect() 함수와 함께 사용되어 테스트 값이 특정 조건을 만족하는지 검증한다.기본구조expect(테스트할_값).Matcher(기대하는_값)Matcher 기본 개념describe('Basic Matcher Concepts', () = { it('기본적인 매칭 도구 사용법', () => { // 1. 일반적인 matcher 사용 expect(2 + 2).toBe(4); // 2. 부정 matcher 사용 expect(2 + 2).not.toBe(5); // 3. 여러 조건 체이닝 expect('hello').toBeDefined().toBeTruthy(); })})Matc..

Jest?Jest는 meta(구 페이스북)에서 만들어서 React와 더불어 많은 자바스크립트 개발자들로 부터 좋은 반응을 얻고 있는 테스팅 라이브러리 이다. Jest는 라이브러리 하나만 설치하면 Test Runner와 Test Mathcher 그리고 Test Mock 프레임워크까지 제공실제 테스트 코드 작성 예시오늘은 간단한 CRUD API를 가진 서비스를 예로 들어, Jest를 활용한 테스트 코드 작성 방법을 알아보자테스트 환경 설정먼저 NestJS에서 서비스를 테스트하기 위한 기본설정을 해야한다.service를 nest generate service 명령어로 service를 생성하면 ex.service.spec.ts 파일이 같이 생기는데 이게 생성되면 기본설정은 끝난거다.describe('TouchA..

DTO?DTO : Data Transfer Object (데이터 전송 객체)단어 그대로 데이터를 오브젝트 형태로 옮기는 것 이다. 또한, 들어오는 쿼리에 대해서 유효성 검사를 실시할 수 있다. 예시먼저 User entity에는 name, email, age와 같은 필드가 있다고 가정하면 사용자가 회원가입할 때 필요한 정보는 name, email, password일 것이다. 이를 위해 CreateUserDto를 정의하고// src/user/dto/create-user.dto.tsimport { IsString, IsEmail, IsNotEmpty, MinLength } from 'class-validator';export class CreateUserDto { @IsString() @IsNotEmpty..

NotFoundExceptionNotFoundException은 NestJS에서 제공하는 예외 클래스 중 하나로, 주로 찾고자 하는 리소스가 존재하지 않을 떄 일관된 에러 응답을 제공하기 위해 사용한다. import { Injectable, NotFoundException } from '@nestjs/common';import { ApiData } from './entities/touch-api.entity';@Injectable()export class TouchApiService { private data: ApiData[] = []; getAll(): ApiData[] { return this.data; } getOne(id: string): ApiData { const data ..