개요프로젝트를 진행하며 커스텀 체크박스 컴포넌트를 제작했습니다.이 컴포넌트는 외부에서 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에 대해 많은..
리액트를 공부하고 처음으로 만든 토이 프로젝트인 투 두 리스트!디자인부터 프로젝트 세팅, 기능 구현까지 하나 쉬운 것 없었지만 그래도 해내서 뿌듯하다.기술 스택: React 18, Typescript, Styled-components, MSW 주소: https://semin-97.github.io/react-to-do-list/Github: https://github.com/SEMIN-97/react-to-do-list 기능✅ 아이템 추가✅ 아이템 업데이트 ✅ 아이템 삭제✅ 다크/라이트 모드 지원Rest APIAPI통신은 MSW(Mock Service Worker)를 통해 구현하였다.아이템이 업데이트될 때 마다 List를 다시 불러오기 위해 API 호출 로직을 상위 컴포넌트에 정의하고, 메소드를 pro..
API 통신을 어떻게 구현할지 고민하던 중, 우아콘에서 봤던 MSW가 생각이 났다. MSW는 백엔드 API가 구현되기 전, 프론트에서 사용할 Mockup 용으로 주로 이용된다. MSW로 API와 통신하는 척을 할 수 있고, 요청 응답을 자유롭게 커스텀할 수 있어 이번 프로젝트에 채택하게 되었다. MSW 공식 도큐먼트와 함께 사용법을 따라가보자. 1. 설치 npm install msw --save-dev 2. 초기화 npx msw init public/ --save 브라우저에서 MSW를 사용할 수 있도록 서비스 워커를 등록하는 커맨드 `npx msw init ` public 폴더의 주소를 적어주고, `mockServiceWorker.js`를 저장하기 위해 `--save`옵션을 추가한다. 2. 핸들러 등록 ..
개요 styled-components로 정의한 font-face에서 폰트 파일을 인식하지 못하는 문제가 발생하였다. 문제가 됐던 방법과 해결 방법을 기록해 보았다. 1. font-face url에 주소 지정 import { createGlobalStyle } from 'styled-components'; export default createGlobalStyle` @font-face { font-family: 'Noto Sans KR'; font-weight: normal; font-style: normal; src: local('Noto Sans Regular'), local('NotoSans-Regular'), url('./NotoSansKR-Regular.woff') format('woff'); }..
