지수와 블로그

[PostgreSQL] Sequence 값이 이상하다?! - Caching과 Gapless Assignment

이제곱 — Sun, 6 Apr 2025 01:02:31 +0900

PostgreSQL Docker image를 사용하여 개발하던 도중 이상현상을 발견했다.
Serial (auto increment integer) 필드 값이 내가 넣은 레코드 수보다 분명히 더 큰 값으로 설정되고 있었다.
처음에는 잘못봤겠거니.. 했는데 반복적으로 일어나는 현상이었다.

원인 파악을 위해 sequence 를 살펴봤다.

문제 상황

1. 비정상적인 종료 시 `log_cnt`만큼 `last_value`가 올라간다.

db가 비정상 종료되었다가 재실행 되면 last_value가 log_cnt만큼 업데이트 된다는 것을 확인했다.

new_keep=# insert into users(email, nickname, login_type) values('dsaaaaaaaaadsaa', 'nickname', 1);
INSERT 0 1
new_keep=# select * from users_user_id_seq;
 last_value | log_cnt | is_called
------------+---------+-----------
        170 |       0 | t
(1 row)

new_keep=# insert into users(email, nickname, login_type) values('dsaaaaaaaaaddsaa', 'nickname', 1);
INSERT 0 1
new_keep=# select * from users_user_id_seq;
 last_value | log_cnt | is_called
------------+---------+-----------
        171 |      32 | t
(1 row)

2. Insert를 실패해도 sequence 값이 올라간다.

insert를 실험하다 또 다른 사실을 발견했다. insert의 성공/실패 유무와 관계없이 sequence 값은 증가하게 된다.

unique 조건 위배

not null 조건 위배

unique, not null 제약조건에 위배되어 insert가 실패하는 상황이다.

당연히 insert에 실패하면 sequence도 증가하지 않을것이라고 생각했는데, 예상과 달랐다.

원인

알고 보니 이건 PostgreSQL의 정상 작동 방식이었다.
그리고 발생 원인이 정말 정직하게 PostgreSQL 문서에 적혀있었다.

Sequence는 gapless 할당을 보장할 수 없다.

https://www.postgresql.org/docs/16/sql-createsequence.html

v16 사용중이므로 16 문서를 참고하였다.

Because nextval and setval calls are never rolled back, sequence objects cannot be used if “gapless” assignment of sequence numbers is needed. It is possible to build gapless assignment by using exclusive locking of a table containing a counter; but this solution is much more expensive than sequence objects, especially if many transactions need sequence numbers concurrently.

“gapless” assignment를 보장해야 할 때는 sequence object를 사용할 수 없다.
counter를 포함한 테이블을 lock 해서 gapless (순서 사이에 빈칸 없음)을 보장할 수 있지만 굉장히 고비용, 비효율적

즉 nextval() 호출은 절대 롤백되지 않아서 sequence 객체는 연속적인(gapless) 번호 할당을 보장할 수 없다는 것이다.
대안인 테이블 lock이 있긴 하지만 성능이 많이 떨어진다.

Session이 종료되면 Cache를 잃는다.

Unexpected results might be obtained if a *cache* setting greater than one is used for a sequence object that will be used concurrently by multiple sessions. Each session will allocate and cache successive sequence values during one access to the sequence object and increase the sequence object's last_value accordingly. Then, the next *cache*-1 uses of nextval within that session simply return the preallocated values without touching the sequence object. So, any numbers allocated but not used within a session will be lost when that session ends, resulting in “holes” in the sequence.

각 세션은 sequence에 접근할 때 여러 값을 미리 할당받아 캐싱한다.
세션 종료 시 사용하지 않은 캐시들은 모두 소멸된다.

둘을 종합해서 보면 sequence는 연속성을 보장할 수 없고, 세션 종료 시 캐싱된 sequnce 값이 소멸된다.

그럼 어떤 경우에 Cache를 잃을까?

Graceful Stop에 실패했을 때가 cache를 잃을 때라고 생각하고 가설을 검증하기 위해 테스트를 해봤다.

1. 정상 종료 케이스

종료 후 재실행해도 last_value는 종료 전과 동일하다.

`docker compose down`

`docker compose stop`

ctrl+C (SIGINT - graceful stop)

2. 비정상 종료 케이스

last_value가 log_cnt만큼 증가한다.

`docker compose kill`

docker kill 커맨드는 SIGKILL을 보내므로 (Forces running containers to stop by sending a SIGKILL signal. - docker 공식 문서) gracefully stopping이 되지 않는다.

ctrl+C를 누르고 종료되고 있는 와중에 ctrl+C를 또 누르는 경우

맨 처음 이 현상을 발견하게 된 계기로 성격 급한 한국인의 면모를 보여준다.
ctrl+C는 graceful stop하지만 한 번 더 누르면 graceful 하지 못한 stop이 된다.

`log_cnt`는 뭘까?

여기서 주목할 점은 last_value가 log_cnt만큼 증가했다는 것이다. 그럼 log_cnt는 무엇일까?

PostgreSQL에서 sequence 테이블을 조회하면 볼 수 있는 열이다:

new_keep=# select * from users_user_id_seq;
 last_value | log_cnt | is_called
------------+---------+-----------
        171 |      32 | t
(1 row)

log_cnt는 현재 세션에서 캐시한 시퀀스 값의 수를 나타낸다. 이 값들은 WAL(Write-Ahead Logging)에 로깅된 값들이다.
PostgreSQL 소스 코드를 살펴보면 log_cnt의 정확한 역할을 알 수 있다.

postgres/src/backend/commands/sequence.c의 int64 nextval_internal(Oid relid, bool check_permissions) 함수 일부이다.

https://github.com/postgres/postgres/blob/5db3bf7391d77ae86bc9b5f580141e022803b744/src/backend/commands/sequence.c#L623

postgres/src/backend/commands/sequence.c at 5db3bf7391d77ae86bc9b5f580141e022803b744 · postgres/postgres

Mirror of the official PostgreSQL GIT repository. Note that this is just a *mirror* - we don't work with pull requests on github. To contribute, please see https://wiki.postgresql.org/wiki/Subm...

github.com

/* Decide whether we should emit a WAL log record. */
if (log < fetch || !seq->is_called)
{
    /* forced log to satisfy local demand for values */
    fetch = log = fetch + SEQ_LOG_VALS;
    logit = true;
}

여기서 log는 시퀀스 튜플의 log_cnt 값이다. (이전에 log = seq->log_cnt;로 초기화된다.)
필요한 값보다 적을 경우 SEQ_LOG_VALS(32)만큼 추가로 할당한다.

이후 트랜잭션이 종료될 때 다음과 같이 최종 상태를 업데이트한다.

/* Now update sequence tuple to the intended final state */
seq->last_value = last;     /* last fetched number */
seq->is_called = true;
seq->log_cnt = log;         /* how much is logged */

이를 통해 log_cnt는 실제로 WAL(Write ahead logging)에 로깅된 시퀀스 값의 수를 추적하며, 이 값들이 캐시되어 있다가 비정상 종료 시 손실된다는 것을 알 수 있다. 소스 코드의 주석 /* how much is logged */ 에서도 이 값이 로깅된 값의 수를 나타냄을 명시하고 있다.

[Docker] 이미지 크기 줄이다 chown한테 맞은 이야기

이제곱 — Sun, 30 Mar 2025 22:35:14 +0900

때는 바야흐로 너에게 닿기를 프로젝트에 합류하기로 결정하고 처음으로 코드를 살펴볼 때였다.
기존 백엔드 개발자 분들이 개인 사정으로 모두 떠난 프로젝트에서 백엔드 개발을 혼자 맡게 되었다.

낯선 코드 속에서 정신이 혼미해졌지만, 우선 기존 코드와 설정을 파악하며 프로젝트의 흐름을 정리해 나갔다.

그러던 중 Dockerfile에서 개선할 수 있는 부분을 발견했다.

기존 Dockerfile

기존 Dockerfile은 다음과 같다.

FROM node:22-slim

WORKDIR /app

RUN npm install -g pnpm

RUN apt-get update && apt-get install -y \
    git \
    vim \
    && rm -rf /var/lib/apt/lists/*

COPY package.json pnpm-lock.yaml ./

RUN pnpm install

COPY . .

EXPOSE 3000

ENTRYPOINT ["pnpm", "run", "start:dev"]

Dockerfile을 살펴보니 pnpm을 사용한 설치 과정이 있었고, 실행 시 pnpm run start:dev를 사용하고 있었다.
해당 커맨드는 개발 환경에서 파일 변경을 지속적으로 모니터링하여 불필요한 리소스를 소모하는 nest start --watch로 alias 되어있으므로 운영환경에서는 부적절하다.

개발 환경이 아닌 운영 환경에 적합하도록 entrypoint를 node dist/main으로 변경하고, multi-stage build를 적용하여 이미지 크기를 최적화하기로 했다.

Multi-stage build 적용

entrypoint를 node dist/main으로 바꾸고 multi-stage build를 적용하였다.

FROM node:22-slim AS base
WORKDIR /app
ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable

FROM base AS prod-deps
COPY package.json .
COPY pnpm-lock.yaml .
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile

FROM base AS build
COPY . .
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
RUN pnpm run build

FROM base
COPY --from=prod-deps /app/node_modules /app/node_modules
COPY --from=build /app/dist /app/dist

RUN apt-get update && apt-get install -y \
    git \
    vim \
    && rm -rf /var/lib/apt/lists/*
# 애플리케이션 디렉토리의 소유권을 node 사용자로 변경
RUN chown -R node:node /app

# node 사용자로 전환
USER node
EXPOSE 3000
# 애플리케이션 실행
CMD ["node", "dist/main"]

기존 이미지 크기를 줄이고 빌드 단계와 실행 환경을 분리하여 최적화하기 위해 stage를 여러 단계로 나눴다.

prod-deps에서 production 환경에 필요한 의존성만 설치 후 node_modules 디렉토리를 COPY
build에서 build에 필요한 의존성을 설치하여 build 후 실제 실행 코드가 있는 dist 디렉토리를 COPY

기존에 있던 불필요한 패키지와 빌드 전 코드를 제외하고 필요한 부분만 production 이미지에 포함시켜 최적화하였다.

불필요한 파일이 많이 제거되었으므로 예상대로라면 이미지 크기가 줄어들어야 한다.

그런데...

오히려 이미지 크기가 커졌다.

기존 이미지 크기 (649MB)

keep-in-touch-be-v2-app   latest        6a192eebdc4c   3 hours ago         649MB

바꾼 방식 이미지 크기 (692MB)

REPOSITORY   TAG       IMAGE ID       CREATED       SIZE
keep-what    latest    8a2db73409ad   3 hours ago   692MB

예상과 다르게 43MB 증가하는 결과가 발생했다.

당황한 나는 .. 여러 가설과 검증을 통해 문제를 파악해 보았다.

원인 분석

빌드 과정 단순화

혹시 prod, dev 의존성을 나누는 것에 문제가 있나 싶어 두 개로 나뉘어 있던 build 레이어를 하나로 통합해 보았다.

FROM node:22-slim AS base
WORKDIR /app
ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable

FROM base AS builder

COPY package.json pnpm-lock.yaml ./

RUN pnpm install --frozen-lockfile

COPY . .

RUN pnpm build

FROM base
COPY --from=builder /app/node_modules /app/node_modules
COPY --from=builder /app/dist /app/dist

RUN apt-get update && apt-get install -y \
    git \
    vim \
    && rm -rf /var/lib/apt/lists/*

USER node
EXPOSE 3000
CMD ["node", "dist/main"]

builder 이미지에서 빌드 후 dist와 node_modules만 빼오는 방식이다.
여긴 dev dependency도 포함되어 있으므로 이전 방식보다 node_modules의 크기가 클 것이고 당연히 이미지 크기도 더 커야 한다.

그러나 결과는 612MB로 오히려 줄어들었다.

keep-prod-v3              latest        dfe462f4390a   31 minutes ago      612MB

대체 왜,,

이해할 수 없는 결과가 나와서 두 방식의 빌드 결과물을 비교해보았다.

디렉토리 크기 분석

node_modules, dist 따로 만들어 결과만 추출하는 첫 번째 이미지

1M dist  
204M node\_modules

dev dependency 포함하여 빌드하여 같이 추출하는 두 번째 이미지

988K    dist
318M    node_modules

예상대로 빌드 과정을 하나로 통합한 두 번째 이미지의 node_modules가 114MB 더 컸다.
근데 최종 이미지 결과는 통합된 첫 번째 이미지가 더 컸다.

이해할 수 없는 결과가 나와서 docker history 로 레이어 크기를 조사했다.

Docker history로 진짜 원인 파악

docker history [image] —no-trunc

IMAGE                                CREATED     CREATED BY                          SIZE      
sha256:8a2db73409ad4febb2c514671f... 3 hours ago CMD ["node" "dist/main"]            0B        
<missing>                            3 hours ago EXPOSE map[3000/tcp:{}]             0B        
<missing>                            3 hours ago USER node                           0B        
<missing>                            3 hours ago RUN chown -R node:node /app         152MB     
<missing>                            3 hours ago RUN apt-get update && apt-get i...  149MB     
...

살펴보니 수상한 커맨드가 있었다.

<missing>  3 hours ago   RUN /bin/sh -c chown -R node:node /app # buildkit 152MB     buildkit.dockerfile.v0

RUN chown -R node:node /app이 무려 152MB나 차지하고 있다.

완전.. 정형돈됨..

두 번째 이미지에서는 이게 없어서 (비교한다더니 대체 왜 없앴을까? 맘대로 작성했는갑다...) 크기가 줄어든 거였다.

https://stackoverflow.com/questions/30085621/why-does-chown-increase-size-of-docker-image

Why does chown increase size of docker image?

I can't understand why the 'chown' command should increase the size of my docker image? The following Dockerfile creates an image of size 5.3MB: FROM alpine:edge RUN adduser example -D -h /exampl...

stackoverflow.com

알고보니 Docker의 레이어 시스템이 chown과 같은 파일 메타데이터 변경도 새 레이어를 생성하기 때문에 발생하는 문제였다.
Docker의 Copy-on-Write 특성으로 인해 chown 명령으로 변경된 모든 파일이 새 레이어에 다시 복사되어 저장된다.

따라서 파일 내용은 변하지 않았더라도 메타데이터가 변경된 모든 파일의 용량만큼 이미지 크기가 증가하게 된다.

Note that changing the metadata of files, for example, changing file permissions or ownership of a file, can also result in a copy_up operation, therefore duplicating the file to the writable layer.

https://docs.docker.com/engine/storage/drivers/#copying-makes-containers-efficient

Storage drivers

Learn the technologies that support storage drivers.

docs.docker.com

이것에 대한 대안으로 ADD나 COPY 커맨드에서 --chown 옵션을 사용할 수 있다.

https://docs.docker.com/reference/dockerfile/#copy---chown---chmod]

Dockerfile reference

Find all the available commands you can use in a Dockerfile and learn how to use them, including COPY, ARG, ENTRYPOINT, and more.

docs.docker.com

해결

chown 커맨드를 제거하고 빌드한 결과 540MB의 이미지를 얻을 수 있었다.

keep-what-2               latest        9a00e97a8e2f   3 hours ago      540MB

multi-stage 빌드 적용과 불필요한 chown 명령 제거로 기존 이미지(649MB)에서 109MB를 줄였다.

최종 Dockerfile

FROM node:22-slim AS base
WORKDIR /app

ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable

FROM base AS prod-deps
COPY package.json .
COPY pnpm-lock.yaml .
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile

FROM base AS build
COPY . .
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
RUN pnpm run build

FROM base
COPY --from=prod-deps /app/node_modules /app/node_modules
COPY --from=build /app/dist /app/dist

# node 사용자로 전환
USER node
EXPOSE 3000
# 애플리케이션 실행
CMD ["node", "dist/main"]

부록

난 애초에 왜 chown을 썼을까?

많은 공식 이미지가 그렇듯 node 이미지에서 컨테이너 프로세스는 node사용자를 이용하여 실행하는 것이 권장된다.

https://github.com/nodejs/docker-node/blob/main/docs/BestPractices.md#non-root-user)

docker-node/docs/BestPractices.md at main · nodejs/docker-node

Official Docker Image for Node.js :whale: :turtle: :rocket: - nodejs/docker-node

github.com

난 "node 사용자에게 소유권을 옮겨야 실행이 되겠지" 하고 단순하게 생각해서 chown을 사용했다.
하지만 node 이미지에서 node 사용자는 chown 없이도 USER node로 사용자 전환만 하면 해당 디렉토리를 실행할 수 있었다..

[TypeORM] Entity 관계 설정에 eager, lazy 옵션을 명시해야 할까?

이제곱 — Sun, 16 Mar 2025 21:29:44 +0900

서론

코드래빗을 이용해 열심히 리뷰받고 있던 어느 날.. 코드래빗이 다음과 같은 제안을 해주었다.

관계 설정 시 eager 혹은 lazy 옵션을 명시적으로 설정하라는 내용이다.

️ Refactor suggestion

관계 설정에 대한 추가 구성이 필요합니다.

다음 사항들을 고려해주세요:

1. @OneToOne 데코레이터에 eager 또는 lazy 로딩 옵션을 명시적으로 설정하는 것이 좋습니다.
2. 사용자 삭제 시 통계 데이터 처리를 위한 cascade 옵션 설정이 필요합니다.

다음과 같이 수정하는 것을 제안드립니다:
@PrimaryColumn({ name: 'user_id', type: 'bigint' })
- @OneToOne(() => User)
+ @OneToOne(() => User, { eager: true, onDelete: 'CASCADE' })
  @JoinColumn({ name: 'user_id' })
  userId: number;

https://github.com/pudding-keep-in-touch/keep-in-touch -be-v2/pull/17#discussion_r1849672849

✨ [Feature] v1 to v2 API 이관 by jis-kim · Pull Request #17 · pudding-keep-in-touch/keep-in-touch-be-v2

Summary v1 files 삭제 entity file 생성 v1과 로직이 똑같은 /auth/google/login, /auth/google/callback , /users/:userId/nickname 구현 Describe your changes auth, user module 생성 사용자 관련 작업을 관리하는 UsersService 및 U...

github.com

항상 그렇지만.. AI의 조언은 곧이 곧대로 들으면 안되고 맞는 말인지 확인할 필요가 있다.

eager, lazy 옵션은 잘 사용한 적이 없었으므로 리뷰 받은 김에 둘이 어떤 옵션인지, 이 경우 정말 명시해야 하는지 알아보았다.

eager와 lazy

TypeORM 공식문서를 참고하였을 때, 두 가지 옵션은 각각 다음을 뜻한다.

eager: 항상 자동 로드

With eager loading enabled on a relation, you don't have to specify relations in the find command as it will
ALWAYS be loaded automatically.

eager: true 로 설정하면 findOne이나 find 를 호출할 때 자동으로 관계 데이터를 가져온다

즉, relations 옵션을 별도로 지정하지 않아도 알아서 join해서 데이터를 반환한다.

QueryBuilder를 사용할 때는 eager relation이 적용되지 않는다.

한 쪽 관계에서만 사용할 수 있고, 양쪽에서 사용되는 것은 허용되지 않는다.

lazy: 필요할 때 로드

lazy: true로 설정하면 관계 데이터가 즉시 로드되지 않고, 실제로 접근할 때 로드된다.

따라서 필드 타입이 반드시 Promise 여야 한다.

Node.js는 비동기 방식으로 작동하므로 동기적으로 접근하여 프로퍼티를 가져오는 것이 불가능하기 때문이다.

import {
    Entity,
    PrimaryGeneratedColumn,
    Column,
    ManyToMany,
    JoinTable,
} from "typeorm"
import { Category } from "./Category"

@Entity()
export class Question {
    @PrimaryGeneratedColumn()
    id: number

    @Column()
    title: string

    @Column()
    text: string

    @ManyToMany((type) => Category, (category) => category.questions)
    @JoinTable()
    categories: Promise<Category[]>
}

이런 relation을 save 하려면 다음과 같이 사용해야 한다.

const category1 = new Category()
category1.name = "animals"
await dataSource.manager.save(category1)

const category2 = new Category()
category2.name = "zoo"
await dataSource.manager.save(category2)

const question = new Question()
question.categories = Promise.resolve([category1, category2])
await dataSource.manager.save(question)

로드 하려면 await 으로 비동기 처리를 해줘야 한다.

const [question] = await dataSource.getRepository(Question).find()
const categories = await question.categories
// you'll have all question's categories inside "categories" variable now

TypeORM 문서에서는 lazy loding이 비표준적인 방법이라고 알려주고 있다.
다른 언어의 ORM은 (대표적으로 Java의 JPA) 관계 설정에서 lazy loading 이 기본 값인 경우가 있지만, TypeORM에서는 lazy loading을 권장하지 않는다.

Note: if you came from other languages (Java, PHP, etc.) and are used to use lazy relations everywhere - be careful. Those languages aren't asynchronous and lazy loading is achieved different way, that's why you don't work with promises there. In JavaScript and Node.JS you have to use promises if you want to have lazy-loaded relations. This is non-standard technique and considered experimental in TypeORM.

https://typeorm.io/eager-and-lazy-relations#eager-and-lazy-relations

TypeORM 관계 설정 시 기본값은 eager일까 lazy일까

이 쯤 알아보고 나니 자연스레 의문이 생겼다. TypeORM은 기본 설정으로 대체 뭘 쓸까? eager와 lazy 둘 다 아닌 것 같은데...

=> 둘 다 아닌 게 맞다.

TypeORM은 findOne, find 등에서 relations 옵션을 명시적으로 지정하는 것을 기본으로 한다.

위 예시의 categories를 가져오려면 relations에 명시해 주면 된다.

const question = await questionRepository.findOne({
  where: { id: 1 },
  relations: { categories: true } // v0.3 이상부터 적용
});

relations에 이렇게 설정해주면 실제 쿼리 실행 시 JOIN 이 포함되어 SELECT 된다.

즉 필요한 경우에만 관계 데이터를 가져오는 방식으로 직관적이다.

그래서 이 PR에서 수정이 필요한지?

수정 제안이 온 MessageStatistics 를 사용할 때는 애초에 User 정보가 필요할 일이 없고, 필요하다면 join을 이용하면 될 일이다.

수정은 필요 없다고 결론을 내렸다.

정리

eager: true는 관계된 데이터를 자동으로 로드하는 방식이며, 한쪽 관계에서만 사용할 수 있다.
lazy: true 는 관계된 데이터를 실제 접근 시 비동기적으로 로드하는 방식이다.
TypeORM의 기본 설정은 eager나 lazy 옵션을 사용하지 않으며 relations를 통해 명시적으로 관계 데이터를 불러온다.

Notion API로 원하는 날짜에 일정 생성하기

이제곱 — Wed, 9 Oct 2024 16:10:59 +0900

서론

8~9월동안 원티드 프리온보딩 인턴쉽 챌린지를 진행하며 좋은 인연을 맺게 되었다. 팀으로 활동하는 과정은 끝났지만, 데일리 스크럼을 통해 매일 할 일을 정리하며 취업 활동을 같이 이어나가기로 하였다.

기존에는 팀 공용으로 쓰는 노션 페이지의 캘린더 뷰 데이터베이스에 팀원들의 리마인드를 위해 직접 블록을 생성해오고 있었다.

이런 식으로.. 다 직접 생성해서 관리했다.

과정을 진행하며 공휴일을 제외한 평일 오전 10시 30분에 정기적으로 진행하기로 정해졌으므로 자동화 방법을 찾고있었다. 매번 페이지 생성 하는 것은 너무 번거롭기 때문에...

해결 방법들

1. Notion 페이지 반복 기능 이용

데이터베이스의 템플릿에 ... 버튼을 누르면 Repeat 설정을 할 수 있다.

여기서 weekly 를 선택하면 요일 지정은 가능하지만... 더 섬세한 작업은 불가능했다.

내가 원하는 것은 "공휴일과 주말을 제외한 모든 날에 자동생성되는 페이지" 였기 때문에 다른 방법을 찾기로 했다.

2. Notion API와 공공 API 이용

공공 데이터 포털에서 제공해주는 특일 API를 이용해서 공휴일을 판별하고, Notion API를 이용해서 페이지 생성 요청을 보내면 정확히 내가 원하는 작업을 할 수 있다.

특일 API

https://www.data.go.kr/data/15012690/openapi.do

한국천문연구원_특일 정보

(천문우주정보)국경일정보, 공휴일정보, 기념일정보, 24절기정보, 잡절정보를 조회하는 서비스 입니다. 활용시 날짜, 순번, 특일정보의 분류, 공공기관 휴일 여부, 명칭을 확인할 수 있습니다.

www.data.go.kr

짧게 찾아본 바로는 공휴일을 제공해주는 API가 이것 뿐이었다.

여러 정보 중 "공휴일 정보"를 받아오면 된다.

요청 URL은 다음과 같다.

http://apis.data.go.kr/B090041/openapi/service/SpcdeInfoService/getRestDeInfo

여기에 필요한 query parameter를 붙여서 요청하면 된다.

참고로 10월의 공휴일 데이터는 다음과 같다.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?><response><header><resultCode>00</resultCode><resultMsg>NORMAL SERVICE.</resultMsg></header><body><items><item><dateKind>01</dateKind><dateName>임시공휴일</dateName><isHoliday>Y</isHoliday><locdate>20241001</locdate><seq>2</seq></item><item><dateKind>01</dateKind><dateName>개천절</dateName><isHoliday>Y</isHoliday><locdate>20241003</locdate><seq>1</seq></item><item><dateKind>01</dateKind><dateName>한글날</dateName><isHoliday>Y</isHoliday><locdate>20241009</locdate><seq>1</seq></item></items><numOfRows>10</numOfRows><pageNo>1</pageNo><totalCount>3</totalCount></body></response>

Notion API

https://developers.notion.com/reference/post-page

Create a page

Creates a new page that is a child of an existing page or database. If the new page is a child of an existing page, title is the only valid property in the properties body param. If the new page is a child of an existing database, the keys of the propertie

developers.notion.com

굉장히 다양한 기능을 API로 제공한다.

처음에는 Block을 생성해야 한다고 생각했는데, 캘린더 일정은 Database에 소속된 Page 형태여서 Page를 생성하는 요청을 보내야 한다.

사용하기 전에 "API Integration"으로 앱과 노션 데이터베이스를 연결하는 작업이 필요하다.

https://developers.notion.com/docs/authorization

Authorization

This guide describes the authorization flows for internal and public Notion integrations.

developers.notion.com

Integration 설정 페이지로 들어가서 새 Integration (새 API 통합)을 생성하면 된다.

여기서 생성한 Integration을 사용할 데이터베이스에 꼭 연결해주어야 한다.

나는 생성만 하고 연결은 안 한 상태에서 왜 안되지를 외치고 있었다..

https://www.notion.so/ko/help/add-and-manage-connections-with-the-api#add-connections-to-pages

API 통합 추가와 관리 – Notion (노션) 도움말 센터

다른 소프트웨어의 API를 Notion에 연결하고, 워크스페이스 작업을 자동화하고, 다른 플랫폼의 서비스를 Notion에서 이용하세요

www.notion.so

정상적으로 Integration을 생성했다면 점 세개 - connect to를 눌렀을 때 내 Integration이 보인다. 누르고 confirm하면 연결 완료.

Notion SDK

https://github.com/makenotion/notion-sdk-js

GitHub - makenotion/notion-sdk-js: Official Notion JavaScript Client

Official Notion JavaScript Client. Contribute to makenotion/notion-sdk-js development by creating an account on GitHub.

github.com

Notion팀이 동일한 기능을 제공하는 Javascript SDK도 제공하고 있다. (정말 감사합니다)

운이 좋게도 Javascript를 이용해서 개발 중이었기에 바로 가져다 썼다.

page POST 요청을 하려면 클라이언트 객체 생성을 한 후, pages.create() 메소드를 호출해주면 된다. 너무 간단해서 감동의 눈물이..

  const notion = new Client({
    auth: process.env.NOTION_SECRET,
  });

  await notion.pages.create(page);

구현

간단 플로우)

공휴일 API 요청 및 응답 데이터 처리 -> 공휴일이 아닌 날짜만 Page 타입 객체로 생성 -> Notion SDK 사용하여 Notion API 요청

1. 공휴일 데이터

공휴일 정보는 xml형태로 오므로 편한 처리를 위해 fast-xml-parser를 이용하여 js object 형태로 변환하여 사용하였다. 많은 패키지 중 fast-xml-parser를 선택한 이유는 최근 다운수가 많았고, 업데이트 날짜가 최근(한 달 전)이었기 때문이다. 패키지 크기도 작았던 것으로 기억한다..

response.body.items.item에 원하는 값의 배열이 들어있다.

{
  item: [
    {
      dateKind: '01',
      dateName: '임시공휴일',
      isHoliday: 'Y',
      locdate: '20241001',
      seq: '2'
    },
    ...
  ]
}

locdate를 YYYY-MM-DD 형태로 변형한 후 새 Date 객체를 생성해주었다.

  return items.map((item) => {
    const date = item.locdate;
    return new Date(
      `${date.slice(0, 4)}-${date.slice(4, 6)}-${date.slice(6, 8)}`
    );
  });

2. Page 객체 생성

Notion Client의 page.create()의 인자로는 생성할 Database의 속성에 맞는 객체가 들어가야 한다.

속성 확인을 위해 database.retrive()를 호출해서 상세 속성을 확인하였고, 다음 형태로 객체를 생성해야 했다.

{
  parent: { database_id },
  icon: {
    emoji: ' ',
  },
  properties: {
    // database의 속성과 일치
    Name: {
      title: [
        {
          text: {
            content: '데일리 스크럼',
          },
        },
      ],
    },
    Date: {
      date: {
        start: date, // Date type
        time_zone: 'Asia/Seoul',
      },
    },
  },
  children: [
    {
      object: 'block',
      type: 'paragraph',
      paragraph: {
        rich_text: [
          {
            text: {
              content: 'notion API로 만들어진 페이지입니다.',
            },
          },
        ],
      },
    },
  ],
}

Page와 PageBuilder를 사용하여 쉽게 알맞은 타입의 객체가 생성되도록 했다.

export class Page {
  constructor(databaseId) {
    this.parent = { database_id: databaseId };
    this.properties = {};
    this.children = [];
    this.icon = null;
  }

  addProperty(name, value) {
    this.properties[name] = value;
    return this;
  }

  addChildBlock(block) {
    this.children.push(block);
    return this;
  }

  setIcon(emoji) {
    this.icon = { emoji };
    return this;
  }
}

import { Page } from './page.js';

export class PageBuilder {
  constructor(databaseId) {
    this.page = new Page(databaseId);
  }

  setTitle(title) {
    this.page.addProperty('Name', {
      title: [{ text: { content: title } }],
    });
    return this;
  }

  setDate(date) {
    this.page.addProperty('Date', {
      date: { start: date.toISOString(), time_zone: 'Asia/Seoul' },
    });
    return this;
  }

  setIcon(emoji) {
    this.page.setIcon(emoji);
    return this;
  }

  addParagraph(content) {
    this.page.addChildBlock({
      object: 'block',
      type: 'paragraph',
      paragraph: {
        rich_text: [{ text: { content } }],
      },
    });
    return this;
  }

  build() {
    return this.page;
  }
}

사용은 요런식으로..

pageArray.push(
  new PageBuilder(databaseId)
    .setTitle('데일리 스크럼')
    .setDate(date)
    .setIcon(' ')
    .addParagraph('notion API로 만들어진 페이지입니다.')
    .build()
);

3. Notion API 요청 보내기

내가 다른 방법을 발견하지 못한 걸 수도 있지만.. 안타깝게도 page.create()로는 한 요청에 한 페이지밖에 생성할 수 없었다.

그래서 PageBuilder로 Page 배열을 생성하고 map()을 사용하여 각 페이지를 생성하는 page.create() 요청의 Promise 배열을 만든 다음, Promise.all()로 병렬 처리하였다.

export const createNotionPage = async (holidays) => {
  const databaseId = process.env.NOTION_DATABASE_ID;
  const pageArray = createPageArray(holidays, databaseId);

  const notion = new Client({
    auth: process.env.NOTION_SECRET,
  });

  const promises = pageArray.map((page) => {
    notion.pages.create(page);
    console.log('page created at: ', page.properties.Date.date.start);
  });

  await Promise.all(promises);
};

배포

간단하게 배포할 수 있는 Railway를 사용하였다.

여러 배포 서비스 중 Railway를 선택한 이유는 무료 플랜이 있고 배포 과정이 간단해 보였기 때문이다. 무료 플랜은 램 500MB, 디스크 1GB, vCPU 2개가 제공된다.

github repository로도 할 수 있고, Docker image로도 할 수 있는데 간단한 프로그램이라 repository를 직접 연결해주었다.

create 누르고 원하는 github repo 누르면 그대로 package.json 읽어서 실행해준다.

scripts에 "start"가 없으면 실행이 안된다. 간단하게 node src/main.js를 추가해주었다.

중간에 railway github app 설치해도 되냐고도 물어보는데 허용해주면 된다.

로그보니까 Docker image 생성해서 하는 것 같던데 repository 연결보단 Docker image파일 이용하는 쪽이 더 빠를 듯 싶다.

연결 후 앱에 맞게 설정할 것 설정하면 된다.

variable과 cron schedule을 설정해주었다.

이런 변경사항이 있으면 꼭.. Apply change 해주어야 한다... variable 설정 했는데도 자꾸 undefined 문제가 발생해서 뭔가 했더니 휴먼에러였던...........

코드가 실행되면 원하는대로 생성된 페이지를 확인할 수 있다.

하루만에 끝낼 줄 알았는데 이틀 걸렸지만...

뿌듯 ^_^

Github

https://github.com/jis-kim/make-some-scrum

GitHub - jis-kim/make-some-scrum: 스크럼 벗고 소리질러

스크럼 벗고 소리질러. Contribute to jis-kim/make-some-scrum development by creating an account on GitHub.

github.com

별 거 없지만 깃헙은 이쪽입니다,,

[Passport.js] passport 에서 로그인과 callback route 를 나눠야 할까?

이제곱 — Sat, 4 Nov 2023 01:28:03 +0900

서론

OAuth2.0 을 이용하여 로그인을 개발하던 중..

저는 Nest 가 먹기 좋게 감싸놓은 @nestjs/passport 패키지와 @UseGuard(AuthGuard(`${strategy명}`)) 을 이용하여 편안하게 개발하고 있었습니다.

그 때 동료가 저에게 로그인 프롬프트를 띄우는 경로와 콜백 경로가 같아도 인증이 잘 작동한다는 놀라운 사실을 알려주고 말았습니다. 같은 Guard를 사용하는데도 다른 동작을 한다니??

하나는 외부 로그인 프롬프트를 띄워야하고 하나는 인증된 정보를 받아 처리해야하니 당연히 경로가 달라야겠지 하고 별 생각없이 '/login' 과 '/login/callback' 이라는 두 가지 경로를 만들던 저는 정말 하나로 통일해도 잘 작동한다는 사실을 알고 왜 그런지 궁금해졌습니다..

AuthGuard에서는 무슨 일이 일어나는가?

route handler 에 Guard 를 지정하게 되면 경로에 들어올 때마다 해당 Guard의 canActive() 를 실행하게 됩니다.

@nestjs/passport 패키지의 AuthGuard 의 canActive 는 다음과 같습니다.

async canActivate(context: ExecutionContext): Promise<boolean> {
  const options = {
    ...defaultOptions,
    ...this.options,
    ...(await this.getAuthenticateOptions(context))
  };
  const [request, response] = [
    this.getRequest(context),
    this.getResponse(context)
  ];
  const passportFn = createPassportContext(request, response);
  const user = await passportFn(
    type || this.options.defaultStrategy,
    options,
    (err, user, info, status) =>
      this.handleRequest(err, user, info, context, status)
  );
  request[options.property || defaultOptions.property] = user;
  return true;
}

여기서 createPassportContext()를 들어가보면?

const createPassportContext =
  (request, response) => (type, options, callback: Function) =>
    new Promise<void>((resolve, reject) =>
      passport.authenticate(type, options, (err, user, info, status) => {
        try {
          request.authInfo = info;
          return resolve(callback(err, user, info, status));
        } catch (err) {
          reject(err);
        }
      })(request, response, (err) => (err ? reject(err) : resolve()))
    );

passport.authenticate() 를 Promise 로 감싼 객체를 반환합니다.

이전에 express 와 passport 를 이용해서도 로그인을 구현했었는데, 그 때의 코드와 상당히 비슷합니다.

express 와 42 passport strategy를 사용했을 때의 코드입니다.

  router.get('/42', passport.authenticate('42', { session: false }));

  // return으로 redirect와 동시에 종료
  router.get('/42/return', (req, res) => {
    passport.authenticate('42', { session: false }, async (err, user) => {
      try {
        if (err || !user) throw err;

        await setTokens(res, user);
        res.redirect('/');
      } catch (err) {
        logger.warn(`passport authenticate return :  ${err.stack}`);
        res.redirect('/login');
      }
    })(req, res);
  });

그냥 해당 코드를 쓰기 쉽게 래핑해놓은 것 같습니다.

처음에는 AuthGuard 가 두 개의 동작을 다르게 해주는 줄 알았는데, 그게 아니고 passport 의 authenticate() 가 옵션에 따라 다르게 처리해주는 것 같아 보입니다!

Passport.authenticate() 에서는 무슨 일이 일어나는가?

그럼 authenticate 는 대체 뭘 하는거지..?

궁금해서 42 passport 의 authenticate() 를 까봤습니다.

https://github.com/pandark/passport-42/blob/d458a4386e35ec1ffb7345efd8b54d2cda45533d/lib/strategy.js#L66

var OAuth2Strategy = require('passport-oauth2');
var util = require('util');
var Profile = require('./profile');
var InternalOAuthError = require('passport-oauth2').InternalOAuthError;

function Strategy(options, verify) {
  options = options || {};
  options.authorizationURL = options.authorizationURL ||
    'https://api.intra.42.fr/oauth/authorize';
  options.tokenURL = options.tokenURL || 'https://api.intra.42.fr/oauth/token';
  options.customHeaders = options.customHeaders || {};

  if (!options.customHeaders['User-Agent']) {
    options.customHeaders['User-Agent'] = options.userAgent || 'passport-42';
  }

  OAuth2Strategy.call(this, options, verify);
  this.name = '42';
  this._profileURL = options.profileURL || 'https://api.intra.42.fr/v2/me';
  this._profileFields = options.profileFields || null;
  this._oauth2.useAuthorizationHeaderforGET(true);
}

// Inherit from `OAuth2Strategy`.
util.inherits(Strategy, OAuth2Strategy);
...

까봤더니 authenticate 는 없고 Strategy 함수의 정의와 util.inherits(Strategy, OAuth2Strategy); 만 있었습니다.

처음 보는 함수였기 때문에 구글링을 해보니 prototype 을 상속받는 함수였습니다. class와 extend 문법이 생기면서 deprecated 되었습니다. 그렇다면 util.inherits(Strategy, OAuth2Strategy); 의 의미는 42-passport 의 Strategy 가 OAuth2Strategy를 상속받는다는 것입니다.

https://nodejs.org/docs/latest/api/util.html#utilinheritsconstructor-superconstructor

Util | Node.js v21.1.0 Documentation

Util# Source Code: lib/util.js The node:util module supports the needs of Node.js internal APIs. Many of the utilities are useful for application and module developers as well. To access it: const util = require('node:util'); copy util.callbackify(original

nodejs.org

https://www.educative.io/answers/what-is-utilinherits-in-nodejs

Educative Answers - Trusted Answers to Developer Questions

Level up your coding skills. No more passive learning. Interactive in-browser environments keep you engaged and test your progress as you go.

www.educative.io

OAuth2Strategy 는 passport-oauth2 모듈이었습니다.

var OAuth2Strategy = require('passport-oauth2');

그렇다면 42-passport 의 authenticate 는 passport-oauth2 의 authenticate 와 동일할 것으로 생각됩니다.

이제 passport-oauth2 의 authenticate 를 살펴봅시다.

https://github.com/jaredhanson/passport-oauth2/blob/ea9e99adda82dff67502654347589866fea80eb2/lib/strategy.js#L130

OAuth2Strategy.prototype.authenticate = function(req, options) {
  options = options || {};
  var self = this;

  ...
  
  if ((req.query && req.query.code) || (req.body && req.body.code)) {
    function loaded(err, ok, state) {
      if (err) { return self.error(err); }
      if (!ok) {
        return self.fail(state, 403);
      }

      var code = (req.query && req.query.code) || (req.body && req.body.code);

      var params = self.tokenParams(options);
      params.grant_type = 'authorization_code';
      if (callbackURL) { params.redirect_uri = callbackURL; }
      if (typeof ok == 'string') { // PKCE
        params.code_verifier = ok;
      }
      self._oauth2.getOAuthAccessToken(code, params,
        function(err, accessToken, refreshToken, params) {
        ...
      });
    });
     ...
    var state = (req.query && req.query.state) || (req.body && req.body.state);
    try {
      var arity = this._stateStore.verify.length;
      if (arity == 4) {
        this._stateStore.verify(req, state, meta, loaded);
      } else { // arity == 3
        this._stateStore.verify(req, state, loaded);
      }
    } catch (ex) {
      return this.error(ex);
    }
 } else {
    var params = this.authorizationParams(options);
    params.response_type = 'code';
    if (callbackURL) { params.redirect_uri = callbackURL; }

	...
    
	var state = options.state;
    if (state && typeof state == 'string') {      
      params.state = state;
      
      var parsed = url.parse(this._oauth2._authorizeUrl, true);
      utils.merge(parsed.query, params);
      parsed.query['client_id'] = this._oauth2._clientId;
      delete parsed.search;
      var location = url.format(parsed);
      this.redirect(location);   
    } else {
      function stored(err, state) {
        if (err) { return self.error(err); }

        if (state) { params.state = state; }
        var parsed = url.parse(self._oauth2._authorizeUrl, true);
        utils.merge(parsed.query, params);
        parsed.query['client_id'] = self._oauth2._clientId;
        delete parsed.search;
        var location = url.format(parsed);
        self.redirect(location);
      }

      try {
        var arity = this._stateStore.store.length;
        if (arity == 5) {
          this._stateStore.store(req, verifier, state, meta, stored);
        } else if (arity == 4) {
          this._stateStore.store(req, state, meta, stored);
        } else if (arity == 3) {
          this._stateStore.store(req, meta, stored);
        } else { // arity == 2
          this._stateStore.store(req, stored);
        }
      } catch (ex) {
        return this.error(ex);
      }
    }
  }
}
 ...

코드의 일부만 빼오느라 괄호 갯수나 indent 가 안맞을 수 있습니다..

authenticate 에서 가장 큰 분기는 if ((req.query && req.query.code) || (req.body && req.body.code)) { ... } 인데, req.query.code 나 req.body.code 값이 있다면 code 값이 조건문에 들어가므로 if문이 실행됩니다. 반대로 둘 다 없다면 undefined 가 되므로 else 로 넘어갑니다.

간단테스트

if문 안에서는 code 를 추출한 후 loaded 를 선언해 마지막에는 this._stateStore.verify() 를 호출합니다.

여기서 _stateStore 는 Strategy 를 만들 때 매개변수의 options.store 값에 따라 달라집니다.

그 중 하나인 PCKESessionStore 에 가보면 verify() 도 있고 store() 도 있습니다. 아무튼 code 값이 있으면 verify() 로직을 호출하는 것 같네요!

code 값이 존재하지 않는 else 에서는 self.redirect(location) 를 호출하게 됩니다. location 은 잘 찾아보면 Strategy의 options.autorizationURL 을 가공한 값인데, autorizationURL 은 passport 의 Strategy 마다 달라집니다.

예를 들면 passport-google-oauth2 의 값은 options.authorizationURL=options.authorizationURL || 'https://accounts.google.com/o/oauth2/v2/auth';이고, passport-42 의 값은 options.authorizationURL=options.authorizationURL || 'https://api.intra.42.fr/oauth/authorize'; 입니다. 즉 대상 인증서버의 로그인 프롬프트 url 입니다.

오.. 어디서 많이 봤습니다.......

어라? 익숙한데?

oauth 로그인을 테스트 하다보면 자주 보는 형태가 있습니다.

42login callback 의 request 객체

인증 서버에서 유저가 로그인을 완료하면 Strategy option 으로 지정한 callbackURL 으로 요청이 오게 되는데 이 때 query string 으로 code 값이 붙어옵니다.

passport.authenticate() 에서 추출되는 code 값이 이 값과 동일해 보입니다.

출처: 근-본 RFC 6749

여기서 verity() 내부가 D~E 에 해당하는 것 같습니다.

https://www.passportjs.org/concepts/oauth2/authorization/

Understanding OAuth 2.0: Authorization

Requesting Authorization The OAuth 2.0 protocol flow begins when the application requests authorization from the user. The authorization request is typically triggered based on the user taking an action. In the case of Facebook, such an action would be the

www.passportjs.org

글을 작성하다 발견한 passport 의 oauth2 문서가 생각보다 친절합니다.....!

passport 문서와 oauth rfc 를 참고했을 때

인증 서버로 redirect -> 유저의 인증 -> code 를 어플리케이션에 반환 -> code 로 다시 인증 서버에 token 요청 -> 토큰 발급 -> 발급한 토큰으로 필요한 정보 요청 (profile 에 들어오는 정보들) 까지 passport 로 간편하게 처리할 수 있다는 것을 알 수 있었습니다.

또 맨 처음 redirect 되는 로그인 프롬프트의 url 을 살펴보면

아까 else 문에서 redirect했던 주소와 동일합니다.

진짜 하나로 처리 되나 테스트

express 와 passport 로 간단한 앱을 하나 만들어 봅시다.

express init 후 index.route 에 다음 코드를 작성했습니다.

var express = require('express');
var router = express.Router();
var passport = require('passport');
var GoogleStrategy = require('passport-google-oauth20').Strategy;

passport.use(
  new GoogleStrategy(
    {
      clientID: ... ,
      clientSecret: ... ,
      callbackURL: 'http://localhost:3000/api/v1/auth/callback/google',
    },
    function (accessToken, refreshToken, profile, cb) {
      console.log(profile);
      return cb(null, profile);
    }
  )
);

router.get(
  '/api/v1/auth/callback/google/',
  passport.authenticate('google', { scope: ['profile'] }, () => {
    console.log('callback');
  })
);

module.exports = router;

전에 사용하던 프로젝트를 재사용해서 URL이 깁니다ㅎㅎ... 다시 설정하기 귀찮아서 그만.....

해당 path 로 요청 결과 예상대로 리다이렉션 -> 콜백 모두 한 route 에서 이루어 지는 것을 알 수 있습니다.

code 로만 구분이 되는지 테스트 하기 위해 이번에는 다른 Nest 앱에서 @UseGuard(AuthGuard) 가 붙는 route 에 curl 로 요청을 날려보았습니다.

1. code가 없는 get 요청

인증 서버로 리다이렉션 됩니다.

2. code가 있으면서 유효하지 않은 요청

일부러 code 를 아무값이나 줘봤습니다.

500 에러의 response 가 옵니다. code 값을 검증하러 갔다가 에러가 난 모양입니다.

https://datatracker.ietf.org/doc/html/rfc6749#section-4.1.2

RFC 6749: The OAuth 2.0 Authorization Framework

The OAuth 2.0 authorization framework enables a third-party application to obtain limited access to an HTTP service, either on behalf of a resource owner by orchestrating an approval interaction between the resource owner and the HTTP service, or by allowi

datatracker.ietf.org

OAuth 2.0 RFC 에서 인증 서버의 응답 중 code가 필수였기 때문에 code의 유무로 클라이언트의 인증 요청인지, 인증 서버의 code 포함 응답인지가 구분될 수 있던 것 같습니다.

결론!

두 개를 구분짓지 않아도 passport 가 잘 구분지어서 요청해줍니다.

하지만 예시 코드도 나뉘어 있고 세상 많은 사람들이 둘을 구분지어 쓰기 때문에 실제로는 구분하여 구현했습니다.

passport 가 많은 처리를 해주는 편한 라이브러리라는 것이 잘 느껴지는 여정(?)이었습니다. 정보성 글이라기보다는 호기심 해결을 위한 글이지만... 재밌었으면 된 거 아닐까요? 전 재밌었습니다.....!

[NestJS] 파일 업로드 구현하다 FileInterceptor 를 커스텀 한 사람이 있다?

이제곱 — Sun, 8 Oct 2023 18:00:36 +0900

Ghostpong 에서는 유저의 프로필 사진 업로드 기능을 지원하고 있습니다. 서버에 직접 static file 들을 업로드하고 serving 하는 기능을 구현했던 과정을 소개합니다.

1. serve static

https://docs.nestjs.com/recipes/serve-static

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 Rea

docs.nestjs.com

Nest 문서가 너무 잘 되어있어서 5초만에 따라할 수 있습니다.

yarn add @nestjs/serve-static

패키지 설치 후 AppModule 에 ServeStaticModule 을 설정해주면 됩니다.

app.module.ts

@Module({
  imports: [
	...
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', '..', '..', 'public'),
      renderPath: '/img',
      serveStaticOptions: { index: false, redirect: false },
    }),
    ...
  ],
})

https://github.com/nestjs/serve-static/blob/master/lib/interfaces/serve-static-options.interface.ts

여기서 옵션을 참고하여 작성했습니다.

static file 이 이미지 파일 뿐이었기 때문에 directory 로 요청이 오면 index.html 을 보여주는 index 와 path 가 directory 이면 '/' 을 붙여주는 redirect 설정은 false 로 설정했습니다.

2. file upload

https://docs.nestjs.com/techniques/file-upload#basic-example

Documentation | NestJS - A progressive Node.js framework

docs.nestjs.com

nest 는 express 패키지인 multer 를 사용해서 multipart/form-data 로 오는 파일을 처리합니다. multer 는 multipart/form-data 에서 지원하지 않는 형식의 데이터는 처리할 수 없습니다.

이미지 업로드하려면 request body 에 string 으로 담아줘야하는데 이거 format 이 multipart/formdata 임

https://www.rfc-editor.org/rfc/rfc7578.html

RFC 7578: Returning Values from Forms: multipart/form-data

www.rfc-editor.org

단일 파일을 업로드하려면 FileInterceptor() 인터셉터를 라우트 핸들러에 연결하고 @UploadedFile() 데코레이터를 사용하여 request에서 파일을 추출하기만 하면 됩니다.

@Post('image')
@UseInterceptors(FileInterceptor('image'))
uploadImage(@UploadedFile() file: Express.Multer.File) {
	...
}

@UploadedFile

라우트 핸들러 매개변수 데코레이터로 file object 를 추출하고 데코레이터가 달린 매개변수에 추출한 파일을 넣어줍니다. Express 기반 애플리케이션을 위한 다중 미들웨어와 함께 사용됩니다.

FileInterceptor

두 가지 인자를 받습니다.

fieldName: HTML form 에서 파일을 hold 할 이름 -> client 에서 multipart/form-data 형태로 파일을 보내줄 때 name 을 해당 인자로 설정해줘야 합니다.
options : MulterOptions 타입의 옵셔널 오브젝트. multer constructor 에서 쓰이는 것과 동일함.

주의 : 파이어베이스같은 써드파티와 호환이 안될 수도 있음

File validation

파일 크기나 mime type 을 체크하는 유효성 검사를 위해서는 pipe 를 만들어서 UploadedFile 데코레이터에 바인딩하면 됩니다.

@nestjs/common 에서 file validation 을 위한 내장 파이프 (ParseFilePipe) 도 제공하고 있습니다.

ParseFilePipe

validators 인자에 FileValidator 타입의 validator 를 여러 개 설정해서 사용할 수 있습니다.

@Post('file')
uploadFileAndPassValidation(
  @Body() body: SampleDto,
  @UploadedFile(
    new ParseFilePipe({
      validators: [
        // ... Set of file validator instances here
      ]
    })
  )
  file: Express.Multer.File,
) { ... };
}

validators 외에 다음 추가 옵션도 설정할 수 있습니다. (optional)

errorHttpStatusCode : 모든 validator fail 시 throw 될 HTTP 상태코드 (기본 400)
exceptionFactory : 에러메세지를 만들고 에러 리턴할 Factory

FileValidator 는 커스텀으로 만들 수도 있고, 빌트인으로 제공되는 것을 사용해도 됩니다.

커스텀하려면 다음 형태로 만들 수 있습니다.

export abstract class FileValidator<TValidationOptions = Record<string, any>> {
  constructor(protected readonly validationOptions: TValidationOptions) {}

  /**
   * Indicates if this file should be considered valid, according to the options passed in the constructor.
   * @param file the file from the request object
   */
  abstract isValid(file?: any): boolean | Promise<boolean>;

  /**
   * Builds an error message in case the validation fails.
   * @param file the file from the request object
   */
  abstract buildErrorMessage(file: any): string;
}

isValid 에서는 비동기 validation 도 지원합니다. file 을 Express.Multer.File 타입으로 지정해서 타입안정성도 보장할 수 있습니다.

빌트인으로 제공되는 FileValidator 는 두 가지가 있습니다.

MaxFileSizeValidator : 파일 사이즈가 주어진 값 (byte) 보다 작은지 체크
FileTypeValidator : 주어진 값과 매치되는 마임타입인지 체크

File validation 을 ParseFilePipe 로 하는 경우 다음과 같이 사용할 수 있습니다.

@UploadedFile(
  new ParseFilePipe({
    validators: [
      new MaxFileSizeValidator({ maxSize: MAX_IMAGE_SIZE }),
      new FileTypeValidator({ fileType: /image\\/(png|jpeg|gif)/ }),
    ],
  }),
)

MAX_IMAGE_SIZE 보다 큰 파일이나 image/png, image/jpeg, image/gif 형태가 아니면 400 에러코드를 리턴합니다.

ParseFilePIpeBuilder

builder 를 이용해서 validator 객체를 생성하지 않고 설정할 수도 있습니다.

@UploadedFile(
  new ParseFilePipeBuilder()
    .addFileTypeValidator({
      fileType: 'jpeg',
    })
    .addMaxSizeValidator({
      maxSize: 1000
    })
    .build({
      errorHttpStatusCode: HttpStatus.UNPROCESSABLE_ENTITY
    }),
)
file: Express.Multer.File,

저는 단일 파일 처리만 구현했지만 다중 파일 업로드도 가능하니 공식 문서를 참조하시면 됩니다.

https://docs.nestjs.com/techniques/file-upload#array-of-files

Documentation | NestJS - A progressive Node.js framework

docs.nestjs.com

Validation 하는 위치에 대한 고민

업로드할 파일의 limit, MIME type 을 체크해야 했는데, option을 넘겨서 multer 에서 직접할 수도 있고 nest의 ParseFilePipe 에서도 할 수 있었기 때문에 고민이 되었습니다. pipe 의 역할을 생각해보면 pipe가 맞았지만 multer 기능을 (FileInterceptor) 놔두고 굳이 인터셉터보다 뒤에 실행되는 파이프에서...? 하는 생각이 들었습니다.

고민하던 와중 확실히 인터셉터로 정한 계기가 생겼습니다.

파일 저장 api 에서 사용하던 FileInterceptor 의 코드입니다.

@UseInterceptors(
  FileInterceptor('image', {
    fileFilter: (req, file, cb) => {
      if (!file.mimetype.match(/image\/(gif|jpeg|png)/)) {
        cb(new UnsupportedMediaTypeException('gif, jpeg, png 형식의 파일만 업로드 가능합니다.'), false);
      }
      if (file.size > MAX_IMAGE_SIZE) {
        cb(new PayloadTooLargeException('이미지 파일은 4MB 이하로 업로드 가능합니다.'), false);
      }
      cb(null, true);
    },
    storage: diskStorage({
      destination: 'public/asset',
      filename: (req, file, cb) => {
        // FIXME : auth guard 적용 후 req.user.id로 변경
        const myId = req.headers['x-my-id'];
        const extArray = file.mimetype.split('/');
        cb(null, 'profile-' + myId + '.' + extArray[extArray.length - 1]);
      },
     }),
  }),
 )

storage 옵션을 통해 파일을 저장하는데 만약 fileFilter 에서 적용하는 파일 validation 부분이 ParseFilePipe 에서 적용된다면 nest 의 생명 주기에 따라 전위 인터셉터 -> 파이프 순으로 실행되기 때문에 파일이 먼저 생성되고 validation 이 이루어집니다.

그러면 따로 pipe 에서 unlink 를 실행해야 합니다. 정말..... 아름답지 않습니다....................

아니면 데이터 상에 multer 에서 읽은 file 을 저장해놨다가 pipe 에서 save 하는 방법도 있을 듯 합니다만 이것도....아름답지 않습니다.............

테스트로 Ghostpong 에서 지원하지 않는 sql 형식의 파일을 업로드 해 봤습니다.

확장자가 octet-stream?

와! 정말 생각한대로 되었습니다.

그래서 pipe 는 버리고 FileInterceptor 로만 구현하게 되었습니다.

그러나..

재앙의 시작

controller 에 decorator 로 너무 많은 코드가 들어가버린 나머지 동료분이 분리를 요청해주셨습니다.

저도 썩 마음에 들지 않았기 때문에 ~~아름답지 않습니다~~ 리팩토링을 진행하게 되었습니다.

분리를 위해 FileInterceptor 코드를 따로 작성하여 제가 직접 multer 를 연결하기로 했습니다.

FileInterceptor 는 사실상 multer 를 nest 의 Interceptor 로 감싼 형태기 때문에 리팩토링이 쉽진 않았습니다. 이 글은 10월에 적고 있지만 4월에 겪은 고난이라 힘들었다는 것 밖에 기억이 안나는 게 아쉽습니다. 좀 더 생생하게 기록해둬야 했는데..

근데 지금 생각해보니까 그냥 FileInterceptor 를 상속받아서 옵션만 넘기거나 했어도 될 것 같네요.. 아니면 multer 옵션만 다른 파일에 저장하는 방법도 있었을 것 같습니다.

`FileInterceptor` 구현

Nest 에서 제공하는 FileInterceptor 코드입니다.

export function FileInterceptor(
  fieldName: string,
  localOptions?: MulterOptions,
): Type<NestInterceptor> {
  class MixinInterceptor implements NestInterceptor {
    protected multer: MulterInstance;

    constructor(
      @Optional()
      @Inject(MULTER_MODULE_OPTIONS)
      options: MulterModuleOptions = {},
    ) {
      this.multer = (multer as any)({
        ...options,
        ...localOptions,
      });
    }

    async intercept(
      context: ExecutionContext,
      next: CallHandler,
    ): Promise<Observable<any>> {
      const ctx = context.switchToHttp();

      await new Promise<void>((resolve, reject) =>
        this.multer.single(fieldName)(
          ctx.getRequest(),
          ctx.getResponse(),
          (err: any) => {
            if (err) {
              const error = transformException(err);
              return reject(error);
            }
            resolve();
          },
        ),
      );
      return next.handle();
    }
  }
  const Interceptor = mixin(MixinInterceptor);
  return Interceptor;
}

rxjs 가 마구 쓰여서 겁나 어렵습니다.

결과적으로는 거의 따라 구현이 되어버렸습니다..ㅎㅎ

핵심 부분은 intercept() 로 this.multer.single() 에서 파일을 읽어와 Promise를 생성해줍니다. 파일 I/O 는 동기 처리가 되어야 하므로 필수적입니다.

intercept() 의 끝에서 next.handle() 을 해주는데 이걸 해줘야 이후에 실행되어야 할 route handler 를 부를 수 있습니다. Nest 의 Interceptor 문서와 rxjs 의 Observable 문서를 보면 조금 이해할 수 있습니다.

다음은 제가 구현한 FileUploadInterceptor 입니다.

import {
  Injectable,
  NestInterceptor,
  ExecutionContext,
  UnsupportedMediaTypeException,
  PayloadTooLargeException,
  CallHandler,
} from '@nestjs/common';
import { HttpArgumentsHost } from '@nestjs/common/interfaces';
import * as multer from 'multer';
import { FileFilterCallback, diskStorage } from 'multer';
import { Observable } from 'rxjs';

import { MAX_IMAGE_SIZE } from '../../common/constant';

@Injectable()
export class FileUploadInterceptor implements NestInterceptor<void, void> {
  async intercept(context: ExecutionContext, next: CallHandler): Promise<Observable<void>> {
    const ctx: HttpArgumentsHost = context.switchToHttp();

    const multerOptions: multer.Options = {
      fileFilter: (_req, file: Express.Multer.File, cb: FileFilterCallback) => {
        if (!file.mimetype.match(/image\/(gif|jpeg|png)/)) {
          cb(new UnsupportedMediaTypeException('gif, jpeg, png 형식의 파일만 업로드 가능합니다.'));
        }
        cb(null, true);
      },
      storage: diskStorage({
        destination: 'public/img',
        filename: (req, file, cb) => {
          const myId = req.headers['x-my-id'];
          const extArray = file.mimetype.split('/');
          cb(null, 'profile-' + myId + '.' + extArray[extArray.length - 1]);
        },
      }),
      limits: { fileSize: MAX_IMAGE_SIZE },
    };

    await new Promise<void>((resolve, reject) =>
      multer(multerOptions).single('image')(ctx.getRequest(), ctx.getResponse(), (error) => {
        error
          ? reject(
              error.code === 'LIMIT_FILE_SIZE'
                ? new PayloadTooLargeException('이미지 파일은 4MB 이하로 업로드 가능합니다.')
                : error,
            )
          : resolve();
      }),
    );
    return next.handle();
  }
}

기존에 fileFilter 에서 size 검사하던 것을 limits 로 변경한 것 이외에는 같은 로직 입니다. file limit 에러를 따로 처리하기 위해 single() 의 return 값에서 error code 를 따로 체크해줬습니다.

fileFilter 에서 size 를 체크하게 되면 아무리 큰 파일이어도 다 올라간 후 체크를 해야 해서 limits 로 업로드 시점에 (파일 객체가 생성되기 전에) 체크를 해주는 것이 성능상 이점이 있어 채택했습니다.

위에서 언급한 부분을 참고하며 핵심 기능만 추가했습니다. 하지만 재사용이 어려워 보여서 multer option 만 따로 빼는 등의 선택이 나았을 것 같네요..

multer 에 대해 깊이 파보고 rxjs 도 살짝 찍먹해봐서 좋은 경험이긴 했지만 아쉬운 부분입니다!

해당 코드가 적용된 pr 을 보고 싶다면?

https://github.com/GhostPangPang/GhostPong/pull/122

✨ [Feature] image upload api & serve static by jis-kim · Pull Request #122 · GhostPangPang/GhostPong

Summary image 를 POST /user/image 로 업로드하는 기능 업로드 시 backend/public/asset 에 "profile-${userId}.${ext}" 형태로 저장되어 유저당 최대 3개 저장됨 backend/public/asset 에 있는 이미지 파일을 get 할 수 있게 se

github.com

[NestJS] 프로젝트에서 사용한 swagger 태그

이제곱 — Fri, 15 Sep 2023 12:16:51 +0900

프로젝트 진행 중 작성한 wiki 를 옮겨와 편집했습니다.

팀원들 고생하지 말라고 필수적인 태그만 정리한 거라 부족한 점이 많습니다.
Nest 와 Swagger 공식문서를 보면서 태그 쇼핑하시는 것을 추천합니다.
하지만 제가 프로젝트 시작할 때는 다른 사람들이 대체 무슨 태그를 쓰는 지 궁금했어서 기록용으로 남깁니다...ㅎㅎ

ApiOperation

Api에 대한 설명을 적는 태그입니다.

사용 예

@ApiOperation({ summary: '친구 신청하기 (닉네임)' })

적용 스크린샷

Path 옆에 summary 의 내용이 나타납니다.
메소드 위에 주석 (/**/) 을 쓰면 더 상세한 표기가 가능합니다. (Nest 의 swagger plugin 을 적용했을 경우)

Api{StatusCode}Response

status code 는 "NotFound"(404) 나 "BadRequest"(400) 등의 형태로 들어갑니다.
저는 에러 코드 응답 중에서도 서버 로직에서 나는 에러는 제외하고 클라이언트에서 날 수 있는 것만 표시했습니다.
모든 경우의 수를 다 적으면 지저분해지기 때문에 어느정도만 쓰시는 것을 추천합니다..

사용 예

@ApiConflictResponse({
  type: ErrorResponseDto,
  description: '신청 정원 초과, 이미 친구 상태, 이미 친구 신청 상태, 자기 자신에게 신청',
})
@ApiNotFoundResponse({ type: ErrorResponseDto, description: '유저 없음' })

적용 스크린샷

Status code 별로 다 있습니다.

APIQuery, ApiHeaders, ApiParam

api 에 header, param, querystring이 필요해!!!! 할 때 사용합니다.
제가 진행했던 프로젝트에서는 로그인 기능 적용 전 임시 헤더로 user id 를 주고받아서 모든 api에 @ApiHeaders 를 사용했습니다.

사용 예

@ApiQuery({ name: 'nickname', description: '친구 신청할 유저의 닉네임' })
@ApiHeaders([{ name: 'x-my-id', description: '내 아이디 (임시값)' }])

적용 스크린샷

사용 예

@ApiParam({ name: 'userId', description: '친구 신청할 유저의 아이디' })

적용 스크린샷

이 태그들을 달면 테스트 시 값 입력을 요구하는 데, required: false 를 추가하면 값을 넣지 않아도 테스트 할 수 있습니다.

DTO 는 어쩌죠?

⇒ (Nest 의 swagger plugin 을 적용했을 경우) 파일명이 .dto.ts 이면 알아서 detect 해줍니다.

주석으로 상세 설명이 가능합니다.

사용 예

export class SuccessResponseDto {
  constructor(msg: string) {
    this.message = msg;
  }
  /**
   * 성공 응답 메세지
   * @example '요청이 처리되었습니다.'
   */
  message: string;
}

프로퍼티 위 주석 정보를 읽어서 swagger 에 심어줍니다.
@example 로 예시를 넣을 수 있습니다.

적용 스크린샷

api 응답에서도 리턴되는 dto type 의 @example 값을 읽어 example value 로 넣어줍니다.

주의

object literal 의 배열은 인식하지 못합니다.

뭔가 참조 문제가 나는데 swagger cli 에서 나는 문제라 디버깅이 어려워서 그냥 타입을 따로 선언하고 type[] 하는 식으로 해결했습니다.

그래서 어떻게 썼는데?

  @ApiOperation({ summary: '로그인 2단계 인증' })
  @ApiHeaders([{ name: 'x-my-id', description: '내 아이디 (임시값)' }])
  @ApiForbiddenResponse({ type: ErrorResponseDto, description: '유효하지 않은 인증 코드' })
  @ApiBadRequestResponse({ type: ErrorResponseDto, description: '잘못된 인증 코드' })
  @SkipUserGuard()
  @UseGuards(TwoFaGuard)
  @HttpCode(HttpStatus.OK)
  @Post('login/2fa')
  async twoFactorAuthLogin(
    @ExtractUserId() myId: number,
    @Body() { code }: CodeVerificationRequestDto,
    @Res() res: Response,
  ): Promise<void> {
	...
  }

더 많은 예시는 github 을 참고해 주세요

[NestJS] NestJS 에 swagger 달기

이제곱 — Wed, 13 Sep 2023 17:57:34 +0900

프로젝트 진행 중 작성한 wiki 를 옮겨와 편집했습니다.

swagger

OpenAPI Speciation (OAS) 를 활용할 수 있는 도구.

OpenAPI 란 RESTful 인터페이스를 정의하기 위한 세계 표준이다. OAS 로 technology-agnostic API 를 설하고 개발, 사용할 수 있다.

Use in nest!

yarn add @nestjs/swagger

nest 는 OpenAPI 를 데코레이터로 만들 수 있는 모듈을 제공한다.

DocumentBuilder 로 OpenAPI 사양을 준수하는 기본 문서를 구축할 수 있다. 전체문서 (all HTTP routes defined) 를 생성하려면 SwaggerModule 의 createDocument() 를 사용한다. 순서대로 application, Swagger option, SwaggerDocumentOptions 객체를 인자로 받는다.

문서를 만들고 setup() 메소드를 호출할 수 있다. 인자 순서는 다음과 같다.

The path to mount the Swagger UI
An application instance
The document object instantiated above
Optional configuration parameter (read more here)

main.ts

const config = new DocumentBuilder()
  .setTitle('GhostPong API')
  .setDescription('The GhostPong API description')
  .setVersion('1.0')
  .addTag('GhostPong')
  .build();

const document = SwaggerModule.createDocument(app, config);
SwaggerModule.setup('api', app, document);

기본 설정 후 start 하면 다음과 같은 페이지가 만들어진다.

/api-json, /api-yaml 으로 각각 json, yaml 형식으로 데이터를 받을 수도 있다.

CLI 플러그인

DTO를 자동으로 detect 해준다.

모든 DTO 프로퍼티에 @ApiHideProperty를 사용하지 않는 한 @ApiProperty로 주석을 달아줌
물음표에 따라 필요한 프로퍼티를 설정 (e.g. name?: string will set required: false).
유형에 따라 type or enum 속성을 설정(배열도 지원).
할당된 기본값에 따라 default 속성을 설정
class-validator 데코레이터를 기반으로 여러 유효성 검사 규칙을 설정(classValidatorShim이 true로 설정된 경우).
적절한 상태와 type(response model)으로 모든 엔드포인트에 응답 데코레이터를 추가
주석을 기반으로 속성 및 엔드포인트에 대한 설명을 생성(introspectComments가 true로 설정된 경우).
설명을 기반으로 속성에 대한 예제 값을 생성(introspectComments가 true로 설정된 경우).

파일명은 반드시 .dto.ts이거나 .entity.ts 여야 한다.

mappte-types 의 utilies 를 사용하는 경우 (ex - PartialType) @nestjs/mapped-type 대신 @nestjs/swagger 에서 가져와야 한다.

temp.dto.ts

export class Temp {
  /**
   * The name of Temp
   * @example 'Jule'
   */
  @IsAlphanumeric()
  @MaxLength(8)
  name: string;

  /**
   * The age of Temp
   * @example 42
   */
  @IsNumber()
  @Max(130)
  @Min(0)
  age: number;
}

인식한 dto 를 swagger 에서 확인할 수 있다.
api 예시에도 설정한 값이 다 들어가 있다.

plugin 사용

plugin 을 사용하려면 nest-cli.json 을 편집한다.

"compilerOptions": {
    ...
  "plugins": [
    {
      "name": "@nestjs/swagger/plugin",
      "options": {
        "classValidatorShim": true,
        "introspectComments": true
      }
    }
  ]
}

추가 설정할 Decorators

Documentation | NestJS - A progressive Node.js framework

docs.nestjs.com

문서에 있는 많은 decorator 들을 살펴보면서 적절하게 값을 주면 된다.

특히 @ApiTags()는 각 컨트롤러 위에 달아서 태그별로 분리하면 좋을 것 같다!

Reference

Documentation | NestJS - A progressive Node.js framework

docs.nestjs.com

GitHub - nestjs/swagger: OpenAPI (Swagger) module for Nest framework (node.js)

GitHub - nestjs/swagger: OpenAPI (Swagger) module for Nest framework (node.js) :earth_americas:

OpenAPI (Swagger) module for Nest framework (node.js) :earth_americas: - GitHub - nestjs/swagger: OpenAPI (Swagger) module for Nest framework (node.js) :earth_americas:

github.com

[php-fpm] nginx(웹 서버)와 php-fpm 을 연결했을 때 502 (Bad Gateway) 에러 해결

이제곱 — Sun, 12 Mar 2023 23:46:20 +0900

에러 내용

php-fpm 을 사용하는 도커 컨테이너 하나와 웹 서버로 nginx 를 사용하는 도커 컨테이너 하나를 띄우고 둘 사이에 통신할 수 있게 세팅하는 와중에 자꾸 502 에러나 connection reset by peer 가 발생하였다.

발생한 에러

curl -v localhost:1234
*   Trying ::1:1234...
* Connected to localhost (::1) port 1234 (#0)
> GET / HTTP/1.1
> Host: localhost:1234
> User-Agent: curl/7.74.0
> Accept: */*
> 
* Mark bundle as not supporting multiuse
< HTTP/1.1 502 Bad Gateway
< Server: nginx/1.20.2
< Date: Sun, 05 Mar 2023 11:09:50 GMT
< Content-Type: text/html
< Content-Length: 157
< Connection: keep-alive
< 
<html>
<head><title>502 Bad Gateway</title></head>
<body>
<center><h1>502 Bad Gateway</h1></center>
<hr><center>nginx/1.20.2</center>
</body>
</html>
* Connection #0 to host localhost left intact

php-fpm 측에서 에러 로그가 안떠서 원인 파악이 힘들었는데 그냥 설정 파일을 잘못 건드려서 문제가 생긴 것이었다.

기존 설정 파일

docker-compose.yml

 wordpress:
    container_name: wordpress
    image: wordpress
    ...
    networks:
      - inception
    expose:
      - "9000"
    init: true
    restart: on-failure
  nginx:
    container_name: nginx
    image: nginx
    ...
    networks:
      - inception
    ports:
      - "443:443"
    init: true
    restart: on-failure
networks:
  inception:
    name: inception
    driver: bridge

동일한 docker bridge 네트워크에 넣고 컨테이너명:포트로 nginx -> wordpress(php-fpm running) 으로 통신 시도했는데도 안됐다..

default.conf (nginx config file)

server {
    listen 443 ssl;
    listen [::]:443 ssl;

    index       index.php index.html index.htm;
    ...

    error_page  404  /404.html;
    error_page  500 502 503 504/50x.html;

    location ~ \.php$ {
        include /etc/nginx/fastcgi_params;
        fastcgi_pass wordpress:9000; # .php 요청은 wordpress:9000 으로 보낸다.
        fastcgi_param SCRIPT_FILENAME /wordpress/$fastcgi_script_name;
     }
}

www.conf (php-fpm config file)

; Start a new pool named 'www'.
; the variable $pool can be used in any directive and will be replaced by the
; pool name ('www' here)
[www]

user = nobody

listen = 0.0.0.0:9000

; Default Value: any
listen.allowed_clients = 0.0.0.0

해결책

php-fpm 설정 파일의 access 설정이 잘못되어서 문제였다.
listen.allowed_clients 의 기본 설정은 이미 any 인데 굳이 0.0.0.0 으로 모든 주소로부터 요청을 받으려고 시도했다..
심지어 예시 컨피그 파일에 아주 친절하게 써져있었다.

; List of addresses (IPv4/IPv6) of FastCGI clients which are allowed to connect.
; Equivalent to the FCGI_WEB_SERVER_ADDRS environment variable in the original
; PHP FCGI (5.2.2+). Makes sense only with a tcp listening socket. Each address
; must be separated by a comma. If this value is left blank, connections will be
; accepted from any ip address.
; Default Value: any

DefaultValue.. ANY!

해당 줄을 삭제해주면 아주 잘 해결이 된다.
listen 도 port 만 주어졌을 때 모든 ip 를 listen 하는 것이 기본값이므로 9000만 작성해 주었다.

변경 후 config file

; Start a new pool named 'www'.
; the variable $pool can be used in any directive and will be replaced by the
; pool name ('www' here)
[www]

user = nobody

listen = 9000

pm = dynamic
pm.max_children = 5
pm.start_servers = 2
pm.min_spare_servers = 1
pm.max_spare_servers = 3

access.log = /var/log/php8/access.logs

[Chrome] 모든 웹페이지에 커서가 나타나는 현상 해결 및 Vimium 소개

이제곱 — Sat, 11 Feb 2023 10:52:14 +0900

어느 순간부터 모든 웹페이지에 커서가 나타나기 시작했다.

구글링으로 해결법을 바로 찾을 수 있었다.

크롬 브라우저 세팅 (맥 단축키 : cmd + ,) 에서 "Navigate pages with a text cursor." 라는 기능을 찾아서 꺼주면 된다.

F7 으로도 on/off 할 수 있다.

정식 명칭은 caret browing 이다. Firefox 와 Internet Explorer 에서도 지원한다.

마우스나 트랙패드를 사용할 수 없을 때 유용하다.

하지만 나는 Vimium extension 을 기본으로 사용하고 있기 때문에 도움이 되지 않았다...

이 글을 보시는 분들께도 Vimium을 추천하고 싶다! 마우스 없이 브라우징이 가능하다.

https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb?hl=en

Vimium

The Hacker's Browser. Vimium provides keyboard shortcuts for navigation and control in the spirit of Vim.

chrome.google.com

f 를 누르면 다음과 같이 모든 링크를 키보드로 이동할 수 있다.

Vimium 의 전체 기능은 다음과 같다.

vim 사용법을 안다면 더욱 유용하게 사용할 수 있다.

Reference

https://support.google.com/chrome/answer/10129654?hl=en

Use a text cursor to navigate & select text - Google Chrome Help

support.google.com

https://www.online-tech-tips.com/computer-tips/what-is-caret-browsing-and-how-to-use-it/

What is Caret Browsing and How to Use It

You’re probably scrolling through this page with your touchpad, external mouse, stylus, or your fingers. But what if we told you there’s another interesting way to go through web pages [...]

지수와 블로그

[PostgreSQL] Sequence 값이 이상하다?! - Caching과 Gapless Assignment

문제 상황

1. 비정상적인 종료 시 log_cnt만큼 last_value가 올라간다.

2. Insert를 실패해도 sequence 값이 올라간다.

원인

Sequence는 gapless 할당을 보장할 수 없다.

Session이 종료되면 Cache를 잃는다.

그럼 어떤 경우에 Cache를 잃을까?

1. 정상 종료 케이스

docker compose down

docker compose stop

ctrl+C (SIGINT - graceful stop)

2. 비정상 종료 케이스

docker compose kill

ctrl+C를 누르고 종료되고 있는 와중에 ctrl+C를 또 누르는 경우

log_cnt는 뭘까?

[Docker] 이미지 크기 줄이다 chown한테 맞은 이야기

기존 Dockerfile

Multi-stage build 적용

원인 분석

빌드 과정 단순화

디렉토리 크기 분석

Docker history로 진짜 원인 파악

해결

최종 Dockerfile

부록

난 애초에 왜 chown을 썼을까?

[TypeORM] Entity 관계 설정에 eager, lazy 옵션을 명시해야 할까?

서론

eager와 lazy

eager: 항상 자동 로드

lazy: 필요할 때 로드

TypeORM 관계 설정 시 기본값은 eager일까 lazy일까

그래서 이 PR에서 수정이 필요한지?

정리

Notion API로 원하는 날짜에 일정 생성하기

서론

해결 방법들

1. Notion 페이지 반복 기능 이용

2. Notion API와 공공 API 이용

특일 API

Notion API

Notion SDK

구현

1. 공휴일 데이터

2. Page 객체 생성

3. Notion API 요청 보내기

배포

Github

[Passport.js] passport 에서 로그인과 callback route 를 나눠야 할까?

서론

AuthGuard에서는 무슨 일이 일어나는가?

Passport.authenticate() 에서는 무슨 일이 일어나는가?

어라? 익숙한데?

진짜 하나로 처리 되나 테스트

결론!

[NestJS] 파일 업로드 구현하다 FileInterceptor 를 커스텀 한 사람이 있다?

1. serve static

2. file upload

@UploadedFile

FileInterceptor

File validation

ParseFilePipe

ParseFilePIpeBuilder

Validation 하는 위치에 대한 고민

재앙의 시작

FileInterceptor 구현

[NestJS] 프로젝트에서 사용한 swagger 태그

ApiOperation

Api{StatusCode}Response

APIQuery, ApiHeaders, ApiParam

DTO 는 어쩌죠?

주의

그래서 어떻게 썼는데?

[NestJS] NestJS 에 swagger 달기

swagger

Use in nest!

CLI 플러그인

plugin 사용

1. 비정상적인 종료 시 `log_cnt`만큼 `last_value`가 올라간다.

`docker compose down`

`docker compose stop`

`docker compose kill`

`log_cnt`는 뭘까?

`FileInterceptor` 구현