체유의 IT일지

Swagger API를 따로 작성할 필요없이 코드 기반으로 API를 문서로 자동화해주는 도구이다 API와 코드를 따로 작성하면서 빼먹고 놓치는 부분이 많았는데, Swagger를 통해서 코드를 수정하면서 API를 같이 수정할 수 있다는 것이 큰 장점이다. 0. Swagger 설치 NestJS v9 이상 부터는 @nesjs/swagger fastify-swagger 모듈을 설치하면 된다 npm install --save @nestjs/swagger 1. swagger 파일 생성 import { INestApplication } from '@nestjs/common'; import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger'; export functi..

Nest JS란? Node.js 기반의 Express와 같은 서버 개발 프레임워크 중 하나이다. Nest.js는 Express 위에 구축된 프레임워크로, Express의 기능을 확장해서 체계적이고 모듈화된 구조를 제공한다. Express는 정해진 아키텍처가 없어서 개발자마다 다른 구조로 작성하는 경우가 많았다. 다른 사람들이 분석하는데 어려움이 있고 아키텍처부터 파악을 해야해서 코드의 가독성이 떨어진다. 또한 Nest.js는 TypeScript 언어 기반으로 작성이 되어있어서 정적 타입 검사, 객체지향 프로그래밍 등의 기능을 제공한다. 따라서 개발 단계에서의 버그들을 사전에 방지하고 코드의 재사용성과 유지 보수성을 높여준다. Nest.js 시작 1. Nest.js 설치하기 npm i -g @nestjs/..

Repository Design Pattern Repository 패턴은 Data Layer를 app의 나머지 부분에서 분리하는 디자인 패턴이다. Service Layer와 Data Source Layer 사이에서 중재자 역할을 하는 Layer다. Service Layer에는 비즈니스 로직인 서비스의 핵심이 되는 로직이 존재한다. Repository 패턴을 적용하지 않으면 비즈니스 로직에서 바로 데이터 베이스에 접근하게 된다. 바로 접근하면 안되는 것일까? Service Layer에서 DB에 바로 접근이 가능하긴 하지만 몇 가지 문제점들이 발생할 수 있다. 프로젝트 진행시 코드가 분리되어있지 않아서 비즈니스 로직에만 집중하기 어렵다. 여러 개의 서비스가 있을 경우, 동일한 쿼리로 DB에 접근한다면 코드의..

Nest.JS를 처음으로 학습하고자, 코치님께 인프런 무료 강의를 추천받았다 강의평도 좋고 설명도 잘 되어있어서 초보자가 듣기에 매우 좋은 것 같다 다만, 한 가지 문제가 발생했다. 강의가 2021년에 게시되어서 그 사이에 TypeORM 부분의 버전이 달라졌다 ! 강의에서 에러가 나는 부분은 구글링을 통해서 해결을 해야했다 우선 실습 중인 프로젝트는 '게시글 CRUD 구현'이다. 기존 강의 실습 코드 // board.repository.ts import { Board } from './board.entity'; import { EntityRepository, Repository } from 'typeorm'; @EntityRepository(Board) export class BoardRepository..

https://ul0511.tistory.com/25 [JavaScript] 핵심 개념(1) 동기·비동기 | 이벤트 루프 | Promise 동기, 비동기 요청 작업을 순서를 지켜서 순차적으로 처리를 하는지 여부에 따라 동기와 비동기로 나눌 수 있다. 동기 처리 방식은 직렬적으로 작업을 수행하고 비동식 처리 방식은 병렬적으로 ul0511.tistory.com 위 글에서 언급은 했지만, 자바스크립트는 싱글 스레드로 비동기 작업을 처리해 주는 작업이 필요하다 비동기 작업을 처리해 주는 객체이자 패턴 중 하나는 Promise이며 이와 유사하게 async와 await도 있다 async, await 마찬가지로 비동기 처리 패턴 중 하나로 동기 처리처럼 동작하도록 구현할 수 있다. ES8에서 나온 문법으로서 비동기 ..

clearTimeout : setTimeout으로 생성한 타이머의 실행을 취소하는 기능 clearTimeout(취소할 타임아웃의 식별자) 디바운싱 빈번하게 발생하는 이벤트를 '특정 시간 이후에 한번만' 실행 시키는 최적화 기법 예를 들어 사용자가 300밀리초 동안 버튼을 5번 클릭 했다고 하면 디바운싱은 클릭에 의한 이벤트 실행이 바로 되지 않는다. 디바운싱 시간이 300밀리초로 설정되어 있다면, 사용자가 클릭을 멈추고 300밀리초가 지나고 나서야 해당 함수가 한번 실행된다. 디바운싱은 성능뿐 아니라 요청 하나하나도 모두 돈인 유료 API를 사용할 때 큰 효과를 볼 수 있다. 디바운싱은 주로 연이어 발생하는 이벤트를 단일 이벤트로 만들고 싶은 곳, 즉 빈번하게 발생하는 타이핑 이벤트의 결과 표시(검색 결..

동기, 비동기 요청 작업을 순서를 지켜서 순차적으로 처리를 하는지 여부에 따라 동기와 비동기로 나눌 수 있다. 동기 처리 방식은 직렬적으로 작업을 수행하고 비동식 처리 방식은 병렬적으로 작업을 수행한다. 비동식 처리 방식에는 네트워크 요청 작업이나 이미지 의 작업들이 해당된다. 비동기 작업을 처리하기 위한 패턴으로 콜백 함수를 이용해서 동시에 작업을 처리할 수 있도록 해준다. 자바스크립트는 싱글 쓰레드로 작동하는 언어이다. 하나의 쓰레드 = 하나의 콜 스택 = 한 번에 하나의 작업 수행 즉, 쓰레드가 하나만 있기 때문에 한 번에 하나의 작업만 수행할 수 있다. 그러나, 비동기 작업 처리를 가능하게 해주는 것이 있는데 바로 이벤트 루프이다. 이벤트 루프 기본적으로 자바스크립트가 실행되는 과정에 메모리 할당..

Mission 1. 주어진 배열의 요소가 정수인지 확인 2. 주어진 배열의 요소가 모두 정수의 제곱인지 확인 3. 빈 배열이라면 undefined를, 제곱근이 정수가 아니거나 음의 정수가 있을 경우 false를 출력 Number.isInteger() : 정수인지 확인하는 메서드 Math.sqrt() : 제곱근 계산하는 메서드 ✅ filter const isSquare = (array) => { if (array.length === 0) return undefined; let result = array.filter((e) => Number.isInteger(Math.sqrt(e))); if (result.length === array.length) return true; else return false; ..

✅ DOM요소 getElement~ 함수 getElement~ 함수의 종류가 다양함. 그 중 "getElementByID"는 html에서 id를 찾는 함수로, html 파일당 id는 1번만 사용해야함 중복이 되면 안됨 -> 's'가 붙지 않음 + 요소로 출력됨 + 인덱싱 불필요 이 외에 getElementsByTagName, getElementsByClassName, getElementsByName 등은 's'가 붙음 -> 요소들의 모음으로 출력되어 인덱싱이 필요 ✅ setInterval 함수 setInterval(func/code, delay, arg0...N) func/code: 밀리초(delay)마다 실행되는 함수나 선택적 구문을 사용한 문자열 delay: option으로 지정된 함수 및 코드 실행..

✅ 유사배열객체 : 유사배열객체는 이름 그대로 배열과 '유사한' 것으로, 배열처럼은 보이지만 실제는 key값과 length 값을 가지고 있는 개체이다. 이거처럼 0, 1, 2의 key 값들이 있고 length가 있는 객체 형태이다. getElementsByTagName, getElementsByClassName 등은 유사배열객체로 가져오기 때문에 forEach문, map, filter, reduce 등의 메서드를 사용할 수가 없다 사용하기 위해서는 배열 형태로 바꿔주는 작업이 필요하다 0️⃣ 유사배열객체 그대로 가져오는 방법 -> for문 사용 const strong = document.getElementsByTagName('strong'); for (let i=0; i 배열 1️⃣ 전개구문 전개구문은 ..