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..
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 단위는 루트 글꼴 크기에 비례하여 상대적으로 바뀌는 단위이다. 보통 웹 개발을 하면서 ..
엉망진창인 컬러 체계를 개편해보자. 디자인 시스템을 실제 개발에 적용하면서 기존 컬러 체계에 큰 문제가 있다는 것을 깨달았다. 더 문제가 커지기 전에 이를 한 번 다듬고 가야겠다는 생각으로 컬러 체계를 다시 정립하기로 했다. 기존 컬러 체계의 문제점 기존에 사용하고 있던 컬러 체계는 위와 같다. 이 컬러 체계는 크게 베이직 컬러의 모음인 컬러 팔레트와 베이직 컬러 중 자주 사용되고 핵심적인 컬러들을 모아 의미를 부여한 시멘틱 컬러로 구분된다. 시멘틱 컬러는 각 컬러마다 라이트/다크 모드 쌍을 가지고 있다. 이를 통해서 tailwind에서 dark:와 같은 속성을 사용하지 않고 편하게 개발할 수 있을 것이라 기대했었다. 그런데, 실제 개발에 들어가보니 이 컬러 체계에는 여러가지 문제점이 있었다. 1. 시멘..
프로젝트에 아토믹 디자인 도입하기 치스톡 프로젝트를 재개하면서 가져가려했던 목적 3가지가 있었다. 그 중 하나가 바로 디자인 시스템을 통한 효율적인 프론트엔드 개발이었는데 이의 연장 선상으로 아토믹 디자인을 치스톡에 적용해보려한다. 이전에 진행했던 프로젝트에서 야심차게 CDD를 도입했다가 야심차게(?) 실패했던 적이 있다. CDD는 작은 컴포넌트부터 만들기 시작해서 이를 조립해 하나의 커다란 페이지를 만드는 상향식 개발 방법론이다. 때문에 먼저 디자인이 나오고, 이를 바탕으로 컴포넌트를 분류한 뒤에 개발해서 짜올리는 방식으로 진행해야하는 것이 쉬운데 당시에는 이를 모르기도 했고 개발자가 디자인과 개발을 병행하다보니 너무 혼란스러워 제대로 진행되지 못했었다. (그래서 이번에는 디자인부터 차근차근 체계적으로..
디자인 완료 디자인 작업이 드디어 끝났다. 사실 남은 부분이 있긴 한데, 그런 부분들은 구현 우선순위가 낮은 편이고 또 디자인만 하다가 개발에 못 들어갈 것 같아서 마무리하려한다. 포트폴리오 화면을 따로 만들려고 했었는데 너무 힘들어서 홈화면의 자산 부분을 최근 조회한 종목으로 바꾸고 포트폴리오 화면을 아에 삭제했다. 이 프로젝트에 존재하는 화면은 단 두 개, 홈 화면과 개별 종목 화면이다. 포트폴리오는 나중에 기회가 되면..........먼 훗날에.......... 또, Secondary 색상과 Tertiary 색상이 바뀌었다. 원래 분홍색과 주황색으로 가져가려 했으나 빨간색도 있고 분홍색도 있고 주황색도 있고 하는게 너무 혼잡스러웠고, 주식이라는 도메인 특성상 그래프를 빨/파로 그리는 경우가 많기 때..
먼저, 디자인 현재 치스톡 프로젝트 디자인 작업 중이다. 8px 그리드 기반으로는 처음 작업해보는데 신경써야 할 것도 많고 재밌긴한데 어렵다. 그래도 지금이 꿈과 희망이 가득할 시점이니까.........기능 구현 생각 안하고 디자인 마구 그리는........... 모바일 대응도 하고 싶은데, 일단 PC 디자인이 빨리 끝나고 모바일 디자인을 호다닥 해봐야겠다. PC는 12 Column, Gutter 16px로 작업 중..... 모바일은 4 Column, 8px Gutter로 작업 예정.... 여러 레퍼런스에서 디자인 틀을 조금씩 가져왔다. 모방은 창조의 어머니라 하지 않던가.... 네이버 증권, 토스 증권, 인베스트 인포, 매일경제 증권, 기타 컨셉 디자인 등등등등 감사합니다... 그래도 전체적인 색 톤이..
2022년 6월 10일에 시작한다 선언해놓고 퍼블리싱 끝나고 손도 안 댄 치스톡 프로젝트. 변명을 하자면 부스트캠프 참가 같은 일들 때문에 2.0 개편을 시작하기도 전에 엎어져 버렸다...는 변명을 들 수 있겠다. 그리고 2023년 초복을 맞아(?) 무덤에서 꺼내와 프로젝트 개편을 다시 시작해보려고 한다. 왜 새 프로젝트를 안하고 기존 프로젝트를 다시 하는지? 그렇게 부스트캠프를 수료하고 졸업 후에 공고들을 많이 보는데, Next.js와 데이터 시각화와 관련된 요구사항이 많이 보였다. 치스톡 프로젝트에서 주식 대시보드 프로젝트로 실시간 주식 차트를 보여준다는 점에서 데이터 시각화를 차트 컴포넌트만 React Server Component를 적용한다면 뉴스나 회사 정보에는 Next.js를 사용해볼 수 있지..
GDSC에서 프론트앤드 스터디에서 리액트를 처음 학습할 때 진행했던 팀 프로젝트인 치스톡. 지금이라고 많이 성장한 건 아니지만 (기말고사에 치어서 학부 공부하기도 바쁘고) 첫 프로젝트이기도 하고 로고도 직접 만들었고 리드미도 못 적힌 채 남겨두기가 아쉬워서 개인적으로 공부도 할 겸 퍼블리싱을 다시 하고 기능을 추가하며 업그레이드를 진행해보려한다. 시작은 좀 전에 했지만.....진행 도중에 글을 작성하는 이유는, 혼자서 꼬물꼬물 해봐야 아무도 안 알아주기 때문에......... 프로젝트를 발전시켜가며 공부하는 과정을 기록하고자 뒤늦게 글을 적는다. 스터디에서 팀으로 진행했던 버전을 1.0으로, 개인적으로 진행하는 버전을 2.0으로 명명한다. 더보기 치스톡 2.0 현재 퍼블리싱이 진행 중인 치스톡 2.0의 ..
