react

컴포넌트 구현을 안 해본 FE 개발자는 없을 것입니다. 개발자마다 각자의 기준에 의해 컴포넌트 단위를 결정하고 컴포넌트의 형태, 기능을 정의합니다. 컴포넌트 구현 방법은 명확한 정답은 없다고 생각합니다. - 컴포넌트마다도 형태, 기능이 다르기도 하고, - 어느 곳에서 사용하는 지, - 개발 기한이 얼마나 주어졌는지에 따라 컴포넌트 설계에 대한 고민의 시간이 달라지기 때문입니다. 다만, 컴포넌트를 잘 구현해놓으면 개발 생산성이 높아지기 때문에 많은 고민이 필요한 것은 사실인 것 같습니다. 저는 주로 신규 프로젝트에 많이 참여했었고, 프로젝트들 별로 디자인이 달랐습니다. 그래서 아토믹 디자인 패턴을 사용하지 않았고, 회사 내에 디자인 시스템도 만들 필요가 없었는데요. 이런 환경의 기준 (소규모 프로젝트) 으..

Storybook 이란?스토리북(Storybook)은 컴포넌트의 다양한 경우를 정리할 수 있도록 도와주는 시각화 도구(tool)입니다. 예를 들어, 버튼 컴포넌트가 있다고 하면 상태(데이터)에 따라서 UI나 액션이 달라질 수 있습니다.variant 값이 primary이면 일반 버튼, dashed이면 점선이 있는 버튼으로 버튼 UI를 표현할 수 있습니다. 스토리북과 같은 도구 없이도 컴포넌트를 개발할 수 있지만, 점점 늘어나는 컴포넌트들을 한 눈에 정리하는 것은 쉽지 않습니다.스토리북은 컴포넌트들을 시각적으로 정리할 수 있게 도와줄 뿐만 아니라, 컴포넌트의 구현 코드를 문서화해줍니다. 디자이너와 협업할 때 컴포넌트의 UI가 잘 구현되었는지 피드백을 받을 수 있으며,다른 개발자와 협업할 때는 컴포넌트를 어떻..

이슈 발생 Storybook에서 SVG 아이콘을 사용하는 컴포넌트로 스토리를 만들고 있었는데요. 갑자기 위와 같은 오류가 발생했습니다. Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 구글링도 해보고, Github Issue를 여러 개 살펴본 뒤에 file-loader 관련 이슈라는 것을 알게 되었습니다. Storybook은 Webpack을 사용하고 있고 기본적으로 file-loader가 사용되고 있는데, SVG 파일을 import하는 과정에서 file-loader가 객체 형태로 변환한 것으로 보입니다. File-lo..

간단한 웹 페이지 기능 소개 쇼핑몰 기능 중 하나인 장바구니 기능을 구현한 웹 페이지입니다. 장바구니에 등록된 상품 중에서 결제할 상품을 선택하고, 상품 갯수에 따라 최종 금액을 유저에게 보여줍니다. 리액트 컴포넌트 설명 컴포넌트 2개가 있습니다. 1. 상품 컴포넌트 : 장바구니 상품 정보를 보여주는 컴포넌트 2. 상품 리스트 컴포넌트 : 상품 컴포넌트들을 보여주고, 필요한 비즈니스 로직을 제공합니다. 2번 컴포넌트는 컨테이너 - 프레젠테이션 패턴의 컨테이너라고도 볼 수 있을 텐데요. 컨테이너를 별도로 구별하려면, ~ 컨테이너라는 코드컨벤션이 생기고 별도의 디렉토리 폴더를 관리해줘야 하는데 개인적인 생각으로는 코드의 양이 늘어나고, 비즈니스 로직을 가지고 있는 컴포넌트들을 컨테이너로 엄격하게 구분하기 어..

[ 목차 ]Query 상태 (Status)StaleTime과 CacheTime 정리 Query 상태 (status)아래 다섯 가지 상태로 정의되어 있습니다. 1. fetching2. fresh3. stale4. paused5. inactive    1. fetchingQueryFn을 이용해서 데이터를 요청하는 상태입니다.  2. fresh새로운 데이터를 받은 상태입니다.default로 staleTime이 0으로 정의되어 있는데요.default일 때는, 순간적으로 fresh 상태로 유지됩니다.  3. stale데이터의 상태가 최신이 아님을 뜻하는 상태입니다.이 상태일 때는 특정 조건 (windowFocus, remount 등...) 이나 백그라운드 상황에서 QueryFn을 통해 새로운 데이터를 가져와 데이..

보통 슬라이더(또는 스와이퍼)를 구현할 때, 화면에 한 개의 슬라이드가 보이는 형태로 많이 구현합니다. 슬라이드를 넘기면, 다음 슬라이드가 나오는 형태입니다. 그런데, 요구사항이 화면에 여러 개의 슬라이드를 보여달라고 하면 어떻게 할까요? 예를 들어, 375px 사이즈의 모바일 화면에 200px 크기의 카드 형태를 하나는 다 보이도록, 하나는 일부만 보이도록 해줘야 합니다. 말이 잘 이해가 안되실 수도 있는데, 아래 그림과 같은 형태입니다. 위와 같이 Swiper에 옵션을 제공해서 인라인 형태의 슬라이드를 구현할 수 있습니다. 중요한 것은 styled 컴포넌트에 있는데요! .swiper-slide 클래스 선택자에 width 값을 auto, !important를 적용해야 합니다. 그렇지 않으면, Swi..