개요프로젝트를 진행하며 커스텀 체크박스 컴포넌트를 제작했습니다.이 컴포넌트는 외부에서 useState를 사용하여 상태를 관리하고, 그 값을 value로 바인딩하는 방식으로 설계되었습니다.그러나 Storybook에서 테스트할 때는 value 값을 외부에서 변경해 줄 수 없었기 때문에, 클릭 이벤트에 의해 UI가 변경되지 않는 문제가 발생했습니다. Storybook에서 체크박스의 상태 변화를 시각적으로 확인할 수 있기를 희망했고, useState를 Storybook 내에서 사용하는 방법을 찾아보았습니다. 그리고 해결 방법을 이 글을 통해 서술하겠습니다. 프로젝트 환경Next 14.1.4 Storybook 8.0.6 checkbox.tsx먼저, 내가 작성한 Checkbox 컴포넌트의 코드는 아래와 같습니다.상..
개요프로젝트에서 Next.js의 next/font/local을 사용하여 Pretendard 폰트를 적용하고 있습니다.이 글에서는 Storybook에서도 동일한 폰트를 적용하는 방법을 정리했습니다. 프로젝트 환경Next 14.1.4 Storybook 8.0.6 Next.js에서 Pretendard 폰트 설정Next.js에서는 next/font/local을 사용하여 폰트를 불러오고, 최상위 layout.tsx에서 className을 부여하여 전역적으로 스타일을 적용하고 있습니다. 아래는 Pretendard 폰트를 설정하는 코드 예시입니다.// app/font.tsimport localFont from 'next/font/local';export const Pretendard = localFont({ s..
클론 코딩을 시작한 이유NextJS가 SSR이 가능한 React 기반의 프레임워크라는 소식을 듣고, 궁금증과 배워보고 싶은 욕구가 동시에 들었다.React 문법을 익히는 것은 물론이고 SSR도 경험해보고 싶었던 차에, 클론 코딩은 이러한 두 마리 토끼를 한 번에 잡을 수 있는 좋은 방법이라고 생각했다. 기술을 빠르게 습득하고자 했기 때문에 제대로 된 서비스를 직접 제작하고 싶었지만, 사이드 프로젝트를 진행할 시간적 여유가 없었다.그래서 부딪혀가며 빠르게 배우고자 클론 코딩을 선택하게 되었다. 여기어때를 선택한 이유웹으로 서비스하는 제품을 만들고 싶었고, 프론트/백 엔드 모두 기본적인 기능과 복잡한 로직을 함께 다루고 싶은 니즈가 있어 커머스 분야가 적절하다고 판단했다. 여기어때는 UI와 UX에 대해 많은..
