m2ndy 개발 블로그

어느새 당근에서의 프론트엔드 인턴이 마무리되었다✨ 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 서버를 설정해야 합..

본 글은 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..

대상 독자자바스크립트 이벤트 루프에 대한 지식이 있는 분렉시컬 스코프와 실행 컨텍스트에 대한 지식이 있는 분호이스팅에 대한 지식이 있는 분    실행 컨텍스트 (Execution Context)Lexical Environment에 대해 알아보기에 앞서, 자바스크립트의 실행은 실행 컨텍스트(Execution Context)에 의해서 일어납니다. 실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다. 즉, 코드를 실행하기 위해 필요한 정보들이 들어가 있는 공간입니다. 이 공간들을 콜 스택에 쌓아 올리면서 자바스크립트를 실행합니다. 실행 컨텍스트를 구성할 수 있는 방법으로는 전역 공간, eval, 함수 등이 있습니다. 우리가 흔히 실행 컨텍스트를 구성하는 방법으로 대표적으로는 함수를 실행하는..

3차례의 QA와 5회의 유저 테스트(UT)를 진행하며, 자잘한 버그를 해결하고 테스트 유저로부터 피드백을 수집했습니다.  테스트 과정 중 "글 수정 기능이 있으면 좋겠다"는 피드백을 받아 수정 기능을 구현하기로 결정했습니다. 하지만 새로운 풀이 작성 페이지와 풀이 수정 페이지를 같은 MissionSubmitPage로 재사용하고자 했기에, 이를 어떻게 설계할지에 대해 고민이 들었습니다. 그래서 일단 흐름도를 그려보기로 했습니다.글 작성 페이지를 (1) 새로운 글을 작성하기 위해 방문하는 경우와, (2) 수정하기 위해 방문하는 경우를 나누기 위해 url에 solutionId 파라미터를 추가했습니다. 페이지 로드 시 파라미터를 확인하여, 데이터가 존재하면 서버에서 기존 데이터를 가져와 수정 작업으로 간주합니다..

모던 리액트 Deep Dive를 학습하고 정리한 글입니다. 5.1 상태 관리가 필요한 이유상태 : 어떠한 의미를 지닌 값. 어플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값.상태로 분류될 수 있는 것들UI : 다크/라이트 모드, 라디오, input 등URL : 브라우저에서 관리되고 있는 상태 값form : 로딩 중인지, 제출되었는지, 접근이 불가능한지, 값이 유효한지 모두 상태로 관리됨서버에서 가져온 값 : 대표적으로 API 요청상태 관리의 역사Flux 패턴의 등장MVC 패턴은 모델과 뷰가 많아지면 복잡도 증가이렇게 MVC 패턴을 적용한 어플리케이션이 비대해지고 상태도 많아짐에 따라 상태를 추적하기 어려워 짐페이스북은 이 문제를 양방향 데이터 바인딩을 원인으로 봄컨트롤러에서 모델로는 단방향이지..

본 글은 2024.11.13에 마지막으로 수정되었습니다.  Devel Up 서비스에는 '위로 가기 버튼'이 있습니다. 아래 사진과 같은 버튼인데요, 글이 길어지는 경우 사용자 경험을 향상시키기 위해 스크롤을 최상단으로 끌어올릴 수 있게 해주는 버튼입니다.      이 버튼은 페이지 스크롤에 상관 없이 항상 position: fixed로 화면에 고정되어 있었습니다. 하지만 스크롤이 최상단에 있는 경우에도 버튼이 존재하는 것이 어색하다는 사용자 피드백이 있었습니다. 따라서 이 버튼을 스크롤이 특정 지점 아래에 있을 때만 보이도록 구현하기로 했습니다.  여기서 든 의문점이 있었습니다. 1. 사용자의 스크롤 위치를 항상 구하고 있어야 되는가?2. 스크롤 위치를 항상 구하고 있어야 한다면, 이벤트의 콜백 함수를 ..

본 글은 2024.11.05에 마지막으로 수정되었습니다.    CSR와 SSR CSR와 SSR은 웹 어플리케이션을 렌더링 하는 대표적인 방법들이다. 본 글에서는 CSR와 SSR의 동작 원리와 이를 비교하며 장단점을 작성하려 한다.   CSR ( Client Side Rendering) CSR은 브라우저에서 거의 모든 작업이 이루어지는 렌더링 방식이다. React의 경우 기본 HTML에 컴포넌트를 갈아 끼우는 SPA로 동작하기 때문에, 서버로부터 처음 받아오는 html 파일은 아주 간단한 HTML 상태다.             이 기본 HTML 파일에는 태그만 있을 뿐, 서버에서 받아오는 데이터는 없는 상태다.브라우저는 HTML 파싱을 통해 파일을 위에서부터 순차적으로 읽어나가다     React    ..