2차 프로젝트 후기

마켓 쑤아 프로젝트 회고록

• 마켓 컬리를 교육적 목적으로 클로닝 하는것
• 기간: 21.01.25(월) ~ 21.02.05(금)
• 팀원: 프론트엔드(4명), 백엔드(2명)
• 내 임무: 디테일 페이지 만들기 및 장바구니 기능 구현

프로젝트 시작

이번 프로젝트는 마켓 컬리라는 유명한 사이트를 클론하게 되었다. 처음 팀이 꾸려지고 회의를 하면서 디테일 페이지를 맡게 되었다.

FrontEnd

• HTML / CSS
• JavaScript
• React(CRA 세팅)
• React(Router DOM)
• Sass

소통을 위한 노력

• 저녁은 다 같이 먹기. 코딩을 떠나 가급적 친목을 위해 저녁을 다같이 먹는 것으로 정함
• 매일 점심 이후 1시경에 스탠드업 미팅. 각자 새벽까지 작업을 해서 점심 이후에 미팅을 하기로 함
• Trello를 활용하여 개인별 상세 진행 상황을 공유했다. 각자의 역할, 진행중인 작업, 마친 작업 등을 확인 가능

인상 깊었던 점

• 트렐로를 통한 유기적인 스케줄 관리
• 제품 상세 페이지의 데이터 백엔드로 받기
• ItemDescription 컴포넌트에서 이미지 구현시 배열과 map함수, 삼항자 연산, null을 통한 백엔드 데이터 받기
• 새로고침을 했을 때 이미지 구현이 되지않을 때 배열 인덱스가 작동하지 않고 언디파인드가 나오면 삼항 연산자를 사용하여 값이 소위 false일때 null값을 줘서 문제해결
• 백엔드 데이터 json의 이미지 구현시
• front / back 간의 의사 소통을 수월히 하기 위하여 Json API document 를 Notion 으로 만들어공유
• 백엔드와의 통신전에 목데이터 활용시 Notion의 데이터 활용
• 같은 페이지 내에서 매뉴탭에 따른 스크롤 이동.
• git rebase를 통해 하나로 모아서 push하는 작업 처음 실행, 너무나도 많은 커밋을 줄이고 하나로 모아서 올리는 작업의 효율성을 느꼈지만 여전히 쉽지 않은 상태여서 많은 연습이 필요함

기억할 코드

class ItemDescription extends Component {
render() {
const {
product_group_name,
product_group_images,
detail_description,
main_description,
} = this.props.itemData;

return (
  <section className="itemdescription">
    <main>
      {product_group_images ? (
        <img src={product_group_images[0].url} alt={product_group_name} />
      ) : null}
      <h2>{main_description}</h2>
      <h1>{product_group_name}</h1>
      <hr className="solid" />
      <p className="item-description">{detail_description}</p>
      {product_group_images ? (
        <img src={product_group_images[1].url} alt={product_group_name} />
      ) : null}
      <div className="SSUA-check-point">
        <img src="/images/check.png" alt="ssua의 체크" />
        <img src="/images/promise.png" />
      </div>
    </main>
  </section>
);

}
}

export default ItemDescription;