🚤 성장일지 7.0

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

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

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

Swiper 사용 후기

기존 react로 프로젝트를 할 때는 열심히 적용해보려다가 계속 ui가 깨져서 포기하고 직접 Carousel 컴포넌트를 구현했다. 직접 구현한 것까진 좋은데, 아무래도 touch slide나 확장성면에서 완성도가 많이 떨어졌다.(조금만 건드려도 부서질 것만 같은 컴포넌트...) 그래서 이번엔 다시 각잡고!!! swiper를 열심히 뜯어보면서 적용해보았다. 하... 이렇게 편하고 쉬운 건 줄 알았더라면... 허허

우선 swiper에서는 다양한 기능을 가진 module들을 지원하고 있다. 아래와 같이 사용하면 된다.

추가 1) 보통 slide가 변경될 때마다 콜백을 실행하려고 onSlideChange를 사용했는데, 이건 slide가 변경될 때마다 실행되는 것이 아니라 유저가 slide를 변경하고 마우스를 떼는 순간에만 실행된다. 그래서 onRealIndexChange를 사용했다.

// 생략

<Swiper
  className="h-full w-full"
  modules={[Autoplay, A11y]}
  autoplay={{ delay: SWIPER.DELAY, disableOnInteraction: false }}
  spaceBetween={bodyWidth < 390 ? bodyWidth : SWIPER.SPACE_BETWEEN}
  slidesPerView={SWIPER.SLIDES_PER_VIEW}
  loop={true}
  loopedSlides={SWIPER.LOOPED_SLIDES}
  onRealIndexChange={swiper => {
    setCurrentSlideIndex(swiper.realIndex);
  }}
>

// 생략

그리고 또 하나 기억하면 좋을 것! swiper 컴포넌트에 tailwindcss의 className으로 display 속성을 적용하는 건 되지 않는다. 아마 기본적인 설정 자체가 block으로 되어있는 것 같다. 그래서 display 속성을 적용하고 싶다면 style 속성으로 직접 적용해야 한다.

<SwiperSlide
  key={index}
  className="flex h-full w-full items-center justify-center"
  // NOTE: Swiper 컴포넌트의 display는 테일윈드 클래스를 적용할 수 없다.
  style={{ display: 'flex' }}
  onClick={() => {
    if (currentSlideIndex !== index) {
      return;
    }
    if (clickedSlideIndex !== index) {
      setClickedSlideIndex(index);
      return;
    }
    setClickedSlideIndex(-1);
  }}
>
// 생략

httpClient로 확장성 생각하기(추후 의존성 주입도 고려해보기)

아래와 같이 api 통신하는 로직을 관리하면 더 깔끔하게 추상화가 될뿐만 아니라 나중에 다른 의존성을 주입받아 사용하기 좋아진다.

export class HttpClient {
  private baseUrl: string;
  constructor(baseUrl: string) {
    this.baseUrl = baseUrl;
  }

  fetch(path: string, options = {}) {
    return fetch(`${this.baseUrl}${path}`, {
      ...options,
      headers: {
        'Content-Type': 'application/json',
      },
    });
  }
}

아래는 위의 HttpClient 클래스를 사용하는 예시이다.

import { HttpClient } from '../http';

export async function getRecommendations() {
  if (!process.env.NEXT_PUBLIC_BASE_API_URL) throw new Error('존재하지 않는 환경변수입니다.');

  const httpClient = new HttpClient(process.env.NEXT_PUBLIC_BASE_API_URL);
  const response = await httpClient.fetch('/recommendations');
  const json = await response.json();
  return json.body;
}

고민: 여러 기기에 대응하기

swiper를 통해 Carousel 컴포넌트를 구현하는데, 현재 slide의 양 옆 slide에 대한 style을 변경하는 작업을 했다. 그런데 다양한 화면크기에 따라 Carousel 컴포넌트의 ui를 세밀하게 조정하는 게 정말 어려웠다.(지금도 어느정도만 대응했지... 완벽하게는 못했다.) 기기마다 다른 화면에 대해서는 실제 현업에선 어떻게 대응할지 너무 알고싶다. 그저 media query를 사용하기에는 스마트폰의 화면이 너무 다양한데... 흠 계속 이 부분을 어떻게 효율적으로 처리할지 찾아봐야겠다.

📝 회고

사실 위의 내용말고도 Carousel에서 사용되는 image 크기 조절부터 짜잘한 tailwind 오류까지... 많았지만 이건 Carousel 컴포넌트를 정리할 때 한번에 작성해야겠다. 그나저나 오늘은 진짜 일찍 자려했는데... 얼른 자야지!!!

참고

• Swiper react
• Multiple slideChange events triggered when looping

undefined