FrontEnd Develop/Project : TODOMVC 6

TODOMVC : 완성 후의 리팩토링

1. 초벌 분리의 시작: 하나의 거대한 컴포넌트처음에는 TodoPage.tsx 내부에 상태 관리, 탭 UI, 입력 폼, 리스트 렌더링까지 모두 들어있는 구조였다. 작성 당시에는 직관적으로 빠르게 구현할 수 있었지만, 다음과 같은 문제점들이 눈에 띄었다.한 파일에 너무 많은 책임이 집중되어 있었다.컴포넌트 재사용이 어려웠다.테스트 및 유지보수가 어려워질 조짐이 보였다.따라서 다음과 같은 기준을 두고 리팩토링을 시작했다.2. 단계적 분리 전략2-1. Atomic 컴포넌트 분리공통적으로 쓰일 수 있는 Input과 Button을 components/atomic/ 디렉토리로 분리했다.components/ atomic/ Input.tsx Button.tsx이는 UI 재사용성과 일관된 스타일 적용을 위한..

타입스크립트(자바스크립트) 배열 반복(iteration) 메서드 정리

프론트엔드 개발에서 배열을 다룰 때 자주 사용하는 반복(iteration) 메서드들에 대해 정리해봅니다. map, filter, forEach, find, reduce 등은 모두 배열의 각 요소를 순회하며 무언가를 처리하는 함수형 도구입니다.✅ 1. map()배열의 각 요소를 **변형(transform)**하여 새로운 배열을 생성✅ 리턴값 필요: 각 요소를 어떻게 바꿀지 return 필수const numbers = [1, 2, 3];const doubled = numbers.map((n) => n * 2); // [2, 4, 6]원본 배열 유지됨JSX에서도 아주 자주 쓰임{todoList.map((todo) => ( {todo.text}))}✅ 2. filter()조건에 맞는 요소만 걸러내서 새 배열 ..

TypeScript의 객체 타입 지정에 편리한 내장 Record 유틸리티 타입

TypeScript에서는 객체의 타입을 명시할 때 보통 아래처럼 key-value 형태로 정의합니다:const user: { name: string; age: number } = { name: 'Alice', age: 30,};하지만 더 유연하고 깔끔하게 작성할 수 있는 유틸리티 타입이 있습니다. 그중 대표적인 것이 바로 **Record**입니다.Record란?"키가 K 타입이고, 값이 V 타입인 객체를 정의한다"는 의미입니다.Record 문자열 키와 문자열 값const colorMap: Record = { primary: 'blue', danger: 'red', success: 'green',}; 위는 아래와 동일한 의미를 가집니다.const colorMap: { [key: string]: s..

Tailwind 기반 버튼 컴포넌트 재활용하기

재활용을 왜하는가?React 프로젝트를 진행하다 보면 버튼과 같은 컴포넌트들을 반복해서 만들게 됩니다. 그때마다 className을 복붙하고 색깔을 바꾸다 보면 코드가 지저분해지고, 유지보수도 힘들어집니다. 이번 글에서는 Tailwind CSS + TypeScript 조합으로 깔끔하고 재사용 가능한 버튼 컴포넌트를 만들어보는 방법을 공유합니다.1. 기본 Button 컴포넌트 만들기먼저 가장 기본이 되는 버튼 컴포넌트를 Button.tsx로 만들겠습니다.import { ButtonHTMLAttributes } from 'react';interface ButtonProps extends ButtonHTMLAttributes { variant?: 'primary' | 'danger' | 'black'; f..

Zustand X Generic 심층분석.

Zustand create 완전 정복을 위하여..늘 context API로 전역상태 관리를 활용하던 내가 , zustand 공식문서를 읽어보며 zustand 활용법을 공부했다. zustand에는 Generic type으로 선언된 함수가 매우많아서 Generic 관련 내용 또한 매우 중요하다고 판단하여 같이 콜라보하여 공부했다.1. 제네릭이란 무엇인가?TypeScript에서 흔히 보이는 함수 형태는 제네릭(Generic) 문법입니다.function identity(value: T): T { return value;}identity('hello'); // ✉️ T = string → 매개변수도, 리턴값도 string즉, T라는 타입은 함수 선언부에서 고정하지 않고, 호출할 때 지정할 수 있는 타입 매개변수..

Vite + React에서 이상적인 라우팅 구조 설계하기

Vite와 React로 프로젝트를 구성할 때, 라우팅 구조를 어떻게 설계하느냐는 유지보수성과 가독성에 큰 영향을 미친다고 생각한다. 이 글에서는 React Router v6 기준으로, router.tsx 파일을 별도로 구성하여 라우팅 책임을 명확히 분리하는 구조를 소개한다.기존 내가 했던 방식 (Vite)…App.tsx에 라우팅 책임을 맡겼다.import { BrowserRouter, Routes, Route } from 'react-router-dom';import Home from './pages/Home';import NotFound from './pages/NotFound';function App() { return ( } /> } /> );}Ap..