[Project] Pre-onboarding: Sir.Loin- 회고록

📸 Sir.Loin 프로젝트

상품과 관련된 기본 정보, 등록, 주문, 배송, 프로모션 등 여러 옵션을 관리할 수 있는 사이트를 구현한 프로젝트입니다.

• 깃헙 레포
• 배포

📆 프로젝트 기간

2022.01.27 ~ 2022.01.29

🔎 팀 구성

• Front-end: 3명

💡 기술 스텍

Front-end

• React.js
• Styled-components

Common

• Git
• Slack

📸 과제 구현 목록

노출 및 판매기간 설정

• Material-UI 라이브러리 활용하여 달력 및 시간 지정 컴포넌트.
• 설정한 기간이 만료되었을 경우, 자동으로 state 변경되는 기능.
• 설정한 기간내 날짜 선택 비활성화 기능.
• 한 버튼이 활성화되면 다른 버튼이 비활성화되는 기능.

상품 기본 정보(본인 담당)

• 체크박스 선택 및 해제를 통해 상품에 카테고리 지정 및 해제 기능.
• 썸네일 이미지 하나의 이미지만 업로드 가능.
• 상품명 선택시 해당 상품코드 화면 출력.

상품 옵션

• 추가 및 삭제 버튼 눌렀을 때 컴포넌트가 추가로 생성 및 삭제되는 기능.

상품 소개이미지, 구매자 추천 이미지

• 사용자에게 이미지 업로드 영역 제공 및 업로드된 이미지 파일명 노출 기능.
• 업로드된 이미지 삭제 버튼을 통해 업로드 상태에서 삭제.

상품 배송 설정

• 커스텀 토글 버튼

상품 혜택 허용 설정, 기타 설정

• 커스텀 토글 버튼

🤷🏻‍♀️ 개인적인 소감

✨ 좋았던 점

• 체크박스가 가지고 있는 기능(checked, value 등)을 적절한 로직으로 짜서 잘 활용했다는 점과 필터함수를 통해 새로운 배열을 업데이트 해줬다는 점이 기억에 남는다. 체크 활성화를 통해 데이터를 가져오고 useState를 이용해 상태값을 관리했는데 이 과정이 처음부터 순조롭지는 않았다. 기능을 구현하기 위해 밤새 문서를 찾아보고 예제를 보며 시행착오를 겪었는데 이 과정을 통해서 내가 짠 로직과 친해질 수 있었고 필터함수는 이 프로젝트 이전엔 보통 알고리즘 문제를 풀때만 사용하곤 했는데 이번 기능 구현을 통해 필터함수의 속성에 대해 잘 이해할 수 있었다.
• 기능을 구현하던 중 드롭다운 메뉴의 데이터를 가져오는 부분에서 막혀 생각했던 것 보다 시간이 지체되었던 때가 있었다. 이때 조원들과 게더타운에서 모여 화면 공유를 통해 라이브코딩을 진행했었는데 인덱스를 통해 배열의 요소를 가지고 오는 데서 발생한 문제여서 결론적으로는 빠르게 해결할 수 있었다. 조원들과 문제를 나누고 함께 접근하여 해결한 과정에서 문제에 대한 각자의 접근법과 문제를 바라보는 시각을 알 수 있게 되어 뜻깊은 시간으로 남았다.

☄️ 아쉬웠던 점

• 역시나 시간이 부족했다는 점이 아쉬움으로 남는다. 담당한 기능을 모두 구현하면 커스텀 토글을 꼭 만들어보고 싶었는데 위에 적었듯이 시행착오를 꽤나 겪는 바람에 결국 토글버튼은 담당 기능을 먼저 구현한 조원이 맡게 되었다. 아쉽긴 했지만 위에 구현한 기능이라도 차근차근 제대로 익혀보자는 취지로 남는 시간엔 짧게 코드리뷰를 해보았다.

🎉 프로젝트를 마치며

• 이틀에 걸쳐 빠르게 진행된 프로젝트이지만 업무를 분담할 때 회의를 통해 굉장히 세세하고 현실적(담당할 기능에 따른 시간 안배)이게 접근을 했었다. 또한 레이아웃과 기능 구현을 하는데 있어서 중간중간 서로에게 진행 중인 결과물을 보여주며 보고를 했는데 이 과정에서 남은 작업물을 더욱 세세하게 나눠 가지고 코드에 대한 고민이 있을 땐 서스럼없이 말할 수 있는 분위기가 형성되었다. 이런 소통과 협업이 있었기에 짧은 시간 내에서도 만족스러운 결과물이 나왔다고 생각한다. 다시 생각해봐도 조원들을 너무 잘 만났어!