README [README]

younghyun·2022년 3월 26일
1

Project 소개

RIDIBOOKS사이트를 모티브로 원하는 E-Book을 구매해 볼 수 있는 사이트 구현

1차 Planning Meeting

1차 프로젝트 때 경험을 바탕으로 기본적인 기능부터 구현하고 추가적인 기능을 구현하는 방향으로 planning 미팅을 진행했다.

1차 Sprint 기간

시작과 동시에 팀원 중 한 명이 코로나 감염으로 재택으로 프로젝트를 진행해야 했기에 대부분의 미팅은 Zoom과 Trello를 활용해 진행했다.

내가 맡은 부분은 상세 페이지 였다. 별점 기능, 페이지 네이션, 체크 박스 등 도전의식을 불러일으키는 고도화된 기능이 많았다.

특히, 체크 박스를 구현할 때 props, state, set객체를 활용해 구현 하는 부분이 시간이 걸렸고, 가장 많이 배운 파트였다.

2차 Sprint Meeting

2차 스프린트 미팅을 진행하기 전 남은 Frontend 팀원 중 한 명도 코로나 감염이 되었고, 멘토님들과 백엔드 분들과 회의 후 기본적인 기능이 빨리 구현되었으니, 추가적인 구현 보다는, 전체적인 사이트 Flow를 보여주기로 하고, 상세 페이지 구현을 중단 후 바로 Cart를 구현하는 것을 목표로 설정했다.

개인적으로 기능 구현에 욕심이 났지만 그 보다는 팀 전체 목표에 집중하는 게 팀원으로써 책임감 있는 행동이라고 생각했다.

2차 Sprint 기간

Cart를 구현함에 있어서 어려움은 없었다. 기존에 상세 페이지에서 구현한 체크 박스 기능을 제외하고는 추가적인 기능이었기 때문이다.

프로젝트 최종 발표

프로젝트 최종 발표 날은 몸살이 심하게 와서 참여하지 못했다. (평소 운동과 체력관리 중요성을 실감했다.. )
스스로 이번 프로젝트를 돌이켜 보았을 때 책임감을 가지고 임했다는 점에 점수를 주고 싶다. 1, 2차 프로젝트 기간 동안 단 하루도 쉬지 않았고, 끊임없이 프로젝트에 집중 했다.
비록 고도화된 기능 구현은 할 수 없었지만, 어떤 상황과 변수가 발생해도 적응하고 문제를 해결하는 능력을 기르는 것도 중요하다고 생각한다. 1달간 진행한 1, 2차 프로젝트는 불완전한 조건속 성과를 내는 경험을 한 점에서 좋은 경험이었다.

생각나는 코드

product.js

  • 더보기 기능
    상세 페이지에서 더 보기 기능 구현할 떄 useLocation을 활용해 처음 상세 페이지 렌더싱 시처음에는 1권부터 10권까지, 더보기 버튼을 누르면 1권부터 20권까지 나오도록 했다.

  • 체크 박스 기능
    체크 박스 기능을 구현할 때 처음에는 하위 컴포넌트에서 props, state를 구현했지만, 리액트 라이브러리가 가진 단방향 특성과 최상위 컴포넌트에서 수량, 가격 변동이 일어나야 했기에 최상위 컴포넌트에서 props, state를 선언해서 하위 컴포넌트로 내려준 후 각각 변화가 일어날 시 값을 상위 컴포넌트 함수에서 변화가 일어나도록 구현을 했다.

    또, 중복된 값을 체크 하기 위해 배열이 아닌 set객체를 활용해 중복된 값이 저장되지 않도록 했다.






시연연상

https://youtu.be/Rwv6Gc5rvgo

profile
선명한 기억보다 흐릿한 메모

0개의 댓글