이 글은 NestJS를 기준으로 작성하였습니다. 데이터베이스에서 데이터를 가져올 때 TypeORM과 같은 ORM들은 클래스(엔티티)에 쿼리 결과를 매핑하여 가져온다. find, findBy와 같은 함수나 createQueryBuilder의 getMany, getOne과 같은 함수들 말이다. 본론으로 들어가기 전에 위의 함수들을 간단히 살펴보고 들어가자. find, findOne 간단한 CRUD를 만들 때 굉장히 편하다. find를 사용하면 여러 개의 데이터를 리턴받을 수 있고, findOne은 한 개의 데이터를 리턴받는다. 파라미터에 select, where, join 등을 명시해주면 원하는 데이터를 엔티티에 매핑해주어 가져올 수 있다. findBy, findOneBy는 where 조건만 파라미터로 줄 ..

만들어놓은 모델에 OmitType으로 특정 property를 제거하고 데이터를 리턴해주려고 했다. 하지만 계속해서 제거하려는 데이터가 api response에 찍혔고... 왜 이런지 보아하니 insert, update, delete시에만 class-transformer의 PickType, OmitType 등을 사용하는게 맞는듯 하다. select 시에는 직접 Exclude 데코레이터를 이용해서 특정 property를 제외시킨다고 명시해주자.

쿼리를 짜다보면 Slow Query에 부딪히는 경우가 생긴다. 데이터가 쌓일수록 점점 느려지는 쿼리를 개선해야 하는데 어떻게 해야할까? EXPLAIN 명령어를 통해서 데이터베이스 옵티마이저의 실행계획을 볼 수 있다. EXPLAIN SELECT * FROM test MySQL은 내가 알기로는 표 모양으로 실행 계획을 보여준다. 다른 SQL 또한 비슷하게 잘 보여주는 것으로 안다. 하지만 PostgreSQL은 텍스트로 실행계획을 보여주기 때문에 실행계획을 파악하기가 좀 힘들다. 그래서 PostgreSQL을 사용하는 개발자라면 이 사이트를 추천한다. explain.dalibo.com explain.dalibo.com 쿼리문 앞에 EXPLAIN (ANALYZE, COSTS, VERBOSE, BUFFERS, FO..

7/30 ~ 7/31 동안 한강나이트워크를 다녀왔습니다. 걸을 수 있는 거리는 15km, 22km, 42km로 선택할 수 있는데요. 저는 42km로 신청했습니다. 신청 마감하고나서 며칠 뒤에 기념품이 오는데요. 구성품은 아래 사진처럼 옵니다. 나이트워크 티켓 진행할 때 입을 옷과 가방, 암밴드가 기본으로 제공되고 그 외에도 화장품이나 세면도구들이 들어있더라고요! 저는 제공된 옷과 암밴드 말고는 따로 챙기지 않았습니다. 어차피 한강을 걷는거니 물도 사면 되니까요! 그렇게 7월 30일에 여의도 한강공원에서 나이트워크를 진행하게 됐습니다. 행사장에 도착하니 여러 후원사들에서 이벤트를 진행하더라고요. 다 챙겨놨습니다 ㅎ 저는 이번 나이트워크를 친구들이랑 진행했는데요. 한 친구가 닭발 양말을 나눠줘서 다 같이 신..

6월 25~26일 주말동안 GDG Campus Korea에서 주최한 여름 해커톤에 참여했다. 작년까지는 온라인으로 진행했었지만 코로나가 끝나가기에 오프라인으로 전환했다고 한다. 총 100명을 선발하여 프론트엔드 2명, 백엔드 2명 디자이너 1명으로 팀 구성을 하되, 행사 전날까지 함께할 팀원들이 누군지 알려주지 않는다. 정말로 팀원들 얼굴 보자마자 즉석에서 시작해야 하는 것이다. 주제는 행사에 가서 오리엔테이션을 진행하면서 사회문제, 환경 등 각자 주제를 선택하여 서비스를 만드는 방식으로 진행되었다. 결론부터 말하자면 정말 재밌었다. 같이 지원한 친구가 있었는데 그 친구는 떨어져서 아쉬웠다. 같은 팀은 못하더라도 같이 밤새면 재밌었을텐데... 해커톤을 시작하며 위에서 말했듯이 팀 구성은 5명이다. 해커톤..

최근에 하고 있는 작업중에 PubSub이라는 단어가 자주 보여서... 제대로 사용은 못해보더라도 이게 무엇인지 알아야 프로젝트 파악에 도움이 될 것 같다. Pub/Sub이란? 전송자와 수신자를 분리하는 다대다 비동기식 메시지 서비스 마이크로서비스를 위한 서비스라고 생각하면 된다. 아래와 같이 구글에서 제공하는 여러 서비스간의 메시지 통신에 주로 사용된다. Pub/Sub과 같은 메시지 큐 서비스로는 Kafka와 RabbitMQ가 있다고 한다. 동작 방식은 단순하다. Pub/Sub은 게시자(Publisher), 구독자(Subscriber)라는 컨셉의 애플리케이션들로 이루어진다. Publisher 애플리케이션이 메시지를 만들어 주제(Topic)로 전달하는데, Subscriber는 주제에 대한 구독을 만들어 해..

StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위해 작성되어 있다. 그런데 문제를 알아내기 위해 검사하면서 api를 한번 더 호출해버리는 문제가 있다. 하지만 StrictMode는 개발 모드에서만 활성화되기 때문에 production 환경으로 실행시에는 메서드들이 이중으로 호출되지 않는다. 그렇기에 불편을 조금 감수하더라도 큰 문제가 없다면 StrictMode를 놔두는 것이 이득일 수 있다. 물론 그래도 싫다면 main.tsx or main.jsx 에서 를 지워주면 해결이 되긴 한다. import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import './index.css';..

jest가 리액트 컴포넌트를 읽지 못하는 이슈가 있었다. 해결 방법은 매우 간단하다. // .babelrc.json { "presets": [ ["@babel/preset-react", { "runtime": "automatic" }], ] } 위와 같이 @babel/preset-react에 { "runtime": "automatic" } 을 추가해준다.

타입스크립트를 이용하여 인터페이스를 확장하는 방법은 여러가지가 있다. api를 통해서 데이터를 받을 때, 필요한 데이터 타입은 number일지라도 넘어오는 데이터 타입은 string인 경우가 있다. 인터페이스는 number로 선언했을때 이를 확장하여 string으로 바꿔주는 ResponseTodo 타입을 새로 선언해야한다면, 그냥 인터페이스를 똑같이 작성하면 된다. interface Todo { seq: number title: string description: string } interface ResponseTodo { seq: string title: string description: string } 하지만 위의 방법은 중복이 심해진다. 이럴 때 유틸리티 타입이 도움이 된다. 일단 요약하자면 다음..

회사에서 이런 코드를 보았다. const arr = [1, 2, 3]; const target = []; arr.forEach(target.push); // === arr.forEach((elem) => target.push(elem)) console.log(target) 코드를 실행시켜보니 에러가 뜬다. 원래 의도대로라면 주석처럼 forEach의 arguments가 통째로 target에 push 되어야 한다. 하지만 에러가 난다. this에 대한 제어권을 잃어서 그렇다. 우리는 this에 대해 배울때 함수를 선언한 스코프를 중심으로 설정된다고 배웠다. 하지만 콜백으로 넘기면서 this에 대한 제어권을 잃었다. 어떻게 된 것일까? 일반적으로 함수를 실행시키는건 문제가 없지만 콜백으로 함수 자체를 넘길경우..

Nest.js에서 dev모드로 서버를 실행시키면 hot reload가 동작하는데, 코드가 수정되면 서버를 새로 실행시킨다. 이러한 방법은 서버가 커질수록, 초기 실행시 실행되는 함수가 많을수록 점점 느려지기 마련이다. Nest 공식 문서에서는 이러한 점을 보완하기 위하여 변경사항만 업데이트 되는 방법을 설명해놓고 있다. 설정 방법은 Nest CLI로 생성한 프로젝트와 그렇지 않은 프로젝트 두가지로 나뉘는데, 나는 Nest CLI를 사용을 하기 때문에 Nest CLI의 경우에만 설명하겠다. Installation 어차피 개발할때만 사용할것이기 때문에 dev로 설치한다. yarn add -D webpack-node-externals run-script-webpack-plugin webpack webpack-..

Proxy와 Reflect | 기원's Study(ing) Proxy와 Reflect 개인적으로 조그만한 프로젝트를 하고 있는데, api를 이용해 외부에서 데이터를 가져오는 작업을 했었다. 그런데 response가 Proxy라는 객체로 들어오고 [[target]]이라는 프로퍼티 내부에 giwonn.github.io (이 글은 위의 링크에서 작성한 글을 티스토리로 옮긴 글입니다.) 개인적으로 조그만한 프로젝트를 하고 있는데, api를 이용해 외부에서 데이터를 가져오는 작업을 했었다. 그런데 response가 Proxy라는 객체로 들어오고 [[target]]이라는 프로퍼티 내부에 원하는 데이터가 들어있었다. 그 당시에는 변수 뒤에 target을 붙여서 데이터를 가져와서 사용했었는데 궁금증은 해결하는게 맞기에..