[wecode] 1차 프로젝트를 마치며..(Nike 클론코딩)

Chloe K·2022년 10월 29일
post-thumbnail

1차 프로젝트

  • 프로젝트 클론코딩 사이트: NIKE
  • 진행기간: 2022.10.17 ~ 2022.10.27
  • 팀명: JustWeDoIt
  • 팀원: 프론트엔드개발자 4명, 백엔드개발자 3명

Demo Video


적용기술

Front-end

  • JavaScript, React, Sass

Back-end

  • Node.js, Express, MySQL, EC2, RDS

Common

  • Git, Github, AWS

협업툴

  • Notion, Slack, Trello, Figma, Postman

내가 담당했던 구현 요소들

제품 상세페이지


Carousel


Navigation Bar (+검색기능)


프로젝트를 마치며

위코드를 시작한지 한달만에 1차 프로젝트를 시작하고 마쳤다. 지금 프로젝트가 끝난 시점에서 이번 프로젝트를 통해서 배운 것들과 개선해야할 점들을 정리해서 다음 프로젝트 때는 실수를 줄이고 좀 더 성장된 모습으로 프로젝트를 하고 싶다는 생각이 가장 먼저 들었다.

📒아쉬웠던 점을 생각하자면,

Trello
이번 프로젝트에서 처음으로 Trello를 사용했는데, 사용법이 익숙지 않아서 프로젝트 초반에 갈피를 못잡은 것 같다. (머릿속에 1PR 1Ticket 저장.....)

회의록
매일 아침마다 Standup meeting을 진행했는데 초반에 회의록 작성을 하지 못해서 너무나도 아쉬웠다. 그래도 중후반부터는 노션을 활용해서 놓친 회의록이 아까워 더욱 열심히 작성했던 것 같다.

소통
무엇보다 가장 중요한 팀원들과의 소통!🙌
프로젝트를 진행하면서 백엔드의 용어를 이해하지 못해서 꽤나 고생했다.. 프론트와 백이 데이터를 주고받기 위해서는 소통이 너무나도 중요한데, 이 부분에 있어서 자신이 없었기 때문에 다른 프론트 팀원에게 도움을 받았다.

🌟좋았던 점
피그마 사용
멘토님의 추천을 받아서 피그마를 사용해봤다.
필수구현사항이나, 스타일(폰트, 컬러 등)을 다른 프론트엔드 팀원들과 공유하고, 레이아웃 구현이 완료가 된 페이지들은 캡처해서 피그마에 올려두었다. 사실 피그마 사용이 도움이 될까 했는데, 백엔드 팀원이 카테고리 별 API를 피그마 보고 만들었다는 얘기를 듣고 뿌듯했다. 다음 프로젝트에도 사용해보면 좋을 것 같다!

🫶5팀 팀원들🫶
모두가 힘들고 지친 상황에서 서로 격려해주고 배려해주는 팀원들 덕분에 프로젝트를 진행하면서 너무 감사했다. 덕분에 정말 좋은 분위기 속에서 잘 마무리할 수 있었던 같다...! (다른 팀이 우리 팀 분위기 좋다고 부러워했던거 안비밀..ㅎ)

공유하고 싶은 코드

{Object.entries(product.sizeStock[0]).map(([size, stock]) => (
  <ProductDetailBtn
    size={size}
    stock={stock}
    key={size}
    selectedSize={selectedSize}
    selected={selected}
    />
  )
)}
// stock에서 사이즈와 재고를 모두 가져오기 위해서 Object.entries 메소드를 사용함.
// Object.entries --> key와 value를 배열 형태로 반환한다.
// 분해할당을 parameter 로 바로 해주는 이유 - 인자로 들어가는 값이 너무 확실하기 때문에!

Object.entries라는 method는 이번 프로젝트를 진행하면서 처음 알게 된 메소드이다.

fetch로 받아오는 데이터가 객체로 들어와서 백엔드 팀원에게 배열 형태로 데이터를 바꿔달라고 요청해야하나 고민하고 있었을 때 다른 팀원이 entries를 알려주었다.

그 후 멘토님께 리팩토링 조언을 받아서 parameter 안에서 바로 분해할당을 해줘서 깔끔하고 가독성이 좋아졌다.

profile
Frontend Developer

0개의 댓글