[23.03.15] 스터디 회고록

우선 저번주에 목표하고자 했던 바는 다 성공했다. 

 

1. 컴포넌트 단위로 나누기

2. 데이터는 외부에서 props로 받기

3. 반응형을 하드코딩하지 않고 props로 받아서 적용하기(현재 특정 %로 width를 설정해두었다.)

4. reactNode로도 구현가능하게 끔, Card 형식으로 구현해보기(현재 있는 img + 하단에 text 추가, 이때 text는 optional이다.)

5. flex 쓰지 않고 구현하기(inline, block, inline-block 차이에 대해 공부해보기)

---

 

3번은 일부로 구현하지 않았다. 반응형을 구현하기 위한 width를 꼭 props로 넘겨줘야 하는가에 대해 의문이 생겼기 때문이다. 코드 수정을 요청한 팀원의 코드를 확인해보니 3개의 props(min, mid, max)를 넘겨주고 있었고, 넘겨받은 props를 사용하여 픽셀을 조정하는 코드를 작성한 것을 확인할 수 있었다. 그리고 내 코드는 sm, md, lg 상태에 따라 width를 하드코딩하고 있는 상태였다. 

 

스터디를 하기 전에는 이렇게 생각했다. 나도 다른 팀원도 어쨌든 3개의 코드를 수정했고, 심지어 다른 팀원은 픽셀을 조정하는 계산식 코드까지 작성했으니깐 어쩌면 더 비효율적인 것이 아닐까? 라고 말이다. 하지만 스터디를 끝낸 후 나의 생각은 바뀌었다. 

 

이 부분에 대해서 위와 같은 의문점이 생겨 해당 부분은 수정을 하지 않았다고 솔직하게 언급하고, 조언을 구했다. 팀원은 컴포넌트를 사용하는 이유가 재사용을 하기 위함이기 때문에, props로 받아서 사용하는 것이 좋을 거 같다고 했다. 아하! 내가 재사용을 위한 코드를 간과했다. 내 코드를 여러 컴포넌트에서 사용하려고 할 때 공통 컴포넌트로는 사용하기 어려울 것이다. 하지만 팀원처럼 props를 받아서 코드를 작성한다면 공통 컴포넌트로서도 활용할 수 있다!

 

역시 스터디의 힘인가 머리를 모으면 하나보다 낫다~!🔥 

 

728x90

---

6. 터치 스크롤 구현하기

 

빼먹고 작성을 저번에 안한거 같은데 터치 스크롤을 구현해오는 미션이 있었다. 나는 터치 스크롤을 되게 쉽게 구현했는데 잘못 구현한듯하다. 뭔가 팀원이 구현한 터치 스크롤을 동작시켜보니 내꺼랑 뭔가 다른듯한? 느낌이 든다. 움직임이.. 

 

내가 작성한 코드는 아래와 같다. 

const div = ref.current;
const handleMouseMove = (e) => {
  // 클릭한 이미지 위치
  const newX = e.clientX;

  // 스크롤
  div?.scrollTo({
    left: newX,
    behavior: 'smooth',
  });
};

// return 코드
// 캐러셀 div
<div
  ref={ref}
  className="inline-block align-middle w-[94vw] whitespace-nowrap overflow-x-auto"
  onMouseDown={handleMouseMove}
>
  // 캐러셀에 담긴 이미지들
  {elements}
</div>

1. 캐러셀 div에게 onMouseDown 이벤트(왼쪽 마우스를 클릭했을 때 발생하는 이벤트)를 주고,  해당 이벤트에 handleMouseMove 함수를 등록했다. 

 

2. 인자인 e의 clientX로 클릭한 이미지의 위치를 찾고,  ref.current.scrollTo 속성을 사용해서 이미지를 마우스로 클릭하고 스크롤 했을 때 마치 터치 스크롤처럼 작동할 수 있게끔 구현했다. 

 

3. 정리하자면 이와 같다. 캐러셀에 보여지는 이미지 클릭 => 클릭한 채 좌우로 드래기(마치 트랙패드로 움직이는 것처럼) => 터치 스크롤처럼 동작

 

 

 

반응형

---

중요하고, 기억해야하는 내용들을 따로 블로깅을 해두려고 한다. 

 

- flex 사용하지 않고 가로 정렬시키는 방법

- 터치 스크롤 구현하는 방법 

- ReactNode[] 타입 적는 방법 

- 이벤트 최적화하는 법

- vertical align의 정체! + baseline

- 그 외

 

와우 언제 다하지..? 해야지! 알아가는 건 즐거우니깐~

 

 

 

 

---

질문이나 잘못된 점은 댓글로 남겨주세요 :)💖