🚤 성장일지 7.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

⚛ (7.0)<완전 개편> 파인만 학습법을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다.

Swiper UX 개선

Swiper를 이용해서 Carousel을 구현 후, 배포하여 핸드폰에서 동작시켜보았다. 그런데 웬걸 슬라이드 UX가 뚝뚝 끊기면서 작동했다. 이 부분을 혹시 공식문서에서 지원하나 해서 찾아보았는데 다행히 cssMode라는 옵션을 제공하고 있었다. 이 옵션을 적용하니 슬라이드 UX가 매끄럽게 동작했다.

활성화하면 최신 CSS 스크롤 스냅 API를 사용합니다. Swiper의 모든 기능을 지원하지는 않지만 간단한 구성에서 훨씬 더 나은 성능을 제공할 수 있습니다.

적용하고 나서 슬라이드가 아주 매끄럽게 동작하게 되었다. 다만 문제는 데스크탑에서 터치 슬라이드가 되질 않는다는 것이었다. 구글링도 해보고 이것저것 다 해봤지만 cssMode 적용 후에는 어쩔 수 없는 것 같다. 그래도 유저에게 슬라이드를 넘겨줄 수 있는 UX를 제공하기 위해 Navigation 버튼을 추가했다.

return (
<Swiper
  className="h-full w-full"
  modules={[Autoplay, A11y, Navigation, Keyboard]}
  autoplay={{ delay: SWIPER.DELAY, disableOnInteraction: false }}
  freeMode={true}
  navigation={isDesktop}
  keyboard={{ enabled: true }}
  lazyPreloadPrevNext={SWIPER.LAZY_LOADED_PREV_NEXT}
  spaceBetween={bodyWidth < STANDARD.WIDTH ? bodyWidth : SWIPER.SPACE_BETWEEN}
  slidesPerView={SWIPER.SLIDES_PER_VIEW}
  loop={true}
  loopedSlides={SWIPER.LOOPED_SLIDES}
  loopPreventsSliding={true}
  onRealIndexChange={swiper => {
    setCurrentSlideIndex(swiper.realIndex);
  }}
  cssMode={true}
>

Github Issue 자동 close되던 문제

마이그레이션 프로젝트를 하면서 계속 내가 만든 이슈가 자동으로 close가 되어서 왜 이러나 했다.(진작 찾아볼걸… 반성) 처음엔 일정 시간이 지나면 닫히는건가 했는데 알고보니 커밋 메시지에 아래와 같은 단어와 이슈 넘버를 적어주면 자동으로 close가 된다고 한다.

• close, closes, closed, fix, fixes, fixed, resolve, resolves, resolved + #{issue number}: 이슈를 자동으로 close한다.

zustand를 통한 전역 상태 관리

여러 상태 관리 라이브러리 중 이상하게 zustand가 땡긴다 허헣… 일단 사용법이 정말 간단하면서 Redux Devtools도 지원하고 무엇보다 demo 사이트가 정말 너무 예쁘다ㅋㅋㅋ Jotai를 개발하신 분이랑 동일인물이라고 알고 있는데, 뭔가 Zustand에 더 공을 들이시는 느낌..? (또, npm trends를 보면 zustand의 사용량 증가가 정말 어마어마하게 증가하고 있다..! 곧 Redux 따라잡을듯..?) 이번에 Next와 처음으로 같이 사용해봤는데 client 컴포넌트에서 정말 깔끔하게 전역 상태 관리를 할 수 있어서 너어어어어무 좋은 것 같다. 아래는 간단하게 사용해본 코드이다.(유저의 선택을 저장하는 스토어)

import { create } from 'zustand';

import { UserSelect } from '@/types';

type State = {
  userSelect: UserSelect;
};

type Action = {
  setUserSelectSize: (sizeId: number) => void;
  setUserSelectIngredientIds: (ingredientIds: number[]) => void;
  reset: () => void;
};

const initialState: State = {
  userSelect: {
    sizeId: 0,
    ingredientIds: [],
  },
};

export const useUserSelectStore = create<State & Action>()((set) => ({
  ...initialState,
  setUserSelectSize: (sizeId: number) =>
    set((state) => ({ userSelect: { ...state.userSelect, sizeId } })),
  setUserSelectIngredientIds: (ingredientIds: number[]) =>
    set((state) => ({ userSelect: { ...state.userSelect, ingredientIds } })),
  reset: () => set(initialState),
}));

예전엔 대충 공식문서 읽고 혼자서 짰는데, 다시 공식문서를 꼼꼼하게 보면서 좀더 편하게 작성할 수 있었다. 추후에 Immer와 함께 사용해서 좀더 깔끔하고 편하게 짜봐야겠다. 지금 state 정도에서는 Immer를 굳이 적용할 필요가 없는 것 같다.

📝 회고

그래도 오늘도 페이지 하나 마이그레이션이 끝났다. 적용하고 싶었던 zustand도 내 개인적으론 Next와 잘 맞는 느낌이라 재미있게 잘 사용할 수 있었다. 생각보다 이전에 구현했던 Carousel 쪽에서 문제가 많이 발생해서 조금 귀찮았지만… 일단은 UX 적으로는 문제없이 잘 마무리한 것 같다!

참고

• Swiper UX in Mobile
• Github auto close issue
• Zustand