[Project] STAWEFOLIO 회고록

SuJeong·2023년 3월 17일

WeCode project 회고

Project

목록 보기

3/4

드디어 위코드의 마지막 프로젝트,
STAWEFOLIO를 통해 동기들과의 마지막을 마무리 지었다 !

🥰 좋았던 점(Liked)

Notion & Trello & Gitbook

이번에는 두번째라 그런지 Notion에 Plan을 계획하는데 익숙해졌고 티켓도 마크업, 스타일링, 기능구현으로 나누어 성취감도 얻고 진척도 파악도 빠르게 할 수 있었다.
Notion으로 Sprint별 standup meeting기록과 Daily plan을 계획하였고 Trello로 전체적인 개발일정을 관리하였다.
Gitbook을 통해 API 문서도 그때그때 타협한 내용으로 수정되어 확인할 수 있었다.

Planning Meeting
하나의 Sprint가 시작되는 매주 월요일마다 Trello를 사용하여 해당 Sprint때의 목표를 설정하였다.
Daily Standup Meeting
아침 10시마다 전날의 개발진척도와 오늘의 목표, blocker들을 공유하였다.
Retrospective Meeting
최종발표 날 두번의 Sprint동안의 KPT회고를 통한 회고를 진행하였다.

standup meeting 10분컷

standup meeting은 말그대로 서서하는 미팅으로 서서해도 괜찮을만큼 짧게 끝내자는 취지이다.
저번에는 ~~진짜 sitdown으로 바꾸자고~~(ㅎ)할만큼 많은 이야기들을 했었는데 이번에는 미팅 10분전 각자 노션에 진척도, daily todo plan을 얘기해주면서 10분 내로 끝이 날 수 있었다.

기술 공유

GNB에 모달창을 띄워 가고싶은 지역을 선택하는 UI에서 react-modal 라이브러리 사용법을 팀원에게 공유해주었다! ~~물론 나의 datepicker가 시급했지만..ㅎ~~
CSS를 통해 만들고 있던 팀원에게 공유해주었고 덕분에 시간이 단축이 많이되어 크게는 우리 팀의 개발진척도에도 많은 영향을 줄 수 있었다.

✏️ 배웠던 점(Learned)

공식문서의 중요성

죽음의 date picker 라이브러리 사용 시 처음에는 잘 만들어진 예시와 스택오버플로우를 잔뜩 찾아다녔다...그치만 역시 튜닝의 근본은 순정이라고 돌고돌아 공식문서에 답이 있었다.
요즘에는 한국어도 많이 제공해주고 데모영상 및 코드박스로 직접 코드를 수정해보면서까지 배울 수 있다.

forwardRef를 통해 DOM요소에 접근

datepicker라이브러리는 input창에 클릭 시 calendar가 띄워지는 형식이다. 이 때의 Input창을 사용자가 직접 custom할 수도 있는데 그 때 forwardRef를 통해 DOM요소에 접근할 수 있다.
refprops는 map의 key Prop처럼 특수한 목적으로 사용되고 그 때 forwardRef를 통해 외부에서 받은 ref prop으로 부모 컴포넌트에서 해당 컴포넌트 엘리먼트에 직접 접근할 수 있다.

👇 /src/components/DayPicker/CustomInput.js

const CustomInput = forwardRef(({ value, onClick }, ref) => {
  //...codes
  return (
    <InputButton onClick={onClick} ref={ref}>
      {value === ''
        ? checkInDate.length === 0 && checkOutDate.length === 0
          ? '날짜를 입력해주세요.'
          : checkInDate + ' - ' + checkOutDate
        : value + ' | ' + days + '박'}
    </InputButton>
  );
});

custom hook을 통해 조금 더 정확한 관심사의 분리

인원별 필터링을 구현할 때 인원을 조절하는 훅을 만들어 인원수를 조절하는 기능만 담당하도록 구현하였다. 그럼 인원수를 조절하는 방식이나 값을 변경해야 하는 경우가생기면 해당 훅에서만 변경해주면 된다.

👇 /src/pages/RoomList/DropDown/People.js

const useCounter = () => {
  const [searchParams] = useSearchParams();
  const [quantity, setQuantity] = useState(
    searchParams.getAll('numberOfGuests').length === 0
      ? 0
      : searchParams.getAll('numberOfGuests')
  );

  const plusQuantity = () => {
    setQuantity(quantity > 9 ? 10 : quantity + 1);
  };

  const minusQuantity = () => {
    setQuantity(quantity < 1 ? 0 : quantity - 1);
  };

  return { quantity, plusQuantity, minusQuantity };
};