구현할 컴포넌트의 타입 정리 -> 대부분의 디자인 시스템은 다음과 같은 대분류를 갖는다.

타입 관련 유틸리티의 필요성 컴포넌트의 다형성 같은 컴포넌트가 서로 다른 형태와 역할을 가질 수 있는 능력을 말한다. 디자인 시스템을 적용할 떄, 컴포넌트의 다형성에 대해서 생각해볼 수 있다. < 다음 예시는 다형성을 지원하지 않는 구조의 컴포넌트이다 >

스타일 관련 유틸 함수 스타일 관련 유틸함수가 필요한 이유 tailwind-variant로 생성해서 지정한 props와, className을 통해 받는 props를 다 가능하게 할 경우 스타일들이 겹치는 문제가 발생한다. 디자인 시스템을 구성하는 경우 default 스 …

1. 구조 설정 과정 전반적으로 참고한 문서 https://devblog.kakaostyle.com/ko/2024-12-13-1-rebuilding-frontend-design-system/ 중요하게 생각하는 것 트리셰이킹 및 번들링이 제대로 이뤄져야 한다. 아이콘, …

1. 디자인 시스템 기획 배경 기존 시스템의 문제 기존의 레포에서는 디자인 시스템이 불규칙하게 자리잡아 있었음. 초기 서비스를 구축할 떄 빠른 개발 진행, 디자인 토큰 구축 미흡, 인원 부족 등 여러 상황으로 인해 기존의 레포에서 작업을 함에 있어서 많은 어려움이 있었 …

useMemo 값을 메모이제이션함 특히나 오래 걸리는, 자원을 많이 소모하는 연산일 경우, 컴포넌트 렌더링 시마다 해당 연산을 하는 것은 바람직하지 않음. 따라서 useMemo에서는 의존성 배열에 특정 값을 넣어서, …

객체 selector (shallow 없음) const { user, theme } = useUserStore((s) => s); // → 스토어 전체 구독. 가장 단순하지만 모든 변경에 리렌더. 객체 selector (shallow 없음) const { …

Next.JS의 링크 컴포넌트란? 내부 라우팅을 클라이언트 사이드로 처리 prefetch 옵션은 true, false, default (null, auto ) 가 있다.

Optimistic Update 낙관적 업데이트 서버에서 상태가 변경되고 사용자에게 보여질 때, 즉각적인 피드백을 제공해야 하는 경우 사용한다.

한 줄 정리 직관적임 소괄호 및 중괄호 생략 가능 객체, 클래스 내부 메서드로 사용하는 경우, this 바인딩이 자동으로 이루어짐 직관적임 arrow function을 사용하면 함수 본연의 입출력기능을 아주 직관적으로 잘 표현해준다. let 두배만들기 = (x) …