본문 바로가기

분류 전체보기

[클린코드 스터디] 2장. 의미있는 이름 (요약정리와 적용) 내용 간단히 요약하기의도를 분명히 밝혀라 • 좋은 이름을 지으려면 시간이 걸리지만, 덕분에 더 많은 시간 절약할 수 있다. • 코드가 하는 일을 짐작하게 하는 이름을 사용하자.// 나쁜 예let a = 10;// 좋은 예let maxUserCount = 10; 그릇된 정보를 피하라 • 코드에 잘못된 단서를 남기지 말자. • 각 개념의 차이가 명백히 드러나도록 이름을 짓자.// 나쁜 예: 숫자가 밀리초인지 초인지 불분명let timeout = 5000;// 좋은 예let timeoutInMilliseconds = 5000; 의미있게 구분하라 • 컴파일러를 통과할지라도 연속된 숫자를 덧붙이거나 불용어(noise word)를 추가하는 방식은 적절하지 못하다. 이름이 달라야 한다면 의미도 달라져야 한다. • 읽.. 더보기
디자인시스템 만들기 : 컴포넌트 라이브러리 NPM 배포하기 (React, Vite) 1. 프로젝트 생성Vite 프로젝트 생성:boottent-design는 프로젝트 이름. 원하는 이름으로 변경 가능.yarn create vite boottent-design --template react-ts 프로젝트 디렉토리로 이동:cd boottent-design 의존성 설치:yarn install 개발 서버 실행 및 확인:브라우저에서 http://localhost:3000을 열어 기본 React 페이지 확인.yarn dev프로젝트내 불필요한 파일들 index.css , App.css , App.tsx, public 을 제거. (삭제하지 않아도 상관없다) 완료 후:Vite를 사용한 React + TypeScript 프로젝트가 정상적으로 실행됨을 확인. 2. vite.config.ts 빌드 설정 vit.. 더보기
usePortal (Modal, Alert, Dialog, Toast 컴포넌트를 위한 커스텀 훅) 설계 과정 1. 문제 인식기존에는 모달, 토스트, 알림, 다이얼로그와 같은 다양한 UI 컴포넌트들이 각각의 포탈을 통해 개별적으로 관리되고 있었다. 이러한 방식은 특별히 막 불편하지는 않았지만, 더 효율적인 방법을 찾을 수 있을 것 같았다. 일단, 네개의 컴포넌트 모두 각각을 위한 Provider을 통해 화면의 최상단에 렌더링되는 컴포넌트 들이었기에, 해당 포털을 하나로 통일하고 하나의 훅에서 관리하면 좋겠다는 생각이 들었다.특히, 다양한 포탈 유형을 각각 별도로 관리함으로써 발생한 사소하지만 구체적인 불편함들은 다음과 같다:// 기존 예시 코드const { modal } = useModal();const { toast } = useToast();const openNotifyAction = async () => {.. 더보기
[Tailwind CSS] 2. 테일윈드를 더욱 효율적으로 사용하는 방법 (CVA, TailwindMerge, clsx) [Tailwind CSS] 2. 테일윈드를 더욱 효율적으로 사용하는 방법 (CVA, TailwindMerge, clsx) Tailwind CSS는 유틸리티 퍼스트(Utility-First) 접근 방식을 통해 빠르고 일관된 스타일링을 가능하게 하는 강력한 CSS 프레임워크다. 그러나 클래스 네임의 관리와 컴포넌트의 재사용성 측면에서 몇 가지 한계점이 존재한다. 이번 글에서는 테일윈드를 사용하며 고민했던 점들을 class-variance-authority (CVA), tailwind-merge, clsx와 같은 도구들을 조합하여 Tailwind CSS를 더욱 효율적으로 활용하는 방법을 알게되어 소개하려한다. Tailwind CSS의 클래스 인식 방식Tailwind CSS는 미리 정의된 유틸리티 클래스를 조합.. 더보기
[Tailwind CSS] 1. 테일윈드의 동작방식과 동적 스타일링 [Tailwind CSS] 1. 테일윈드의 동작방식과 동적 스타일링Tailwind CSS는 효율적인 스타일링을 가능하게 하는 유틸리티 퍼스트 프레임워크다.특히, 제로 런타임(Zero Runtime) 특성을 지니고 있어 별도의 JavaScript나 런타임 처리가 필요하지 않다. 모든 스타일은 컴파일 시점에 생성되며, 브라우저에서 별도의 런타임 비용 없이 즉시 적용된다. 이는 성능 향상과 더불어 복잡한 스타일 로직 없이도 효율적인 스타일링을 가능하게 한다. 그러나 Tailwind는 정적 분석(static analysis) 방식을 사용하기 때문에 동적으로 클래스를 할당할 경우 제한이 발생할 수 있다. 이 글에서는 Tailwind CSS의 동작 방식을 분석하고, 동적 클래스 할당 시 발생하는 문제가 발생하는 이.. 더보기
[클린코드 스터디] 1장. 깨끗한 코드 내용 간단히 요약하기코드가 존재하리라코드는 요구사항을 상세히 표현하는 수단이다.코드는 사라지지 않는다. 코드의 도움 없이 요구사항을 상세히 표현하기란 불가능.나쁜 코드Killer App 하나로 대박난 회사가 있었지만, 머지 않아 망했다. 원인은 나쁜 코드였다.일정에 맞춰 나쁜 코드를 짜고 나중에 고치겠다고 생각한 경험이 있을 것이다. 안 돌아가는 프로그램보다 돌아가는 쓰레기가 좋다고 스스로 위로했던 것처럼 말이다. 하지만 나중은 결코 오지 않는다(르블랑의 법칙).나쁜코드로 치르는 대가나쁜코드는 개발 속도를 크게 떨어뜨린다. 누적될 수록 그 생산성은 떨어진다.시간이 지나며 쓰레기 더미는 점점 높아지고 깊어지고 커진다. 청소할 방법 없다.꺠끗한 코드만이 비용절감, 살아남는 길.일정을 사수하는것이 관리자의 책.. 더보기
작지만 생각할게 참 많았던, Dropdown 컴포넌트 설계 과정 기록 1. Radix UI와 shadcn/ui를 활용한 Dropdown 컴포넌트 조각 만들기처음에는 Radix UI의 DropdownMenu 프리미티브를 기반으로 드롭다운 컴포넌트의 기본 조각을 만들었다. Radix UI는 접근성과 유연성을 갖춘 컴포넌트를 제공하여 효율적인 개발이 가능했다. dropdown-primitive.tsx 파일을 생성하고 Radix UI를 통한 shacn/ui에서 제공하는 다양한 컴포넌트를 커스터마이징하여 스타일을 적용했다.// dropdown-primitive.tsx 파일"use client"import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"import { CheckIcon, ChevronRightIco.. 더보기
컴포넌트 주도 개발(CDD)을 도입해보면 어떨까? (feat: 디자인시스템 라이브러리 & 스토리북) Component-Driven Development(CDD)란?Component-Driven Development(CDD)는 컴포넌트를 중심으로 애플리케이션을 개발하는 방식이다. 화면을 구성하는 작은 단위의 UI 컴포넌트를 먼저 개발하고, 이를 조합해 전체 애플리케이션을 완성한다. 각 컴포넌트의 역할과 책임이 명확해지며 UI의 복잡성을 줄일 수 있다. 특징1. 컴포넌트 중심 설계: 작은 단위의 UI 컴포넌트를 먼저 설계하고 구현한다.2. 재사용성: 컴포넌트는 다양한 페이지에서 재사용 가능하다.3. 독립적인 테스트: 컴포넌트 단위로 테스트를 작성해 개별 동작을 확인한다.4. 디자인 시스템과의 통합: 디자인 시스템과 통합이 용이하여 일관된 UI를 유지한다.  장점효율적인 컴포넌트 관리각 프로젝트마다 동일한 .. 더보기

티스토리툴바