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을 쿼리하도록 도와주고 또,..
출처: Type Challenges, 13 - Hello World 13 - Hello World Hello, World! Type Challenges에서는 타입 단언(assertion)을 하기 위해 자체적인 타입 시스템을 사용합니다. 이 과제에서는, 아래의 코드를 변경해서 테스트 코드를 통과하세요. (타입 체크 에러 없음). // string이 되어야 합니다. type HelloWorld = any // 아래의 테스트가 통과하도록 만드세요. type test = Expect 풀이 type HelloWorld = string
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를 리액트 ..
Tailwind에서 재사용 가능한 컴포넌트로 지금까지 아토믹 디자인을 적용해 UI의 시각적인 요소들을 토큰이라는 계층으로 분류하고, 이 토큰들을 Tailwind에서 사용할 수 있도록 class로 옮겼다. 드디어 Tailwind를 통해서 컴포넌트를 만들 수 있는 준비가 끝난 것이다. 그렇다면 Tailwind를 사용해서 무작정 컴포넌트를 만들기만 하면 되는걸까? 아토믹 디자인에서부터 느꼈겠지만, 치스톡 프로젝트는 하나의 컴포넌트 디자인 시스템을 기반으로 구성되어있다. 이런 디자인 시스템의 컴포넌트의 핵심은 "디자인 선택지를 받아서 정해진 디자인을 출력"한다는 것이다. 예를 들어, 버튼 컴포넌트의 요구사항이 위와 같다고 하자. css-in-js를 사용하면 가장 좋겠지만, 우리는 Next 13에 Tailwind..
🔯 다형성 컴포넌트 시리즈 태그에 따라 바뀌는 React 컴포넌트 만들기(with TypeScript) ✅ 태그에 따라 바뀌는 React 컴포넌트 만들기 2 - As 속성 제한하기 태그에 따라 바뀌는 React 컴포넌트 만들기 3 - 컴포넌트 별칭 정하기 Polymorphic한 React 컴포넌트 디자인 시스템을 구성하면서, 다음과 같은 요구사항에 마주쳤다. 렌더링 될 태그를 정할 수 있는 Text 컴포넌트를 만들고 싶어요. 즉, h1이라는 props를 넘겨준다면 h1이라는 태그가 렌더링되고, span이라는 props를 넘겨준다면, span 태그가 렌더링되는 Text 태그를 만들어야했다. 이를 어떻게 구현할 수 있을지 찾아보다가 Polymorphic한 컴포넌트(이하 다형성 컴포넌트)라는 개념을 발견했다...
이제 진짜 개발 뿐이야! (아님) 지금까지 아토믹 디자인을 통해 디자인에서 디자인 요소들을 분리하고, 이를 Token - Atom - Molecule - Organism으로 나누었다. 이후, 개발 단계에서의 혼란스러움을 없애기 위해 잘못되어있던 컬러 체계를 깔끔하게 재정비했다. 이제 드디어 모든 환경 설정이 끝나고 개발에 들어갈 수 있는 환경이 마련된 것이다....라고 하기 전에 진짜 마지막으로 디자인 토큰들을 실제 개발 단계에 사용할 수 있도록 Tailwind CSS 설정으로 옮겨보자. rem 단위 설정 /* global.css */ @layer base { html { font-size: 6.25%; } } rem 단위는 루트 글꼴 크기에 비례하여 상대적으로 바뀌는 단위이다. 보통 웹 개발을 하면서 ..
Next 13 + Tailwind + Storybook 치스톡 프로젝트를 Next 13 기반으로 결정한 뒤로 다른 기술 스택들로 Tailwind, Storybook을 골랐다. 그래서 오늘은 Next13 + Tailwind + Storybook 기반으로 공식 문서 설명 따라서 개발 환경을 구축해보려한다. Next.js + Tailwind npx create-next-app@latest 먼저 Next.js 기반으로 설정하기 위해서 create-next-app을 해준다. React에서 CRA처럼 Next.js 보일러 플레이트를 제공해주는건데, 위는 npm 기반 명령어이고 나는 yarn 기반으로 진행했기 때문에 아래 명령어를 입력해주었다. yarn create next-app //create 다음 -가 없다. ..
엉망진창인 컬러 체계를 개편해보자. 디자인 시스템을 실제 개발에 적용하면서 기존 컬러 체계에 큰 문제가 있다는 것을 깨달았다. 더 문제가 커지기 전에 이를 한 번 다듬고 가야겠다는 생각으로 컬러 체계를 다시 정립하기로 했다. 기존 컬러 체계의 문제점 기존에 사용하고 있던 컬러 체계는 위와 같다. 이 컬러 체계는 크게 베이직 컬러의 모음인 컬러 팔레트와 베이직 컬러 중 자주 사용되고 핵심적인 컬러들을 모아 의미를 부여한 시멘틱 컬러로 구분된다. 시멘틱 컬러는 각 컬러마다 라이트/다크 모드 쌍을 가지고 있다. 이를 통해서 tailwind에서 dark:와 같은 속성을 사용하지 않고 편하게 개발할 수 있을 것이라 기대했었다. 그런데, 실제 개발에 들어가보니 이 컬러 체계에는 여러가지 문제점이 있었다. 1. 시멘..
