[Project] Weasly Project 1주차 시작, 중간회고

위코드에서 2주동안 진행될 1차 프로젝트를 시작하게 되었다. 감사하게도 내가 제안한 ‘와이즐리 오픈워크’라는 사이트를 모티브로 삼아 프로젝트로 진행하게 되었다.

프로젝트 제안동기

남자 화장품 브랜드로 확실한 타켓층과 구독서비스, 합리적인 가격 때문에 1년정도? 이용중인 곳이고 이러한 비즈니스 모델이 마음에 들어 프로젝트에 제안하게 되었다

팀 프로젝트 가치관(1주차)

팀프로젝트를 기능구현과 다른 팀과의 경쟁이 아닌 내면의 성장을 목표로 두고 진행하려고 노력하였고, 기능구현이 우선이 아닌 팀 전체가 배워가는 것이 있고 팀이 하나가 되어 나아갔으면 좋겠다고 생각하고 프로젝트에 임했다. 학교에서나 일터에서 배운 프로젝트를 하게 될 때에는 항상 1인분을 해내야 한다는 생각으로 임했는데 스크럼방식으로 진행하니 1인분에 대한 생각보단 규율과 책임감을 가지고 하나의 요리를 다같이 협심해서 낸다는 생각으로 프로젝트를 진행하였다.

1. 팀편성

프론트 3분과 백엔드 3분이 같은 팀을 하게 되었다. 위코드내에서 한달동안 나름 두루 친하게 지냈다고 생각했는데 팀 중에 한 분 빼고는 대화를 거의 안해본 분들이였다.
낯선 분들과 낯선 프로젝트라니 너무 설렜다.
팀끼리 자리배치까지 완료하고 가벼운 인사를 나눈 뒤 모여서 사이트에 대해 분석하는 시간을 가졌다.
페이지를 둘러본뒤 구독서비스 보다 결제서비스를 먼저 구현하고 그 다음 추가사항으로 구독서비스를 진행하기로 하였다. Trello, slack을 활용하여 소통했다.
이후 멘토님들과 리뷰에서 필수가 되는 기능 위주로 먼저 제작하라고 조언을 주셔서 로그인, 회원가입, 상품리스트,상품상세를 우선순위에 두었다.

2. 초기세팅

프론트 리액트, 백은 장고로 초기세팅부터 진행하여 프로젝트를 본격적으로 시작하였다. 내 컴퓨터에서 초기세팅을 진행한 뒤 팀원들은 git clone을 받아 진행하였다. 초기세팅 진행후 remote pull clone 과정에 더욱 익숙해졌다.

3. 협업툴

• Github
• Trello: 업무 분담, 업무 진척도 시각화로 판단에 용이했다.
• Notion를 trello에서 관리하기 힘든 미팅로그, API명세서, 프,백 Github링크, 프로젝트 페이지내에서 사용할 이미지를 공유
  특히 Trello는 처음 사용해봤는데 팀원간의 업무 진척도를 시각적으로 파악하기 쉽게 해주어 업무에 유용하였다.

Trello, Notion

4. 업무분담 & IN PROGRESS

백엔드는 모델링부터 시작하였고, 프론트는 진행할 페이지를 나눠 레이아웃 및 기능을 구성해갔다. html, JS로 제작한 뒤 React로 변환하는 과정은 한 두번 해봤지만 처음부터 React로 컴포넌트화, map을 고려하여 렌더링 해줄 화면을 생각하며 구성하는 것은 낯설고 어려웠다. 첫주 sprint는 우선 필수페이지 및 기능(SignIn, SignUp, Productlist, ProductDetails)를 우선 작업하기로 협의 봤고 그 중 먼저 productDetail를 맡아 진행하게 되었다.

이왕이면 무료이미지에 깔끔한 이미지로 작업하고 싶어 사이트에 사용할 이미지를 포토샵 목업 작업하여 팀원들과 공유했다. 팀원들이 이미지에 만족해줘서 코딩이 아니였지만 즐겁게 작업했다.

5. 기억에 남는 코드

처음에 상세페이지 레이아웃을 구현한 뒤 상품리스트별 상세페이지를 렌더링 해줄 코드에 대해 혼자 고민을 많이 했던 것 같다.

BEFORE

import { useParams } from 'react-router-dom';

const ProductDetail = () => {

  useEffect(() => {
    fetch('/data/detailcontents.json')
      .then(res => res.json())
      .then(data => {
        setDetail(data);
      });
  }, []);

  const [detail, setDetail] = useState([]);
  const [price, setPrice] = useState([]);
  const [count, setCount] = useState(1);
  const { id } = useParams();

  const detailList = detail.filter(item => item.id === Number(id));

  return (
    <main className="main">
      {detailList.map(item => {
        return (
          <ProductDetailTop
          //<중략>
          />
        );
      })}
      <ProductDetailContents />;
    </main>

 

들어온 데이터 중 필터된 값을 렌더링 해주면 상세페이지에 데이터가 그려질것이라고 생각하여 상품리스트에서 상세페이지를 클릭하여 찍히는 url을 useParams hook을 이용하여 id 에 담고, uesEffect로 setState를 이용하여 detail에 데이터를 담아주었고 그 detail을 filter매서드를 사용하여 url 에 맞는 id 만 찾아 렌더링해주는 detailList라는 배열을 다시 만들었다.

 

하지만 어차피 서버에서 데이터가 전체 상품의 데이터가 들어오는 것이 아닌 상품리스트에서 선택한 해당 상품의 아이디와 그에 해당하는 데이터만 들어오기 때문에 map, filter라는 매서드를 사용할 필요가 없었다. 그저 서버에서 GET 요청으로 받아온 해당 정보만 매 페이지에서 찍어주면 그만이였다.

AFTER

import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';

import { API } from '../../config';
import ProductDetailTop from './ProductTop';

const ProductDetail = () => {
  const [detail, setDetail] = useState([]);
  const [count, setCount] = useState(1);
  const { id } = useParams();

  const countUpEvent = () => {
    setCount(prev => prev + 1);
  };
  const countDownEvent = () => {
    setCount(prev => prev - 1);
  };

  useEffect(() => {
    fetch(`${API.PRODUCT_DETAIL}/${id}`)
      .then(res => res.json())
      .then(data => {
        setDetail(data);
      });
  }, []);

  return (
    <main className="main">
      {detail.RESULT && (
        <ProductDetailTop
          //<중략>
        />
      )}
    </main>
  );
};

 

6. 중간회고

총 2주안에 이뤄지는 프로젝트이고 그 중 1주동안 진행된 스프린트를 토대로 팀원들과 중간회고를 가지는 시간을 가졌다. 팀 회고 결과 팀원 모두 이런 팀프로젝트가 처음이기도 하며 개개인의 실력이 다르다고 느꼈다. 그에따른 각 기능에 리소스 투입에 대한 메타인지가 부족하니 트렐로나 업무세분화가 체계적으로 된 것 같지 않았고, 첫 주 스프린트에서 오버해서 주문페이지까지 하게는 되었는데 레이아웃과 얼추 기능은 만들었지만 잔에러와 실제로 서버통신하는 부분의 로직, 서버에서 받을 데이터타입 등이 맞지 않았다.

리뷰

1. 트렐로 업무관리를 더욱 세분화하여 체크리스트를 만들어서 진행
2. 백엔드와 소통을 한다고 하였는데 데이터를 주고받는 것에 익숙하지 않았다. 좀 더 긴밀히 소통하고 같은 화면을 보며 어떤기능에 어떤데이트를 받을껀지 상의하여야겠다고 느꼈다.
3. 과도한 추가기능보다 완성도를 높여보자.
4. 팀원 모두가 이해하고 넘어가야 하는 것과 납기를 맞추는 것의 딜레마.