최근 참여한 두 프로젝트에서 에디터를 구현할 일이 있었다.

첫 프로젝트에서 구현해야 했던 에디터는 간단한 텍스트 편집 정도 필요한 에디터여서 contenteditable 속성을 사용해서 에디터를 만들어야겠다 생각하고 진행했었다. 그런데 막상 개발을 진행하다보니 평소 에디터를 사용하며 당연하다 여겼던 요소들이 당연한 것이 아님을 깨달을 수 있었다. 커서 위치, 한글 조합, 편집 히스토리 관리 등 많은 요소들이 개발자가 관심을 기울여야 했던 요소였다.

에디터의 안정적인 동작을 위해선 굉장히 많은 작업이 필요함을 깨닫고, 다음에는 라이브러리를 활용하는 것이 좋겠다 생각했다. 그래서 두 번째 프로젝트에서는 에디터 라이브러리를 사용했는데, 나는 Quill을 사용해서 에디터를 구현했다. Quill은 에디터에 내가 원하는 기능이 없을 때는 내가 만든 모듈을 추가해서 커스텀할 수 있다는 게 가장 큰 장점이었다.

이번 프로젝트에서 구현해야 했던 주요 기능 중 하나가 각주 기능이었는데, 이 기능은 Quill에서 기본적으로 제공하는 기능이 아니어서 다른 개발자가 만든 모듈을 사용하거나 직접 개발해야 했다. 딱 우리 서비스에 맞는 각주 모듈을 하나 찾긴 했는데, 유료이고 소스코드가 공개되어 있지 않아서 사용하기가 어려웠다. 그래서 이번 프로젝트를 위해 각주 모듈을 개발했는데, 이 코드들을 정리해서 quill-footnote라는 이름의 npm 패키지로 배포했다.

이번 글에서는 이 경험에 대해서 정리해보고자 한다. 왜 Quill을 사용했는지, 그리고 커스텀 모듈을 사용하여 Quill에 내가 원하는 기능을 추가하는 방법 등에 대해 적어보았다.

🤖 라이브러리 없이 에디터 개발하기

첫 프로젝트의 경우 간단한 텍스트 편집만 필요했기 때문에 contenteditable 속성을 사용해서 에디터를 개발하기로 했다. 주로 execCommand, queryCommandState, createElement, Selection API, Range API를 사용해서 개발했다.

그런데 개발을 진행하면서 생각보다 고려해야 할 요소가 많다는 것을 깨달았다. bold, italic 같은 간단한 포맷팅 작업은 쉽게 할 수 있지만, 요구사항이 복잡해질수록 구현이 까다로워졌다. 구현을 잘못하면 커서 위치가 갑자기 맨 앞으로 돌아가버리거나, IME(Input Method Editor) 조합을 방해해서 한글이 "안녕"이 "ㅇㅏㄴㄴㅕㅇ"과 같이 깨지는 등, 의외의 복병이 많았다.

더군다나 document.execCommand 같은 경우에는 크로스 브라우징 이슈가 있어서 deprecated된 상태였다. 직접 DOM을 조작할 때와 달리 document.execCommand를 사용하면 undo buffer(= history)가 관리되기 때문에 간단하게 구현할 수 있는 점이 좋았지만, 아무래도 크로스 브라우징 이슈가 있다보니 자유롭게 사용하기는 어려웠다.

이런 경험을 하면서 에디터 라이브러리를 사용하는 이유를 너무나도 절실히 깨닫게 되었다.. 인력이 부족한 상황에서 라이브러리 없이 에디터를 개발하는 것은 너무나도 비효율적인 작업이었다.

🤼 TinyMCE vs. Quill 👉🏻 Quill Win!

다음 프로젝트에서는 각주나 테이블 편집 등 에디터 관련 요구사항이 좀 더 복잡해졌다. 지난 프로젝트에서 뼈저리게 느낀 바가 있는 만큼 이번에는 라이브러리를 사용해서 에디터를 개발하기로 했다.

npm trends를 살펴보면 ckeditor, draft-js, quill, tinymce가 많이 사용되는데, ckeditor와 draft-js 같은 경우에는 유지 보수가 되지 않은지 오래 돼서 TinyMCE와 Quill을 최종 후보로 간추렸다.

TinyMCE

처음에는 TinyMCE가 제공하는 기본 기능이 훨씬 많아 유리해 보였다. 이미지 삽입과 테이블 편집 등 다양한 기능을 바로 사용할 수 있었다. 하지만 막상 실제 프로젝트에 사용할 수 있을지 확인해보니 제한사항이 많았다. 일단 기본적으로 오픈소스 라이브러리가 아니다보니까 커스텀할 수 있는 범위가 제한적이었다. 뿐만 아니라 에디터에 기본적으로 내장된 기능들이 많다보니 번들이 무겁고 로드하는데 꽤 많은 시간이 걸렸다. (Quill은 198.5kb, TinyMCE는 431.3kb) 처음에는 제공하는 기능이 많고 UI도 괜찮은데 왜 quill보다 npm trends가 낮은지 의아했는데, 이런 이유에서겠구나 싶었다.

Quill

반면 Quill은 API Driven Design을 기반으로 개발된 오픈소스 라이브러리라 원하는 기능을 자유롭게 확장할 수 있어서 좋았다. Quill은 TinyMCE와는 달리 HTML을 직접 편집하지 않고 JSON 형식으로 문서 정보를 관리하는 것이 특징적이었다. Delta라는 JSON 포맷으로 변경사항을 관리하는데, 여기에는 텍스트 정보와 포맷팅 정보가 포함되어 있다. HTML 자체를 편집하고 inline 스타일을 적용하는 방식이면 추후에 변경하기가 어려운데, Quill을 문서 정보를 JSON 기반으로 관리하기 때문에 요구사항의 변화에 유연하게 대처할 수 있는 점이 좋았다. 그래서 이번 프로젝트에서는 Quill을 사용하기로 결정했다.

🪶 Quill 커스텀하기

Quill은 내가 사용하고 싶은 기능이 기본 에디터에 없으면, 직접 커스텀 모듈을 만들어서 해당 기능을 추가할 수 있다.

1️⃣ Custom Blot 만들기

커스텀 모듈을 만들기 위해선 먼저 모듈에서 사용할 Blot을 만들어야 한다.

Blot은 Quill에서 DOM 노드를 표현하는 방식이라고 볼 수 있다. Blot에는 Inline Blot, Block Blot, Embed Blot 등이 있는데, 이 중 하나를 상속해서 나만의 블롯을 만들면 된다.

Blot을 사용하지 않고 직접 DOM 노드를 조작하면 Quill이 관리하는 History에 제대로 반영되지 않기 때문에 Blot을 통해 편집해야 한다.

모든 블롯에는 반드시 blotName과 tagName을 작성해줘야 한다. Quill은 tagName을 바탕으로 DOM Node를 생성하고, 추후 DOM Node를 탐색할 때 blotName을 사용한다.

아래 코드는 각주 번호를 구현하기 위해 작성한 Blot 코드의 예시다.

import Embed from "quill/blots/embed";

export interface FootnoteNumberValue {
  createdAt: string;
}

export class FootnoteNumber extends Embed {
  static blotName = "footnote-number";
  static tagName = "a";
  static className = "footnote-number";

  static create(value: FootnoteNumberValue): HTMLElement {
    const node = super.create() as HTMLElement;
    const footnoteId = `footnote-${value.createdAt}`;
    node.setAttribute("id", footnoteId);
    node.setAttribute("class", "footnote-number");
    node.setAttribute("data-index", "0");
    node.setAttribute("data-createdAt", value.createdAt);
    node.setAttribute("contenteditable", "false");
    node.textContent = `[0]`;
    return node;
  }

  static formats(node: HTMLElement) {
    return {
      id: node.getAttribute("id"),
      index: node.getAttribute("data-index"),
      createdAt: node.getAttribute("data-createdAt"),
      footnote: true,
    };
  }

  static value(node: HTMLElement) {
    return {
      id: node.getAttribute("id"),
      index: node.getAttribute("data-index"),
      createdAt: node.getAttribute("data-createdAt"),
    };
  }

  format(name: string, value: any): void {
    if (
      name === "update-footnote-number-index" &&
      value.id &&
      value.id === (this.domNode as HTMLElement).getAttribute("id")
    ) {
      (this.domNode as HTMLElement).setAttribute("data-index", value.index);
      this.domNode.textContent = `[${value.index}]`;
    }
  }
}

아래는 Blot을 정의하면서 자주 사용한 메서드들이다.

◾️ static create(value?: any): Node

블롯을 생성할 때 받아와야 할 인자들과 취해야 할 작업들을 정의할 수 있다.

◾️ static formats(domNode: Node)

현재 DomNode의 포맷 정보를 반환하는 메서드다. 특정 블롯에 대해 키보드 바인딩을 걸고 싶으면 여기에서 블롯을 식별할 수 있는 포맷 정보를 정의해서 반환하면 된다.

◾️ format(format: name, value: any)

블롯에 포맷을 적용할 때 사용하는 함수이다. format과 value는 필요에 따라 내가 자유롭게 정의해서 사용하면 된다.

◾️ optimize(context: { [key: string]: any }): void

optimize 메서드는 문서 업데이트가 완료된 다음에 Quill이 DOM 트리를 최적화하기 위해 호출하는 메서드다. 예를 들어 <p><em>기울</em><em>임체</em></p>라고 표현된 부분이 있으면 <p><em>기울임체</em></p>로 최적화한다. 때로는 Quill이 자동으로 실행하는 최적화가 내가 원하는 최적화가 아닐 수 있다. 그럴 때에는 블롯에서 optimize 메서드를 오버라이딩해서 수정해주면 된다.

2️⃣ Custom Module 만들기

앞서 만든 Blot들을 바탕으로 실제로 편집하는 작업들은 Custom Module에 작성해주면 된다. 커스텀 모듈은 아래와 같이 Module을 상속한 클래스로 만들어주면 된다.

class FootnoteModule extends Module {
  //...
}

그리고 커스텀 블롯들은 register() 메서드에서 등록해줘야 사용할 수 있다.

class FootnoteModule extends Module {
  static register(): void {
    Quill.register(FootnoteNumber);
    Quill.register(FootnoteDivider);
    //...
  }
}

undo/redo 관련 History 관리

커스텀 모듈을 개발할 때 유의해야 했던 부분은 undo/redo가 매끄럽게 진행될 수 있도록 히스토리 스택을 관리하는 것이었다.

예를 들어 각주를 추가할 때는 1) 본문에 각주번호를 추가하는 작업과 2) 본문 하단에 각주 내용을 추가하는 작업이 동시에 실행되어야 한다. 반대로 실행취소를 할 때도 각주 번호와 각주 내용은 동시에 삭제되어야 한다. 그런데 히스토리 스택에 이 두 작업이 별개의 작업으로 들어가면, cmd + z를 눌러 실행 취소를 했을 때 각주 번호만 삭제되고 각주 내용만 남아있는 이상한 상황을 목격하게 된다.

Quill은 updateContents(delta: Delta, source: string = 'api'): Delta를 하나의 작업 단위로 인식하기 때문에, 히스토리 그룹핑이 필요한 경우에는 updateContents api를 여러 번 호출하지 않고 한 번만 호출하도록 했다. 이를 위해선 편집 내용을 하나의 Delta로 모으는 것이 필요한데, Delta의 compose 메서드를 사용하면 여러 Delta를 하나의 Delta로 병합할 수 있다.

그런데 구현 상 updateContents를 한 번만 실행하는 것이 어려운 경우가 있다. 이럴 때는 History 모듈의 cutoff() 메서드가 유용했다.

3️⃣ 키보드 바인딩 수정하기

때로 키보드 키의 효과를 수정하고 싶을 때가 있다. 예컨대 Backspace 키로 각주번호를 지우면 각주 내용도 함께 삭제되게 하거나, 테이블 셀은 Backspace 키로 삭제할 수 없게 막는 등으로 말이다.

이럴 때는 Quill의 키보드 바인딩을 수정해주면 된다. 키보드 바인딩 정보는 Quill 에디터를 생성할 때 modules.keyboard.bindings 옵션에 전달해주면 된다.

유의해야 할 점은 Backspace, Enter 키 등은 기본적으로 셋팅되어 있는 바인딩이 있기 때문에, 내가 새롭게 정의한 바인딩을 추가해도 우선순위 상에서 밀려서 적용이 안 될 수가 있다.

이럴 때는 키보드 바인딩을 적용할 포맷을 명시해주는 게 효과적이었다. 아래와 같이 format을 구체적으로 명시하면 기본 바인딩보다 내가 정의한 바인딩이 우선적으로 적용되었다.

import Quill from "quill";
import { FootnoteModule } from "@src/module";

export const footnoteKeyboardBindings = {
  footnoteBackspace: {
    key: "Backspace",
    format: ["footnote"],
    handler: function (this: { quill: Quill }, range: any): boolean {
      const [leaf] = this.quill.getLeaf(range.index);
      if (leaf?.statics?.blotName === "footnote-number") {
        const footnoteModule = this.quill.getModule(
          "footnote",
        ) as FootnoteModule;
        footnoteModule.deleteFootnote(leaf);
        return false;
      }
      return true;
    },
  },

  footnoteEnter: {
    key: "Enter",
    format: ["footnote-row"],
    handler: function (this: { quill: Quill }, range: any): boolean {
      const [line] = this.quill.getLine(range.index);
      return line?.statics?.blotName !== "footnote-row";
    },
  },
};

💻 관련 코드

이번에 Quill에서 각주를 작성할 수 있도록 quill-footnote 라이브러리를 만들어보았다. Quill Custom Module과 관련해서 자세한 코드는 아래 GitHub에서 확인할 수 있다.

[GitHub] quill-footnote

2024 항해커톤의 주제는 오픈소스 AI를 활용해 사회의 문제를 해결하는 서비스 만들기였다. 이번 주제로 꼭 만들어보고 싶은 서비스가 있어서 친구들과 함께 항해99 해커톤에 참여하게 되었다.

👀 기획의도

이번 해커톤에서 우리가 해결하고자 한 사회 문제는 디지털 소외 문제였다. 디지털 소외를 단적으로 보여주는 사례가 바로 기차표 예매라고 생각한다.

요즘은 다들 온라인으로 기차표를 예매하기 때문에, 창구에선 표를 구하기 어려운 경우가 많다. 그래서 온라인 예매를 어려워 하는 어르신들은 표를 구하지 못해 입석으로 서서 가거나, 표가 나올 때까지 기차역에서 몇 시간을 기다리시기도 한다.

우리는 이러한 문제를 해결하기 위해 노인과 같은 디지털 약자들도 손쉽게 이용할 수 있는 KTX 예매 서비스를 개발하기로 했다.

🧐 어떻게 해결할 수 있을까?

어르신들은 온라인 예매를 왜 어려워하실까? 왜 창구에서 예매하는 걸 더 편하게 생각하실까?

현재 코레일 웹 사이트의 경우 기차 예매 뿐만 아니라 여행 상품 등 다양한 기능을 담고 있기 때문에 화면이 복잡한 편이다. IT에 익숙한 우리들은 예매를 하려면 어디를 클릭해야 할지 당연하게 느껴지지만, IT에 익숙하지 않은 분들에게는 어려운 화면일 수 있다. 그래서 시간과 품이 들더라도 창구로 찾아가서 직원에게 물어보는 것을 더 편하게 느끼시는 것으로 보인다.

그렇다면 온라인을 통해 예매하더라도 마치 창구 직원과 대화하는 것처럼 기차표를 예매할 수 있다면 현재의 문제를 좀 더 개선할 수 있지 않을까? 우리는 이러한 아이디어를 바탕으로 대화형 인터페이스를 갖춘 서비스를 개발하기로 하였다.

💬 대화형 인터페이스 구축하기

대화형 인터페이스를 구축하기 위해 우리는 Chat GPT를 사용하기로 했다.

👂🏻 Speech to Text

먼저, 사용자의 음성을 인식하기 위해 react-speech-recognition 라이브러리를 사용했다. 리액트에서 Web Speech API를 사용하기 좋도록 랩핑한 라이브러리이다.

🎤 Text to Speech

Chat GPT의 응답을 음성으로 재생하는 데에는 OpenAI의 Text to Speech 기능을 사용했다. 처음에는 Web Speech API의 SpeechSynthesisUtterance를 사용해서 텍스트를 음성으로 변환했는데, 음성 변환이 너무 부자연스러워서 요금이 좀 들긴 하지만 OpenAI의 기능을 사용하기로 했다.

📣 Function Calling

Chat GPT를 통해 기차표를 조회하고 예매하려면 외부 함수를 호출해야 하기 때문에 Function Calling 기능을 사용했다.

Function Calling 기능을 사용하려면 openai.chat.completions.create로 Chat GPT에게 질문을 보낼 때, tools 프로퍼티에 호출해야 하는 함수의 내용 (함수명, 파라미터 등)을 담아서 보내면 된다. 그러면 Chat GPT가 함수의 호출이 필요하다고 판단되는 시점에 tool_calls 프로퍼티에 호출해야 하는 함수의 이름과 파라미터 정보를 담아서 응답을 보내주는데, 이 정보를 활용해서 함수를 호출하면 된다.

함수의 파라미터를 정의할 때에는 description에서 출발 시간 (format: hhmmss)와 같이 파라미터 내용과 형식을 Chat GPT에게 구체적으로 알려주는 것이 도움이 되었다.

async function askChatGpt() {
  // 인식된 음성을 대화내역에 추가
  messages.push({
    role: 'user',
    content: finalTranscript,
  });

  // Chat GPT API로 요청 보내기
  const response = await createChatCompletions(messages);

  // Chat GPT 응답 처리
  const responseMessage = response.choices[0].message;
  await handleResponse(responseMessage);
}

async function handleResponse(responseMessage: any) {
  // Chat GPT가 Function Calling을 요청하는 경우
  if (responseMessage.tool_calls) {
    messages.push(responseMessage);

    for (const toolCall of responseMessage.tool_calls) {
      // Function Call 파싱
      const { functionName, parameters } = parseFunctionCall(toolCall)?.[0];

      await handleToolCall(functionName, parameters, toolCall.id, toolCall.function.name);
    }
  }
}

async function handleToolCall(functionName: string, parameters: any, toolCallId: string, functionNameDisplay: string) {
  switch (functionName) {
    case 'saveTrainRoute':
      // 출발지와 도착지 정보 저장
      break;
    case 'saveDepartureTime':
      // 출발 시간 저장 후 예매 가능한 열차 조회
      break;
    case 'reserveTrain':
      // 열차 예매
      break;
    case 'goToPaymentPage':
      // 결제 페이지 이동
      break;
    default:
      break;
  }
}

🔨 Fine Tuning

처음에는 Fine Tuning 없이 gpt-3.5-turbo-1106 모델을 사용해서 개발을 했었다. 그런데 기본 모델을 사용하다보니 여러 제약사항을 경험하게 됐다.

KTX 예매 서비스에 맞는 일관적인 대화체를 유지해야 하는데 상대방의 말에 따라 대화체가 바뀌는 문제도 있었고, 대화형 인터페이스다보니 응답이 너무 길면 안 되는데 쓸데없는 말을 한참 동안 주절주절 하는 경우도 있었다. 그리고 Function Calling이 필요한 시점에 tool_calls 응답이 오지 않는 등의 문제도 있었다.

이러한 문제점을 해결하기 위해 Fine Tuning을 통해 우리의 서비스에 최적화된 모델을 만들기로 하였다. 아래와 같이 우리가 원하는 대화 시나리오를 json 형식으로 정리해서 jsonl 파일로 만들고, 이 파일을 바탕으로 학습시켜 Fine Tuning 모델을 만들었다.

Fine Tuning 모델을 사용한 이후부터 대화체가 확연히 정리되고, Function Calling 오류도 줄어들었다.

{
  "messages": [
    {
      "role": "assistant",
      "content": "안녕하세요. 어디에서 어디로 가는 열차를 찾으시나요?"
    },
    {
      "role": "user",
      "content": "부산에서 서울로 가요."
    },
    {
      "role": "assistant",
      "function_call": {
        "name": "saveTrainRoute",
        "arguments": "{\"departure\":\"부산\",\"destination\":\"서울\"}"
      }
    },
    {
      "role": "function",
      "name": "saveTrainRoute",
      "content": "true"
    },
    {
      "role": "assistant",
      "content": "출발 시간은 언제인가요?"
    },
    //... 중략
  ],
  "functions": [
    {
      "name": "saveTrainRoute",
      "description": "기차 출발지와 도착지 정보를 저장하는 함수",
      "parameters": {
        "type": "object",
        "properties": {
          "departure": {
            "type": "string",
            "description": "출발지 (Departure)"
          },
          "destination": {
            "type": "string",
            "description": "도착지 (Destination)"
          }
        },
        "required": [
          "departure",
          "destination"
        ]
      }
    },
    //... 중략
  ]
}

🚆 예매 및 결제 기능 구현하기

🎫 열차 조회 및 예매 기능

열차 조회 및 예매 기능에는 carpedm20님의 Korail Python Wrapper를 사용했다. 이 기능을 사용할 수 있도록 Fast API를 사용해서 백엔드 서버를 구축했다.

💵 결제 기능

아쉽게도 carpedm20님의 Korail Python Wrapper에는 결제 기능이 없어서 결제 기능을 직접 구현해야 했다. 결제를 어떻게 구현할지 고민하다가 Selenium WebDriver를 사용해서 신용카드 결제 매크로를 만들었다.

💳 신용카드 OCR

어르신들이 가장 많이 어려움을 겪는 부분이 아무래도 결제 기능이 아닐까 싶었다. 어떻게 하면 최대한 쉽게 결제하실 수 있도록 구현할 수 있을까 고민하다가 신용카드 OCR 기능을 떠올리게 되었다. 그래서 신용카드 정보를 직접 입력하는 대신 카메라로 신용카드 뒷면 사진을 찍으면 카드 정보를 읽어올 수 있도록 구현했다. 이를 위해 Google Cloud의 Document AI로 신용카드 이미지 데이터를 학습시켜 OCR 기능을 구현했다.

🎞️ 시연 영상

해커톤 현장에서는 시간이 부족해서 결제 기능 연동까지 보여드리지 못했다 🥹 대회가 끝나고 결제 기능까지 모두 연결하고, UI적으로 아쉬웠던 부분을 보완해서 아래와 같이 완성했다.

이렇게 하고 코레일에 들어가보면 요렇게 열차표가 예매되어 있는 것을 확인할 수 있다! (계속 테스트를 해보다가 서울에서 부산 가는 열차가 예매된 것을 깜빡해서 59000원을 날린 슬픈 일도 있었다,,,🥲)

💓 참여 소감

개발자가 된 이후로 해커톤에 꼭 한 번 참여해보고 싶었는데, 이번에 참여할 기회를 얻어서 너무 좋았다.

꼴딱 밤을 새는 것이 조금 힘들긴 했지만, 중간중간 럭키드로우 추첨도 있고, 포토부스에서 사진도 촬영할 수 있어서 즐겁게 참여할 수 있었다. 참가비도 없었는데 중간중간 맛있는 간식이랑 식사도 챙겨주셔서 감사했다 🥺

그리고 다른 팀의 발표를 들으면서 배울 수 있어서 좋았다. AI 기술을 접목해서 이렇게 다양한 서비스를 개발할 수 있구나 싶었다. 나도 앞으로 꾸준히 공부하면서 새로운 시도들을 많이 해봐야겠다.

인생 첫 해커톤, 너무 즐거운 경험이었어서 다음에 기회가 된다면 또 나가보고 싶다ㅎㅎ 우리 팀 정말 고생 많았구, 같이 할 수 있어서 넘 즐거웠구, 다음에 기회가 되면 또 같이 해커톤 나가봅시닷,,,💕

next.config.mjs

도커 이미지를 빌드하기에 앞서 next.js 빌드 결과물과 관련한 설정을 해줘야 한다.

나는 정적 export를 원하는 상황이 아니었으므로, standalone 옵션으로 설정해주었다.

const nextConfig = {
    output: "standalone",
};

export default nextConfig;

Dockerfile

다음으로 Next.js 애플리케이션을 도커 이미지로 빌드하기 위해 Dockerfile을 작성한다.

Next.js 공식 문서에서 제공하는 예제 코드가 있어서 이를 참고해서 작성했다.

Dockerfile 코드는 다음과 같이 크게 세 가지 스테이지로 이루어져 있다.

• 1) 의존성 설치 스테이지
• 2) 빌드 스테이지
• 3) 프로덕션 이미지 실행 스테이지

이처럼 Multi-stage builds를 사용하는 이유는 최종적으로 만들어지는 도커 이미지의 크기를 최소화하기 위함이다.

실제로 Multi-stage builds를 사용했을 때와 사용하지 않았을 때의 이미지 사이즈를 비교해보면 146.68MB와 2.51GB로 큰 차이가 존재함을 확인할 수 있다.

# 기본 이미지로 node:18-alpine 사용
FROM node:18-alpine AS base

# 1) 의존성 설치 스테이지
FROM base AS deps
# node:18-alpine은 musl libc를 사용하는데, musl libc와 glibc 간 호환성 문제가 있을 수 있기 때문에 libc6-compat 설치
RUN apk add --no-cache libc6-compat
# 작업 디렉토리를 /app으로 설정
WORKDIR /app

# 사용하는 패키지 매니저에 따라 의존성 설치
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
RUN \
  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f package-lock.json ]; then npm ci; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
  else echo "Lockfile not found." && exit 1; \
  fi


# 2) 빌드 스테이지
FROM base AS builder
# 작업 디렉토리를 /app으로 설정
WORKDIR /app
# node_modules 디렉토리 복사
COPY --from=deps /app/node_modules ./node_modules
# 소스코드 복사
COPY . .

# 소스코드 빌드
RUN \
  if [ -f yarn.lock ]; then yarn run build; \
  elif [ -f package-lock.json ]; then npm run build; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
  else echo "Lockfile not found." && exit 1; \
  fi

# 3) 프로덕션 이미지 실행 스테이지
FROM base AS runner
# 작업 디렉토리를 /app으로 설정
WORKDIR /app

# NODE_ENV 환경 변수 설정
ENV NODE_ENV production

# 그룹 및 유저 생성
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

# 빌드된 자원 복사
COPY --from=builder /app/public ./public

# .next 디렉토리 권한 설정
RUN mkdir .next
RUN chown nextjs:nodejs .next

# 빌드 결과물 복사 및 파일 소유자 설정
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

# 사용자 설정
USER nextjs

# 3000번 포트를 외부로 노출
EXPOSE 3000

# 포트 환경 변수 설정
ENV PORT 3000

# 컨테이너가 시작될 떄 실행할 명령어 설정: next.js를 빌드한 결과물 중 하나인 server.js를 실행
CMD HOSTNAME="0.0.0.0" node server.js

.dockerignore

도커 이미지에 필요하지 않은 파일들은 .dockerignore에 작성해준다.

.github
.git
.idea
.next
.gitignore
node_modules
npm-debug.log
Dockerfile
README.md

2️⃣ Google Cloud 설정하기

앞서 도커 이미지 빌드를 위한 준비를 마쳤으니, 이제 빌드된 도커 이미지를 저장하고 실행할 환경을 마련해야 한다.

나는 Google Cloud의 Artifact Registry에 도커 이미지를 저장하고, Cloud Run을 통해 도커 이미지가 실행되도록 했다.

Artifiact Registry

먼저 도커 이미지를 관리하기 위해 Artifiact Registry에서 저장소를 생성해준다.

관리 리전으로는 asia-northeast1(도쿄)를 선택했다.

asia-northeast3(서울) 리전도 있지만, 도쿄에 비해 비용이 비싸고, 도메인 매핑 기능을 사용할 수 없는 등 제약사항이 존재해서 asia-northeast1(도쿄)를 사용하기로 했다.

IAM

GitHub Action에서 Google Cloud에 도커 이미지를 푸시하고 실행하려면 권한 설정이 필요하다.

이를 위해 IAM 및 관리자 > 서비스 계정 페이지에서 서비스 계정을 생성한 뒤 JSON 타입의 비공개 키를 생성하고 다운 받았다.

Cloud Run

Cloud Run을 사용하면 Artifact Registry에 있는 도커 이미지를 가져와서 배포할 수 있고, 도메인 맵핑을 간편하게 구현할 수 있어서 좋았다.

우선 서비스를 하나 생성한 뒤, _커스텀 도메인 관리 버튼 > 매핑 추가 버튼 > Cloud Run 도메인 매핑 버튼_을 눌러 도메인을 매핑해준다.

매핑 추가 팝업에서 _Verify a new domain_을 선택하면 Google Search Console 사이트로 연결되는데, 여기에서 도메인 소유권 확인을 마친 다음, 다시 Google Cloud로 돌아와서 내가 사용하고자 하는 도메인을 선택해주면 된다.

이 절차를 마치면 DNS 레코드가 발급되는데, 나는 가비아에서 발급 받은 도메인을 사용하기 때문에 이 레코드들을 가비아 사이트에 작성해주었다.

3️⃣ GitHub Actions 플로우 정의하기

이제 마지막으로 GitHub의 main 브랜치 코드가 변경되었을 때 자동으로 배포가 되도록 하는 설정만 추가해주면 된다.

GitHub Action Secret 설정

앞서 IAM에 발급 받은 JSON key나 region, registry 이름 등은 보안상 공개되지 않는 것이 좋기 때문에, YAML 파일에 직접 작성하지 않고 GitHub Action Secret에 있는 값을 불러와서 사용하도록 했다.

secret 값들은 Settings > Secrets and Variables > Actions > Repository Secrets > New repository secret 경로로 접속해서 등록해주면 된다.

.github/workflows/google-cloud-run-deploy.yml

.github/workflows에 YAML 파일을 추가함으로써 GitHub Action에서 실행할 작업을 정의할 수 있다.

아래의 코드는 main 브랜치에 코드가 푸시되거나, 풀 리퀘스트가 머지될 때마다 도커 이미지를 빌드해서 Google Cloud의 Artifact Registry에 이미지를 푸시하고, Cloud Run에 배포되도록 하는 코드이다.

주의해야 할 점은 {'on': {pull_request: {branches: [main]}}} 만 작성하면 아직 메인 브랜치에 풀 리퀘스트가 merge되지 않았는데도, Github Action이 실행되므로 {'on': {pull_request: {types: [closed]}}}를 추가해주고 {jobs: {dockerize-and-deploy: {if: github.event.pull_request.merged == true}}} 조건을 걸어줘야 한다.

name: Deploy to Google Cloud Run

env:
  SERVICE_NAME: giftogether

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
    types:
      - closed

jobs:
  dockerize-and-deploy:
    if: github.event.pull_request.merged == true

    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Google Cloud Auth
        uses: 'google-github-actions/auth@v2'
        with:
          project_id: ${{ secrets.GCP_PROJECT_ID }}
          credentials_json: ${{ secrets.GCP_CREDENTIALS }}

      - name: Set up Cloud SDK
        uses: 'google-github-actions/setup-gcloud@v2'

      - name: Configure Docker
        run: |
          gcloud auth configure-docker ${{ secrets.GCP_REGION }}-docker.pkg.dev

      - name: Build and Push Docker Image
        run: |
          docker build -t "${{ secrets.GCP_REGION }}-docker.pkg.dev/${{ secrets.GCP_PROJECT_ID }}/${{ secrets.GCP_REGISTRY_NAME }}/${{ secrets.DOCKER_IMAGE_NAME }}:${{ github.sha }}" .
          docker push "${{ secrets.GCP_REGION }}-docker.pkg.dev/${{ secrets.GCP_PROJECT_ID }}/${{ secrets.GCP_REGISTRY_NAME }}/${{ secrets.DOCKER_IMAGE_NAME }}:${{ github.sha }}"

      - name: Deploy to Cloud Run
        run: |
          gcloud run deploy ${{ env.SERVICE_NAME }} \
            --image=${{ secrets.GCP_REGION }}-docker.pkg.dev/${{ secrets.GCP_PROJECT_ID }}/${{ secrets.GCP_REGISTRY_NAME }}/${{ secrets.DOCKER_IMAGE_NAME }}:${{ github.sha }} \
            --region=${{ secrets.GCP_REGION }} \
            --platform=managed \
            --allow-unauthenticated

⚡️ 도커 캐싱으로 빌드 속도 높이기

로컬에서 도커 이미지를 빌드해보면 두 번째 빌드부터는 캐싱된 내용이 있기 때문에 좀 더 빠른 속도로 이미지가 빌드됨을 확인할 수 있다.

하지만 GitHub Actions의 빌드는 매번 새로운 가상 환경에서 실행되기 때문에 도커 캐싱 기능을 사용하려면 별도의 설정을 추가해줘야 한다.

도커 캐싱 기능을 사용하려면, 먼저 docker/setup-buildx-action@v3를 사용하도록 steps에 아래 단계를 추가해준다.

      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3

그리고 캐싱된 내용을 사용할 수 있도록 steps에서 name: Build and Push Docker Image 단계를 아래와 같이 수정해준다.

      - name: Build and Push Docker Image
        uses: docker/build-push-action@v2
        with:
          context: .
          file: ./Dockerfile
          push: true
          tags: ${{ secrets.GCP_REGION }}-docker.pkg.dev/${{ secrets.GCP_PROJECT_ID }}/${{ secrets.GCP_REGISTRY_NAME }}/${{ secrets.DOCKER_IMAGE_NAME }}:${{ github.sha }}
          cache-from: type=gha
          cache-to: type=gha,mode=max

그러면 빌드 속도가 얼마나 빨라지는지 확인해보자.

캐싱 기능을 사용하지 않을 때는 재배포를 해도 매번 새로 의존성을 설치하고 빌드하다보니 첫 배포와 비슷하게 4분 54초의 시간이 걸렸다.

하지만 캐싱 기능을 추가하고 새로 배포를 해보면, 2분 20초로 빌드 시간이 확연히 줄어든 것을 확인할 수 있다.

이와 관련해서 좀 더 자세한 내용은 GitHub Actions에서 도커 캐시를 적용해 이미지 빌드하기에서 확인할 수 있다.

🔐 런타임 환경 변수 설정하기

만약 NEXT_PUBLIC_으로 시작하는 런타임 환경변수를 사용하고 있다면 Dockerfile과 GitHub Action Flow에서 환경변수를 사용할 수 있도록 별도의 설정을 해줘야 한다.

.env를 GitHub에 올리는 것은 보안상 좋지 않으므로 나는 NEXT_PUBLIC_ 환경 변수를 GitHub Action Secret으로 등록해서 도커 이미지를 빌드할 때 가져다 쓸 수 있도록 했다.

우선 GitHub Action Flow의 도커 이미지 빌드를 정의하는 부분에서 아래와 같이 build-args를 추가해줘야 한다. 이는 도커 이미지를 빌드할 때 환경변수를 사용할 수 있도록 Dockerfile에 환경 변수를 전달해주는 코드이다.

🔻 google-cloud-run-deploy.yml

      - name: Build and Push Docker Image
        uses: docker/build-push-action@v2
        with:
          context: .
          file: ./Dockerfile
          push: true
          build-args: |
            NEXT_PUBLIC_OPENAI_API_KEY=${{ secrets.NEXT_PUBLIC_OPENAI_API_KEY }}
          tags: ${{ secrets.GCP_REGION }}-docker.pkg.dev/${{ secrets.GCP_PROJECT_ID }}/${{ secrets.GCP_REGISTRY_NAME }}/${{ secrets.DOCKER_IMAGE_NAME }}:${{ github.sha }}
          cache-from: type=gha
          cache-to: type=gha,mode=max

다음으로 Dockerfile의 빌드 스테이지 부분 코드를 아래와 같이 수정해준다. 소스코드 빌드를 실행하기에 앞서 build-args를 통해 넘겨 받은 값을 환경 변수로 셋팅해주는 코드이다.

🔻 Dockerfile

# 2) 빌드 스테이지
FROM base AS builder
# 작업 디렉토리를 /app으로 설정
WORKDIR /app
# node_modules 디렉토리 복사
COPY --from=deps /app/node_modules ./node_modules
# 소스코드 복사
COPY . .

ARG NEXT_PUBLIC_OPENAI_API_KEY
ENV NEXT_PUBLIC_OPENAI_API_KEY=$NEXT_PUBLIC_OPENAI_API_KEY

# 소스코드 빌드
RUN \
  if [ -f yarn.lock ]; then yarn run build; \
  elif [ -f package-lock.json ]; then npm run build; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
  else echo "Lockfile not found." && exit 1; \
  fi

최근 사이드 프로젝트를 하나 하고 있는데, 이 프로젝트의 경우 모바일에서 접속할 가능성이 높기 때문에 PC보다는 모바일에 초점을 맞춰 개발하기로 했다.

PC와 모바일에서 모두 접속 가능하게 하면서도, 모바일에 최적화된 사이트를 어떻게 만들 수 있는 방법을 찾다가 프로그레시브 웹 앱(Progressive Web Apps, PWA)에 대해 알게 되었다.

PWA는 모바일 앱과 웹 사이트의 중간 형태로, 웹 개발을 통해 모바일 앱과 유사한 경험을 제공할 수 있다는 점이 매력적이었다. PWA를 사용하면 모바일 앱처럼 홈 화면에 아이콘을 추가하고, 푸시 알림을 받고, 오프라인 상태에서 작동하게 하는 것이 가능했다.

사이드 프로젝트에 적용하기에 앞서, 우선 간단한 TODO 앱을 만들면서 PWA 기능을 익혀보았다. 자세한 코드는 GitHub에서 확인할 수 있다.

📱 manifest: 앱 이름과 아이콘 설정하기

우선 web application manifest를 통해 앱 이름과 아이콘 등을 설정해줘야 PWA로 사용할 수 있다. web app manifest는 PWA가 기기에서 어떻게 동작해야 하는지 알려주는 JSON 파일이다.

manifest를 작성하지 않은 상태에서 Lighthouse 분석을 돌려보면 아래와 같이 PWA 설치가 불가능한 상태라고 뜬다.

manifest.ts

import { MetadataRoute } from "next";

export default function manifest(): MetadataRoute.Manifest {
  return {
    name: "PWA TODO",
    short_name: "PWA TODO",
    theme_color: "#f5f5f5",
    background_color: "#f5f5f5",
    icons: [
      {
        src: "app-icon/ios/192.png",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "app-icon/ios/512.png",
        sizes: "512x512",
        type: "image/png",
      },
      {
        src: "app-icon/ios/192.png",
        sizes: "192x192",
        purpose: "maskable",
        type: "image/png",
      },
      {
        src: "app-icon/ios/512.png",
        sizes: "512x512",
        purpose: "maskable",
        type: "image/png",
      },
    ],
    orientation: "any",
    display: "standalone",
    dir: "auto",
    lang: "ko-KR",
    start_url: "/pwa-todo",
  };
}

manifest 파일은 HTML의 <head> 안의 <link>에 파일의 경로를 작성해서 포함시킬 수 있는데, Next.js의 경우 app 디렉토리 안에 manifest.ts 파일을 두면 별도로 json 파일을 생성하고 <link>를 작성할 필요가 없었다.

위와 같이 manifest.ts를 작성했는데, PWA를 설정하기 위해 반드시 들어가야 하는 속성은 앱의 이름과 관련된 name과 아이콘과 관련된 icons이다.

🔻 icons

앱 아이콘 이미지는 PWA Builder의 Image Genarator를 사용하면 기기에 맞는 여러 사이즈로 만들 수 있어서 좋았다. 그리고 기기에서 아이콘이 어떻게 보일지 미리 보고 싶을 때는 maskable 사이트를 사용하니 편했다.

purpose 필드에 아이콘이 maskable한지를 여부를 넣어주는데, 아이콘이 maskable하다는 것은 여러 모양에 적용 가능함을 의미한다. 예를 들어 안드로이드 기기에서 앱 아이콘이 원형인 경우 maskable하지 않은 경우 왼쪽과 같이 표시될 것이고, maskable한 경우 오른쪽과 같이 뜰 것이다.

🔻 display

다른 속성들도 살펴보면 display 의 경우 앱이 어떻게 표시될지를 나타내는 값인데, PWA의 경우 standalone으로 하는 것이 일반적이다. fullscreen으로 설정하면 아래 그림의 오른쪽과 같이 표시되는데, 안드로이드 기기에서는 적용 불가능하고, iOS 기기에서만 적용 가능하다.

🔻 theme_color

standalone으로 하면 위 그림의 왼쪽처럼 status bar 뒤가 비게 되는데 이 영역의 색상은 theme_color 속성을 통해 설정할 수 있다.

이렇게 manifest 설정을 마치고 Lighthouse 분석을 다시 돌려보면 아래와 같이 PWA 설치가 가능함을 확인할 수 있다.

🔔 푸시 알림 기능 구현하기

푸시 알림 개요

푸시 알림 기능 구현에 필요한 작업은 크게 아래와 같이 나누어볼 수 있다.

1. 클라이언트로부터 푸시 알림 동의 받기
2. 서버에 클라이언트의 구독 정보를 저장하기
3. 서버로부터 푸시 알림이 오면 Notification을 띄우기 3-1. Service Worker 등록하기 3-2. push 이벤트 핸들러 등록하기 3-3. 서버에서 클라이언트로 푸시 알림 보내기

푸시 알림 동의 받기

푸시 알림을 보내려면 먼저 클라이언트로부터 Notification에 대한 동의를 받아야 한다.

Service Worker, Notification, Push 기능을 지원하지 않는 브라우저도 있으므로 이를 확인한 후 동의를 받도록 한다.

🔻 Notification.requestPermission()

// Notification 허용 버튼 클릭 시
async function onClickAlert() {
  if (
    "serviceWorker" in navigator &&
    "Notification" in window &&
    "PushManager" in window
  ) {
    Notification.requestPermission().then(async (result) => {
      if (result === "granted") {
        const subscription = await getPushSubscription();
        await savePushSubscription(subscription);
        setAlertGranted(true);
      } else if (result === "denied") {
        setAlertGranted(false);
      }
    });
  }
}

알림 구독 정보 저장하기

Notification.requestPermission()까지만 해도 앱이 켜져 있는 상태에서 클라이언트는 알림을 받을 수 있다. 하지만 여기까지만 하면 앱이 꺼져 있는 상태에서는 푸시 알림을 받을 수 없다. 앱이 꺼져 있는 상태에서도 알림을 받으려면 Push API 관련 작업이 필요하다.

웹 푸시는 아래와 같은 흐름으로 이루어지는데, 푸시 메세지가 유출되거나 변조되는 것을 막으려면 암호화 및 서버 인증 과정을 거쳐야 한다. 이 작업을 쉽게 할 수 있도록 web-push 라이브러리를 사용했다.

먼저 인증에 사용할 VAPID (Voluntary Application Server Identification) key를 발급 받아야 한다. web-push 라이브러리를 설치한 후 터미널창에 아래 명령어를 입력하면 VAPID key를 발급 받을 수 있는데, 나는 발급된 키를 환경변수에 담아두고 사용했다.

🔻 VAPID key 발급

web-push generate-vapid-keys

다음으로는 PushSubscription 정보를 받아야 한다. PushSubscription은 아래와 같은 형식으로 구성되는데, 여기에는 알림을 받는 클라이언트의 endpoint 정보와 인증에 필요한 key 정보가 담겨있다.

🔻 PushSubscription

{
  "endpoint": "https://random-push-service.com/some-kind-of-unique-id-1234/v2/",
  "keys": {
    "p256dh": "BNcRdreALRFXTkOOUHK1EtK2wtaz5Ry4YfYCA_0QTpQtUbVlUls0VJXg7A8u-Ts1XbjhazAkj7I99e8QcYP7DkM=",
    "auth": "tBHItJI5svbpez7KI4CCXg=="
  }
}

PushSubscription 을 받으려면 registration.pushManager.subscribe()를 호출하면 된다.

이 때 두 가지 옵션값을 설정할 수 있는데, 먼저 userVisibleOnly는 push 이벤트가 발생했을 때 사용자에게 알림을 보낼지 여부이다. 간혹 사용자에게 알리지 않고 백그라운드 작업이 필요한 경우 이 값을 false로 하면 된다.

다음으로 applicationServerKey는 푸시 알림을 보내는 애플리케이션을 식별하는 데에 사용되는 키다. 여기에는 앞서 발급받은 VAPID key의 public key를 담아주면 된다.

🔻 registration.pushManager.subscribe()

// PushSubscription을 가져오는 함수
async function getPushSubscription(): Promise<PushSubscription | null> {
  try {
    const registration = await navigator.serviceWorker.getRegistration();

    if (!registration) {
      console.error("ServiceWorkerRegistration을 찾을 수 없습니다.");
      return null;
    }

    if (!process.env.VAPID_PUBLIC_KEY) {
      console.error("VAPID Puplic key가 존재하지 않습니다.");
      return null;
    }

    const subscription = await registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: process.env.VAPID_PUBLIC_KEY,
    });

    return subscription;
  } catch (e) {
    console.error(
      "PushSubscription을 가져오는 동안 오류가 발생했습니다: ",
      e,
    );
    return null;
  }
}

// 서버에 PushSubscription을 저장하는 함수
async function savePushSubscription(subscription: PushSubscription | null) {
  if (!subscription) {
    console.error("PushSubscription이 존재하지 않습니다.");
    return;
  }

  axios
    .post("/api/subscribe", {
    subscription,
  })
    .catch((e) => console.error(e));
}

🔻 서버에 Subscription 정보 저장하기 (/app/api/subscribe/route.ts)

PushSubscription을 받으면 추후에 알림을 보낼 때 사용할 수 있도록 서버에 저장을 해야 한다. 나는 Vercel의 Postgres를 사용해서 구축한 DB에 이 정보를 저장하도록 했다.

import { sql } from "@vercel/postgres";
import { SubscriptionInfo } from "@/app/pwa-todo/types";

export async function POST(req: Request) {
  const { subscription } = await req.json();
  const data = await sql`
        INSERT INTO pwa_subscription (subscription)
        VALUES (${subscription})
    `;
  return Response.json({ success: data.rowCount === 1 });
}

ServiceWorker 등록하기

푸시 알림 기능을 구현하려면 앱이 켜져있지 않을 때에도 백그라운드에서 알림이 필요한 상황을 파악할 수 있어야 한다. 이러한 백그라운드 작업을 수행하려면 Service Worker를 등록해야 한다.

Service Worker는 자신이 커버하는 범위 내에 있는 요청이 들어오면 일종의 네트워크 프록시처럼 그 요청을 가로채서 Service Worker에 등록된 작업들을 수행한다.

Service Worker가 커버하는 범위는 javascript 파일의 위치에 따라 결정된다. 파일이 루트에 위치하면 / 범위로 등록돼서 모든 url을 커버하게 되고, /sub-directory 디렉토리 안에 위치하면 /sub-directory와 맵핑되는 url을 커버하게 된다. 공식문서에는 Service Worker를 가능한 한 루트에 가깝게 등록하는 것이 권장된다고 적혀있다. 실제로 다른 디렉토리에 넣어서 작업하다가 undefined 에러를 몇 번 마주했다. 그래서 /public 디렉토리에 sw.js 파일을 둬서 모든 범위를 커버할 수 있도록 했다.

useEffect(() => {
  if ("serviceWorker" in navigator) {
    navigator.serviceWorker
      .register("/sw.js")
      .then((registration) => {
        console.log(
          "Service Worker registration successful with scope: ",
          registration.scope,
        );
      })
      .catch((err) =>
         console.error("Service Worker registration failed: ", err),
      );
  }
}, []);

push 이벤트 핸들러 등록하기

이제 Service Worker 등록을 마쳤으니, 서버로부터 푸시가 왔을 때 어떤 작업을 하면 될지 Service Worker에게 알려주면 된다.

웹 푸시가 이루어지는 과정은 아래 그림과 같은데, 서버로부터 온 메세지를 기기가 받으면 브라우저는 Service Worker를 깨우고, Push Event가 발생된다. 우리가 해야 할 일은 push 이벤트가 발생했을 때 알림을 띄울 수 있도록 하는 것이다.

/sw.js 파일에 아래와 같이 push 이벤트 핸들러를 작성해주었다. 여기에서 self는 Service Worker를 의미한다. push 이벤트 핸들러는 ServiceWorkerRegistration의 showNotification()을 호출해서 알림을 띄울 수 있도록 한다.

self.addEventListener("push", function (event) {
  const { title, message } = event.data.json();
  const options = {
    body: message,
    icon: "/app-icon/ios/192.png",
  };
  event.waitUntil(self.registration.showNotification(title, options));
});

푸시 알림 보내기

여기까지 오면 push 이벤트가 발생했을 때 알림을 띄울 수 있도록 하는 모든 작업이 마무리되었으니, 마지막으로 푸시 알림을 보내기만 하면 된다.

이를 위해 이전에 DB에 저장해두었던 클라이언트들의 구독 정보(PushSubscription)들을 조회해온다.

🔻 Subscription 정보 조회 API (/app/api/subscribe/route.ts)

import { sql } from "@vercel/postgres";
import { SubscriptionInfo } from "@/app/pwa-todo/types";

export async function GET() {
  const data = await sql<SubscriptionInfo>`
    SELECT *
    FROM pwa_subscription
    ORDER BY id
  `;
  return Response.json(data.rows);
}

다음으로 web-push 라이브러리의 sendNotification()를 호출하여 클라이언트로 푸시 알림을 보낼 수 있는 API를 만든다. sendNotification()을 호출할 때는 알림을 받을 클라이언트의 PushSubscription과, 알림창의 제목과 내용, VAPID keys를 전달해주면 된다.

🔻 푸시 알림 전송 API (/app/api/send-message/route.ts)

import webPush, { PushSubscription } from "web-push";

export async function POST(req: Request) {
  const { pushSubscription, title, message } = await req.json();
  const subscription = JSON.parse(pushSubscription) as PushSubscription;
  const payload = JSON.stringify({ title, message });

  if (
    !process.env.VAPID_SUBJECT ||
    !process.env.VAPID_PUBLIC_KEY ||
    !process.env.VAPID_PRIVATE_KEY
  ) {
    console.error("VAPID key 정보가 없습니다.");
    return Response.error();
  }

  const options = {
    vapidDetails: {
      subject: process.env.VAPID_SUBJECT,
      publicKey: process.env.VAPID_PUBLIC_KEY,
      privateKey: process.env.VAPID_PRIVATE_KEY,
    },
    TTL: 60,
  };

  try {
    const response = await webPush.sendNotification(
      subscription,
      payload,
      options,
    );
    return Response.json(response);
  } catch (error) {
    console.error("notification error", error);
    return Response.error();
  }
}

🔻 클라이언트 푸시 알림 전송 코드

  // 구독하고 있는 클라이언트들에게 Push 알림을 보내는 함수
  async function pushNotification() {
    const subscriptions = await axios
      .get("/api/subscribe")
      .then((response) => response.data);

    let promiseChain = Promise.resolve();

    for (let i = 0; i < subscriptions.length; i++) {
      const subscription = subscriptions[i];
      promiseChain = promiseChain.then(() => {
        return triggerPushMsg(
          subscription,
          "🔔 TODO",
          "오늘의 할 일 잊지 마세요!",
        );
      });
    }

    return promiseChain;
  }

  async function triggerPushMsg(
    pushSubscription: SubscriptionInfo,
    title: string,
    message: string,
  ) {
    await axios
      .post("/api/send-message", {
        pushSubscription: pushSubscription.subscription,
        title,
        message,
      })
      .catch((e) => console.error(e));
  }

👀 결과물

그러면 아래와 같이 홈 화면에 앱을 추가하고 알림을 받는 것이 가능하다.

PWA의 아쉬운 점은 설치 과정이 직관적이지 않은 점인 것 같다. 최소한 설치하기 버튼을 눌렀을 때 설치가 되게 할 수 있으면 좋을 것 같은데, iOS의 경우 반드시 사파리로 들어가서 공유하기 버튼을 누른 뒤, 홈 화면에 추가하기 버튼을 눌러야 설치를 할 수 있다. 아무래도 네이티브 언어로 개발한 앱에 비해서는 제약이 있는 것 같다.

그럼에도 불구하고 앱 스토어에 배포하는 과정 없이 모바일 앱과 유사한 경험을 제공할 수 있고, 데스크톱과 모바일에서 모두 사용 가능한 사이트를 만들 수 있다는 것은 큰 장점인 것 같다.

지난 돌돌밋 프로젝트에서 OpenVidu를 사용해서 WebRTC 기능을 구현했었다.

그런데 이 때 아쉬웠던 점은 OpenVidu 관련 코드가 컴포넌트 내에서 너무 많은 양을 차지하다보니까 코드 가독성이 떨어졌던 점이었다.

그리고 WebRTC 기능을 사용하는 페이지마다 동일한 코드가 반복적으로 들어가는 것도 비효율적이었다.

이런 문제를 해결하기 위해 useOpenVidu 훅과 useMediaDevice 훅을 만들어보았다.

자세한 코드는 GitHub에서 확인할 수 있다.

💚 useOpenVidu

OpenVidu로 영상통화 기능을 구현하려면 아래와 같은 작업들이 이루어져야 하는데, useOpenVidu 내에서 이 작업들을 수행하도록 했다.

1. OpenVidu 객체 생성
2. Session 객체 생성
3. /openvidu/api/sessions API로 요청을 보내서 세션 생성
4. 세션에 streamCreated, streamDestroyed 이벤트 핸들러 등록
5. /openvidu/api/sessions/${sessionId}/connection API로 요청을 보내서 토큰 발급
6. 발급 받은 토큰을 기반으로 세션에 연결
7. 접속한 기기의 비디오 및 오디오 장치를 기반으로 Publisher 객체 생성
8. 생성된 Publisher 객체를 세션에 배포

OptionsType

useOpenVidu의 파라미터로는 아래의 값들을 받을 수 있도록 했다.

• sessionId : 세션 아이디
• connect : 영상통화 연결 여부 (true가 되는 순간 연결함)
• clientData : 세션 연결 시 전달할 클라이언트의 정보 (아이디, 이름 등)
• eventHandlers : 세션 이벤트 핸들러의 리스트
• publisherProperties : Publisher 설정 옵션 (거울 모드, frame rate 등)

ReturnType

useOpenVidu는 아래의 객체들을 반환하도록 했다.

현재 영상통화의 설정을 변경할 때는 아래의 객체들에 접근하는 것이 필요하므로 이를 jotai의 atom으로 두어서 여러 컴포넌트에서 접근할 수 있도록 했다.

• ov : OpenVidu 객체
• session : Session 객체
• myStream : 나의 미디어 스트림 (Publisher 객체)
• subscribers: 다른 사람들의 미디어 스트림 (StreamManager의 배열)

SessionEventHandler

OpenVidu는 Session 객체의 on 메서드를 통해 특정 이벤트가 발생했을 때 이루어져야 할 작업을 정의할 수 있다. (예를 들어 signal:alert 이벤트가 발생하면 팝업이 열리게 하는 등)

지난 번 돌돌밋 프로젝트를 할 당시 OpenVidu 관련 로직을 쉽게 분리하지 못했던 이유는 이벤트 핸들러 등록 때문이었다. 왜냐하면 특정 이벤트가 발생했을 때 컴포넌트 내부의 state를 변경해야 하는 경우가 많았기 때문이다.

이러한 문제를 해결하기 위해 SessionEventHandler 타입을 정의했다. 그리고 state 변경 등 이벤트 발생 시 실행되어야 할 로직은 handler 프로퍼티에 담아서 useOpenVidu에 전달할 수 있도록 했다.

export type SessionEventHandler<K extends keyof SessionEventMap> = {
  type: K;
  handler: (event: SessionEventMap[K]) => void;
};

beforeunload

useOpenVidu 페이지를 벗어나면 영상통화가 끊어지도록 해야 했다.

그렇지 않으면 영상통화 페이지를 벗어났는데도 카메라와 마이크를 사용하는 상태로 그대로 남아있었다.

이를 위해 beforeunload 이벤트가 발생하면 세션의 disconnect 메서드를 호출하여 연결을 해제하도록 했다.

useOpenVidu 전체 코드

import { useEffect } from "react";
import { useAtom } from "jotai";
import {
  OpenVidu,
  Publisher,
  PublisherProperties,
  Session,
  StreamManager,
} from "openvidu-browser";
import { SessionEventHandler } from "@/app/openvidu/constants";
import { joinSession } from "@/app/openvidu/api";
import {
  myStreamAtom,
  openViduAtom,
  sessionAtom,
  subscribersAtom,
} from "@/app/openvidu/store";
import { registerDefaultEventHandler } from "@/app/openvidu/utils";

interface OptionsType {
  sessionId: string;
  connect: boolean;
  clientData?: any;
  eventHandlers?: SessionEventHandler<any>[];
  publisherProperties?: PublisherProperties;
}

interface ReturnType {
  ov?: OpenVidu;
  session?: Session;
  myStream?: Publisher;
  subscribers?: StreamManager[];
}

function useOpenVidu({
  sessionId,
  connect,
  clientData,
  eventHandlers = [],
  publisherProperties,
}: OptionsType): ReturnType {
  const [ov, setOv] = useAtom<OpenVidu | undefined>(openViduAtom);
  const [session, setSession] = useAtom<Session | undefined>(sessionAtom);
  const [myStream, setMyStream] = useAtom<Publisher | undefined>(myStreamAtom);
  const [subscribers, setSubscribers] =
    useAtom<StreamManager[]>(subscribersAtom);

  // 세션 아이디가 변경될 때마다 세션에 다시 연결
  useEffect(() => {
    async function joinNewSession() {
      if (sessionId && connect) {
        const ov = new OpenVidu();
        const session = ov.initSession();
        // 기본 이벤트 핸들러 등록 (Stream 추가 / 제거)
        registerDefaultEventHandler(eventHandlers, session, setSubscribers);
        const myStream = await joinSession({
          sessionId,
          ov,
          session,
          eventHandlers,
          clientData,
          publisherProperties,
        });

        // 상태 업데이트
        setOv(ov);
        setSession(session);
        setMyStream(myStream);
      }
    }

    joinNewSession();
  }, [sessionId, connect]);

  // 페이지를 벗어날 때 세션 연결 해제
  useEffect(() => {
    const beforeUnload = (event: BeforeUnloadEvent) => {
      // 세션 연결 해제
      session?.disconnect();
      // atom 초기화
      setOv(undefined);
      setSession(undefined);
      setMyStream(undefined);
      setSubscribers([]);
      event.returnValue = true;
    };

    window.addEventListener("beforeunload", beforeUnload);

    return () => {
      window.removeEventListener("beforeunload", beforeUnload);
    };
  }, []);

  return {
    ov,
    session,
    myStream,
    subscribers,
  };
}

export default useOpenVidu;

💛 useMediaDevice

사용할 수 있는 비디오 / 오디오 장치가 여러 가지 있는 경우 useMediaDevice를 통해 그 목록을 확인하고, 변경할 수 있도록 했다.

OpenVidu 객체의 getDevices() 메서드를 통해 사용자의 미디어 디바이스 목록을 가져올 수 있기 때문에, useOpenVidu에서 생성한 OpenVidu 객체를 useAtomValue를 사용해서 가져왔다.

그리고 선택한 장치가 변경되면 이 옵션으로 새로운 Publisher 객체를 만들고 이를 세션에 다시 publish하도록 했다.

useMediaDevice 기능을 테스트해보기 위해 아이폰으로 접속해보았는데, 아래와 같이 사용할 수 있는 디바이스 목록이 뜨고 선택한 옵션으로 변경 가능함을 확인할 수 있었다.

useMediaDevice 코드 전체

import { useEffect, useState } from "react";
import { useAtom, useAtomValue } from "jotai";
import {
  Device,
  OpenVidu,
  Publisher,
  PublisherProperties,
  Session,
} from "openvidu-browser";
import { myStreamAtom, openViduAtom, sessionAtom } from "@/app/openvidu/store";
import { defaultPublisherProperties } from "@/app/openvidu/constants";

interface OptionType {
  publisherProperties?: PublisherProperties;
}

interface ReturnType {
  audioInputs: Device[];
  videoInputs: Device[];
  selectedAudio: Device | undefined;
  selectedVideo: Device | undefined;
  changeMic: (deviceId: string) => void;
  changeCamera: (deviceId: string) => void;
}

export default function useMediaDevice({
  publisherProperties = defaultPublisherProperties,
}: OptionType = {}): ReturnType {
  // atom
  const ov = useAtomValue<OpenVidu | undefined>(openViduAtom);
  const session = useAtomValue<Session | undefined>(sessionAtom);
  const [myStream, setMyStream] = useAtom<Publisher | undefined>(myStreamAtom);
  // state
  const [audioInputs, setAudioInputs] = useState<Device[]>([]);
  const [videoInputs, setVideoInputs] = useState<Device[]>([]);
  const [selectedAudio, setSelectedAudio] = useState<Device>();
  const [selectedVideo, setSelectedVideo] = useState<Device>();

  useEffect(() => {
    async function init() {
      if (ov) {
        const devices = await ov.getDevices();
        const audioDevices = devices.filter(
          (device) => device.kind === "audioinput",
        );
        const videoDevices = devices.filter(
          (device) => device.kind === "videoinput",
        );
        setAudioInputs(audioDevices);
        setVideoInputs(videoDevices);
        setSelectedAudio(audioDevices[0]);
        setSelectedVideo(videoDevices[0]);
      }
    }

    init();
  }, [ov, session]);

  // 카메라 / 마이크 선택이 변경될 경우 변경된 Publisher 스트림을 세션에 배포
  useEffect(() => {
    async function changeDevice() {
      if (ov && session) {
        const newPublisher = await ov.initPublisherAsync(undefined, {
          ...publisherProperties,
          videoSource: selectedVideo?.deviceId,
          audioSource: selectedAudio?.deviceId,
        });
        if (myStream) {
          await session.unpublish(myStream);
        }
        await session.publish(newPublisher);
        setMyStream(newPublisher);
      }
    }

    changeDevice();
  }, [selectedAudio, selectedVideo]);

  // 마이크 변경
  function changeMic(deviceId: string) {
    const selected = audioInputs.find((audio) => audio.deviceId === deviceId);

    setSelectedAudio(selected);
  }

  // 카메라 변경
  function changeCamera(deviceId: string) {
    const selected = videoInputs.find((video) => video.deviceId === deviceId);

    setSelectedVideo(selected);
  }

  return {
    audioInputs,
    videoInputs,
    selectedAudio,
    selectedVideo,
    changeMic,
    changeCamera,
  };
}

포트폴리오를 노션 링크로 제출하려니 경력사항과 프로젝트 목록이 한 눈에 들어오지 않는 점이 아쉬워서 웹사이트를 만들게 되었다.

🛠 기술 스택

• Next.js
• TypeScript
• Material UI
• Vercel

🎨 UI 디자인

막상 포트폴리오 사이트를 만들려고 하니 디자인을 어떻게 해야 할지 막막했다.

그래서 "프론트엔드 개발자 이력서" 키워드로 검색해서 다른 분들의 디자인을 많이 참고했다.

그리고 Velog 사이트와 네이버, 카카오 등의 기업 소개 사이트들도 디자인을 구상할 때 많은 도움이 되었다.

📝 마크다운 커스텀하기

회사 경력 사항, 프로젝트 상세 내용과 같은 부분은 들어갈 내용이 많고, 업데이트를 할 일이 잦다보니 아무래도 마크다운으로 관리하는 것이 편할 것 같았다.

그래서 아래 사진처럼 노란색 박스로 표시한 부분에 마크다운을 임베딩하는 방식으로 구현했다.

마크다운을 넣는 데에는 react-markdown 라이브러리를 사용했다.

그리고 마크다운 디자인을 커스텀하기 위해 Material UI의 styled 함수를 사용하여 코드 블록, 하이퍼링크 등의 CSS를 정의한 StyledMarkdown 컴포넌트를 만들었다.

import { styled } from "@mui/material";

const StyledMarkdown = styled("div")(({ theme }) => {
  return {
    "h1, h2, h3": {
      marginTop: 30,
    },

    // Code Block
    "& pre": {
      padding: "0px 10px",
      borderRadius: 2,
    },
       // ... 중략
  };
});

export default StyledMarkdown;

그리고 아래와 같이 ReactMarkdown 컴포넌트를 StyledMarkdown 컴포넌트로 감싸주었다.

그리고 마크다운에 HTML 코드를 넣을 수 있도록 rehypePlugins에 rehype-raw 라이브러리를 추가해주었다.

export default function CustomMarkdown({ mdFilePath }: CustomMarkdownProps) {
  // ... 중략

  return (
    <StyledMarkdown>
      <ReactMarkdown components={components} rehypePlugins={[rehypeRaw]}>
        {markdown}
      </ReactMarkdown>
    </StyledMarkdown>
  );
}

🤹 Carousel 구현하기

노트북 화면을 기준으로 한 행에 그리드 아이템이 3개인 게 가장 보기가 좋았다.

교육 및 대외활동 섹션이나, 자격증 및 수상 섹션은 마침 딱 3개가 들어가서 딱이다 싶었는데, 문제는 프로젝트 섹션에 4개 항목이 들어가야 했다.

네 번째 항목만 덩그러니 다음 행으로 떨어져 있으면 보기가 안 좋았고, 그렇다고 "더보기" 버튼을 넣자니 새로운 페이지를 만들어야 해서 마땅찮았다.

그래서 고민하다가 Carousel을 넣는 것이 좋겠다고 결론을 내렸다.

Carousel 라이브러리로는 Swiper, Slick Slider, react-material-ui-carousel를 설치해서 비교해봤는데, Swiper에 내가 원하는 기능이 모두 들어가 있어서 이 라이브러리로 구현했다.

Swiper는 이전/다음 버튼을 커스텀할 수 있고, 반응형으로 슬라이드 개수를 지정할 수 있어서 좋았다.

"use client";
import { Container, IconButton } from "@mui/material";
import { Swiper } from "swiper/react";
import { Navigation } from "swiper/modules";
import NavigateBeforeIcon from "@mui/icons-material/NavigateBefore";
import NavigateNextIcon from "@mui/icons-material/NavigateNext";
import { ReactNode } from "react";
import "./Carousel.css";

interface Props {
  id: string;
  children: ReactNode;
}

export default function CarouselContainer({ id, children }: Props) {
  return (
    <>
      <Container sx={{ maxWidth: "80%" }}>
        <Swiper
          cssMode={true}
          modules={[Navigation]}
          slidesPerView={3}
          spaceBetween={24}
          navigation={{
            prevEl: `#${id}-prev-slide-button`,
            nextEl: `#${id}-next-slide-button`,
            disabledClass: "swiper-button-disabled",
          }}
          pagination={true}
          breakpoints={{
            0: {
              slidesPerView: 1,
            },
            920: {
              slidesPerView: 2,
            },
            1200: {
              slidesPerView: 3,
            },
          }}
          style={{
            width: "100%",
            height: "100%",
          }}
        >
          {children}
        </Swiper>
      </Container>
      <IconButton
        id={`${id}-prev-slide-button`}
        sx={{ position: "absolute", top: "46%", left: "4vw", zIndex: 1000 }}
      >
        <NavigateBeforeIcon fontSize="large" />
      </IconButton>
      <IconButton
        id={`${id}-next-slide-button`}
        sx={{ position: "absolute", top: "46%", right: "4vw", zIndex: 1000 }}
      >
        <NavigateNextIcon fontSize="large" />
      </IconButton>
    </>
  );
}

📱💻 반응형 웹 디자인하기

이번에 포트폴리오 사이트를 만들면서 신경 쓴 점은 어떤 디바이스, 플랫폼에서 접속하더라도 최대한 일관적인 디자인을 보여드릴 수 있도록 하는 것이었다.

reset css

먼저 다양한 브라우저에서 일관된 모양이 나올 수 있도록 reset css를 적용하는 작업을 진행했다.

Material UI의 경우 <CssBaseline /> 컴포넌트를 통해 이 작업이 가능했다.

나는 앱 최상단 layout.tsx에 <CssBaseline />를 추가해주었다.

media query

기본적으로 media query를 사용해서 뷰포트의 크기에 따라 화면이 다르게 보일 수 있도록 구현했다.

그런데 서버 사이드 렌더링 컴포넌트의 경우 렌더링 시점에 뷰포트의 크기를 알 수 없어서 문제가 발생했다.

모바일에서 접속하면 PC용 화면이 잠시 보였다가 렌더링이 완료된 이후에 모바일용 화면이 보이는 문제가 있었다.

이 문제는 Next.js의 Middleware를 사용해서 해결할 수 있었다.

아래 코드와 같이 Next.js의 middleware.ts에서 User-Agent 정보를 분석해서 렌더링이 이루어지기 전에 모바일 접속 여부를 파악할 수 있도록 했다.

그리고 이 정보를 response 헤더에 담아서 컴포넌트에 전달했다.

디바이스 타입 정보를 편하게 읽을 수 있도록 useViewport 훅을 만들어서 사용했다.

export function middleware(request: NextRequest) {
  const { device } = userAgent(request);
  const viewport = device.type === "mobile" ? "mobile" : "desktop";
  const response = NextResponse.next();
  response.headers.set("viewport", viewport);
  return response;
}

import { headers } from "next/headers";

export const useViewport = () => {
  const viewport = headers().get("viewport");

  return {
    isMobile: viewport === "mobile",
    isDesktop: viewport === "desktop",
  };
};

최근 포트폴리오 사이트를 만들면서 고민이 됐던 지점은 "어떻게 하면 프로젝트에서 구현한 기능들을 최대한 풍부하게 보여드릴 수 있을까?"였다.

라이브 데모 링크를 첨부한다 하더라도, 우리 사이트를 처음 이용하는 분이라면 어디를 어떻게 눌러야 작동하는지 알기 어려울 것이기 때문이다.

특히 실제 서비스의 경우 정해진 조건들이 맞아야 제대로 기능이 동작하기 때문에, DB에 적절한 데이터가 없다면 사실상 메인 페이지밖에 볼 수 없는 상황이 되어버리는 것이다.

그래서 생각난 것이 바로 프로덕트 투어 기능이었다.

🚗 React Joyride

리액트에서 프로덕트 투어 기능을 구현할 때 많이 사용되는 라이브러리로는 React Joyride, intro.js, reacttour 등이 있었다.

우선 이번에는 가장 많이 사용되고, 제일 최근까지 업데이트가 이루어진 React Joyride로 프로덕트 투어 기능을 구현해보았다.

React Joyride를 사용해보니 불편한 점이 몇 가지 있었는데, 이 글을 쓰면서 다른 라이브러리들을 다시 살펴보다보니 다음에는 intro.js와 같은 다른 라이브러리를 사용해봐도 괜찮겠다는 생각이 든다.

React Joyride의 어떤 점이 좋았고, 아쉬웠는지는 아래에서 살펴보자.

🛠 Next.js에서 React Joyride 사용하기

React Joyride는 ssr이 지원되지 않아서 아래와 같이 dynamic import를 해서 사용했다.

그리고 페이지별로 Joyride 컴포넌트를 넣어야 하는데, 동일한 기본 옵션을 매 페이지마다 넣는 것은 번거로울 듯하여 아래와 같이 ProductTour 컴포넌트를 따로 만들었다.

import dynamic from "next/dynamic";
import { Props } from "react-joyride";
import TourTooltip from "@/components/product-tour/TourTooltip";

const JoyRide = dynamic(() => import("react-joyride"), { ssr: false });

export default function ProductTour(props: Props) {
  return (
    <JoyRide
      showProgress={true}
      continuous={true}
      spotlightClicks={true}
      tooltipComponent={TourTooltip}
      styles={{
        options: {
          zIndex: 10000,
        },
      }}
      {...props}
    />
  );
}

📝 step 작성하기

프로덕트 투어 영역과 순서를 설정하는 방법은 꽤 간단했다.

steps props에 내가 설명하고자 하는 컴포넌트의 css 선택자(target)와 툴팁에 넣을 내용(content)만 작성해주면 됐다.

필수 항목인 target과 content 외에도 placement를 사용해서 툴팁의 위치를 정하는 등 변경할 수 있는 옵션들이 꽤 있었다.

<ProductTour
  run={true}
  callback={callback}
  steps={[
    {
      target: "#fan-meeting-photo-carousel",
      content:
      "함께 찍은 사진과 녹화된 팬미팅 영상을 다운로드 및 공유할 수 있어요.",
      disableBeacon: true,
      placement: "left",
    },
    {
      target: "#end-fanmeeting-page",
      content: "자! 이제 돌돌밋을 즐기러 가볼까요? 🚀",
      disableBeacon: true,
      placement: "center",
    },
  ]}
  />

🎨 Tooltip 컴포넌트 커스텀하기

다른 라이브러리들에 비해 React Joyride는 커스텀을 안 해도 기본 디자인이 깔끔하고 예쁜 편이었다.

하지만 마우스를 올렸을 때 버튼 테두리가 검정색으로 두껍게 표시되는 등 몇 가지 걸리는 부분들이 있어서 Tooltip 컴포넌트를 커스텀하기로 했다.

아래와 같이 TooltipRenderProps를 props로 받는 컴포넌트를 만들고, 이 컴포넌트롤 JoyRide의 tooltipComponent props로 전달해주었다.

import { Box, Button, Stack, Typography } from "@mui/material";
import type { TooltipRenderProps } from "react-joyride/src/types/components";

export default function TourTooltip({
  step,
  index,
  continuous,
  backProps,
  primaryProps,
  closeProps,
}: TooltipRenderProps) {
  return (
    <Stack
      direction={"column"}
      sx={{ backgroundColor: "#FFFFFF", borderRadius: 2, p: 2 }}
      spacing={1}
    >
      <Box sx={{ py: 3, px: 1 }}>
        <Typography sx={{ textAlign: "center", fontSize: 15 }}>
          {step.content}
        </Typography>
      </Box>
      <Stack
        direction={"row"}
        justifyContent={index === 0 ? "flex-end" : "space-between"}
      >
        {index > 0 && (
          <Button {...backProps} variant={"outlined"}>
            Back
          </Button>
        )}
        {!step.hideFooter && continuous && (
          <Button {...primaryProps} variant={"contained"}>
            Next
          </Button>
        )}
        {!step.hideFooter && !continuous && (
          <Button {...closeProps}>Close</Button>
        )}
      </Stack>
    </Stack>
  );
}

📣 callback 활용하기

프로덕트 투어 기능을 구현하면서 state를 변경하거나, url을 이동해야 하는 경우가 있었다. 이를 위해 JoyRide 컴포넌트의 callback props를 활용했다.

버튼을 누를 때마다 콜백 함수가 실행되는데, 콜백함수의 인자로 전달되는 CallBackProps에는 현재 버튼이 눌러진 스텝에 대한 정보(현재 툴팁이 보이는 상태인지, 종료된 상태인지, 몇 번째 단계인지 등등)가 담겨 있다.

이를 활용해서 내가 원하는 시점에 state를 변경해서 팝업을 띄우거나, url을 이동할 수 있었다.

intro.js의 경우 onStart, onChange, onComplete 등 콜백 함수가 세분화되어 있는 점이 상대적으로 좋아보였다. 콜백 함수를 다뤄야 할 일이 많다면 이 라이브러리를 써봐도 괜찮을 것 같았다.

  const productTourCallback = (data: CallBackProps) => {
    const { type, step, lifecycle } = data;

    // state 변경
    if (step.target === "#subtitle-bar" && lifecycle === "tooltip") {
      setEndSoon(true);
    }

    // url 이동
    if (type === "tour:end") {
      window.location.href = "/end-fanmeeting/user/3";
    }
  };

👏🏻 결과물

그렇게 해서 완성된 최종 결과물은 아래와 같다.

실제 서비스의 경우 영상통화 상대가 접속해 있어야 영상통화방으로 넘어갈 수 있어서 사실상 메인 페이지 밖에 볼 수 없는 상태였는데, 프로덕트 투어 기능을 도입해서 팬미팅의 시작부터 종료까지 주요 기능을 전반적으로 훑어볼 수 있는 상태가 되어서 좋았다.

+ 의존성 추가

yarn add three @react-three/fiber @react-spring/three @react-three/drei 
yarn add @types/three --dev

📝 nextConfig.js 수정

그리고 nextConfig.js에서 transpilePackages를 수정해주었다.

기본적으로 Next.js는 외부 패키지를 트랜스파일하지 않는데, transpilePackages에 추가하면 해당 외부 패키지를 트랜스파일 대상에 포함시킬 수 있다.

three.js를 트랜스파일 대상에 포함시키는 것은 번들 사이즈를 줄이기 위해서이다.

트랜스파일되지 않은 코드는 번들링되어서 브라우저로 전송되는데, Three.js와 같이 큰 라이브러리의 경우 트랜스파일 대상에 포함시키는 것이 좋다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ["three"],
};

module.exports = nextConfig;

💚 기본 요소

@react-three/fiber (React Three Fiber)는 React 환경에서 three.js를 사용하기 쉽게 해주는 라이브러리이다.

🔻 Canvas

만약 three.js만을 사용할 경우 아래와 같이 Scene과 Camera을 생성하고, animate()와 같이 render loop를 설정해줘야 한다.

👉🏻 three.js만을 사용한 경우

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)

const renderer = new THREE.WebGLRenderer()
renderer.setSize(width, height)
document.querySelector('#canvas-container').appendChild(renderer.domElement)

function animate() {
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
}

animate()

하지만 @react-three/fiber의 Canvas를 사용하면 위의 코드는 아래와 같이 간단한 코드로 바꿀 수 있다.

👉🏻 @react-three/fiber의 Canvas를 사용한 경우

  return (
    <div id="canvas-container">
      <Canvas />
    </div>
  )

🔻 Mesh

<mesh /> 태그는 new THREE.Mesh()와 동일하게 동작한다.

Mesh 컴포넌트는 geometry와 material을 결합하여 3D 객체를 표현하는 데에 사용된다.

⭐️ geometry three.js에서 geometry란 상자, 구, 원통 등과 같은 기하학적 모양을 의미한다.

⭐️ material three.js에서 material은 표면의 속성, 즉 재질을 의미한다. 색상, 빛 반사 등을 material을 통해 설정할 수 있다.

이제 React Three Fiber 공식문서의 예제를 따라 만들어보면서 기초를 익혀보자.

🎨 배경 및 카메라 셋팅

"use client";
import { Canvas } from "@react-three/fiber";
import {
  CameraControls,
  Environment,
  PerspectiveCamera,
} from "@react-three/drei";
import { Box, Cactus, Camera, Level, Sudo } from "@/components/Scene";

export default function Home() {
  return (
    <Canvas flat>
      <CameraControls minPolarAngle={0} maxPolarAngle={Math.PI / 1.6} />
      <ambientLight intensity={Math.PI / 2} />
      <group scale={20} position={[0, -10, 0]}>
        <Level />
        <Sudo />
        <Camera />
        <Cactus />
        <Box position={[-0.8, 1.4, 0.4]} scale={0.15} />
      </group>
      <Environment preset="city" background blur={1} />
      <PerspectiveCamera makeDefault position={[80, 20, 80]} />
    </Canvas>
  );
}

위에서 CameraControls, Environment, PerspectiveCamera는 @react-three/drei의 컴포넌트이다.

💡 @react-three/drei @react-three/drei는 @react-three/fiber를 더 사용하기 쉽게끔 만들어주는 라이브러리라고 할 수 있다. 자세한 설명은 GitHub에서 읽을 수 있고, Storybook에서 값을 변경해가면서 각 컴포넌트를 테스트해볼 수 있다.

🔻 Environment

우선 Environment는 three.js의 scene.environment과 동일한 컴포넌트이다.

preset을 사용하면 내장된 배경을 사용할 수 있어서 편리했다.

숲, 도시, 방 등 꽤 다양한 옵션을 선택할 수 있었고, blur를 1까지 높이면 그라데이션 배경을 연출할 수 있어서 좋았다.

🔻 CameraControls

CameraControls는 THREE.OrbitControls의 기능 및 부가적인 기능을 제공하는 컴포넌트이다.

CameraControls를 사용하면 타겟을 중심으로 한 카메라의 궤도를 설정할 수 있다.

🔻 PerspectiveCamera

three.js에는 다양한 종류의 카메라가 있는데, 그 중 가장 일반적으로 사용되는것이 PerspectiveCamera인 것 같다.

이 외에도 2차원을 표시할 때 사용되는 OrthographicCamera, VR에 사용되는 ArrayCamera, StereoCamera 등이 있다.

🧊 3D 모델 로드하기

🔻 useGLTF

3D 모델의 경우 PolyHaven, SketchFab에서 무료 모델을 다운 받거나, Blender에서 직접 만들 수도 있다.

이 모델을 로드하려면 @react-three/drei의 useGLTF를 사용하면 되는데, 이 훅은 @react-three/fiber의 useLoader에 GLTFLoader를 인자로 전달하는 것과 동일하게 동작해서, .gltf 또는 .glb 파일을 로드할 수 있도록 해준다.

💡 .gltf / .glb 파일이란? .gltf (GL Transmission Format)는 3D 그래픽 콘텐츠를 전송하기 위한 오픈 표준 파일 포맷이다. .gltf 파일은 JSON 형식으로 작성된 메타 데이터와 바이너리 형식의 외부 자원 파일들로 구성된다. 반면 .glb 파일은 JSON 형식의 glTF 파일과 관련된 자원들을 하나의 바이너리 파일로 통합하여 표현한 파일이다. 이 타입을 사용하면 파일의 크기를 줄이고 로딩 속도를 향상시킬 수 있다.

useGLTF는 (GLTF & ObjectMap)[]을 리턴하는데, ObjectMap에는 nodes와 materials 정보가 들어있다.

nodes는 모델을 구성하는 노드들의 계층 구조를 보여주고, materials는 객체의 시각적인 정보가 담겨 있다.

아래와 같이 3D 모델이 구성되어 있는 상태에서, 예를 들어 선인장의 geometry 값은 nodes.Cactus.geometry와 같은 방식으로 가지고 올 수 있다.

🤹 애니메이션 효과 넣기

위의 GIF을 보면 큐브, 선인장, 카메라, 강아지의 고개가 움직이는 것을 확인할 수 있다. 이러한 애니메이션 효과를 어떻게 넣을 수 있는지 살펴보자.

🔻 @react-three/drei의 Shaders 활용하기

@react-three/drei의 Shaders를 활용하면 애니메이션, 그림자, 반사 효과 등을 줄 수 있다.

예를 들어 아래 코드와 같이 MeshWobbleMaterial을 사용하면 객체가 흔들리는 효과를 구현할 수 있다.

import { MeshWobbleMaterial, useGLTF } from "@react-three/drei";

export function Cactus() {
  const { nodes, materials } = useGLTF("/glb/level-react-draco.glb");
  return (
    <mesh
      geometry={nodes.Cactus.geometry}
      position={[-0.42, 0.51, -0.62]}
      rotation={[Math.PI / 2, 0, 0]}
    >
      <MeshWobbleMaterial factor={0.6} map={materials.Cactus.map} />
    </mesh>
  );
}

🤔 Math.PI? rotation 관련 코드에서 Math.PI가 많이 등장하는데, 이는 Math.PI가 180도를 의미하기 때문이다.

🔻 @react-spring/three 활용하기

또는 애니메이션 라이브러리인 @react-spring/three를 활용하는 방법도 있다.

아래 코드는 Camera의 주기적으로 z축을 회전시키는 코드이다.

참고로 <a.group>에서 a는 "animated"의 약자이다.

import { a, useSpring } from "@react-spring/three";

export function Camera() {
  const { nodes, materials } = useGLTF("/glb/level-react-draco.glb");
  const [spring, api] = useSpring(
    () => ({ "rotation-z": 0, config: { friction: 40 } }),
    [],
  );

  useEffect(() => {
    let timeout;
    const wander = () => {
      api.start({ "rotation-z": Math.random() });
      timeout = setTimeout(wander, (1 + Math.random() * 2) * 800);
    };
    wander();
    return () => clearTimeout(timeout);
  }, []);

  return (
    <a.group
      position={[-0.58, 0.83, -0.03]}
      rotation={[Math.PI / 2, 0, 0.47]}
      {...spring}
    >
      <mesh geometry={nodes.Camera.geometry} material={nodes.Camera.material} />
      <mesh geometry={nodes.Camera_1.geometry} material={materials.Lens} />
    </a.group>
  );
}

최근 돌아가며 만나는 나의 아이돌, 돌돌밋 프로젝트를 리팩토링하는 작업을 하고 있다.

프로젝트 마감이 임박해서 "일단 돌아가면 넘어가!"하며 외면했던 코드들을 다듬고 있다.

제일 처음 한 작업은 CSR 페이지를 SSR 페이지로 전환하는 것이다.

NextJS를 사용하면서 그 장점을 온전히 살리지 못한 것 같아 마음에 걸렸었기 때문이다.

CSR을 SSR로 전환하면서 둘 간의 차이에 대해 자세히 살펴보고 싶은 마음도 있었다.

🔁 React Query와 SSR

🥊 CSR vs. SSR

CSR을 사용하는 경우 서버로부터 빈 HTML과 JavaScript 파일을 넘겨 받은 다음에 Query가 실행된다.

1. |-> Markup (without content)
2.   |-> JS
3.     |-> Query

반면 SSR의 경우 서버에서 내용을 채워서 HTML을 보내줘야 하므로, Query는 Markup을 전달하기 전에 실행된다.

1. |-> Markup (with content AND initial data)
2.   |-> JS

✌🏻 React Query에 SSR을 적용하는 두 가지 방법

SSR 페이지에서 React Query를 사용하는 방법은 initialData를 사용하는 방법과 Hydration API를 사용하는 방법으로 크게 두 가지가 있다.

1) initialData

첫 번째는 getServerSideProps 함수로부터 넘어온 props를 useQuery의 initialData로 넘겨주는 방법인데, 이는 아래와 같은 한계점이 있다.

• 많은 컴포넌트를 타고 내려가야 하는 컴포넌트에서 useQuery를 사용하는 경우 prop drilling의 문제가 있다.
• 같은 query를 여러 곳에서 호출하는 경우 모든 query들에게 initialData를 넘겨줘야 하는 번거로움이 있다.
• 데이터가 조회된 시점에 대한 정보 (dataUpdatedAt)를 알 수 없다.
• 만약 캐시된 데이터가 있는 경우 initialData가 이 데이터를 덮어쓸 수 없다. (initialData가 더 최신의 데이터인 경우에도)

2) Hydration APIs

initialData를 사용하는 경우 위와 같은 한계점이 있기 때문에 나는 Hydration API를 사용하여 React Query에 SSR을 적용했다. 구체적인 내용은 코드로 살펴보자.

🔻 _app.tsx

먼저 _app.tsx에서 컴포넌트 트리를 HydrationBoundary로 감싸주고, pageProps 중 dehydratedState를 넘겨주도록 했다.

그리고 QueryClient를 생성할 때, 페이지가 렌더링되자마자 query가 다시 실행되는 상황을 방지하기 위해 staleTime을 1분으로 변경해주었다.

import {
  HydrationBoundary,
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query'

export default function MyApp({ Component, pageProps }) {
  const [queryClient] = React.useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            staleTime: 60 * 1000,
          },
        },
      }),
  );

  return (
    <QueryClientProvider client={queryClient}>
      <HydrationBoundary state={pageProps.dehydratedState}>
        <Component {...pageProps} />
      </HydrationBoundary>
    </QueryClientProvider>
  )
}

🔻 getServerSideProps

getServerSideProps에서는 QueryClient를 생성한 다음 prefetchQuery를 실행했다.

그리고 dehydrate한 QueryClient를 dehydratedState라는 이름의 props로 리턴하였다.

export async function getServerSideProps() {
  const queryClient = new QueryClient();

  await queryClient.prefetchQuery({
    queryKey: ["fanMeetings", "opened"],
    queryFn: ({ queryKey }) => fetchFanMeetings(queryKey[1]),
  });

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  };
}

🧐 dehydrate이란?

앞서 props로 리턴할 때 QueryClient를 dehydrate한다고 했는데, dehydrate란 무엇일까?

우선 hydration이란 정적인 HTML을 인터랙티브한 페이지로 만들기 위해 DOM에 event listener를 붙이는 과정을 의미한다.

dehydrate은 hydration의 반대의 개념인데, React Query에서는 쿼리 결과를 서버에서 클라이언트로 전송할 수 있도록 쿼리 캐시를 직렬화하는 과정을 의미한다.

그래서 서버 사이드 렌더링 페이지에서 처음 반환 받는 HTML 파일을 살펴보면 아래와 같이 dehydratedState에 mutations와 queries 정보가 들어가 있는 것을 확인 할 수 있다.

💫 HydrationBoundary란?

HydrationBoundary 내부 코드를 보면 dehydratedState로부터 queries 배열을 가지고 온 다음, QueryClient에 저장된 쿼리 캐시와 비교하는 부분이 있다.

여기에서 쿼리의 dataUpdatedAt 내용을 비교해서 dehydratedState가 좀 더 최근에 조회된 경우 캐시 내용을 변경한다.

앞서 initialData를 사용하는 방법은 데이터 조회 시점을 알 수 없다는 한계가 있다고 했는데, HydrationBoundary가 있기 때문에 최신의 데이터를 유지할 수 있는 것이다.

👀 SSR로 변경하고 무엇이 달라졌나?

CSR 방식에서 SSR 방식으로 변경한 다음 어떻게 달라졌는지 살펴보기 위해 Lighthouse 분석 결과를 비교해보았다.

🔻 리팩토링 전 Lighthouse 분석 결과 (CSR)

그런데 처음 SSR로 변경한 다음 Lighthouse 분석 결과가 갑자기 낮아졌었다.

원인은 SSR로 변경한 것에 있지는 않았고, app 디렉토리에 있던 파일을 pages 디렉토리에 옮기면서 변경된 사항들이 점수가 낮아지게 만든 것이었다.

app 디렉토리와 달리 pages 디렉토리에서는 HTML의 메타 데이터를 _document.tsx에 넣어줘야 했다. _document.tsx를 생성하고 HTML의 lang과 meta 태그를 추가함으로써 SEO 점수를 높일 수 있었다.

🔻 CSR

🔻 SSR

위의 그림처럼 페이지가 렌더링되는 과정을 보니 확실히 CSR과 SSR의 차이를 확인할 수 있었다.

SSR은 초반에 흰 상태의 화면이 보이는 것과 달리, CSR은 비록 완성되지 않았지만 보이는 내용들이 있어 TTFB(Time-to-First-Byte)가 훨씬 빠름을 확인할 수 있었다.

한편 SSR의 경우 완성된 상태의 HTML을 보내주기 때문에 레이아웃이 변경되는 정도를 측정하는 Cumulative Layout Shift가 CSR에 비해 낮았다.

처음 DOM 컨텐츠를 보기까지 걸리는 시간인 FCP(First Contentful Paint)는 일반적으로 SSR이 더 짧다고 봤었는데, 돌돌밋 메인 페이지의 경우 똑같이 0.2s로 나와서 큰 차이가 없었다.

🔻 리팩토링 후 Lighthouse 분석 결과 (SSR)

🖼 LCP 시간 줄이기

이번 메인 페이지 리팩토링에서 CSR을 SSR로 변경하는 것은 성능 개선에 있어 큰 영향이 없었다.

대신 LCP(Largest Contentful Paint)를 줄인 것이 성능 개선에 미치는 영향이 컸다.

처음에 LCP가 1.6초로 나왔었는데, 상단의 배너에 들어가는 이미지를 로딩하는데 시간이 많이 걸리고 있었다.

결론을 먼저 말하자면 배너 이미지를 lazy loading하지 않도록 함으로써 LCP 시간을 줄일 수 있었다.

배너에는 이미지 최적화를 위해 next/image의 Image 컴포넌트를 사용하고 있는데, NextJS의 공식 문서를 보면 LCP가 높은 이미지는 priority를 true로 설정해서 우선순위를 높임으로써 LCP를 개선할 수 있다고 되어 있다.

실제로 priority를 설정하니 LCP가 1.6초에서 1.0초로 개선됨을 확인할 수 있었다.

그런데 Image 컴포넌트는 기본적으로 lazy loading이 적용되는데, 배너는 화면 최상단에 위치한 것이므로 굳이 lazy loading을 적용할 필요가 없겠다는 생각이 들었다.

그래서 loading 프로퍼티 값을 eager로 수정한 결과 LCP가 0.3초로 확연히 개선됨을 확인할 수 있었다.

끝나지 않을 것만 같았던 나만무 프로젝트가 끝이 났다 🥹

5주 간 엄청 몰입해서 준비했다보니 크래프톤에서의 발표를 마친 후에는 끝났다는 게 실감이 안 났다.

이제 다음 단계로 넘어가기 전에 나만무 프로젝트를 차분히 돌아보고 정리하자!

📸 데모 영상

볼 때마다 저항 없이 웃게 되는 우리 팀 시연 영상ㅠㅠㅋㅋㅋ

중간에 동환 오빠가 브이앱 방송 사고처럼 등장하는 것도 볼 때마다 웃긴다ㅋㅋㅋ

시연을 위해 고생해준 재화, 종호, 호영이에게 박수를 보낸다 👏🏻

🌐 배포하기

우리는 백엔드, 프론트엔드, OpenVidu 서버 이렇게 세 개의 서버를 배포해야 했는데, 배포 과정에서 이런저런 시행착오를 겪었다.

💥 ERR_CERT_AUTHORITY_INVALID

OpenVidu 서버는 AWS EC2에서 도커 이미지를 실행하는 방식으로 배포했다. 그런데 Vercel로 배포한 프론트엔드에서 OpenVidu로 요청을 보내면 ERR_CERT_AUTHORITY_INVALID 에러가 발생했었다. Let's Encrypt로 인증서도 발급 받았는데 왜 인증서 관련 에러가 발생하나 했는데, OpenVidu 서버 주소를 도메인 주소가 아닌 IP 주소로 적은 것이 원인이었다. SSL/TLS 인증서는 도메인과 연결된 것이므로, https 통신에는 도메인 주소가 필수적임을 명심하자.

💌 SSE (Server-Sent Events)

🥲 이벤트 보냈는데... 왜 받지를 못하니?

우리는 정해진 통화시간이 지나면 팬이 다음 영상통화방으로 이동하도록 알림을 보내는 기능이 필요했는데, 양방향 통신이 필요 없는 기능이었기 때문에 소켓 통신 대신 SSE를 사용하기로 했다.

그런데 클라이언트가 간헐적으로 서버가 보낸 이벤트를 받지 못하는 문제가 생겼다. 서버가 보낸 이벤트를 받지 못하면 다음 영상통화방으로 넘어가지 않기 때문에 이는 치명적인 문제였다. 서버 로그에는 분명히 이벤트를 보냈다는 기록이 남아있었다.

문제의 원인은 http 버전이었는데, HTTP/1.1에서 최대로 맺을 수 있는 SSE 연결의 개수는 6개이기 때문이었다. 서버에서 보낸 이벤트가 유실되는 문제는 버전을 HTTP/2로 변경함으로써 해결됐다. 그리고 연결 개수가 초과되는 문제를 미연에 방지하기 위해 페이지를 벗어날 때에는 EventSource를 잘 닫아주도록 했다.

🥸 넣지 못해 아쉬웠던 필터 기능

오프라인 팬미팅에서 아이돌에게 머리띠를 씌워주는 것처럼 필터로 머리띠를 씌우는 기능을 넣고 싶어서 OpenVidu의 FaceOverlayFilter 기능을 사용해서 필터 기능을 구현하려고 했다.

그런데 OpenVidu 공식 문서에 나와 있는 대로 코드를 작성했는데도 자꾸 org.kurento.client.internal.server.KurentoServerException: 'offsetXPercent' parameter should be a double (Code:40001, Type:null, Data: {"type":"MARSHALL_ERROR"})이라는 에러가 발생했다.

number 타입으로 전달했는데도 계속 타입 에러가 발생하는 것이 이상하다 싶어서 OpenVidu 쪽 코드를 살펴봤는데, json을 파싱하는 부분에서 잘못된 부분이 있음을 발견했다. Kurento 서버에 Double 타입으로 보내야 하는데 String 타입으로 파싱해서 보내고 있었던 것이었다.

그래서 fromJsonObjectToProps 부분 코드를 수정해서 도커 이미지를 만들고, OpenVidu에서 제공하는 도커 이미지 대신에 우리의 도커 이미지로 배포해보았다. 그랬더니 필터 기능이 드디어 정상 작동함을 확인할 수 있었다!

그런데 문제는 필터 기능이 되니 반대로 녹화 기능이 제대로 동작하지 않았다... fromJsonObjectToProps를 녹화 기능에서도 사용하다보니 발생하는 문제인 것 같았다. 프로젝트 마감까지 시간이 얼마 남지 않은 상황이어서 결국 필터 기능은 빼기로 결정했다 😢

필터 기능을 넣지 못해서 아쉽긴 했지만, 오픈소스 코드를 수정하는 경험을 해볼 수 있어서 좋았다. 중요한 일정이 끝나고 나면 다른 기능들도 제대로 동작할 수 있게 fromJsonObjectToProps를 수정해서 OpenVidu에 PR을 날려보고 싶다.

👋 안녕 나만무

빡센 일정에 힘들긴 했지만 나는 나만무를 진행했던 기간이 정글에서 가장 즐거웠던 시간이었다. 그래서 나만무가 끝났을 때 조금 헛헛했던 것 같다ㅠ

나만무를 하면서 내가 만들고 싶은 서비스를 만드는 게 굉장히 즐거운 경험임을 느낄 수 있었다. 아이돌에 관심 많은 덕후들이 모여서 "이런 기능 있으면 좋지 않을까?" 얘기하면서 만드는 과정이 즐거웠고, 나도 모르게 퀄리티에 욕심이 생겨서 밤을 샜던 것 같다.

그리고 5주간 팀원들이랑 부대끼며 개발하면서, 팀원으로서의 나는 어떤 모습인가에 대해서도 많이 돌아보게 되었다. 이번 프로젝트를 하면서 배운 점은 '내가 생각한 방법이 정답이 아닐 수 있음을 항상 명심하자'였다. 고생해서 코드를 작성하다 보면 내가 작성한 코드에 이상한 애착(?)이 생겨서 더 나은 방법이 있음에도 그걸 모를 때가 있었다. 근거 없는 똥고집을 부리지 말도록 하자.

마지막으로 상언이, 가람오빠, 재화, 호영이, 종호 모두 고생 많았고, 좋은 추억 남길 수 있게 해줘서 진심으로 고맙습니닷 🫶 모두 승승장구하는 2024년이 되길!

이번 주차에는 초안 발표가 있었다. 내가 평소 관심 있는 주제, 해보고 싶은 기술을 중심으로 어떤 주제를 하는 게 좋을지 고민해보았다.

내가 평소 관심 있는 주제는 아이돌이고, 구현해보고 싶은 기술은 영상 채팅 / 실시간 채팅이었다.

이렇게 고민하다가 생각난 것이 바로 비대면 팬미팅이었다.

비대면 팬미팅을 할 때 보통 카톡 페이스톡으로 많이 하는데, 소속사에서 일일이 시간을 재면서 걸고 끊고 하는 게 번거롭겠다는 생각이 들었다.

그러면서 "영상 통화를 걸고 끊는 것을 우리가 자동으로 해주면 어떨까?" 라는 생각으로 이어졌다.

마침 우리 조에 아이돌을 좋아하는 친구들도 많았고, 아이돌 라이브를 주제로 프로젝트를 하고 싶어했던 친구도 있었다. 서로의 생각이 모이다보니 재밌는 아이디어들이 엄청 많이 나왔다.

그래서 비대면 팬미팅을 주제로 초안 발표를 했는데, 운영진분들께서 재밌는 주제라는 피드백을 주셔서 이 주제 그대로 진행하게 되었다.

🚀 기술스택 선정

• NextJS
• TypeScript
• React Query
• Jotai
• WebRTC 👉🏻 OpenVidu
• Vercel

기술 스택은 위와 같이 선정했다.

지난 주에 NextJS를 사용해봤는데, 14 버전으로 업데이트된지가 얼마되지 않아서, 다른 라이브러리와 호환이 안 되는 문제 등이 있었다. 그래서 안전하게 13 버전으로 사용하기로 했다.

그리고 React Query를 사용하기 때문에 상태 관리 라이브러리는 가벼운 것을 사용해도 되겠다 싶었다. 그래서 recoil과 jotai 중 무엇을 사용할까 고민하다가 사용 방법이 좀 더 간단한 jotai를 선택했다.

WebRTC를 구현할 때 어떤 라이브러리를 많이 사용하는지 찾아봤는데, Janus와 OpenVidu를 많이 사용하는 것 같았다. 그런데 Janus의 경우 공식문서 내용이 자세하지 않고, React와 함께 사용한 케이스가 많지 않아서 위험 부담이 크겠다 싶었다. 그래서 WebRTC 라이브러리는 구현 예시가 많은 OpenVidu로 선정했다.

💜 돌돌밋

프로젝트 제목은 "돌돌밋"으로 결정했다.

마치 컨테이너 벨트 위를 움직이는 것처럼 돌돌 돌며 나의 아이돌을 만난다는 뜻이다.

🎥 OpenVidu

리액트 최신 버전에 맞게 수정하기

먼저 openvidu-tutorials에 있는 코드들은 리액트 옛날 버전의 코드들이어서 요즘의 버전에 맞게 수정하는 작업을 했다.

클래스 기반 컴포넌트의 라이프 사이클 메서드인 componentDidMount, componentDidUpdate, componentWillUnmount들은 useEffect로 교체해주었다.

정해진 시간이 지나면 화상 채팅이 종료되게 하기

우리가 생각했을 때 우리의 핵심 기능은 정해진 시간이 지나면 자동으로 전화를 끊고 다음 아이돌 멤버에게 전화를 걸어주는 것이었다. (카리나와의 2분 통화가 끝나면 자동으로 끊고, 다음 멤버인 윈터에게 자동으로 영상 통화가 연결되는 식으로)

그래서 중간 발표 때까지 이 기능은 꼭 구현하기로 했다.

setInterval 또는 setTimeout을 사용해서 타이머를 구현하면 되겠지 싶었는데 생각보다 간단하지가 않았다. 그리고 타이머를 구현하는 방식에 따라 시간의 정확도도 달라진다는 사실을 발견했다. 아래 블로그를 참고해서 최대한 정확히 시간을 측정하려고 했다.

Building timer in React? It’s not as simple as you may think!

그리고 setInterval과 setTimeout은 비동기 함수가 완료될 때까지 기다려주지 않으므로 유의하자.

다음 팬을 영상통화로 연결하기

OpenVidu 튜토리얼을 보면 사용자가 Join 버튼을 눌렀을 때 영상통화가 연결되게 하는데, 우리가 원하는 기능은 이 방식으로 구현할 수 없었다.

즉, 팬을 대기열에서 기다리고 있게 하다가 앞 사람의 통화가 종료되면 그 때 영상통화가 연결되게 해야 하는데 이걸 어떻게 구현할지 방법을 생각해내는 게 이번 주 중 제일 어려운 부분이었다.

그러다가 OpenVidu API 중 세션에 시그널을 보내는 기능이 있다는 것을 알게 됐다. 즉, 특정 이벤트가 발생하면 해당 세션에 참여하고 있는 커넥션들에게 시그널을 보내는 기능이었다. 이 기능을 사용하면 통화가 종료됐을 때 시그널을 보내서 다음 팬이 참여할 수 있게 할 수 있겠다 싶었다.

그래서 대기열에 들어온 팬은 토큰만 먼저 발급 받아놨다가, 시그널이 왔을 때 그 토큰을 가지고 세션에 connect하도록 기능을 구현했다.

아직 엉성하긴 하지만 아래와 같이 팬들이 차례대로 들어올 수 있는 발판은 마련했다. 어서 속도를 내서 나머지 기능들도 구현해보자!

🤯 CORS 에러

Access to XMLHttpRequest at 'https://firebasestorage.googleapis.com/v0/b/http%3A%2F%2Fjungle-react-realtime-chat.appspot.com/o?name=memoji2.png' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Firebase 공식문서를 보니 아래와 같이 CORS 구성을 변경하라고 되어 있어서 수정했다.

그런데도 계속 동일한 에러가 발생해서 한참을 고생했는데, 보다보니 요청을 보내는 주소가 좀 이상해보였다.

URL 중간에 http가 들어가 있는 것에 아무래도 이상해서 firebaseConfig의 storageBucket에서 http://를 삭제해봤다. 그랬더니 이게 문제가 맞았다...❗️ Firebase 프로젝트를 생성하면 제공해주는 firebaseConfig를 그대로 복사해온 거여서 이게 잘못됐을 거라 생각을 못했는데, 이게 문제가 맞았다.

const firebaseConfig = {
  // ❌ Wrong: 잘못된 주소
  storageBucket: "http://jungle-react-realtime-chat.appspot.com",

  // 🆗 정상 작동하는 주소
  storageBucket: "jungle-react-realtime-chat.appspot.com",

};

✍️ 게시글 수정하기

🧐 getStaticPaths 에러

🚨 Error: Invalid paths value returned from getStaticPaths in /posts/[id]. paths must be an array of strings or objects of shape { params: [key: string]: string }

분명히 알맞은 포맷으로 paths 변수를 만드는 것 같은데, 자꾸 아래와 같은 에러가 발생했다. 포맷이 잘못됐나 싶어서 console.log()를 찍어보려고 했는데, 콘솔에 찍히지도 않았다.

문제는 async 함수를 호출하면서 비동기 작업이 완료되기를 기다려주지 않은 것이었다. getAllPostIds() 함수 앞에 await 키워드를 붙여서 에러를 해결했다.

🙉 그런데 게시글 수정 사항이 반영되지 않는다...!

분명히 DB에는 수정사항이 반영돼서 게시글 목록에서는 수정된 내용으로 보이는데, 게시글 상세 내용 조회화면에 들어가면 수정사항이 반영되지 않고 이전 내용이 보였다.

어떻게 보면 당연한 내용이었다. 게시글 상세 내용 조회 화면을 정적 페이지로 구현했기 때문에 수정사항이 반영되지 않는 것이었다.

Static Site Generation은 빌드 타임에 서버에서 페이지를 미리 생성해서, 나중에 빌드된 페이지를 그대로 제공하는 방식이다. 정적 페이지의 경우 런타임에 페이지의 내용이 변경되지 않기 때문에 수정 기능이 있는 페이지에서 사용하는 것은 적절하지 않다.

시간은 조금 낭비했지만 🥹 덕분에 Static Site Generation에 대해 잘 이해할 수 있었다.

처음에는 Firebase의 인증 시스템을 사용해보려고 했는데, 살펴보다보니 NextAuth.js로 훨씬 더 간단하게 인증/인가 기능을 구현할 수 있어서 NextAuth.js를 사용하기로 했다.

OAuth 기능을 사용해보고 싶었어서 이번에는 이메일/비밀번호 대신 OAuth를 통해 로그인/로그아웃하는 기능을 구현하기로 했다.

🥹 간단하게 구현될 줄 알았는데

공식 문서에 나와있는 대로 구현을 했더니 아래와 같은 에러가 계속 발생했다.

 ○ Compiling /api/auth/[...nextauth]/route ...
 ✓ Compiled /api/auth/[...nextauth]/route in 606ms (1120 modules)
 ⨯ TypeError: r is not a function

💡 버전의 문제였다..

Next 14 버전으로 업데이트된 지가 얼마 안 돼서 혹시나 하고 Next 13 버전으로 변경해보았는데, 그랬더니 문제 없이 돌아갔다. Next 14 버전에서 가능한 방법을 찾으려면 시간이 너무 오래 걸릴 듯 하여 결국 아래와 같이 버전을 낮췄다

    "next": "^13",
    "next-auth": "^4.24.4",

👀 OAuth

Google OAuth 기능을 사용하려면 우선 구글 클라이언트 아이디와 비밀번호가 필요한데, 이거는 Google Developer Console에서 발급 받을 수 있었다.

발급 받을 때 redirection url을 작성해줘야 하는데, NextAuth.js의 경우 /api/auth/callback/google로 작성해주면 된다.

그리고 src/app/api/auth/[...nextauth]/route.ts 경로에 아래와 같이 작성해주면 OAuth 관련 설정은 간단히 끝난다.

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import { AuthOptions } from "next-auth";

export const authOptions: AuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID ?? "",
      clientSecret: process.env.GOOGLE_CLIENT_SECRET ?? "",
    }),
  ],
};

export const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

👋 로그인 기능

모든 routes에 대해서 로그인이 되어 있지 않은 상태면 로그인 화면으로 이동하는 기능을 구현하기로 했다.

처음에 생각한 방법은 jotai로 loginAtom이라는 state를 만들고, 이 값이 false이면 로그인 화면으로 이동하게 하려고 했다. 그런데 NextJS는 기본적으로 서버 컴포넌트를 가정하고 있고, 서버 컴포넌트에서는 state값을 사용하지 않기 때문에 이 방법은 적절하지 않았다.

다음으로 고려한 방법은 middleware.ts 파일에서 아래와 같이 getServerSession 함수를 사용해서 로그인 상태 값을 받아오고, 로그인이 되어 있지 않은 경우 로그인 화면으로 리다이렉션 하는 방법이었다. 하지만 아래의 코드로 하면 오류가 발생했는데 middleware.ts는 Vercel 플랫폼의 Edge 상태에서 실행돼서 getServerSession 함수가 정상적으로 작동할 수 없기 때문이었다.

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
import { getServerSession } from "next-auth";

export async function middleware(request: NextRequest) {
  const session = await getServerSession();

  if (session) {
    return NextResponse.next();
  }

  return NextResponse.redirect(new URL("/api/auth/login", request.url));

결국 성공한 방법은 layout.tsx에서 로그인 여부를 체크하는 방법이었다. 아래와 같이 getServerSession() 함수로 로그인 상태를 받아오고 로그인이 되어 있지 않으면 redirect() 함수를 사용해서 로그인 화면으로 이동하도록 했다.

import { Layout } from "@/app/components/layout";
import ThemeClient from "@/app/components/themes/ThemeClient";
import { getServerSession } from "next-auth";
import SessionProvider from "@/app/components/auth/SessionProvider";
import { redirect } from "next/navigation";

/** 중략 */

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const session = await getServerSession();

  if (!session || !session.user) {
    redirect("api/auth/signin");
  }

  return (
    <html lang="en">
      <body className={inter.className}>
        <SessionProvider session={session}>
          <ThemeClient>
            <Layout>{children}</Layout>
          </ThemeClient>
        </SessionProvider>
      </body>
    </html>
  );
}

위 코드를 보면 SessionProvider를 next-auth가 아닌 프로젝트 내부 컴포넌트로 import하는 것을 발견할 수 있다. 이렇게 한 이유는 SessionProvider는 클라이언트 컴포넌트여야 하기 때문에 아래와 같이 별도의 컴포넌트를 만들었다.

"use client";
import { SessionProvider } from "next-auth/react";
export default SessionProvider;

👋 로그아웃 기능

로그아웃 기능은 signOut() 함수를 사용하면 간단하게 구현할 수 있었다.

import { signOut } from "next-auth/react";

const Header = () => {

  return (
    {/* 중략 */}
        <IconButton
          size="large"
          color="inherit"
          sx={{
            width: 35,
            height: 35,
            mt: 1,
            ...{
              color: "grey.400",
            },
          }}
          onClick={() => signOut()}
        >
          <LogoutIcon />
        </IconButton>

  );
};

export default Header;

💻 결과물

NextAuth.js를 사용해서 아래와 같이 OAuth 로그인 기능을 구현할 수 있었다. 시간이 된다면 NextAuth.js에서 제공하는 기본 UI 말고 커스텀 UI를 사용하도록 수정해봐야겠다.

🔥 Firebase

Next JS를 사용하면서 가장 익숙하지 않은 점은 서버 사이드 렌더링이다.

아래는 클라이언트 사이드 렌더링과 서버 사이드 렌더링을 비교해서 살펴본 내용이다.

"애플리케이션의 로직과 렌더링을 어디에 구현할 것인가"와 관련해서 고민이 필요한 것 같다.

💻 서버 사이드 렌더링

• SSR은 서버에서 사용자에게 보여줄 페이지를 모두 구성해서 사용자에게 페이지를 보여주는 방식. JSP/Servlet의 아키텍처에서 이 방식을 사용했음
• 즉, 외부 데이터를 fetching하고 React Component를 HTML로 변환하는 과정이 클라이언트로 보내지기 전에 서버에서 이루어지는 것
• SSR을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트(브라우저)에게 바로 보여줄 수 있음.
• 서버를 이용해서 페이지를 구성하기 때문에 클러이언트에서 구성하는 CSR(Client-Side Rendering)보다 페이지를 구성하는 속도는 늦다
• 하지만 사용자에게 보여주는 컨텐츠 구성이 완료되는 시점은 더 빨라지는 장점이 있다.
• SEO(Search Engine Optimization) 또한 쉽게 구성할 수 있다.
• SSR의 경우 화면이 렌더링되는 동안 사용자가 화면을 볼 수 있지만, interactable한 상태는 아니다. 사용자가 취한 액션은 React 실행이 완료되기 전까지는 처리되지 않는다.
• SSR은 서버가 HTML 파일을 만들기까지 시간이 걸리기 때문에 TTFB(Time To First Byte)는 CSR에 비해 느리다.

• 서버 사이드 렌더링은 Hydration 과정을 거쳐서 Interactive UI가 된다.

🤔 Hydration이란?

• 서버에서 생성한 HTML 마크업이 클라이언트로 전달될 때 이 HTML에는 React 컴포넌트의 초기 상태 및 이벤트 핸들러가 포함되어 있지만 아직 활성화되지 않은 상태이다.
• HTML이 로드되면 클라이언트 측 JavaScript 코드가 React 컴포넌트를 다시 만들어서 초기 상태를 적용하고 이벤트 핸들러를 등록합니다. 이 프로세스를 "hydration"이라고 한다.

👩🏻‍💻 클라이언트 사이드 렌더링

• CSR은 서버로부터 빈 HTML 문서를 서버로부터 반환 받는데, JS와 React의 다운로드, React의 실행이 완료된 후에 사용자가 화면을 볼 수 있다.
• CSR은 SSR보다 초기 전송되는 페이지의 속도는 빠르지만 서비스에서 필요한 데이터를 클라이언트(브라우저)에서 추가로 요청하여 재구성해야 하기 때문에 전체적인 페이지 완료 시점은 SSR보다 느려진다.
• 클라이언트 사이드 렌더링은 렌더링이 완료되기 전까지 빈 화면을 보게 된다.

🤔 클라이언트 사이드 렌더링이 왜 SEO에 취약한가? SEO(Search Engine Organization)을 위해서는 HTML 페이지 전체가 필요한데, SPA 페이지의 HTML 파일들은 아래와 같이 빈 껍데기이기 때문

<html>
<head>
  <title>리액트 프로젝트</title>
  <link rel="stylesheet" href="app.css" type="text/css">
</head>
<body>
  <div id="app"></div>
  <script src="app.js"></script>
</body>
</html>

아래는 서버 사이드 렌더링과 클라이언트 사이드 렌더링을 살펴보다 보면 나오는 용어들의 정의다.

Rendering 관련 용어

• SSR: Sever-Side Rendering. client-side 또는 범용 앱을 서버의 HTML로 렌더링함
• CSR: Client-Side Rendering. 일반적으로 DOM을 사용하여 브라우저에서 앱을 렌더링함.
• Rehydration: 서버에서 렌더링된 HTML DOM 트리와 데이터를 재사용하도록 클라이언트에서 JavaScript View를 부팅하는 것
• Prerendering: 빌드할 때 정적 HTML의 초기 상태를 캡처하기 위해 client-side 애플리케이션을 실행하는 것

Performance 관련 용어

• TTFB: Time to First Byte. 링크를 클릭한 후 컨텐츠의 첫 번째 bit가 들어오기까지 걸린 시간
• FP: First Paint. 사용자에게 처음으로 픽셀이 보인 시간
• FCP: First Contentful Paint. 요청한 내용이 보인 시간
• TTI: Time To Interactive. 페이지가 상호작용이 가능해진 시간

🤓 NextJS의 렌더링 방식

다시 돌아와서 NextJS의 렌더링 방식을 살펴보자. NextJS에서는 세 가지 렌더링 방식이 가능하다.

1. Server-Side Rendering
2. Static Site Generation
3. Client-Side Rendering

Next.js에서는 getServerSideProps를 사용하여 서버 사이드 렌더링을 사용할 수 있다.

이전 회사에서도 리액트를 사용하기는 했지만 NextJS를 사용해보지는 못했었다.

이번 주차가 NextJS를 공부해볼 수 있는 좋은 기회다 싶어서 NextJS를 사용해서 개발해보기로 했다.

오늘은 NextJS 작동 방식에 대해 전반적으로 살펴보고 레이아웃을 잡았다.

라우팅

NextJS는 기본적으로 프로젝트의 폴더 구조를 기반으로 라우팅 기능을 제공한다.

이전에는 컴포넌트를 분리해서 관리할 때 별도의 폴더로 분리해서 사용했어서, 이러한 폴더들이 모두 라우팅 대상에 포함되면 어떡하지? 싶었는데, 다행히 아래 그림과 같이 page.js 파일과 route.js 파일만 라우팅 대상에 포함된다.

레이아웃

NextJS에서는 layout.tsx 파일을 사용하면 여러 페이지에서 공통적으로 레이아웃을 공유할 수 있다. 이 기능을 사용하면 라우팅이 변경될 때 레이아웃 부분을 제외한 나머지 부분만 렌더링 되는 partial rendering이 적용된다.

서버 사이드 렌더링과 클라이언트 사이드 렌더링

NextJS에서는 기본적으로 서버 사이드 렌더링을 가정한다. 따라서 클라이언트 사이드 렌더링 컴포넌트인 경우에는 파일의 가장 상단에 'use client'라고 작성해서 표시해줘야 한다. 아니면 아래와 같은 오류를 마주할 수 있다.

아래는 NextJS에서 설명하는 서버 컴포넌트를 사용했을 때의 장점이다.

• Server Components execute on the server, so you can keep expensive data fetches and logic on the server and only send the result to the client.
• Server Components support promises, providing a simpler solution for asynchronous tasks like data fetching. You can use async/await syntax without reaching out for useEffect, useState or data fetching libraries.
• Since Server Components execute on the server, you can query the database directly without an additional API layer.

Folder Structure

CSS Modules

기회가 되면 아래 방법을 써보자!

clsx

조건에 따라 CSS를 다르게 적용해야 할 때 유용하게 사용될 것 같다. 기억해놨다가 써보자.

폰트 적용하기

https://nextjs.org/learn/dashboard-app/optimizing-fonts-images

<Image>

🔐 OAuth 2.0

NextJS에서는 아래 라이브러리를 사용해서 OAuth 기능을 구현하는 것 같다. 추후 사용해보자.

https://www.npmjs.com/package/next-auth

https://next-auth.js.org/providers/google

다이나믹 프로그래밍이란 문제를 효율적으로 풀기 위해 복잡한 큰 문제를 더 작은 하위 문제로 나누어 푸는 방법이다.

이 방법은 동일한 하위 문제를 반복해서 풀지 않고, 중복되는 계산을 제거하여 효율적으로 문제를 풀 수 있다.

다이나믹 프로그래밍 구현 방법은 크게 top-down 방식과 bottom-up 방식으로 나누어 살펴볼 수 있다.

⬇️ top-down 방식

top-down 방식은 큰 문제를 작은 하위 문제로 나누고, 각 하위 문제의 해결을 위해 재귀 함수를 호출한다.

이 때 중복 계산을 피하기 위해 메모이제이션 기법을 사용하여 계산한 결과를 메모리 공간에 메모해놓고, 같은 문제가 다시 호출되면 메모했던 결과를 그대로 가져온다.

⬆️ bottom-up 방식

bottom-up 방식은 작은 하위 문제부터 시작해서 큰 문제까지 순차적으로 해결해나가는 방법인데, 계산한 값을 dp 테이블에 저장해나가는 방식을 사용한다.

일반적으로 재귀보다 반복문이 속도가 더 빠르므로, top-down 방식을 bottom-up 방식으로 바꾸려고 시도하는 경우가 많다.

백준 2748번 피보나치 수 2

📄 문제

📝 답안

1) 시간복잡도: O(2^n)

import sys

n = int(sys.stdin.readline().strip())

result = [0] * (n + 1)

def fibonacci(n):
    if n == 1 or n == 2:
        result[n] = 1
        return 1

    # 메모이제이션
    if result[n]:
        return result[n]

    result[n] = fibonacci(n - 1) + fibonacci(n - 2)

    return result[n]

print(fibonacci(n))

2) 시간복잡도: O(n)

import sys

n = int(sys.stdin.readline().strip())

result = [0] * (n + 1)

def fibonacci(n):
    if n <= 1:
        return n

    fib = [0] * (n + 1)
    fib[1] = 1

    for i in range(2, n + 1):
        fib[i] = fib[i - 1] + fib[i - 2]

    return fib[n]

print(fibonacci(n))

백준 2624번 동전 바꿔주기

📄 문제

📝 답안

import sys

input = sys.stdin.readline

# 지폐의 금액
T = int(input().strip())

# 동전의 가지 수
k = int(input().strip())

# 동전 정보
coins = []
for _ in range(k):
    p, n = map(int, input().split())
    coins.append((p, n))

# 금액 n에 대한 동전 교환 방법의 가지 수
dp = [0] * (T + 1)

# 0원인 경우 교환 방법은 한 가지이므로 1로 초기화
dp[0] = 1

# 동적 프로그래밍
for coin, cnt in coins:
    for money in range(T, 0, -1): # 목표금액에서 1원까지 내려가며 진행
        for i in range(1, cnt + 1): # 현재 동전 coin의 개수 cnt만큼 반복문 진행
            if money - coin * i >= 0:
                # coin을 i개 사용했을 때 금액 money를 만들 수 있는 경우의 수는 
                # 나머지 금액 money - coin * i를 만들 수 있는 경우의 수와 같음
                dp[money] += dp[money - coin * i]

print(dp[T])

백준 9084번 동전

📄 문제

📝 답안

아래 그림과 같이 동전을 사용한 경우와 사용하지 않은 경우를 나누어서 재귀 함수를 활용해서 푼 방법이다.

import sys

input = sys.stdin.readline

def solution(T, coins):
    # 메모이제이션
    memo = [[-1] * (T + 1) for _ in range(len(coins))]

    # 가능한 경우의 수 세기
    def number_of_ways(i, amount): # i: 현재 동전의 인덱스 / amount: 남은 금액
        if amount == 0: # 목표한 금액을 만들면 1 리턴
            return 1
        if i == len(coins): # 목표한 금액을 만들지 못한 상태로 동전 배열의 끝에 도달하면 0 리턴
            return 0
        if memo[i][amount] != -1: # 이미 가능한 경우의 수를 셌다면 중복 계산 없이 해당 값 리턴
            return memo[i][amount]

        if coins[i] > amount: # 만약 남은 금액보다 현재 동전의 금액이 크다면 다음 동전으로 넘어가기
            memo[i][amount] = number_of_ways(i + 1, amount)
            return memo[i][amount]
        else:
            # 현재 동전을 포함했을 때와 포함하지 않았을 때의 경우의 수를 합함
            memo[i][amount] = number_of_ways(i, amount - coins[i]) + number_of_ways(i + 1, amount)
            return memo[i][amount]

    return number_of_ways(0, amount)

case = int(input().strip())

for _ in range(case):
    coin_n = int(input().strip())
    coins = sorted(list(map(int, input().strip().split())), reverse=True)
    amount = int(input().strip())
    print(solution(amount, coins))

백준 2294번 동전 2

📄 문제

📝 답안

import sys

input = sys.stdin.readline

# n: 동전 종류의 개수, k: 만들려는 금액
n, k = map(int, input().strip().split())

# 동전 종류별 금액
coins = sorted([int(input().strip()) for _ in range(n)])
coins = set(coins)

# 동전 개수 테이블
nums = [10001] * (k + 1)
nums[0] = 0

for coin in coins:
    for i in range(coin, k + 1):
        nums[i] = min(nums[i], nums[i-coin] + 1)

if nums[k] == 10001:
    print(-1)
else:
    print(nums[k])

백준 9251번 LCS

📄 문제

📝 답안

자세한 풀이는 이 포스팅에 작성함

import sys

first = sys.stdin.readline().strip()
second = sys.stdin.readline().strip()

def longest_common_subsequence(text1: str, text2: str) -> int:
    dp_grid = [[0] * (len(text2) + 1) for _ in range(len(text1) + 1)]
    for col in reversed(range(len(text2))):
        for row in reversed(range(len(text1))):
            if text2[col] == text1[row]:
                dp_grid[row][col] = 1 + dp_grid[row + 1][col + 1]
            else:
                dp_grid[row][col] = max(dp_grid[row + 1][col], dp_grid[row][col + 1])
    return dp_grid[0][0]

print(longest_common_subsequence(first, second))

LeetCode 70. Climbing Stairs

📄 문제

📝 답안

class Solution(object):
    def climbStairs(self, n):
        """
        :type n: int
        :rtype: int
        """
        def dfs(rest, memo):
            if rest == 0:
                return 1
            if rest < 0:
                return 0
            if rest in memo:
                return memo[rest]

            memo[rest] = dfs(rest - 1, memo) + dfs(rest - 2, memo)
            return memo[rest]

        memo = {}
        return dfs(n, memo)

300. Longest Increasing Subsequence

📄 문제

📝 답안

class Solution(object):
    def lengthOfLIS(self, nums):
        """
        :type nums: List[int]
        :rtype: int
        """
        n = len(nums)
        dp = [1] * n

        for i in range(1, n):
            for j in range(i):
                if nums[i] > nums[j]:
                    dp[i] = max(dp[i], dp[j] + 1)

        return max(dp)

백준 10942번 팰린드롬?

📄 문제

📝 답안

import sys
sys.setrecursionlimit(10 ** 9)

input = sys.stdin.readline

N = int(input().strip())

nums = list(map(int, input().strip().split()))

M = int(input().strip())

visited = [[0] * N for _ in range(N)]

def is_palindrome(s, e):
    while s <= e:
        if nums[s] == nums[e]:
            if not visited[s][e]:
                result = is_palindrome(s + 1, e - 1)
                visited[s][e] = result
            return visited[s][e]
        else:
            return 0
    return 1

for _ in range(M):
    s, e = map(int, input().strip().split())
    print(is_palindrome(s - 1, e - 1))

5. Longest Palindromic Substring

📄 문제

📝 답안

class Solution(object):
    def longestPalindrome(self, s):
        """
        :type s: str
        :rtype: str
        """
        n = len(s)
        dp = [[None] * n for _ in range(n)]

        for i in range(n):
            dp[i][i] = True

        longest_start, max_len = 0, 1

        for end in range(n):
            for start in reversed(range(end)):
                if s[start] == s[end]:
                    if end - start == 1 or dp[start + 1][end - 1]:
                        dp[start][end] = True
                        if max_len < end - start + 1:
                            max_len = end - start + 1
                            longest_start = start

        return s[longest_start:longest_start + max_len]

위상정렬은 싸이클이 없는 방향 그래프(Directed Acyclic Graph)의 노드들을 선형적으로 정렬하는 방법이다.

이 알고리즘은 "선수과목을 고려한 학습 순서 설정"과 같이 스케줄링, 의존성 관리, 작업 순서 결정 등에 많이 사용된다.

🤔 진입차수(Indegree)란?

진입차수란 특정 노드로 들어오는 간선의 개수를 의미한다.

👩🏻‍💻 위상정렬 풀이 방법

1) 진입차수가 0인 모든 노드를 큐에 넣는다.

2) 큐가 빌 때까지 다음의 과정을 반복한다.

• 큐에서 원소를 꺼내 해당 노드에서 나가는 간선을 그래프에서 제거한다.
• 새롭게 진입 차수가 0이 된 노드를 큐에 넣는다.

👉🏻 결과적으로 큐에 노드가 들어온 순서가 위상정렬을 수행한 결과와 같다.

📝 위상정렬 Cheat Sheet

from collections import deque

# 노드의 개수와 간선의 개수를 입력 받기
v, e = map(int, input().split())
# 모든 노드에 대한 진입차수는 0으로 초기화
indegree = [0] * (v + 1)
# 각 노드에 연결된 간선 정보를 담기 위한 연결 리스트 초기화
graph = [[] for i in range(v + 1)]

# 방향 그래프의 모든 간선 정보를 입력 받기
for _ in range(e):
    a, b = map(int, input().split())
    graph[a].append(b) # 정점 A에서 B로 이동 가능
    # 진입 차수를 1 증가
    indegree[b] += 1

# 위상 정렬 함수
def topology_sort():
    result = [] # 알고리즘 수행 결과를 담을 리스트
    q = deque() # 큐 기능을 위한 deque 라이브러리 사용

    # 처음 시작할 때는 진입차수가 0인 노드를 큐에 삽입
    for i in range(1, v + 1):
        if indegree[i] == 0:
            q.append(i)

    # 큐가 빌 때까지 반복
    while q:
        # 큐에서 원소 꺼내기
        now = q.popleft()
        result.append(now)
        # 해당 원소와 연결된 노드들의 진입차수에서 1 빼기
        for i in graph[now]:
            indegree[i] -= 1
            # 새롭게 진입차수가 0이 되는 노드를 큐에 삽입
            if indegree[i] == 0:
                q.append(i)

    # 위상 정렬을 수행한 결과 출력
    for i in result:
        print(i, end=' ')

topology_sort()

LeetCode 207. Course Schedule

🔗 문제

207. Course Schedule

📝 답안

위상정렬을 한 결과를 result 배열에 담는데, 만약 이 result 배열에 모든 노드(= 과목)가 들어가지 못하면 모든 코스를 완료할 수 없음을 의미한다.

from collections import deque


class Solution(object):
    def canFinish(self, numCourses, prerequisites):
        """
        :type numCourses: int
        :type prerequisites: List[List[int]]
        :rtype: bool
        """

        # 모든 과목에 대한 진입 차수는 0으로 초기화
        indegree = [0] * numCourses

        # 각 과목에 연결된 간선 정보를 담기 위한 그래프 초기화
        graph = [[] for _ in range(numCourses)]

        # 선수 과목 관계를 그래프에 반영하기
        for edge in prerequisites:
            u, v = edge # 수업 u를 듣기 위해선 v를 먼저 들어야 함
            graph[v].append(u) # v -> u

            indegree[u] += 1 # u의 진입 차수 1 증가

        result = [] # 수강할 수 있는 과목 목록
        q = deque()

        # 진입 차수가 0인 과목들을 큐에 삽입
        for i in range(numCourses):
            if indegree[i] == 0:
                q.append(i)

        # 큐가 빌 때까지 반복
        while q:
            now = q.popleft()
            result.append(now)

            for i in graph[now ]:
                # now 과목과 연결된 노드들의 진입 차수에서 1 빼기
                indegree[i] -= 1
                # 새롭게 진입 차수가 0이 되는 과목들을 큐에 삽입
                if indegree[i] == 0:
                    q.append(i)

        # 들을 수 있는 과목 수가 numCourses보다 적으면 False 리턴
        return len(result) == numCourses

백준 2252번 줄 세우기

🔗 문제

2252. 줄 세우기

📝 답안

import sys
from collections import deque

input = sys.stdin.readline

n, m = map(int, input().split())

# 정점 연결 정보
graph = [[] for i in range(n + 1)]

# 모든 노드에 대한 진입 차수는 0으로 초기화
indegree = [0] * (n + 1)

# 비교(간선) 정보 입력 받기
for _ in range(m):
    a, b = map(int, input().split())
    # a 보다 큰 노드로 b 추가
    graph[a].append(b)
    # b의 진입차수 1 증가
    indegree[b] += 1

# 위상 정렬 함수
def topology_sort():
    result = [] # 키 순서대로 정렬
    q = deque()

    # 처음 시작할 때는 진입 차수가 0인 노드를 큐에 삽입. 즉 가장 작은 학생
    for i in range(1, n + 1):
        if indegree[i] == 0:
            q.append(i)

    # 큐가 빌 때까지 반복
    while q:
        now = q.popleft()
        result.append(now)
        # 해당 원소와 연결된 노드들의 진입 차수에서 1 빼기
        for i in graph[now]:
            indegree[i] -= 1
            # 새롭게 진입 차수가 0이 되는 노드를 큐에 삽입
            if indegree[i] == 0:
                q.append(i)

    for i in result:
        print(i, end=" ")


topology_sort()

백준 2637번 장난감 조립

🔗 문제

2637. 장난감 조립

📝 답안

import sys
from collections import deque

input = sys.stdin.readline

n = int(input().strip())
connect = [[] for _ in range(n + 1)]  # 연결 정보
needs = [[0] * (n + 1) for _ in range(n + 1)]  # 각 제품을 만들때 필요한 부품
q = deque()  # 위상 정렬
degree = [0] * (n + 1)  # 진입 차수
for _ in range(int(input())):
    a, b, c = map(int, input().split()) # a를 만드는데 b가 c개 필요
    connect[b].append((a, c))
    degree[a] += 1

for i in range(1, n + 1):
    # 진입 차수가 0인걸 넣어준다.
    if degree[i] == 0:
        q.append(i)

# 위상 정렬 시작
while q:
    now = q.popleft()
    # 현 제품의 다음 단계 번호, 현 제품이 얼마나 필요한지
    for next, next_need in connect[now]:
        # 만약 현 제품이 기본 부품이면
        if needs[now].count(0) == n + 1:
            needs[next][now] += next_need
        # 현 제품이 중간 부품이면
        else:
            for i in range(1, n + 1):
                needs[next][i] += needs[now][i] * next_need
        # 차수 -1
        degree[next] -= 1
        if degree[next] == 0:
            # 차수 0이면 큐에 넣음
            q.append(next)
for x in enumerate(needs[n]):
    if x[1] > 0:
        print(*x)

백준 1432번 그래프 수정

🔗 문제

1432. 그래프 수정

📝 답안

import sys
import heapq

input = sys.stdin.readline

n = int(input().strip())

# 각 노드에 연결된 간선 정보를 담기 위한 연결 리스트 초기화
graph = [[] for _ in range(n + 1)]

# 모든 노드에 대한 진출차수는 0으로 초기화
outdegree = [0] * (n + 1)

# 결과 저장 배열
result = [0] * (n + 1)

for i in range(1, n + 1):
    connection = list(map(int, input().strip()))

    for idx, val in enumerate(connection, start=1):
        if val == 1:
            graph[idx].append(i)
            outdegree[i] += 1

# 위상 정렬
def topology_sort(n):
    heap = []

    for i in range(1, n + 1):
        if outdegree[i] == 0:
            heapq.heappush(heap, -i)

    while heap:
        now = -heapq.heappop(heap)
        result[now] = n

        for connected_node in graph[now]:
            outdegree[connected_node] -= 1
            if outdegree[connected_node] == 0:
                heapq.heappush(heap, -connected_node)
        n -= 1

topology_sort(n)

if result.count(0) > 2:
    print(-1)
else:
    print(' '.join(map(str, result[1:])))

백준 1948번 임계경로

🔗 문제

1948. 임계경로

📝 답안

import sys
from collections import deque

n=int(input()) #노드, 도시 개수
m=int(input()) #도로의 개수

graph = [[] * (n + 1) for _ in range(n + 1)]
back_graph = [[] * (n +1) for _ in range(n  + 1)]
indegree = [0] * (n + 1)
result = [0] * (n + 1)
check = [0] * (n + 1)

q = deque()

for _ in range(m):
    a, b ,t = map(int,input().split())
    graph[a].append((b,t))
    back_graph[b].append((a,t))
    indegree[b]+=1

start,end=map(int,input().split())

q.append(start)

def topology():
    while q:
        cur = q.popleft()
        for i, t in graph[cur]:
            indegree[i] -= 1
            result[i] = max(result[i], result[cur] + t)
            if indegree[i] == 0:
                q.append(i)

    # 백트래킹
    cnt = 0 # 임계 경로에 속한 모든 정점의 개수
    q.append(end)
    while q:
        cur = q.popleft()
        for i, t in back_graph[cur]:
            if result[cur] - result[i] == t:
                cnt += 1
                if check[i] == 0:
                    q.append(i)
                    check[i] = 1

    print(result[end])
    print(cnt)

topology()

LeetCode 399. Evaluate Division

👀 접근 방법

수들 간의 수학적 관계는 그래프로 표현할 수 있다.

예를 들어 a / b = 2라 한다면 a를 2로 나누면 b가 되고, b를 1/2로 나누면 a가 된다.

이러한 관계는 아래와 같이 그래프로 표현할 수 있다. 즉 어떤 수가 다른 수가 되기 위해 나눠야 하는 수를 간선의 가중치로 삼는 것이다.

만약 query가 ["a", "c"]로 주어진다면 우리는 a / c = ?에서 ?의 값을 구해야 한다.

이 수식은 a / ? = c로 다시 표현할 수 있는데, 즉 a를 어떤 수로 나눠야 c가 될 수 있는지 구하는 것과 동일한 문제이다.

따라서 그래프 상에서 노드 a에서 c까지 가면서 거치는 간선의 가중치를 구하면 될 것이다.

📝 답안

from collections import defaultdict


class Solution:
    def calcEquation(self, equations, values, queries):
        graph = self.buildGraph(equations, values)
        results = [self.calculatePathWeight(start, end, set(), graph) for start, end in queries]
        return results

    # equations과 values를 바탕으로 그래프 생성
    def buildGraph(self, equations, values):
        # 딕셔너리의 딕셔너리 형태로 그래프 생성
        graph = defaultdict(dict)
        # a / b = 2라면 a-> 2 -> b 그리고 b -> 1/2 -> a
        for (u, v), weight in zip(equations, values):
            graph[u][v] = weight
            graph[v][u] = 1 / weight
        return graph

    # DFS 방식으로 start에서 end까지 가는 경로의 가중치 계산
    def calculatePathWeight(self, start, end, visited, graph):
        if start not in graph:
            return -1.0

        if end in graph[start]:
            return graph[start][end]

        visited.add(start)

        for neighbor, weight in graph[start].items():
            if neighbor not in visited:
                cumulativeWeight = self.calculatePathWeight(neighbor, end, visited, graph)
                if cumulativeWeight != -1.0:
                    return weight * cumulativeWeight

        return -1.0

union-find 알고리즘은 서로소 집합(disjoint-set) 알고리즘이라고도 불리는데, 두 노드가 같은 집합에 포함되는지 여부를 파악해야 할 때 사용하기 좋은 알고리즘이다.

📌 Cheat sheet (Python)

출처: 이것이 취업을 위한 코딩 테스트다 with Python

# 특정 원소가 속한 집합을 찾기
def find_parent(parent, x):
    # 루트 노드가 아니라면, 루트 노드를 찾을 때까지 재귀적으로 호출
    if parent[x] != x:
        # path compression: 경로 상의 모든 노드를 루트 노드에 연결
        # => 트리의 높이가 낮아지고, Find 연산의 성능이 향상됨
        parent[x] = find_parent(parent, parent[x])
    return parent[x]

# 두 원소가 속한 집합을 합치기 (일반적으로 값이 작은 것을 부모로 만들어줌)
def union_parent(parent, a, b):
    a = find_parent(parent, a)
    b = find_parent(parent, b)
    if a < b:
        parent[b] = a
    else:
        parent[a] = b

# 노드의 개수와 간선(Union 연산)의 개수 입력 받기
v, e = map(int, input().split())
parent = [0] * (v + 1) # 부모 테이블 초기화하기

# 부모 테이블상에서, 부모를 자기 자신으로 초기화
for i in range(1, v + 1):
    parent[i] = i

# Union 연산을 각각 수행
for i in range(e):
    a, b = map(int, input().split())
    union_parent(parent, a, b)

# 각 원소가 속한 집합 출력하기
print('각 원소가 속한 집합: ', end='')
for i in range(1, v + 1):
    print(find_parent(parent, i), end=' ')

print()

# 부모 테이블 내용 출력하기
print('부모 테이블: ', end='')
for i in range(1, v + 1):
    print(parent[i], end=' ')

📌 Cheat Sheet (JavaScript)

function find_parent(parent, x) {
    if (parent[x] !== x) {
        parent[x] = find_parent(parent, parent[x]);
    }

    return parent[x];
}

function union_parent(parent, a, b) {
    a = find_parent(parent, a);
    b = find_parent(parent, b);

    parent[Math.max(a, b)] = Math.min(a, b);
}

function solution(n, computers) {  
    const parent = Array.from({length: n}, (_, idx) => idx);

    for (let i = 0; i < n; i++) {
        for (let j = 0; j < n; j++) {
            if (computers[i][j] === 1) {
                union_parent(parent, i, j);
            }
        }
    }

    for (let i = 0; i < n; i++) {
        find_parent(parent, i);
    }

    return new Set(parent).size;
}

백준 2606번 바이러스

📝 문제

백준 2606번 바이러스

👩🏻‍💻 답안

import sys

def find_parent(parents, x):
    if parents[x] != x:
        parents[x] = find_parent(parents, parents[x])
    return parents[x]

def union_parent(parents, a, b):
    a = find_parent(parents, a)
    b = find_parent(parents, b)
    if a < b:
        parents[b] = a
    else:
        parents[a] = b

# 컴퓨터의 수
n = int(sys.stdin.readline())

# 부모 테이블 초기화
parents = [0] * (n + 1)
for i in range(1, n + 1):
    parents[i] = i

# 연결된 컴퓨터 쌍의 수
c = int(sys.stdin.readline())

# 입력값을 받고 부모 합치기 연산 수행
for _ in range(c):
    a, b = map(int, sys.stdin.readline().strip().split())
    union_parent(parents, a, b)

# 부모 테이블이 업데이트되지 않은 경우를 위해 각각의 노드에 대해 부모 찾기 연산 수행
for i in range(1, n + 1):
    find_parent(parents, i)

# 1번 컴퓨터와 부모가 같은 컴퓨터의 개수 세기
print(parents.count(parents[1]) - 1)

백준 11724번 연결 요소의 개수

📝 문제

백준 11724번 연결 요소의 개수

👩🏻‍💻 답안

import sys

def find_parent(parents, x):
    if parents[x] != x:
        parents[x] = find_parent(parents, parents[x])
    return parents[x]

def union_parent(parents, a, b):
    a = find_parent(parents, a)
    b = find_parent(parents, b)
    if a < b:
        parents[b] = a
    else:
        parents[a] = b

# 정점의 개수, 간선의 개수
n, m = map(int, sys.stdin.readline().strip().split())

# 부모 배열 초기화
parents = [0] * (n + 1)
for i in range(1, n + 1):
    parents[i] = i

# 간선의 양 끝점 u와 v
for _ in range(m):
    u, v = map(int, sys.stdin.readline().strip().split())
    union_parent(parents, u, v)

for i in range(1, n+1):
    find_parent(parents, i)

parents_set = set(parents)
print(len(parents_set) - 1)

백준 1197번 최소 스패닝 트리

📝 문제

백준 1197번 최소 스패닝 트리

💡 Spanning Tree란? Spanning Tree는 그래프의 모든 노드를 포함하면서 사이클이 존재하지 않는 최소 연결 부분 그래프를 의미한다.

💡 최소 스패닝 트리((Minimum Spanning Tree)란? 그래프의 모든 정점들을 연결하는 부분 그래프 중에서 가중치의 합이 최소인 트리를 의미한다. 도로 네트워크에서 최소 비용으로 모든 도시를 연결하는 문제 등에 활용된다.

👩🏻‍💻 답안

최소 스패닝 트리와 관련해서 대표적인 알고리즘은 크루스칼 알고리즘(Kruskal Algorithm)인데, 아래와 같은 방법으로 구현할 수 있다.

1. 그래프의 모든 간선을 가중치 순으로 정렬한다.
2. 가중치가 낮은 간선부터 스패닝 트리에 추가할지 여부를 살펴본다. 👉🏻 여기에서 union-find가 사용된다. 2-1. find 연산을 했는데 부모 노드가 같다면 싸이클이 발생하는 경우이므로 스패닝 트리에 포함시키지 않는다. 2-2. find 연산 결과 부모 노드가 다르다면 union 연산을 통해 스패닝 트리에 포함한다.

import sys

# 특정 원소가 속한 집합을 찾기
def find_parent(parent, x):
    if parent[x] != x:
        parent[x] = find_parent(parent, parent[x])
    return parent[x]

# 두 원소가 속한 집합을 합치기
def union_parent(parent, a, b):
    a_parent = find_parent(parent, a)
    b_parent = find_parent(parent, b)
    # 값이 작은 것을 부모로 만들기
    if a_parent > b_parent:
        parent[a_parent] = b_parent
    else:
        parent[b_parent] = a_parent

# 노드의 개수와 간선의 개수 입력 받기
v, e = map(int, sys.stdin.readline().strip().split())

# 부모 테이블 초기화하기
parent = [0] * (v + 1)
for i in range(1, v + 1):
    parent[i] = i

# 모든 간선을 담을 리스트와 최종 비용을 담을 변수
edges = []
min_cost = 0

# 모든 간선의 정보 입력 받기
for i in range(e):
    a, b, cost = map(int, sys.stdin.readline().strip().split())
    edges.append((cost, a, b))


# 간선을 비용순으로 정렬
edges.sort()

# 간선을 하나씩 확인하며 사이클이 발생하지 않는 경우에만 집합에 포함
for edge in edges:
    cost, a, b = edge

    if find_parent(parent, a) != find_parent(parent, b):
        union_parent(parent, a, b)
        min_cost += cost

print(min_cost)

209. Minimum Size Subarray Sum

📝 답안

아래 코드는 Sliding Window의 사이즈를 늘렸다가 줄였다가를 반복하면서 최소값을 찾는 코드이다.

class Solution(object):
    def minSubArrayLen(self, target, nums):
        # 초기화
        left, right, current_sum, min_len = 0, 0, 0, float('inf')

        while right < len(nums):
            # 현재 부분 배열의 합을 업데이트
            current_sum += nums[right]
            right += 1

            # 합이 목표 값보다 크거나 같아질 때까지 왼쪽 포인터를 이동
            while current_sum >= target:
                # 최소 길이 업데이트
                min_len = min(min_len, right - left)
                # 현재 부분 배열에서 왼쪽 요소를 빼고 왼쪽 포인터 이동
                current_sum -= nums[left]
                left += 1

        # 최소 길이가 초기값인 무한대면 0을 반환, 그렇지 않으면 최소 길이 반환
        return 0 if min_len == float('inf') else min_len