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 다음 -가 없다. ..
프로젝트를 시작할 때 가장 기본! (포맷까지 했지만) 널뛰기 하는 것 같아서 차마 적지 못하고 따로 뺀 프론트엔드 개발환경 설정 2편! 오늘은 VS Code에서 ESLint와 Prettier를 설정해보자. 항상 Reference는 마지막에 표시하는데 다들 읽어보면 좋을 것 같아서 이번에는 최상단에 표시한다. 나는 이 블로그의 글을 직접 적용해보며 작성한 것이라 정확한 내용은 아래 블로그를 참고하는 것이 좋다. ESLint, Prettier Setting, 헤매지 말고 정확히 알고 설정하자. ESLint, Prettier 관련해서 환경 세팅을 하면 항상 어쩔 땐 잘되고, 어쩔 땐 안되고... 구글링하면 그렇게 많이 나오는 방식들을 전부 해봐도 계속 안돼서 시간을 그렇게 버릴 때가 많았던 것 같다. 그 he..
이 글을 적기 위해서 컴퓨터를 포맷했다. (아님) 한 번 쯤은 정리하고 넘어가야하는 프론트엔드 개발환경 기초 설정! 1. VS Code 설치 VS Code는 마이크로소프트에서 개발한 에디터이다. 프론트엔드를 개발하려면 코드를 작성하고 편집하는 툴이 필요할텐데 VS Code가 그 대표적인 예시이다. MS는 에디터라고 주장하지만 사실상 IDE 취급을 받고 있다. 즉, VS Code는 프론트엔드 개발에서 코드를 편집하고 작성할 수 있는 가장 대중적인 프로그램이다. 다양한 확장자와 플러그인을 지원하기 때문에 프론트엔드 개발 이외에도 많이 사용된다. 이를 쓰고 싶지 않다면 자신이 편한 IDE를 다운로드해서 사용해도 된다. 2. Git 설치 Git은 변형을 추적할 수 있는 형상 관리 도구이다. 말이 굉장히 어려운데..
* 본 글은 2022.06.21에 작성한 글을 업데이트한 글입니다. 목록을 표시하는 방법에는 여러가지 방법이 있습니다만 모바일 환경에서 주로 구현되는 방법은 무한 스크롤입니다.오늘은 이 무한스크롤을 구현하고 독립적인 컴포넌트 형태로 꺼내 쓸 수 있도록 만들어보려합니다. - 무한스크롤 구현무한 스크롤을 만들 때 생각해야할 부분은 다음과 같습니다. 1. 사용자가 목록의 끝에 도달했다는 것을 어떻게 인지할 것인가?2. 목록의 갱신은 어떻게 할 것 인가? 2번의 경우 우리는 자바스크립트의 비구조화 할당(... 문법)과 State를 통하여 쉽게 갱신할 수 있습니다.갱신된 목록 역시 map 함수를 통하여 손쉽게 렌더링 할 수 있습니다.그렇다면 문제가 되는 부분은 바로 1번, 사용자가 목록의 끝에 도달했다는 것을..
본 글은 FEConf Korea에서 최수형님의 프론트엔드에서 TDD가 가능하다는 것을 보여드립니다 발표를 보고 정리한 글입니다. TDD의 궁극적인 목적 Clean Code that works : 작동하는 깔끔한 코드 왜 어려운가? 코드 자체가 Testable 하지 않아서 그렇다. 어떻게? 관심사 분리 → 개개의 요소가 자신이 관심 갖고 있는 요소에만 집중해야 TDD를 쉽게 할 수 있다. 이를 지키지 않으면 거대한 진흙 덩어리가 된다. 일단 테스트를 통과하기 위한 코드를 짜라! → 그 후에 수정하자. 라이브코딩 React의 컴포넌트 테스팅 React에서 testing하기 위해서 testing-library/react를 사용 jest의 watchAll 모드를 통해 저장될 떄마다 자동으로 실행해서 확인 // ..
컴퓨터 포맷 후 다시 개발환경을 설정하는 와중에 PowerShell에서 yarn 명령어가 실행되지 않는 버그가 발생했다. yarn : 이 시스템에서 스크립트를 실행할 수 없으므로 어쩌고 저쩌고 하는 말이었는데 이 김에 해결방법을 작성해두려고한다. 1. PowerShell을 관리자 권환으로 열어 아래를 입력한다. Set-ExecutionPolicy RemoteSigned 2. 입력하라는 메세지가 뜨면 y를 누른다. 3. 잘 동작 한다.
