핀테크 팀 프로젝트 집다이브 회고

🏡 zeepdive에 놀러오세요!

개발자들을 위한 콘솔창의 이스터에그도 숨겨져 있습니다 😊

---

기간

2022년 12월 6일 ~ 12월 21일

사용 스택

• HTML
• SCSS
• Javascript

주제 선정

요즘 인테리어 용품에 관심이 많았기 때문에 냈던 아이디어인데 채택이 됐다🏡!

과정

노션 생성

원래 진행하고 있던 그룹스터디 조원들과 함께하는 프로젝트여서 기존의 노션 페이지에 4차 과제 카테고리를 추가하고 하위 카테고리로 필요한 목록을 추가했다.

불꽃같이 지나가는 하루하루여서 회의가 진행된 날이면 꼭 기록을 남겨두려고 했지만 문서화라는 것이 얼마나 힘든 것인지 다시금 깨달았다.

개더 생성

zoom은 무료 버전을 사용하는 터라 시간 제한이 있고, 디스코드는 있지만 잘 사용하지 않게 되어서 (..) 귀여운 개더를 사용해보게 됐는데 회의하는 데에 많은 도움이 되었다. 귀여운 캐릭터 꾸미기의 재미는 덤

Live share

live share라는 익스텐션을 사용하여 동시에 같은 화면을 보고 코딩을 진행할 수 있었다. readonly 로도 볼 수 있지만 참여도 가능해서 같이 코드 작성이 가능한 점이 신기했다.

주요 기능

퍼블리싱

• 먼저 html로 작성하고 스크립트 파일에 innerText로 옮겨 넣어주어 동적으로 관리가 가능하게 하였다.
• 한동안 자바스크립트 문법을 배운다고 html, css를 보지 않았더니 요소들이 마음처럼 움직여지지 않아 깊게 애를 먹었다.

과제할 시간이 촉박했기 때문에 얼른 퍼블리싱을 마쳐줘야 따라 기능 구현도 할 수 있었는데, 저 "제품 설명" 밑의 줄 부분이 내가 원하는 대로 안움직여줬다. 옆에서 다른 조원이 보고 있는데 계속 삽질만 하고 있으니 등에서 땀이 흘렀다... 😥 우여곡절 끝에 성공..

제품 상세 페이지

• 상품 가격의 1%는 적립 포인트로 계산되게
• 교환/반품을 누르면 화면 최하단의 교환/반품 안내 이미지로 이동하게 했다.
  • addEventListner를 붙여서 클릭 시 이동하게 했다.
  • 제품 상세 이미지의 길이가 상품마다 달라서 scrollY의 위치를 구해야 하나라고 생각했는데 scrollIntoView 를 사용하면 특정 위치로 가게 구현할 수 있었다.

제품 구매 페이지

우편번호 API 사용

• daum에서 API를 제공해줘서 가져다 쓸 수 있었다!

  출처

배송비 부과

• 상품이 10만원 이하일 경우 배송비 칸에 3,500원이 부과되게 했다.

QnA 게시판

• todoList 를 만들었던 3차과제 API를 사용했다.(발상의 전환👀)
• 문의를 나누는 것은 사실 여기서는 의미가 없는 분류이지만 그럴듯해 보이기 위해 넣어줬다.
• 입력창은 input 말고는 사용해본 적이 없었는데 이번 기회에 textarea를 처음 사용해봤는데 readonly, disabled, maxlength 등의 속성을 알 수 있었다.
• 로직 자체도 todo 만들 때랑 거의 비슷하게 만들었는데, 다시 하려니 헷갈리는 부분이 있어서 조금 헤맸다.
• 모달창을 쓸 때 다른 페이지에서 구현했던 모달을 가져와서 썼는데 클래스 명 중복이 되는 것이 있어서 오류를 만들었다 (..)
• 문의가 너무 많이 쌓이면 삭제하려고 전체삭제 버튼을 display:none 으로 숨겨놨다😀

🚨어려웠던 점

협업

부트캠프 시작 초반에 git 수업이 있었다. 지금도 힘들지만 그때는 비교도 안되게 따라가기가 힘들었는데, 그 이후로 처음하는 git 협업이라 새록새록했다. 사실 이미 내 머리는 초기화 상태였다. 기억 저 편에 묻어뒀던 명령어도 오랜만에 써보고(git revert 라던가) pull을 제대로 안하고 push를 해서 conflict가 엄청나게 많이 났다던가, develop 브랜치에 push 해야하는 것을 main에다가 했다던가.. (fork 했던 터라 잽싸게 close 했다😥)

클래스명

여태까지 했던 페이지 하나만 있는 프로젝트와는 달리 이번에는 많은 페이지가 있었다. 그래서 일반적인 클래스명을 정했더니 다른 페이지와 충돌한다거나 하는 문제가 있었다. 클래스 명 짓는 것 자체가 고역이야 요즘 리액트 시간에 배우는 tailwind 는 클래스명이 없어서 사용하는 데에 엄청 편하다고 느꼈는데, 더 익숙해져서 tailwind로 더욱 빠르게 스타일링 해보고 싶다.

문서화

내가 한 일을 남긴다는 것이 쉽지 않았다. 만들면서 오류가 나고 그것을 고치는 데에 급급해서 나중에 다 하고 남겨야지- 하면 또 다른 문제를 만났고 그러다보니 상대적으로 급하지 않다고 느껴진 기록은 점점 우선순위가 밀려났다. 프로젝트를 마치고 보니 그 당시 기록이 남은게 많이 없어서 아쉽다. 효율적이고 제대로 된 문서화 방법을 찾아 다음에는 꼭 적용해보고 싶다.

문서화에 대한 좋은 글

더 열심히 하자..!