프로그래머스 데브코스 10월 회고(팀 프로젝트)

정태호·2023년 11월 4일
MIl데브코스팀 프로젝트회고
2

TIL

목록 보기
23/23
post-thumbnail

10월 회고(백엔드와의 협업 프로젝트)

짧다면 짧고 길다면 길었던 데브코스의 최종 프로젝트가 눈앞으로 다가왔다.. 물론 지금도 하는 도중이지만 앞선 프로젝트에서 문서화, 기술 정리 등등 아쉬운 점이 매우 많은 프로젝트 였기에 내가 다음 프로젝트에서 1인분은 할 수 있을까? 하는 겁이 났다.

이미 다 만들어져있던 api를 써본 경험밖에 없어서 백엔드가 api를 설계하는 동안 프론트는 뭘 해야하지? 디자인은 프론트가 해야하는건가? 주변에서 백엔드와 협업하면 부딪힐 날이 많다던데 왜 그러지? 하는 궁금증과 동시에 저번처럼 소극적인 태도보다는 이번에는 처음부터 소통을 많이 하자!! 라는 마음가짐을 갖고 출발했던 것 같다.

프론트 팀원분들과의 만남

다행히도 좋은 분들을 만나 소통도 많이 하고 새로운 것에 도전하자는 마음으로 Next js를 프로젝트에 도입해 보기로 하였다. SSG, SSR 등 들어만 보았지만 직접 공부해보진 않았지만 프로젝트 전부터 playground 레포를 만들어 문서를 작성하거나 코드를 작성하는 등 이것저것 연습을 나름대로 많이 했던 것이 프로젝트를 진행하고 있는 데 도움이 많이 되는 것 같다.😊

짧지만 Next.js 공식문서를 한글로 번역해보면서 정리했던 것 같다.

FE 재남님의 리액트 공식문서 한글판을 보다가 Next.js 공식문서를 읽는 것은 어질어질 했다...

백엔드 팀원분들과의 만남

백엔드 팀원분들도 한 분이 적극적으로 스크럼을 이끌어주시고 다들 팀으로서의 경험도 많고 좋은 분들이라 티격태격 할 것 없이 물 흐르듯이 지나갔던 것 같다. 물론 I는 많지만 다들 마지막 프로젝트고 프로젝트 경험이 한 번은 생겼기에 적극적으로 의견을 표출하려고자 하는 모습이 좋았다. 이런 모습들을 나 스스로 더 배워나가야겠다.

팀 프로젝트

처음 기획했던 3가지 프로젝트 중 멘토님과 서로의 의견을 종합하여 하루 대타를 구하는 프로젝트를 진행하기로 했다

한 팀원분이 그림을 매우 잘그려서 프로젝트 시작도 전에 이런 귀여운 로고가 나왔다ㅋㅋㅋㅋ!! 뭔가 귀여운 프로젝트가 될 것 같아 걱정도 컸지만 기대가 많이 됐던 것 같다.

공통 스크럼

모든 팀원분들께서 저번 프로젝트에서 문서화의 부족함을 뼈저리게 느꼈다는 말에 이번에는 처음부터 노션 페이지도 제대로 꾸미고 하루하루 할 일이나 이슈 등을 발생할 때 마다 적자. 라는 규칙을 세우고 진행 중이다. 물론 항상 지키진 못하지만

그래도 우리 프론트에서는 github wiki를 활발하게 사용하자. 라고 해서 최대한 빼먹지 않으려고 노력 중이지만.. 하루 할 일을 적고나서는 개발에 치여서 까먹고 잠들어버리곤 한다.. 회고를 작성하고 나면 내가 했던 개발 부분들을 정리하며 팀원들에게 공유하고 이슈들도 얼른 적어놔야겠다.. 주말이 기회다!! 스크럼 마스터께서 노션도 아주 예쁘게 꾸미고 공통 스크럼 내역도 꾸준히 적어주셔서 나도 열심히 해야하지만.. 조금이라도 맘 편하게 노션페이지 내용들이 쑥쑥 채워지고 있다👍

우리 프론트 팀원분들도 기술 스택을 사용한 이유부터 적으려는 의지가 넘치기 때문에 하루 날 잡고 꼭 적자고 해야겠다. 혼자하면 심심하니까 같이 하자고 해봐야겠다!!

지금까지의 간단한 이슈

이번에 해보고 싶었던 가로 스크롤 부분을 담당하게 되었다. 뭔가 스크롤 하면 예전에 코딩애플을 보면서 배웠던 scrollTop 부터 시작해서 clientX 등등 너무 여러가지가 나와서 해보기도 전에 아 하기싫다.. 하며 공부를 제대로 안했던 것 같다..

자료를 찾아보고 있는데 너무 뒤죽박죽인 부분들도 많았고 우리 프로젝트에서 가로 스크롤이 쓰일 만한 부분이 꽤 있어 

<HorizontalScroll>
	~~~
</HorizontalScroll>

이렇게만 하면 여러 군데에서 재사용할 수 있게 구현하고 싶었다. 팀원 중 한분이 저번 프로젝트에서 가로 스크롤을 구현했던 팀원분이 있다. 라는 말이 생각나서 몰래 참고하러 들어갔다.. 데브코스 내 첫 팀원분이기도 하셨고 너무 잘하는 분이라 구글 찾아서 뭐하냐 이거보지 라는 마음으로 엄청 많은 영감을 얻은 것 같다😂

최종 구현한 가로 스크롤

처음에는 가로 스크롤도 일종의 사이드 이펙트 아닐까? 하는 생각에 useEffect 안에 Mouse Drag와 관련된 함수들을 넣고 clientX 지점에서 시작한 startX 지점을 뺀 다음 그 값을 지금 scrollLeft 값에 넣어줬다. 뭔가 글로 쓰려니 복잡하지만 여러 번 console.log도 찍어보며 테스트 한 결과 되긴 했지만 스크롤 할 때마다 렌더링이 일어난다는 생각이 들었다..

 const handleMouseMove = (event: MouseEvent) => {
      if (dragRef.current && startX.current !== null && containerRef.current) {
        const currentX = event.clientX - startX.current;
        containerRef.current.scrollLeft -= currentX;
      }
    };

후에는 스크롤도 클릭처럼 사용자와의 상호작용이니까 useEffect를 사용하지 말고 이벤트 리스너처럼 달아줘도 되지 않을까 생각하며 코드를 고쳐 보았다.

//HorizontalScroll.tsx

"use client";

import React, {
  MouseEventHandler,
  PropsWithChildren,
  useRef,
  useState
} from "react";

type HorizontalScrollProps = {
  className?: string;
};

const HorizontalScroll = ({
  className,
  children
}: PropsWithChildren<HorizontalScrollProps>) => {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const [dragState, setDragState] = useState<boolean>(false);
  const [startX, setStartX] = useState<number>(0);
  const [currentScroll, setCurrentScroll] = useState<number>(0);

  const defaultStyle = "overflow-x-auto";

  const handleMouseDown: MouseEventHandler<HTMLDivElement> = (event) => {
    setDragState(true);
    setStartX(event.clientX);
    setCurrentScroll(containerRef.current?.scrollLeft || 0);
  };

  const handleMouseMove: MouseEventHandler<HTMLDivElement> = (event) => {
    if (containerRef.current && dragState) {
      const scrollLeft = startX - event.clientX + currentScroll;
      containerRef.current.scrollLeft = scrollLeft;
    }
  };

  const handleMouseUp = () => {
    if (containerRef.current && dragState) {
      setDragState(false);
    }
  };

  return (
    <div
      ref={containerRef}
      className={`${defaultStyle} ${className}`}
      onMouseDown={handleMouseDown}
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseUp}>
      {children}
    </div>
  );
};

export default HorizontalScroll;

그때 그때 정리했어야 했는데.. 지금 보니 또 기억이 가물가물하지만 정리해보자면 Drag를 했는지 안했는지에 대한 상태를 만들고 마우스 다운 이벤트가 발생하면 그 값을 true 상태로 만들어주었다.

마우스 다운이 일어날 때 event.clientX를 사용해 startX라는 시작지점으로 만들어주고

Move 이벤트에서는 스타트 지점에서 지금 현재까지 이동한 값을 빼주면

왼쪽으로 이동 시
1. clientX 값이 stratX보다 작은 값이 나옴
2. 빼게 되면 양수 값
3. 결국에는 스크롤이 오른쪽으로 이동하게 된다.

⚠️ 여기서 내가 간과했던 점이 이 스크롤이 이동한 값을 저장해주지 않아 드래그를 떼고 다시 드래그를 해서 이동하게 되면 맨 처음 지점으로 계속 초기화가 되었다..

결국은 state 하나를 더 생성했고 마우스 다운이 다시 일어날 때 그 값을 currentScroll이란 상태에 넣어주게 되었다.

이렇게 구현한 이유는 당연히 처음에는 없을 테니까 0이 될 것이고 그 다음에는 한 번의 Move 이벤트가 끝나고 나서 저장된 값. 결국 Move이벤트에서는 직전의 containerRef의 스크롤 지점을 기억하고 그 값을 더해나가면서 계속 어느정도 스크롤 했는 지 체크하는 방식이다.

Move에서는 ref에 계산된 값을 저장해주고 있으니까 계속해서 직전 값을 기억해서 계산해 줄 수 있었다..

물론 이게 완벽한 코드라고 할 순 없지만.. 내 나름대로 많은 고민을 하고 이렇게 글로 적는 적도 처음이라 많이 횡설수설 한 것 같다..

프로젝트 데모가 얼마 남지 않았기 때문에 다른 이슈들을 위키에 정리하고 나중에 제대로 위키를 참고하며 제대로 정리해봐야겠다..

해야할 것

  • 가로 스크롤 (보충)
  • 이미지 업로드 (컴포넌트? 훅?)
  • react hook form 없이의 폼 생성
    • 가장 많은 고민과 이슈가 최근에 터졌던 부분이다..

KPT

Keep

아직도 문서화에 대해서 내가 잘 쓰고 있는 건가? 하는 의문이 들지만 하루하루 생각하며 뭐 하나라도 적어보자. 하며 저번보단 발전하고 있는 것 같다는 생각이 든다. 이 마음가짐을 계속 유지하며 이 프로젝트에서 보다 더 많은 것을 얻어가고 싶다. 이런 이슈들과 고민들을 해결하는 과정이 문서화를 통해 복습하며 큰 도움이 되었으면 좋겠다🥲

Problem

코어타임이 끝나고 나면 아직도 보상심리가 남아있는 것 같다.. 최종 때는 밤 엄청 샐거에요~~ 라는 말을 자주 들어왔기에 나도 그만큼 더 열정적으로 임해야겠다 라는 생각이었지만 코어타임이 끝나면 지쳐버려서 10시 11시가 되서야 다시 자리에 앉곤 한다.. 다음 날을 위해 잠을 줄이기 보단 쉬는 시간을 줄이고 열심히 하고 푹 자는 생활을 해보려고는.. 하고 있다 허허

Try

Next 13 app router 버전의 정보가 생각보다 많이 없는 것 같아서 공식문서를 더 열심히 읽어가며 많은 공부를 해야겠다.. Next를 프로젝트에 도입한 만큼 도입했던 이유가 있어야 하며 그 이유를 잘 살려 장점으로 만들어야 하는데 지금은 명확하게 보이지 않는다.. 블로그를 여러 개 찾아보다보니 클라이언트로 가는 번들링 사이즈를 줄인다, 서버에서 패치한다, 서버에서 HTML을 내려줘서 초기 로딩속도와 검색 엔진에 좋다 등등 이해는 가지만 직접 겪어보지 않아서 확실하게 와닿지 않는 느낌이다. 프로젝트를 진행하면서 팀원들과 여러 얘기를 함께 하고 이것들을 문서화하며 공유해보고 싶다.

profile
정태호
주니어 프론트엔드 개발자가 되고 싶습니다!
이전 포스트

프록시 서버란?

0개의 댓글