m2ndy 개발 블로그

프로젝트 중 Sentry와 Turbopack 프로덕션 적용을 위해 Next.js 버전을 15.1.3에서 15.5.0으로 업데이트했습니다.그 과정에서 Next.js 블로그의 릴리즈 노트를 정리한 업데이트 내용을 공유합니다. Next.js 15.2 Release Note개발 중 오류 시 발생하던 UI를 개편, 오류 스택 개선개발 지표 (Dev Indicator) 통합스트리밍 메타데이터동적 데이터를 가져오거나 비동기 작업을 해야 할 때는 generateMetadata로 수행했었습니다. 이전 버전에서는 초기 UI가 에 추가되기 전에 이 메타데이터가 만들어져야 했습니다.15.2 버전에서는 generateMetadata가 완료되기 전에도 초기 UI를 화면에 띄울 수 있게 되어 이 문제를 개선했습니다.이는 사용자에..

[Next.js]Trie를 사용해서 네트워크 요청 없이 자동완성 구현하기(Typescript, Zustand) 서비스를 운영하면서 드는 고민 중 하나는 서버 비용이 아닐까 싶어요. 크루위키 서비스를 운영하면서 매달 지출되는 비용이 생각보다 많이 나오더라구요. 클라이언트 측에서 네트워크 요청 횟수를 크게 줄일 수 있는 방법은 없을지 고민하다가, 검색 input을 활용해 보면 좋겠다는 생각이 들었습니다. 동료들과 했던 자료구조 스터디에서 Trie 자료구조를 학습했던 적이 있는데요, Trie 자료구조는 O(N) (N : 문자열의 길이)의 시간 복잡도를 가지고 있어 자동 완성이나 사전 검색 등 문자열을 사용하는 곳에서 자주 활용된다고 합니다. [Typescript] Trie (트라이) 자료구조 직접..

크루위키 프로젝트 진행 중 큰 변경사항이 발생했습니다. 바로 url의 path variable 형식이 달라지는 것..! 크루위키는 위키 형태의 서비스로, 작성된 글의 제목이 그대로 url path variable로 설정되어 사용되고 있었습니다. 하지만 제목 대신 UUID를 사용하는 정책으로 바뀌면서 모든 글의 url이 변경되었습니다. 예를 들어 메인 페이지의 경우 /wiki/대문이 /wiki/30a6c25d 형태로, 게시글의 경우 /wiki/OO크루(0기)가 /wiki/40b6c26e 형태가 되었습니다. 하지만 메인 페이지도 path variable이 UUID로 바꾸면서 기존 사용자들의 사용성에 대해 우려사항이 있었습니다. 즐겨찾기로 접속하는 사용자들은 기존의 /wiki/대문 페이지를 그대로 이용할 것이..

프로젝트에서 자동 완성 컴포넌트를 구현하면서 트라이 자료구조를 접했는데 이번 기회에 직접 구현해보려 한다. 언어는 타입 안정성을 위해 Typescript를 사용했다. Trie (Prefix Tree)Trie는 문자열을 빠르게 탐색할 수 있는 자료구조로, 트리 형태로 구성된다. Prefix tree라고도 불린다.각 노드는 문자열의 한 글자를 나타내며, 루트부터 마지막 노드까지의 경로가 문자열을 구성한다. 해시 테이블에 비해 접두사 기반의 검색에서 더 효율적이다.문자열을 각 노드에 저장하고 메모리를 사용하지만 탐색 속도가 O(N)으로 매우 빠른 편이다. 따라서 자동 완성이나 사전 검색, 맞춤법 검사와 같이 문자열을 활용하는 기능에 주로 사용된다. 시간 복잡도Operation Average WorstIn..

어느새 당근에서의 프론트엔드 인턴이 마무리되었다✨ 3개월이라는 짧은 시간에 압축 성장을 경험했고, 당근알바 프로덕트를 담당하며 많은 것들을 배운 시간이었다. 입사하고 한 달 정도는 도메인과 코드를 이해하려고 노력했다. 팀과 버디에게 빠르게 도움이 되는 사람이 되고 싶었다! GraphQL, 웹뷰 등 기술 지식도 습득하기 위해 주말에도 강의를 찾아볼 정도로 몰두했던 시간이었다.특히 기능을 개발하고 쿼리로 해당 기능을 사용하는 사용자들을 수치로 확인했을 때 정말 신기했다. 내가 만든 기능을 실제로 사람들이 사용하고 있다니..! 책임감이 더 커지는 느낌이었다. 사용자들이 서비스를 불편함 없이 사용할 수 있기를 바랐다. 자세한 한달차 회고는 여기로 ! 당근 인턴 입사, 한달차 회고 : 빠르게 적응하기, 생..

MCP란? MCP (Model Context Protocol)는 애플리케이션이 LLM(Large Language Model)에 컨텍스트를 제공하는 방식을 표준화한 오픈 프로토콜입니다.기존에는 각 어플리케이션마다 LLM에 정보를 전달하는 방식이 달라 어플리케이션에 맞는 방식으로 개별 작업을 해야 했는데요, MCP는 클라이언트와 서버, 그리고 LLM 간의 인터페이스를 표준화하여 한 번의 설정만으로 여러 어플리케이션에 작업을 수행할 수 있도록 합니다. 공식 문서를 통해 MCP의 동작 구조와 개념을 자세히 이해할 수 있습니다.modelcontextprotocol.io    MCP + Cursor 연동 방법 1. Figma MCP 서버 구성Cursor에서 Figma 컴포넌트를 인식하려면 MCP 서버를 설정해야 합..

당근 알바팀의 Frontend Engineer 인턴으로 합류한지 한 달이 된 시점에서 작성해보는 회고. 인턴 합격 소식을 들었을 때 정말 꿈만 같았다. 평소 자주 사용하던 서비스의 개발자로 근무할 수 있는 기회가 생겼다니..! 누구보다 잘 해내고 싶은 마음이 컸다. 그렇지만 잘 하는 것은 쉽지 않았다. 처음 써보는 기술과 생각보다 훨씬 복잡한 도메인, 방대한 양의 코드.. 과연 내가 할 수 있을까? 라는 생각이 들었다. 다행히 담당 버디였던 킷이 많은 도움을 주신 덕분에 차츰 익숙해져갔고, 모르는 부분을 질문해가며 천천히 학습해나갔다. 다만 걱정이 되는 부분은 3개월이라는 짧은 시간 동안 괄목한 성과를 이룰 수 있을까에 대한 부분이다. 생산성을 빠르게 높이고 '정확'하게 배워가기 위해 고민 중이다...

본 글은 2025.1.6에 마지막으로 수정되었습니다. 기존의 Input 공통 컴포넌트에 ComboBox를 추가해야 하는 요구사항이 생겼습니다. Input ComboBox는 Input과 매우 유사하지만 에러 상태와 에러 메시지를 받지 않는데요, 따라서 Input ComboBox에서 불필요한 코드를 줄이고 유지보수성을 높이기 위해 InputComboBox라는 컴포넌트를 따로 만들기로 결정했습니다. Input ComboBox 사용자가 "강남"을 입력하려고 할 때, 기능적인 시나리오를 정리하면 다음과 같습니다. 값을 입력하는 경우1-1. 사용자가 input에 커서를 올린다.1-2. input에 "ㄱ"를 입력한다.1-3. 입력값이 존재하면 combobox items를 보여준다.1-4. 커서를..

본 글은 2025.1.2에 마지막으로 수정되었습니다. 시작하기에 앞서, 본 글에서 ‘가리킨다’라는 의미는 ‘바인딩된다’라고 정의하겠습니다. 또한, 모든 예제는 브라우저 환경임을 가정합니다. this함수 호출 방식에 따라 자신이 속한 객체나 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 거나, 전역 객체를 가리키는 변수.즉, this는 자기 자신을 가리키거나, 전역 객체를 가리킵니다.// 객체 리터럴 예제// this는 getName 메서드를 호출한 객체인 introduction을 가리킵니다.const introduction = { name: 'Lee', getName() { return this.name; },};console.log(introduction.getName()); // ..

본 글은 2024.12.31에 마지막으로 수정되었습니다.  Storybook 버전 : 8.4.5Typescript 버전 : 5.6.2Vite 버전 : 5.4.10   프로젝트에서 FeedItem 컴포넌트의 스토리북을 구현하던 중 이런 에러를 마주했다.createRoot(...): Target container is not a DOM element.  preview.ts와 FeedItem 스토리북의 코드는 아래와 같았다.// .storybook/preview.tsimport React from 'react';import { MemoryRouter } from 'react-router-dom';import type { Decorator, Preview } from '@storybook/react';impor..