✅ 본 글은 TailwindCSS, Tailwind Variants 라이브러리를 사용하여 작성되었습니다. Tailwind Variants를 통해 재사용할 수 있는 상호작용 상태를 만들어보자 디자인 시스템을 만들면서 여러 가지를 시도해보고 있는데 그 중 하나로 컴포넌트의 상호작용 상태를 어떻게 쉽게 재사용할 수 있을까? 라는 부분이 있었다. 컴포넌트를 만들 때마다 일일이 hover, press에 대한 상태를 정의해주는 것도 힘들었고, 개발 과정에서 수정될 경우 각 컴포넌트에서 이를 일일이 처리해줘야하는 등 문제가 있었기 때문이다.물론 어느 정도 토큰화해서 이러한 점을 개선할 수 있지만, 결국 각 컴포넌트에서 개별로 정의해야하는 점이 불편하다고 생각했다. 이를 해결하기 위한 방법을 처음 본 곳은 구글의 Ma..
✅ 본 게시글은 스토리북 7.1.0 버전과 TypeScript를 기반으로 작성되었습니다. 잦고 반복되는 디자인 변경은 개발자를 힘들게 해요!디자인 시스템을 개발하면서 가장 힘든 부분은 변경 사항이 발생했을 때 컴포넌트의 UI가 정상적으로 렌더링되는지 확인하는 것이었다.특히나 가장 기본 요소인 색, 여백, 글씨 크기와 같은 요소가 변경될 경우 현재 컴포넌트 뿐만이 아닌 다른 모든 컴포넌트에 영향을 미치기 때문에 이를 일일이 확인해가며 이를 체크하는 것이 너무 힘들었고 시간도 많이 소비되었으며 미처 잡지 못하는 경우 역시 존재했다.때문에 이를 해결할 수 있는 방법이 없을까 테스트 쪽으로 눈을 돌리게 되었고, 거기에서 스토리북의 Visual Test를 통해 이를 해결할 수 있다는 것을 알게 되어 적용해보게 되..
🔯 다형성 컴포넌트 시리즈 태그에 따라 바뀌는 React 컴포넌트 만들기(with TypeScript) 태그에 따라 바뀌는 React 컴포넌트 만들기 2 - As 속성 제한하기 태그에 따라 바뀌는 React 컴포넌트 만들기 3 - 컴포넌트 별칭 정하기 ✅ as 속성을 위한 컴포넌트 문자열 별칭을 정해보자 이번 글은 프로젝트에 적용된 내용도 아니고 그냥 `이런 것도 가능할까?` 라는 생각으로 시도해 본거라 굳이 다형성 컴포넌트를 구성하는데 필요한 내용은 아니다. 아이디어도 심플하고... 가볍게 봐주면 좋겠다. 만약 다형성 컴포넌트를 만들어보고 싶다면 1편을, as 속성을 특정 태그로 제한을 두고 싶다면 2편을 참고하자. 그래서 주제가 뭐냐면, 컴포넌트에 문자열(string) 형태의 별칭을 정해서 as 속성..
🔯 다형성 컴포넌트 시리즈 태그에 따라 바뀌는 React 컴포넌트 만들기(with TypeScript) 태그에 따라 바뀌는 React 컴포넌트 만들기 2 - As 속성 제한하기 ✅ 태그에 따라 바뀌는 React 컴포넌트 만들기 3 - 컴포넌트 별칭 정하기 ⚠️ 본 게시글은 이론적으로 검증된 방법이 아닌 시행착오 끝에 구현되는 방법을 찾아 기술한 글로 잘못되거나 정확하지 않은 내용을 포함할 수 있습니다. 다형성 컴포넌트에서 As 속성을 제한해보자 지난 글에서는 as 속성에 따라 다르게 렌더링되는 다형성 컴포넌트를 어떻게 만드는지 살펴봤었다. 그런데 새로운 요구사항이 등장했다. 음...그런데 Button 컴포넌트가 button 태그나 a 태그로만 렌더링 되게 할 수는 없나요? 물론 타입을 2개를 만든다던가 ..
✅ 본 게시글은 스토리북 7.1.0 버전과 TypeScript를 기반으로 작성되었습니다. Storybook으로 컴포넌트를 문서화해보자 치스톡에서 디자인 시스템을 만들면서 신경쓰고 있는 부분 중 하나가 스토리북 활용이다. 스토리북은 컴포넌트를 서비스 로직과 독립된 UI를 실행, 테스트하는 용도로도 사용할 수 있지만, 컴포넌트를 설명하기 위한 문서로도 사용할 수 있다. 오늘은 이 문서 용도에 집중에서 스토리북으로 어떻게 컴포넌트 문서를 작성할 수 있는지 알아보려고 한다. 1️⃣ Autodocs & JSDoc로 문서 작성하기 - `'autodocs'` 태그 스토리북은 컴포넌트를 자동으로 문서화해주는 기능을 가지고 있다. 바로 autodocs 기능인데 이는 스토리북의 메타 정보에 tag에 `'autodocs'`..
Create Issue Branch로 이슈 브랜치를 자동으로 만들어보자 깃허브는 Issue의 Development 항목을 통해서 이슈 브랜치를 만들 수 있는 기능을 제공한다. 하지만.... 이게 좀 여러모로 불편한 점들이 있다. prefix 설정이라거나, 이슈 이름으로 그대로 브랜치를 만들어서 이름을 영어로 적어야한다거나...등등 그래서 오늘은 깃허브 액션 맛보기 겸 Create Issue Branch를 통해서 이슈에 브랜치를 자동으로 생성해보려한다. Create Issue Branch 왜 쓰나요? 앞서 말했듯, 깃허브에서는 이미 이슈를 대상으로 브랜치를 만들 수 있는 기능을 제공한다. 하지만 이슈 이름을 그대로 브랜치로 만들어버리기 때문에 특정 규칙으로 브랜치 이름을 만들고 싶다면 커스텀 하는 것이 불..
prettier로 import 정렬하기개발을 하다보면 파일 위에 import 문이 우후죽순 생겨난다.언젠가 정리해야지....하면서 외면해왔다가 더이상 미루면 더 힘들어질 것 같아서 그 전에 후딱 처리해야겠다는 생각에 드디어 설정했다.막상 해보니....굉장히 쉽더라. 설치하기yarn add -D @trivago/prettier-plugin-sort-imports 위 명령어를 통해서 prettier-plugin-sort-imports를 설치해주자.그 트리바고가 맞다. 설정하기// .prettierrc.json{ ... "importOrder": [ "^@customTypes/(.*)$", "^@root/(.*)$", "^@src/(.*)$", "^@assets/(.*)$", "..
husky를 사용해서 git hook을 만들어보자 이전 interface 프로젝트를 개발할 때 백엔드 팀원 분이 작업했던 pre commit git hook이 참 탐이 났더랜다. 그래서 오늘은 husky를 이용하여 commit 전에 실행되는 git hook을 만들어보려고 한다. 오늘 만들 git hook은 크게 2가지로, 1. 커밋이 되기 전에 staged 상태에 있는 파일들을 lint-staged로 검사하는 hook 2. 커밋 시 특정 컨벤션을 따를 수 있도록 선택지를 제공하는 git-cz(commitizen)을 실행하는 hook 이렇게 2개이다. ❓ git hook과 husky git hook은 git에 어떤 이벤트가 발생했을 때, 자동으로 특정 스크립트를 실행하는 기능이다. 크게 클라이언트 훅과 서..
Nest.js에 Jest와 React Testing Library를 설정해보자 미뤄왔던 시간이 도래했다. 프로젝트를 시작하면서 애써 외면해왔지만, 여러가지 과정들을 거치면서 결국 테스트의 필요성을 절실히 느끼고 말았다. 그래서 오늘은 Next.js에 Jest와 React Testing Library를 설정해보려고 한다. Jest & React Testing Library Jest는 JavaScript로 만들어진 테스팅 프레임워크다. 테스트 파일을 작성하면 이를 찾고, 테스트를 실행하고, 그 결과를 보여주는 역할을 한다. React Testing Library는 Jest에서 React 컴포넌트를 테스트하도록 도와주는 라이브러리다. 더불어 사용자가 하는 것과 동일한 방식으로 DOM을 쿼리하도록 도와주고 또,..
tailwind-merge 설정하기 tailwind-merge는 Tailwind CSS 사용 시 발생할 수 있는 클래스 충돌 문제를 마지막에 위치한 클래스만을 남겨두는 방식으로 병합하여 해결하는 라이브러리다. className="sticky absolute relative" // relative className="px-3 py-4 p-2" // p-2 tailwind-merge는 Tailwind CSS의 설정을 건드리지 않았을 경우 정상적으로 동작한다. 그러나, 커스텀 설정을 사용할 경우 tailwind-merge에 이를 설정해주지 않는다면 정상적으로 동작하지 않을 수 있다. (정확하게는 기본 Tailwind CSS 설정에 없는 className을 지정할 경우) className="text-custom..
다양한 아이콘을 불러와주는 Icon 컴포넌트를 만들어보자 아이콘 컴포넌트의 요구사항은 아래와 같다. 1. svg 파일을 불러와 제공 2. 아이콘 이름을 props로 주면, 해당 아이콘을 렌더링 3. 색상이 props에 따라 변경 4. 크기가 props에 따라 변경 Next.js에서 svg 이미지를 다루는 방법으로 크게 2가지를 들 수가 있는데, 하나는 next/images를 이용하여 img 태그에 src 형태로 넣어주는 방법이고 다른 하나는 리액트 컴포넌트 형태로 가져오는 방법이다. 두 방법 중 src 속성에 svg 파일의 path를 넣어주는 방식으로 2번을 쉽게 구현할 수 있었기 때문에 우선적으로 고려하고 있었다. 그러나 Tailwind를 사용하고 있던터라 svg 파일의 크기와 속성을 변경하기 위해서는..
프로젝트와 Storybook에 SVGR 설정하기 치스톡 프로젝트를 진행하면서 SVGR을 사용해야할 일이 생겼다. 오늘은 Next.js기반 프로젝트와 Storybook에 SVGR을 설정하는 방법을 적어보려한다. SVGR이란? SVG는 벡터 기반의 이미지 파일로, 용량이 작고 크기를 바꿔도 이미지가 깨지지 않기 때문에 웹에서 자주 사용되는 이미지 포맷이다. 이 SVG를 Next.js 기반 프로젝트에서 사용하기 위해서는 크게 2가지 방법을 통해 가져올 수 있다. 하나는, svg 파일의 경로를 img 파일의 src 속성에 넣어 img 태그와 함께 사용하는 방법이고, 다른 하나는 svg 파일을 JSX 형태인 리액트 컴포넌트로 바꿔서 이를 불러와 사용하는 방법이다. 두 방법 모두 장·단이 있지만, svg를 리액트 ..
