October 11, 2023

231011(수) 성장

🚤 성장일지 7.0

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

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

⚛ (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 적으로는 문제없이 잘 마무리한 것 같다!

참고

undefined