2차 프로젝트 후기

2차 프로젝트 - KREAM

1차 프로젝트를 끝내고 뒤이어 2차 프로젝트가 성공적으로 마무리되었다. 2차 프로젝트는 내가 발표했던 KREAM을 클론 코딩했다.
이번 2차 프로젝트는 팀원으로써 진행해보고 싶었으나, 내가 고른 서비스인지라 자연스럽게 PM 및 Front-End Part Leader를 겸하게 되었다.
이왕 이렇게 된 거 1차 프로젝트 때 미숙했던 작업 일정과 팀 스케줄 관리를 보완하는 방향으로 진행하기로 했다.

개발 일정

이번 프로젝트는 기업 협업 준비와 병행하게 되어 물리적인 시간이 부족하다고 판단했다. 그래서 프로젝트 미션과 크림 서비스의 기본적인 user flow에 맞춰 최소한의 페이지만 선택하여 진행했다.

[2nd PROJECT MISSION]

1. 1차 프로젝트 때 해보지 못한 기능, 또는 해보고 싶었던 기능을 담당할 것
2. 스프린트 일정에 맞춰 티켓을 발행하고 이를 지킬 수 있도록 작업 속도를 개선할 것
3. 백엔드와의 커뮤니케이션으로 서로의 영역을 이해하고 이를 작업에 반영할 수 있도록 할 것


[PERSONAL PROJECT SCHEDULE]

총 개발기간: 10일

- 프론트 엔드 개발 환경 구축 및 코드 컨벤션 설정 (중요도: 상)
- 스크롤 이벤트를 적용, 하단 스크롤시 제품정보 요약 UI 노출 (중요도: 중)
- Chart.js 라이브러리를 적용한 제품 매매 data visualization (중요도: 상)
- Modal 방식의 제품 매매 기록 UI 구현 (중요도: 중)
- 구매 입찰시 선택한 사이즈와 입찰 희망 가격을 fetch POST로 전송, 판매 입찰시 해당 가격 노출 (중요도: 상)

1차 때와는 다르다. 1차 때와는...!

1차 때는 작업 도중에 발생하는 여러가지 변수에 의해 스트레스를 많이 받았다.
현업에서는 이런 작은 요인들도 모두 개발 일정에 포함하여 작업을 진행하니 이번 2차 때는 이를 성공적으로 통제할 수 있도록 일정을 짰다.
이렇게 1차 때의 경험을 통한 스케줄 설정은 팀원들 모두 깊게 공감하고 있었기 때문에 문제없이 진행되었다.
개인적으로는 2차 프로젝트의 스케줄을 view 구현 / 기능 구현 등과 같이 더욱 세부적으로 나누었고, 이를 통해 현재 위치와 속도를 파악하여 작업을 진행했다.

숨겨진 강자, 라이브러리

2차 프로젝트는 라이브러리 사용을 적극적으로 권했는데, 마침 우리 팀도 캐러셀과 그래프가 있어 해당 부분에 라이브러리를 이용해 구현하기로 했다.
내가 맡은 상세 페이지에는 해당 상품의 매매 기록을 line chart로 보여주고 있었다. 여러 라이브러리 중 Chart.js가 가장 많이 언급되고 공식문서, 번역 등 제공되는 정보 또한 풍부했으므로 해당 라이브러리를 선택하여 적용하기로 했다.

라이브러리를 접해보기 전에는 단순히 이미 만들어진 것을 별다른 조작없이 쓸 수 있다고만 생각했다. 하지만 똑같은 노트북을 사도 각자가 쓰는 방식이나 환경이 다르듯, 라이브러리도 내가 원하는 방향에 맞춰 변경해줘야 하는 것이었다.
라이브러리를 처음 써봤기 때문에 이렇다는 걸 전혀 몰랐고, 공식 문서는 제쳐놓고 개발 블로그만 보면서 하려니 원하는대로 되지 않아 애를 먹었다. 때문에 완성하지 못한 채 토요일을 통째로 날렸고, 일요일이 되서야 공식문서와 번역본을 읽어가며 구현에 성공할 수 있었다.
문제는 아주 간단했다. 지정된 옵션값이 있는데 그것대로 작성하지 않은 것이었다. 요행만 바라던 나에게 chart.js가 큰 교훈을 남겨줬고, 이번에도 가장 중요한 것을 깨달았다.

기억에 남는 코드

이번 프로젝트 때는 작업 진행간 여러 이슈들이 많았던지라 기억에 남는 코드들이 많다.

Optional Chaining & Object.values

optional chaining 연산자 (?.) 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다...
출처: mdn web docs

상세 페이지는 이전 페이지에서 제품에 지정된 id를 이용해 백엔드에서 data를 불러오는데 mock-data를 이용하여 구현시에는 문제가 없었으나 백엔드 통신을 진행하니 렌더링이 되지 않는 문제가 있었다.

멘토님의 조언으로 Optional Chaining을 통해 해결하려고 했지만 계속 실패했고, 개발자 도구를 샅샅이 뒤져 확인했지만 문제를 찾을 수 없어 백엔드 팀원과 API 명세서를 다시 확인하니 문제를 찾을 수 있었다.
백엔드에서는 중첩객체로 data를 보내주고 있는데 나는 배열 속의 객체의 형태로 mock-data를 설정하여 작업하고 있었던 것이다. 백엔드 팀원분과 얘기할 때 어떤 data가 필요한지만 협의되고 type은 전혀 얘기하지 않았던 것이다.

해당 문제를 1차 프로젝트를 같이 진행했던 동기분께 공유했더니 Object.values()를 이용해보라고 하셨다. 라이브러리 때의 경험으로 바로 적용하기 보다는 먼저 MDN Docs를 읽어 이용하는 법을 확인했고, 적용해보니 정상적으로 렌더링 되어 문제를 해결할 수 있었다.

고민하고 해결 방법을 찾았던 시간에 비해 Object.values() 하나로 간단하게 해결되어 현타가 오기도 했던지라 기억에 많이 남는 코드였다.

(해결한 것은 좋았으나 Optional Chaining으로는 왜 해결되지 않았는가에 대한 부분은 해소되지 않아 이 부분은 시간을 내어 해결한 뒤 공유하려고 한다.)

// useEffect로 백엔드 데이터를 수령

  useEffect(() => {
    fetch(`${BASE_URL}products/${id}`)
      .then(res => res.json())
      .then(res => setGoodsData(res));
  }, [id]);

// Object.values()를 이용해 객체-객체 타입을 배열-객체 타입으로 전환하여 컴포넌트를 렌더링

  return (
    <main>
      {Object.values(goodsData).map(goodsData => (
        <React.Fragment key={goodsData.id}>
          <StickySummary goodsData={goodsData} />
          <ContentsWrapper>
            <LeftContents goodsData={goodsData} />
            <RightContents goodsData={goodsData} />
          </ContentsWrapper>
        </React.Fragment>
      ))}
    </main>
  );
};

Chart.js

Chart.js는 처음 사용하게된 라이브러리였다. 제품 매매 기록을 불러와 차트에 적용시키는 것은 이상 없었지만, 그래프의 view를 설정하는 GRAPH_OPTIONS에서 key value를 잘못 입력하여 그래프가 보이지 않는 문제가 있었다. 같은 코드를 지웠다 썼다를 반복하며 토요일을 통째로 보냈고, 일요일에 공식 문서와 번역본을 통해 정확한 key value 옵션을 확인하여 수정하니 그제야 정상적으로 구현됐다. 라이브러리 적용이나 옵션 수정에 어려움이 있었던 것은 아니었지만 공식 문서의 중요성을 깨닫는 계기가 되었던 부분이다.

const ConditionChart = ({ graphData }) => {

  ...(중략)...
  
const GRAPH_OPTIONS = {
  plugins: {
    legend: {
      labels: false,
    },
  },
  scales: {
    x: {
      grid: {
        drawBorder: false,
        display: false,
      },
      ticks: {
        display: false,
      },
    },
    y: {
      position: 'right',
      beginAtZero: true,
      grid: {
        drawBorder: false,
        display: false,
      },
      ticks: {
        max: 1000000,
        stepSize: 200000,
        fontColor: '#f4f4f4',
      },
    },
  },
};

export default ConditionChart;

후기: Smooth like butter

위에도 언급했듯이 우린 보다 많은 구현이 아닌 일정에 맞춘 구현과 개인 작업 속도가 프로젝트 미션이었고, 그렇기 때문에 예상했던 완료시점보다 빠르게 마무리 할 수 있었다.
프로젝트 진행간 총 29개의 티켓이 발행되었고 1주차에 17개 중 17개, 2주차에 남은 12개를 모두 완료하여 진행률 100%를 달성할 수 있었다.
또한 서로의 목표가 이전보다 분명하고, 작업량에 부담이 덜했기 때문에 더욱 집중하여 개발할 수 있었으며, 서로가 서로에게 물어보고 알려주면서 배워가는 시간이었다.

1차 때는 아무것도 모르는 상태로 시작하게 되어 정신이 없고 쫓기는 느낌이었는데 2차는 어떻게 진행되는지를 경험해봤고 보다 정확하고 세세하게 목표를 설정해서 그런지 튀는 것 없이 부드럽게 일정이 진행됐다. 너무나 부드러워서 사고가 터지지 않아 오히려 더 이상한 느낌이었다. 😅

현재는 프로젝트를 모두 끝내고 기업협업 중인데 이번엔 Typescript와 Next.js라는 새로운 언어를 마주했는데 이번 4주동안 진행되는 기업협업도 다른 팀원들의 발목을 잡지 않도록 잘 해야겠다.