[1차 프로젝트] 회고록

Jihoon Han·2021년 10월 19일

개요

위코드 멤버들이 선정한 특정 사이트를 클론 코딩하는 프로젝트이다. 1차 프로젝트는 모든 멤버들이 풀스택으로 참여하며, 1주차에는 프론트엔드를, 2주차에는 백엔드를 한다. 선정된 사이트를 실제 서비스와 가능한 한 유사하도록 클론 코딩을 하되, 기한이 한정된 만큼 필수 구현할 부분을 선정해서 진행했다.

멤버

본인 포함 5명

프로젝트 기간

2021.10.01~2021.10.22 (2주 개발 + 1주 리팩토링)

프로젝트 소개

'컬리가 계속되면 그게 둘리인 줄 알아요'
정말 정말 유명한 소셜커머스인 마켓 컬리에 당첨되었다. 팀원의 제안으로 마켓 컬리 -> 마켓 둘리로 바꾸고, 테마 색도 둘리의 초록색으로 바꾸니 조금 더 싱그러운 느낌도 들었다.
사실 컬리는 하고 싶은 사이트가 아니었지만, 막상 진행해보니 클론 코딩하기 정말 좋은 사이트라는 생각이 들었다.

마켓둘리메인

사용한 기술

FRONTEND: React, JavaScript, SASS
BACKEND: Node.js, Express, Prisma, MySQL, bcrypt, JWT
TOOL: Git, Postman, Notion, Slack, Zoom, Discord

내가 맡은 파트

FRONTEND: 제품 상세 화면
BACKEND: 장바구니

🤔회고

모두 동등한 멤버지만 팀장은 필요하다

각자 맡은 파트가 나눠지다보니 자기 코드를 작성하는데 몰두해서 팀원과의 소통이 충분하지 못하다는 느낌이 들었다. 그와중에서 팀원 중에서 경험이 있으신 분이 서로의 의사를 조율해주고, 어떤 방향으로 프로젝트를 진행해야 하는지 가이드를 해주셔서 정말 많은 도움이 됐다. 앞에 나서서 이끄실 때도 있지만 전체적으로 뒤에서 받쳐주는 역할을 하셨는데, 만약 훗날 내가 팀장을 맡게 된다면 이 분이 했던 모습을 생각할 것 같았다.

무기한이 아니다. 막다른 길에서는 도움을 요청하자

나는 원래 다른 사람의 도움을 받기 보다는 혼자서 해결하려고 고군분투 하는 사람이었지만, 코딩을 하게 되면서 많이 바뀌었다. 특히 프로젝트는 기간이 정해져있다보니 그날 계획했던 것을 다 하지 못하면 안된다는 생각이 들었다. 만약 어느 부분이 막혔는데, 하루를 날려먹게 된다 싶을 때는 주변 사람에게 도움을 요청하는 것이 현명했다. 그리고 생각보다 쉽게 풀리는 문제를 보지 못하는 경우도 많았다.

프론트와 백의 갭

백엔드는 2주동안 기본적인 기능만 배우고 프로젝트를 들어갔기 때문에 아무래도 위코드에서 배운 것의 대부분이 프론트적인 내용이었다. 프로젝트 2주차에 백엔드가 시작되면서, 프론트엔드 때와는 시작부터 다르게 가야 한다는 것을 깨달았다. 프론트엔드는 코드를 작성하면서 조금씩 그림을 완성해나가는 느낌이었고, 코딩을 하면 항상 그렇게 해왔다. 반면, 백엔드는 먼저 전체적인 밑그림을 완성해놓고, 그 후에 코드를 짜면서 색을 입혀야 하는 것 같았다. Schema 수정을 수십번 하면서 '아, 이건 시작부터 너무 안일했다.' 고 많이 느꼈다.

다음 프로젝트는?

이번 프로젝트를 진행하면서 프론트엔드에 대한 자신감이 커졌다. 나는 이 길이다! 라고 느낄 수 있는 결정적인 계기가 되었고, 2차 프로젝트에는 프론트엔드로 지원을 할 생각이다. 이번에는 프론트엔드 때 상품 디테일 페이지만 맡았지만, 다음 프로젝트 때는 비록 같은 기간이라도 2개의 페이지를 맡을 수 있을 것 같다.

기록하고 싶은 코드

Scroll Buttons

스크롤버튼화면

handleBtnClick = idx => {
    const { scrollBtns } = this.state;
    const newScrollBtns = scrollBtns.map(el => {
      if (idx === el.btnId) {
        el.isClicked = true;
        return el;
      } else {
        el.isClicked = false;
        return el;
      }
    });
    this.setState({ scrollBtns: newScrollBtns });

    scrollBtns.forEach(el => {
      if (el.isClicked === true) {
        if (el.btnId === 1) {
          window.scrollTo({
            top: this.descRef.current.offsetTop,
            behavior: 'smooth',
          });
        } else if (el.btnId === 2) {
          window.scrollTo({
            top: this.labelRef.current.offsetTop,
            behavior: 'smooth',
          });
        } else if (el.btnId === 3) {
          window.scrollTo({
            top: this.reviewRef.current.offsetTop,
            behavior: 'smooth',
          });
        } else {
          window.scrollTo({
            top: this.inquiryRef.current.offsetTop,
            behavior: 'smooth',
          });
        }
      }
    });
  };

처음에는 버튼 4개를 만들고, 각자 state값을 주고, 4개의 onClick 이벤트를 만들어서 하나를 누르면 나머지가 false가 되고, 고정된 위치로 움직이게 했다.
하지만, 멘토님의 조언으로 하나의 버튼을 map을 돌려서 4개를 만들고, 하나의 event에서 고정된 위치가 아닌, ref로 지정한 위치로 움직이게 만들었다.
더 줄일 수 있겠다는 생각이 드는 코드이기도 하다.

Intersection Observer

옵저버화면

const observer = new IntersectionObserver(([{ isIntersecting }]) => {
      !isIntersecting
        ? this.setState({ isBottomLayerUp: true })
        : this.setState({ isBottomLayerUp: false });
    });
    observer.observe(this.observerRef.current);