👞 Project Overview
닥터마틴은 세계적인 신발 판매 기업으로 닥터마틴을 레퍼런스로 UI와 기능을 개선하는 프로젝트를 진행했다. 패션을 좋아하는 나에게 첫 프로젝트를 패션 브랜드로 시작할 수 있어 좋았고, 단순 클론이 아닌 스스로 문제를 찾아 기술적으로 해결하는 소중한 경험을 할 수 있었던 프로젝트이다.
✔️ 백엔드의 데이터를 fetch 해오는 첫번째 프로젝트
✔️ 리액트 컴포넌트를 공유하여 효율성을 높이는 작업
✔️ 공동의 컨벤션, public폴더, scss, config 사용으로 유지보수
Link
작업 기간
총 11일 : 2021.12.27 - 2022.01.06
인원
프론트엔드 4명 | 백엔드 1명
기술 스택
Used DevTools
JavaScript(ES6) | React.js | Sass(SCSS)
Collabo Tools
Git&Github | Slack | Trello
Libraries
React-router-dom 외 라이브러리 지양
Code Formatter
eslint | prettie
구현사항
상품 디테일 페이지 담당
- 상품 이미지를 확인하며, 사이즈와 수량 선택 후 장바구니에 담을 수 있습니다. 더 보기 버튼 클릭 시 추가 후기 목록을 불러옵니다.
캐러셀
- 평소에도 불편함으로 느꼈던 세로 방향의 상품 이미지 나열 방식을 기술적으로 해결했습니다.
- position 값을 수정할 경우 reflow와 repaint가 발생하기 때문에 transform 속성의 translate를 사용하여 구현했습니다.
- 문제 해결 역량이 개발자의 필수 역량인 만큼, 문제를 발견하고 해결 방안을 기술적으로 녹여낸 소중한 경험이었습니다.
페이지네이션으로 상품 후기파트 구현 (버튼 클릭 시 3개씩 후기글 추가)
- 페이지가 렌더링 될 때 기본 후기 목록 3개를 받아옵니다.
- ‘더보기 버튼’ 클릭 시 API 호출을 할때 엔드포인트의 offset값을 변경하여 다음 3개의 후기를 더 받아오게 됩니다.
- 기존의 state인 comments 배열의 뒤로 붙여넣고 리렌더링 시켜 페이지네이션 구현했습니다.
🔸 구현 결과
상품 상세페이지를 구현했으며 캐러셀, 상품설명, 상품 후기 파트를 주로 구현했다.
-
캐러셀 구조를 파악하고 scss @mixin 조건물을 활용하여 가독성을 높였다.
-
수량에 따른 가격 변화 구현
- 상품의 사이즈 정보를 받아 버튼 변화 구현
- 페이지네이션으로 상품 후기파트 구현(버튼 클릭 시 3개씩 후기글 추가)
👞 Project Review
✨ 칭찬해주고 싶은 점
✔️ 기존 사이트를 '개선' 하려고 고민했다!
기억하고 싶은 코드 1 ⬅️ 여기서 시행착오를 확인할 수 있다!
나는 코드만 잘치는 개발자가 아닌, 사용자의 입장에서 불편함을 개선하고, 즐거움을 느낄 수 있는 서비스를 구현하는 개발자가 되고 싶다. 그렇기에 프로젝트 시작 전 사이트를 보며 개선할 수 있는 포인트를 찾기위해 노력했다. 그중 상품의 이미지가 일렬로 나열되어 원하는 이미지를 확인하기 위해 끝없는 스크롤링을 해야하는 불편함을 느꼈다. 아이쇼핑을 즐기는 나는, 평소에도 상품의 이미지를 일렬로 보여주는 사이트에서 불편함을 느꼈었다.
평소에 느꼈던 불편함을 해결해보면 어떨까? 라는 생각에 자라의 메인페이지를 레퍼런스로 참고하여 캐러셀을 구현해보겠다는 의견을 제시했다. 팀원들과 수차례 회의 후 캐러셀을 구현하되, 지금은 실력을 향상이 우선이라는 의견과 함께 라이브러리를 지양하기로 결정했다.
position 속성을 활용한 로직을 고민하던 중 브라우저 렌더링 성능에 관한 reflow와 repaint라는 개념을 알게 되었다. 쉽게 말해 브라우저의 렌더링 과정에서 reflow와 repaint를 최대한 일어나지 않게 구현해야 렌더링 속도가 개선되고, 이를 통해 애니메이션이 깔끔하고 부드럽게 보여질 수 있다.
position 값을 수정할 경우 reflow가 생기기 때문에, 나는 transform속성의 translate를 사용하며 보다 높은 성능의 애니메이션을 구현할 수 있었다.
문제 해결 역량이 개발자의 필수 역량인 만큼, 문제를 발견하고 해결 방안을 기술적으로 녹여낸 소중한 경험이었다.
✔️ '고민하는 시간' 을 아까워하지 않았다!
이미지를 슬라이드 형식으로 바꾸기로 결정했지만, 정작 방법은 모르고 있었다.
하지만 바로 검색하지 않고 그림으로 그려보며 어떤 구조로 이미지가 움직이면 효율적이고 간편할지 고민했다.
(고민되면 글을 쓰고 그림을 그리며 구조를 파악하기 위해 노력했다)
이미지 하나하나 움직이는 거리를 계산해야되나? 그럼 어떻게 계산하지?라고 고민하던 찰나에 극단적으로 생각할 필요가 있다고 깨달았다! 이미지가 5장이면 괜찮을지 모르지만, 만약 500장 혹은 5000장이라면 복잡한 하드코딩이 될것으로 판단되었다. 어럴꺼면 이미지를 고정시키는게 좋지 않을까..라고 하루를 고민하고 구글링을 시작했다.
유래카!!!! 내가 생각했던 구조와 방식이 맞았다! 정말 울뻔했다😭
고민하면서 이 길은 내 길이 아닌가..고민했었는데, 방법을 몰랐을뿐이었다! 이를 계기로 고민하는 시간을 즐길 수 있는 개발자로 한 발자국 전진할 수 있었다🏃🏻
✔️ '팀의 텐션' 을 올리기 위해 노력했다!
각자의 분야만 공부하다 함께 프로젝트를 하는 것은 첫 경험이었다. 때문에 공동의 컨벤션을 사전 회의를 걸쳐 설정했다. 또한, 데이터가 어떤 형식으로 넘어오는지, 키 값을 어떻게 지정할 것인지 등 백엔드와 중요한 내용을 적극적으로 소통했다. 빠르고 즉각적인 공유로 막힘없이 빠르고 정확하게 진행할 수 있었다. 덕분에 우리팀은 가장 빠르게 프로젝트를 끝낼 수 있었고, 추가 옵션까지 진행할 수 있었다.
하지만 서로 다른 인생을 살다가 처음 만난 사람들끼리 얼마나 합이 잘 맞을 수 있겠는가? 게다가 팀원 1명이 중도 하차 했다.(갑자기 잠수🤷🏻)
나는 이전 회사에서 주임부터 팀장까지 경험했기에 알고 있다. 생각없이 뱉는 말 한마디가 분명 누군가에게 상처가 될 수 있고, 그것이 얼마나 큰 파장을 일으키는지. 때문에 예민하거나 힘들어보이는 팀원에게 질책보다는 격려를 하며 팀의 번아웃을 최대한 막으려고 고민하고 노력했다! 프로젝트에서 팀장은 아니었지만 "나" 잘했다..🧏🏻♂️
🔥 개선하고 싶은 점
✔️ 질.문을 너무 많이 했다.
2주도 안되는 짧은 시간동안 최대한의 퀄리티를 구현하는데 집중했다. 욕심은 많지만 나의 역량은 한없이 부족했다. 12시간 이상 코딩을 하다보니 꿈에서 코딩을 했다..👾
구글링으로 스스로 이해하고 정리하며 구현하고 싶었지만, 시간상 불가능했다. 어쩔수없이 잘하는 팀원과 멘토님에게 도움을 많이 받았다. 처음부터 잘하는 사람이 얼마나 있겠는가? 새로운 지식을 나의 것으로 만들면 된다! 물론 처음에는 내가 이렇게 바보인가라는 생각에 자괴감이 들곤 했지만, 속으로 오히려 좋아! 라고 외치며 성장의 발판삼아 더 노력했다!
✔️ 멘.탈 바사삭.
고추 바사삭 마냥 나의 멘탈도 바사삭. 프로젝트가 끝날 때 쯤 나도 모르게 번아웃이 왔다. 다행히 목표를 달성하고 마무리 단계였지만, 마무리가 쉽지 않았던것이 사실이다. 그래서 바로 헬스장으로 뛰어갔다. 주기적은 운동은 필수! 역시 스트레스에 운동이 최고🏋🏻
🏃🏻 팀 프로젝트 후기
✔️ 아프니까 성장했다.
개발자의 성장은 아픔에 비례한다는 것을 배웠다. 하지만 좋은 팀원들 덕분에 그 아픔을 즐기며 성장할 수 있었고, 함께 일하고 싶은 개발자가 어떤 의미인지 조금은 깨달은 시간이었다.
함께 일하고 싶은 개발자가 되기 위해서 나의 장점은 더욱 살리고 단점은 보완할 수 있는 사람으로 성장하고 있음에 스스로 칭찬하고 싶다.
