개발메모장

개요이번에는 Turborepo 기반 모노레포에 Storybook을 붙여보자. 공통 UI 패키지를 독립적으로 개발/문서화하는 건 굉장히 중요하다. 특히 팀 단위에서 협업할 때 시각적인 UI 문서화 + 테스트 환경으로 Storybook은 사실상 필수 도구다. 프로젝트 구조my-web/├── apps/│ ├── docs/ # 문서 앱│ └── web/ # 웹 앱├── packages/│ ├── eslint-config/ # ESLint 설정│ ├── typescript-config/ # TypeScript 설정│ └── ui/ # UI 컴포넌트 라이브러리├── package.json├── turbo.json└── pnpm-w..

터보레포(Turborepo) 첫 사용기 – 모노레포 구조 탐험기 최근에 터보레포(Turborepo)로 프로젝트를 세팅해봤다.예전부터 모노레포(Monorepo)에 관심이 있었는데, 이번에 직접 구조를 뜯어보며 어떤 매력이 있는지 체험해보았다. Turborepo란?터보레포는 Vercel에서 만든 모노레포 빌드 시스템이다.여러 앱과 패키지를 하나의 저장소에서 관리할 수 있고, 빌드 캐싱과 병렬 실행 덕분에 속도가 확실히 빨라졌다. 개인사이드 프로젝트와 새로 이전할 블로그를 터보레포에 담아보자. pnpm dlx create-turbo@latest 2개의 앱이 생긴다.프로젝트 구조my-web/├── apps/ # 애플리케이션├── packages/ # 공유 패키지├── package.js..

디자인과 개발의 경계를 허무는 툴들이 속속 등장하고 있다.그중에서도 Cursor 에디터와 Figma를 연결해주는 cursor-talk-to-figma-mcp는디자이너와 개발자 모두에게 놀라운 워크플로우를 제공한다.이번 글에서는 cursor-talk-to-figma-mcp를 설치하고 Figma와 연동하는 과정을 정리한다. ✅ cursor-talk-to-figma-mcp란?cursor-talk-to-figma-mcp는 Cursor 에디터에서 Figma 파일을 읽고, 상호작용할 수 있게 해주는 플러그인이다.Figma의 프레임 구조, 텍스트, 이미지 정보를 가져와 코드에 자동으로 반영하거나,디자인 가이드를 도우미처럼 사용할 수 있다. 🛠️ 사전 준비Cursor 에디터 설치Figma 계정 및 접근 가능한 프로젝..

복잡한 UI를 구성하다 보면, 부모 컴포넌트에서 관리하는 상태를 자식에게 전달할 때 단순히 props로 넘기는 것만으로는 부족한 경우가 많다. 이런 상황에서 유용하게 사용할 수 있는 방법이 바로 render prop 패턴이다. render prop 패턴이란?render prop 패턴은 자식 컴포넌트를 JSX가 아닌 함수로 넘겨서, 부모 컴포넌트의 상태나 메서드를 자식에게 전달하는 방식이다. {(props) => }이렇게 함수형 children을 사용하면 자식 컴포넌트가 부모의 상태나 메서드에 직접 접근할 수 있어, 상태와 UI를 분리된 형태로 설계할 수 있다. 기본 구조 예시다음은 selectedItems라는 상태를 render prop 패턴으로 전달하는 예시다. ✅ Layout 컴포넌트 (상태를 가진..

리액트에서 폼을 사용할 때 "Form submission canceled because the form is not connected"라는 오류가 발생할 수 있다. 이 오류는 태그가 올바르게 설정되지 않았거나 폼 제출 방식이 잘못 처리될 때 나타난다. 아래에서 주요 원인과 해결 방법을 정리한다. 1. onSubmit 이벤트 처리 문제 태그에서 브라우저의 기본 제출 동작이 막히지 않으면 이 오류가 발생할 수 있다.해결 방법onSubmit 이벤트에서 event.preventDefault()를 호출하여 기본 동작을 방지해야 한다.const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); // 기본 제출 동작 방지 // 폼 제출 로..

React로 폼이나 입력 컴포넌트를 만들다 보면 다음과 같은 경고를 접할 수 있다.Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. 이 경고는 React에서 컨트롤된 컴포넌트와 비컨트롤된 컴포넌트의 차이로 인해 발생하는 것이다. 이번 글에서는 이 경고의 의미와 해결 방법에 대해 알아보자.  1. 컨트롤된 컴포넌트 vs 비컨트롤된 컴포넌트먼저 컨트롤된 컴포넌트와 비컨트롤된 컴포넌트의 차이를 이해해야 한다. * 컨트롤된 컴포넌트: 컴포넌트의 상태..

React에서 배열 상태를 관리하다 보면, 배열의 요소를 추가하거나 제거한 후 컴포넌트가 리렌더링되지 않는 현상을 겪게 될 때가 있다. 이 글에서는 이러한 문제의 원인과 해결 방법에 대해 설명하려고 한다.문제 상황: 배열 상태 변경 후 리렌더링이 되지 않는 경우배열 상태를 관리하면서 push()나 splice()와 같은 메서드를 사용해 배열의 요소를 추가하거나 삭제할 때, 상태가 변경되었음에도 리렌더링이 일어나지 않는 경우가 있다. export const groupingFields = (forGroupingFields: FieldType[], field: FieldType) => { const index = forGroupingFields.findIndex((item) => item.idx === fi..

Next.js로 웹 애플리케이션을 개발하다 보면 URL을 이동하는 작업을 자주 하게 된다. Next.js에서는 URL을 이동하는 방법으로 주로 두 가지를 사용한다: Link 컴포넌트와 useRouter 훅이다. 이 두 가지 방법은 각각의 특성과 장단점이 있으며, 상황에 따라 적절히 선택해서 사용하는 것이 중요하다.  Link 컴포넌트를 사용하는 방법Link는 Next.js에서 제공하는 기본 컴포넌트로, HTML의 태그와 비슷한 역할을 한다. 주로 정적인 링크를 제공할 때 사용되며, 클릭 시 페이지를 빠르게 전환한다. 사용 방법은 매우 간단하다.import Link from 'next/link'; Go to About Page 특성클라이언트 사이드 내비게이션: Link 컴포넌트는 페이지를 전체적으로 다..

refetch 함수와 useQueryClient의 queryClient.invalidateQueries 함수는 둘 다 React Query에서 데이터를 다시 가져오는 데 사용된다.refetch 함수refetch 함수는 특정 쿼리의 데이터를 다시 가져온다. 주로 컴포넌트 내에서 호출되어 해당 컴포넌트가 사용하는 쿼리를 다시 불러오고 업데이트하는 데 사용된다.장점간편함: 단일 쿼리를 다시 가져오는 데 매우 직관적이고 간단하다.사용 용이성: 컴포넌트 내부에서 쉽게 호출할 수 있다.구체적: 호출된 쿼리에만 영향을 미치므로, 특정 데이터만 새로 고침이 필요할 때 적합.단점제한된 범위: 다른 쿼리나 데이터와 연결된 경우, 하나의 쿼리만 갱신하므로 부족할 수 있다.queryClient.invalidateQueries..

리액트 프로젝트에서 데이터를 전달하는 방법에는 여러 가지가 있지만, 가장 일반적인 두 가지 방법은 props와 Context API의 Provider를 사용하는 것이다. 이 두 가지 방법과 zustand 라이브러리를 통한 방법을 알아보자. 1. Props를 사용한 데이터 전달개념Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위한 방법이다. 컴포넌트를 재사용하고, 데이터를 명시적으로 전달할 수 있는 방법이다. ParentComponent.jsimport React from 'react';import ChildComponent from './ChildComponent';const ParentComponent = () => { const data = "Hello from Parent"; ..