1차 프로젝트 1주차 회고록

뱅기뱅규·2022년 5월 1일
0

🎬 시작 🎬

1차 프로젝트가 시작되었고, 우리는 위코드에 들어온 이후로 처음으로 실습(?)을 하게 되었다. 지금까지의 과정은 혼자만의 공부같은 느낌이였다면, 이제부터는 정식으로 팀원이 생기고, 2주동안 동고동락을 같이 할 친구가 생긴 느낌이였다. 팀 배정이 되었을때, 우리 팀원들은 다 내가 한번씩 얘기도 해보고, 어색한 사람이 없어서 안심이 되었다. 처음 팀원들끼리 만나서 얘기할때부터 에너지가 좋아서, 이 팀에 들어오게 된게 굉장히 행운이라 생각했다. 우리팀은 프런트엔드 4명, 백엔드 2명으로 이루어진 팀이였다. 우리 팀이 맡게 된 클론코딩 사이트는 술담화 사이트였다. 아기자기한 디자인이 인상적이였던 페이지여서 기억에 남았다. 결정이 된 후에 다시 홈페이지를 보니 생각보다 페이지 수도 다양했고, 로그인 된 상태에서 뜨게 되는 콘텐츠도 많았다. 프로젝트를 시작하게 된다는 설레는 맘도 있었지만, 마음한편에 걱정이 자리를 잡았다.

💪 준비운동 💪

팀원들끼리 처음 만나서 각자의 역할을 분배하는 시간이 왔다. 우선 팀을 이끌 가장 중요한 Project Manager를 선정해야 했다. 다들 우물쭈물하는 사이에, 우리 팀원들중 한명인 종혁님이 자신이 PM을 하겠다고 하였다. 다들 피하고 싶어하는 포지션이라 눈치게임 아닌 눈치게임을 하고 있던 우리에게는 정말 천금같은 소식이였다. 다른 팀들을 보니 내가 우려하던 상황처럼 서로 하기 싫어하는 눈치였다. 우리 팀은 가장 어려운 과제였던 PM정하기가 정말 빠르게 끝나, 종혁님의 주도하에 각자 하고 싶은 파트를 프런트, 백엔드 나눠서 얘기하기로 하였다. 프런트엔드 개발자인 나는 당연히 프런트 4명이서 얘기를 하게 되었고, 팀원들중 2명이 로그인/회원가입 창을 하고 싶다고 하였다. 나는 사실 로그인/회원가입 창을 하기 싫었다. 첫 프로젝트만큼은 그래도 좀 어려운 부분을 맡고 싶은 생각이 있어서였다. 결국 그 두명이 하나씩 로그인, 회원가입페이지를 담당하고, 완료된후에 메인페이지 쪽으로 붙기로 했다. 회의결과, 내가 맡은 부분은 제품 상세페이지로 댓글 기능, Aside바 같은 여러기능이 있는 부분이였다.

🏃🏻 1차 스프린트 🏃🏻

그동안 인스타그램 만들기나 다른 것들을 하면서 다양한 기능만들기를 배운 나로써는 제품 상세 페이지를 금방 만들줄 알았다. 하루 정도의 투자만 하면 끝낼 수 있다는 생각은 금새 자만이였다는게 드러났다. 첫날에는 우리 팀을 위한 초기 세팅을 하는데 시간을 보냈고, 세팅하는 방법도 익숙하지 않아 애를 많이 먹었다. 결국 첫날 저녁을 먹고 오후 9시가 넘어서야 겨우 초기세팅을 완료하였다. 중간중간 node.js가 설치되지 않는 오류등을 마주하며, 힘든 시간을 보냈다. 그래도 화요일 아침부터는 초기세팅을 clone 받아서 각자가 맡은 페이지를 작업 할 수 있게 되었다. 그동안 React에서 기능 구현에 집중하다보니, 정말 오랜만에 HTML, CSS를 작성했다. 그래서 레이아웃 잡는게 예전보다 오래 걸리게 되었다. 초기 계획이 어그려졌지만, 나는 그거에 좌절하지 않고, 천천히 완벽하게 만들자는 생각을 하였다. 결국 나는 제품 상세 페이지의 레이아웃을 만드는데 3일 정도가 걸렸고 첫주차 목요일이 되서야 실제 페이지와 비슷한 레이아웃을 만든는데 성공했다. 우리팀의 다른 팀원들은 벌써 두페이지씩 만들고 로그인/회원가입을 백엔드와 맞춰본 후였다. 사실 레이아웃을 만들고 끝일줄 알았던, 나에게 또다른 시련이 다가왔다. 그것은 바로 백엔드와의 소통과 그에 따른 레이아웃 수정이였다. 초기에 백엔드에 저장하는 데이터에 대한 얘기를 했지만, 상세페이지에만 집중하다보니 수정된 부분에 대한 인지 없이 나혼자 페이지만 만들고 있었던것이였다. 생각해보니 혼자서 페이지를 만들거면 프로젝트가 아니라 천하제일 HTML, CSS 대회를 혼자서 하고 있었다라는 생각이 들면서, 팀원들과 중간중간 소통하는게 얼마나 중요하고 필요한 부분인지 알게되었다. 결국 금요일까지 레이아웃을 수정하고, 댓글 추가 삭제 기능까지 추가하면서 마무리가 되었다.

그 결과물이다.

// ProductDetail.js
import React from 'react';
import CircleTable from '../CircleTable/CircleTable';
import CommentList from '../CommentList/CommentList';
import './ProductDetail.scss';

const ProductDetail = ({
  addComment,
  setAddComment,
  inputContent,
  setInputContent,
  count,
  setCount,
  products,
}) => {
  const postComment = e => {
    e.preventDefault();
    let copyComment = [...addComment];
    let copyCount = count;
    copyCount += 1;
    if (inputContent) {
      copyComment.unshift({
        id: count,
        nickname: '에베레베',
        products: '샴푸',
        created_at: '언제든',
        content: inputContent,
      });
      setAddComment(copyComment);
      setInputContent('');
      setCount(copyCount);
    }
  };

  return (
    <div className="productDetail">
      <div className="detailDescription">
        <div className="detailCard">
          <img
            alt="productImage"
            className="productImg"
            src={products[0].productImg}
          />
        </div>
        <div className="detailedProduct">
          <div className="productTitletoRating">
            <h1 className="productTitle">{products[0].name}</h1>
            <br />
            <div className="productElement">
              맛있게 한잔하고 싶은 날에 찾아주세요
            </div>
            <div className="productOrangecolor">
              #달콤한 매실주 #매실음료 아님!
            </div>
            <div className="productRating">
              <i className="fa-solid fa-star" />
              <i className="fa-solid fa-star" />
              <i className="fa-solid fa-star" />
              <i className="fa-solid fa-star" />
              <i className="fa-solid fa-star" />
            </div>
          </div>
          <div className="productInfoElement">주종: {products[0].category}</div>
          <div className="productInfoElement">도수: 13.0%</div>
          <div className="productInfoElement">용량: 500ml</div>
          <div className="productAdditional">
            <div className="productAdditionalElement">
              배송기간: 2일이내 배송
            </div>
            <div className="productAdditionalElement">
              수상: 2017년 우리술 품평회 기타주류 우수상
            </div>
          </div>
          <div className="productPrice">
            <div className="productElement">판매가격:</div>
            <div className="productValue">{products[0].price}원</div>
          </div>
          <div className="blueColor">유통기한: 유통기한 없음</div>
          <div className="blueColor">보관방법: 상온 보관 가능</div>
        </div>
      </div>
      <div className="hacksim">
        <div className="pointFont">핵심포인트</div>
        <div className="twoPoint">
          <div className="pointEach">
            <div className="pointTitle"></div>
            <div className="chartList">
              <CircleTable />
              <CircleTable />
              <CircleTable />
              <CircleTable />
              <CircleTable />
            </div>
          </div>
          <div className="pointEach">
            <div className="andrew">
              어울리는 안주
              <div className="andrewPictures">
                <div className="andrewPicture">
                  <img
                    alt="golbang-e"
                    className="foodPicture"
                    src="https://cdn.pixabay.com/photo/2015/04/08/13/13/food-712665_960_720.jpg"
                  />
                  골뱅이 소면 무침
                </div>
                <div className="andrewPicture">
                  <img
                    alt="golbang-e"
                    className="foodPicture"
                    src="https://cdn.pixabay.com/photo/2015/04/08/13/13/food-712665_960_720.jpg"
                  />
                  골뱅이 소면 무침
                </div>
                <div className="andrewPicture">
                  <img
                    alt="golbang-e"
                    className="foodPicture"
                    src="https://cdn.pixabay.com/photo/2015/04/08/13/13/food-712665_960_720.jpg"
                  />
                  골뱅이 소면 무침
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <form>
        <textarea
          placeholder="댓글을 입력하세요"
          value={inputContent}
          onChange={e => setInputContent(e.target.value)}
        />
        <div className="submitInfo">엔터키는 안먹힐걸요</div>
        <button
          onClick={e => {
            postComment(e);
          }}
        >
          여기를 눌러서 댓글을 작성하세요!
        </button>
      </form>
      <CommentList addComment={addComment} setAddComment={setAddComment} />
    </div>
  );
};

export default ProductDetail;
// ProductAside.js
import React from 'react';
import { useNavigate } from 'react-router-dom';
import './ProductAside.scss';

function ProductAside({ addCount, setAddCount, products }) {
  const goTo = useNavigate();

  const goToCart = () => {
    goTo('/cart');
  };

  const plus = () => {
    setAddCount(prevCount => prevCount + 1);
  };

  const minus = () => {
    if (addCount === 0) return;
    setAddCount(prevCount => prevCount - 1);
  };

  return (
    <div className="productAside">
      <div className="asideBar">
        <div className="label">
          <label>옵션</label>
        </div>
        <div className="option">
          <select>
            <option defaultValue disabled>
              옵션 하나지롱
            </option>
            <option value="[500ml] 매실원주">[500ml] 매실원주</option>
          </select>
        </div>
        <div className="label">
          <label>수량</label>
        </div>
        <div className="amount">
          <button className="minus" onClick={minus}>
            -
          </button>
          <span>{addCount}</span>
          <button className="plus" onClick={plus}>
            +
          </button>
        </div>
        <div className="label">
          <label>총 상품가격</label>
        </div>
        <div className="price">
          {String(addCount * `${products[0].price}`).replace(
            /\B(?=(\d{3})+(?!\d))/g,
            ','
          )}
          원
        </div>
        <div className="delivery">
          <div className="label">이벤트 기간 무료 배송!</div>
        </div>
        <button className="cart" onClick={goToCart}>
          장바구니 담기
        </button>
        <button className="purchase">바로 구매하기</button>
      </div>
    </div>
  );
}

export default ProductAside;

🤔 느낀점 🤔

프로젝트를 시작하면서 새롭게 알거나 느끼게 된점이 많다.

  1. 개발자는 혼자서 모든것을 할 수 없으니, 다른 개발자들과의 소통이 중요하단 것을 알게되었다.
  2. 다른 팀원들을 도와주면서 내가 어느정도까지 알고 어떤 부분을 모르는지 알게 되었다.
  3. 혼자서 막혀있을때 주변에 도움을 청하고, 그를 통해 해결하는것도 나쁘지 않다는 것을 알게되었다. 다른 사람들과 얘기하면서 해결책을 모색할 수도 있지만, 다른 사람이 만든 코드를 보면서 흐름을 이해하는것도 중요하기 때문이다.
  4. 새로운 기능 (캐러셀, 모달)등의 구조를 이해하게 되었다.
  5. 프로젝트는 단순히 혼자 잘하는것이 아니라, 실제 현업에서 어떻게 개발자들끼리 의사소통을 하고, 어떠한 어려움에 부딪히는지를 알게되었다.

결론: 프로젝트는 자신이 아는 기능을 화면에 구상시키는것도 중요하지만, 서로 소통하면서 프로젝트가 흘러가는 흐름을 이해하는것이 더 중요하다.

다음주의 마음가짐: 월요일에 중간 발표를 하며, 어디까지 진행했는지를 알수 있고, 이제 백엔드와 프런트엔드를 붙여보는 가장 중요한 시간이 남았으니 남은 기간, 나만의 속도가 아닌 팀의 페이스에 맞춰서 하나된 팀으로 협업을 하고 싶다.

0개의 댓글