위코드 1차 프로젝트 후기

1차 프로젝트 - wesulloc

6월 3일 드디어 말도 많고 탈도 많았던 1차 프로젝트가 종료되었다. 우리팀은 제주도 녹차밭으로 유명한 오설록을 클론 코딩하게 되었다. 나는 프로젝트에서 역할은 팀장, 프론트엔트 파트 리더로 일정 조율 및 관리를 맡았고, 프론트엔드 파트 내에서는 상품 리스트 구현을 담당하였다.

내가 맡은 상품 리스트는 상단의 캐러셀이 있고 하단에 상품 리스트가 있는 구조였다. 처음엔 캐러셀 클릭시 하단의 상품 리스트가 필터링 되는 복잡한 구조라고 생각했는데, 두 개가 별개의 구조라서 한시름 놓을 수 있었다.

개발 시작!

내가 담당하게 된 상품 리스트의 기능과 일정은 아래와 같았으며, 한정된 시간에 100% 구현을 목표로 각 기능별 우선순위를 정리하고 일정에 맞춰 나누어 진행했다. 프로젝트 기간 중 주말에 경조사가 끼어있어 평일에 최대한 집중하여 구현하려고 했다.

총 개발기간: 11일

- 페이지 상단의 캐러셀 구현 (우선순위: 중 / 기간: 2일)
- 카테고리 선택시 카테고리에 맞는 상품 리스트 정렬 (우선순위: 상 / 기간: 3일)
- 배열 형태로 상품 리스트 정렬 (우선순위: 중 / 기간: 1일)
- 소팅 기능을 통한 정렬 기능 구현 (우선순위: 상 / 기간: 3일)
- 페이지네이션 구현 (우선순위: 하 / 기간: 1일)
- 백엔드와의 통신을 통한 데이터 연결 (우선순위: 상 / 기간: 약 6시간)
- 프론트엔드 파트 작업물 merge 및 conflict 해결 (우선순위: 상)

누구나 그럴싸한 계획을 갖고 있다

나는 내가 지금 어느 수준인지를 알고 있다고 생각했기 때문에 계획은 완벽하다고 느꼈다. 하지만 상대적으로 쉽다고 생각한 캐러셀 구현이 생각한대로 되지 않는 것이었다. 멘붕의 연속이었다. 이미 내가 계획한 일정이 무너지고 있었다. 프로젝트 팀장을 맡고 있었기때문에 누구보다 일정에 예민했으며, 다른 사람에게 폐를 끼치는 것을 극도로 경계하는 내 성격이 합쳐서 나를 계속 갉아먹기 시작했다.

고생 끝에 낙이 온다고 했던가. 학원 일정을 마치고 집에 돌아와 잠깐 쉬면서 내가 작성한 코드를 생각했고 마침 번뜩거리면서 다시 책상에 앉았다. 결과는 성공이었다. 물론 결과물은 하드코딩이지만 고민하게 만들던 문제가 해결되어 너무나 기뻤다. 그 이후로는 다시 내가 계획한 일정에 맞춰 개발을 진행할 수 있었다.

기억에 남는 코드

1차 프로젝트에서 상품 리스트를 담당한 동기들은 모두 중첩 쿼리스트링을 손에 꼽지 않을까 싶다. 세션을 통해 개념과 적용 방법은 습득하였지만, 필터와 소팅이 모두 적용되어야 하므로 쿼리스트링이 겹쳐야 했다. 각 기능에 'useState'를 이용해 상태를 저장하고 이를 쿼리스트링에 반영하면 된다고 생각은 했지만 어떤 식으로 적용해야 하는지 감이 잡히지 않았다.

결국 먼저 해당 문제를 작업한 다른 동기를 찾아가 물어보니 삼항연산자를 이용하여 해결할 수 있다고 조언을 받았고 이에 나도 해당 문제를 해결할 수 있었다. 삼항연산자는 사전스터디 때도 배우고 파운데이션 기간 때도 배웠는데... 아직 당면한 문제에 응용하여 해결하는 부분이 많이 부족하다고 느꼈다.

useEffect(() => {
  const queryString = `?${
    filterValue.categoryValue
      ? `${
          filterValue.categoryValue === 1
            ? `main_categories=${filterValue.categoryValue}`
            : `category=${filterValue.categoryValue}`
        }`
      : ''
  }${filterValue.sortValue ? `&sort=${filterValue.sortValue}` : ''}${
    filterValue.offsetValue ? `${filterValue.offsetValue}` : ''
  }`;
  navigate(queryString);
}, [filterValue.categoryValue, filterValue.sortValue, filterValue.offsetValue]);