m2ndy 개발 블로그

나는 AI 개발자? 최근에 시작한 프로젝트에서는 기획서부터 개발까지 거의 90%가 AI로 이루어져있다. AI가 읽기 쉽게 설계되고 작성된 문서, AI가 만들어준 디자인, 그걸 바탕으로 AI가 이해하고 만들어 준 코드까지.. 나는 AI에게 프롬프트를 주고 답변이 나올 동안 다른 AI를 돌린다. AI가 기획서에 정합성이 맞지 않는 부분이 있다고 한다. 그럼 난 또 AI를 돌려 깃허브 이슈를 작성한다. 이 과정을 매일 반복한다.이게 맞을까? 잘 모르겠지만 처음 시도해보는 방법이니 일단 진행해 본다. AI를 사용하지 않았을 때보다 오히려 좋을 수도? 발전하고 있는가? 모르겠다. 난 무언가를 배우는 걸 좋아한다. 백수 시절에도 영어 배우겠다고 회화 학원에 등록했을 정도니까.이렇게 하는 이유는 내 실력이 ..

Notion 교육 요금제로 Notion AI를 잘 쓰고 있었는데.. 2025년 12월부터 더 상위 요금제를 사용해야만 Notion AI 사용이 가능하더라구요. 제가 목표하는 기능은 다음과 같습니다. 1. AI는 페이지의 기능을 요약할 수 있어야 한다.2. AI가 요약한 내용을 페이지 속성의 "요약" 텍스트 필드에 입력할 수 있어야 한다. 그래서 Notion 유료 요금제 대신, Claude MCP를 연동해 AI 기능을 사용할 수 있도록 구축했습니다.사용한 Claude 요금제는 무료 플랜이라 비용이 전혀 들지 않습니다. (단, Claude는 특정 시간 동안에 사용할 수 있는 쿼터에 제한이 있어 할당량이 끝나면 쿼터가 채워질 때까지 기다려야 합니다..) Notion과 Claude MCP 연동하기..

Sentry에서 해킹 알림이 뜨다 지난 어느 날, Next.js와 React의 critical 레벨의 보안 이슈가 발생했습니다. https://github.com/vercel/next.js/security/advisories/GHSA-9qr9-h5gf-34mp1 for versions 19.0.0, 19.1.0, 19.1.1, and 19.2.0 and frameworks that use the affected packages, including Next.js 15.x and 16.x using the A..." data-og-host="github.com" data-og-source-url="https://github.com/vercel/next.js/security/advisories/GHSA-9q..

프로젝트 중 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개월이라는 짧은 시간 동안 괄목한 성과를 이룰 수 있을까에 대한 부분이다. 생산성을 빠르게 높이고 '정확'하게 배워가기 위해 고민 중이다...