
JavaScript, React, SassNode.js, Express, MySQL, EC2, RDSGit, Github, AWSNotion, 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 안에서 바로 분해할당을 해줘서 깔끔하고 가독성이 좋아졌다.