미술품 경매 웹사이트 Singulart의 웹사이트를 클론 코딩을 해보았다. 찬찬히 돌아보며 회고해보자 ✍🏻
Younggulart (영끌아트)
영혼까지 끌어모아 예술하는 젊은 예술가들을 위한 미술품 경매 웹사이트
📅 프로젝트 기간: 2021.04.26 ~ 2021.05.06
🔜 프론트엔드: 김남선(PM), 이명진, 황재원
🔙 백엔드: 문희원, 서득영
💻 배포 주소
🎥 프로젝트 시연영상
📂 프론트엔드 깃헙
📂 백엔드 깃헙
기술 스택
🔜 프론트엔드: HTML/CSS, Styled Component, JavaScript(ES6+), React, S3, EC2, Github Action
🔙 백엔드: Django, Python, MySQL, S3, RDS, EC2, Docker, Jenkins
주요 기능
(bold는 내가 담당했던 부분들 🤓)
- 카카오 소셜 로그인 / 로그아웃
- Slick 라이브러리를 활용한 메인 페이지 슬라이드와 캐러셀 슬라이드
- 가격, 높이, 넓이 슬라이더 필터링 기능
- 리스트 페이지네이션
- 디테일 페이지에서 가격 선택 후 버튼 누르면 입찰가격과 카카오톡 메세지 전송
- 액자 프레임 선택과 사이즈별 가격변동 모달
- 오프라인 경매 일정 페이지 달력 API, 지도 API
- Intersection Observer API를 활용한 무한스크롤과 로딩바
- AWS EC2, S3, github action을 이용한 배포 및 CI/CD 환경 셋팅
카카오 소셜 로그인 / 로그아웃
실제 사이트는 일반회원, 화가 두 유형으로 회원이 나눠져있었고 소셜로그인 기능도 없었지만 기획단계에서 우리 팀은 일반 회원가입, 일반 로그인을 과감하게 없애고 카카오톡 소셜 로그인 하나로 통합했다!
모달을 통해 소셜로그인을 할 수 있고 로그인에 성공하면 상단의 로그인 버튼이 로그아웃 버튼으로 바뀌게 된다.
오프라인 경매 일정 페이지
원래 내가 맡았던 페이지는 장바구니-결제 쪽이였는데 팀 데일리 미팅을 통해 커머스 성격보다는 경매 사이트인걸 강조하는 쪽이 나을 것 같단 판단하에 기획을 수정하게 되었다. 그래서 실제 사이트에는 없는 카테고리였던 경매일정 카테고리를 추가하게 되었고 그렇다보니 기획+디자인까지 온전히 내가 맡아서 하게 되었다.
페이지의 기능 자체는 backend에서 받아온 데이터를 뿌려주는 기능이 다였기 때문에 내 나름대로 여러가지 라이브러리, API, 기능들을 추가해서 구현해야겠다고 마음먹었다.!
datepicker 달력 라이브러리
날짜를 선택할때마다 쿼리스트링으로 날짜를 전달해줘야했기 때문에 백엔드에서 원하는 형식으로 바꿔서 요청을 보냈다.
const formatDate = date => {
return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
};카카오지도 API
백엔드로부터 x값, y값을 받아서 지도를 뿌려주고 웹사이트의 테마컬러로 커스텀한 마커를 생성해서 지도에 표시해주었다.
Intersection Observer API를 활용한 무한스크롤 기능과 로딩바 구현
무한스크롤은 예전부터 꼭 구현해보고 싶었던 기능이였다. 또 ajax로 해본 경험이 있던 로딩바도 react에서 다시한번 구현해보고싶었다.
이 페이지에서 백엔드로부터 한번 요청을 받을때 많아봤자 데이터가 5개였기 때문에 스크롤이 맨 밑에 갔을때 백에 요청을 다시 보내는 것이 아니라 처음부터 하루의 모든 데이터를 받아놓고 프론트단에서 데이터를 slice해서 보여주는 방식으로 구현하려고 했다.
당연히 처음엔 scroll event로 스크롤이 맨 끝에 닿을 때를 계산해서 스크롤 이벤트를 일으키고 그때마다 원래의 데이터 array에 추가하는 식으로 구현할 생각이였다.
그런데.. 스크롤이 마지막에 머물러있을때 끝도 없이 같은 함수를 호출하는 것이였다..😧
안그래도 오래된 내 맥북의 팬이 갑자기 힘차게 돌기 시작하면서 페이지가 버벅이기 시작했다..ㅎㅎ
이 방법은 아닌 것 같단 생각에 멘토분들께도 여쭤보고 열심히 구글링을 한 결과 Intersection Observer API라는 것을 알아내게 되었다.
간단히 말하자면 타겟이 화면에 노출되었는 지의 여부를 관찰할 수 있는 API다. 처음에 사용법이 굉장히 생소해서 많은 시행착오를 거쳤지만.. (위코드 스택오버플로우에도 처음 글올려보게 된 계기가 되었다..!)
결국 무한스크롤 & 로딩바 기능을 구현할 수 있었다. 👍
이 기능은 이번 프로젝트를 진행하면서 기억에 남는 코드 중 하나이기 때문에 따로 블로깅을 남겼다.
Intersection Observer API를 활용한 무한스크롤
CI/CD 셋팅
1차때는 동현님이 배포까지 해주셨기에 내가 직접 프로젝트 배포를 하지 못했어서 이번엔 내가 꼭 배포까지 해봐야지! 하는 생각을 갖고 있었다.
그냥 AWS EC2로 배포만 하려고 했다..
멘토분과 이야기를 하다가 github action을 통해 자동배포를 할 수 있단 걸 알게됐고 뭣도 모르고 호기롭게 시작했다 (그땐 이렇게 힘들줄이야.. 스택오버플로우에 글을 남기게 된 두번째 계기가 되었다,,)
build과정에서 계속 에러가 났는데 에러코드도 진짜 불친절했다. 😑
이유는 eslint warning 을 안지워서..라는 엄청나게 허무한 이유였지만..ㅎㅎㅎ (eslint warning을 잘 지웁시다)
🔼 계속 실패하다가 처음으로 초록딱지가 붙었을때의 기쁨!🥺✨
이런 엄청나게 복잡한 과정을 거쳐 마스터 브랜치가 업데이트 되면 내 S3 버킷에 프로젝트가 업로드되는 과정까지 완료했다.
🔼 마스터가 업데이트되면 build과정을 거치면서 S3에 프로젝트가 업로드가 된다.✨
업로드된 최신의 프로젝트 파일을 code deploy를 통해 EC2인스턴스로 배포하는 과정은 더 공부한 후에 해볼 예정..
잘했던 점
구글링 후 해결못한 문제는 스택오버플로우를 활용했다.
이번 프로젝트를 진행하면서 처음으로 wecode의 stackoverflow를 이용해보았다. 질문을 올리면서 지금 뭐가 문제인지 되짚어보고 정리할 수 있어서 좋았던 경험!
https://community.wecode.co.kr/t/react-intersection-observer-api/3339/4
https://community.wecode.co.kr/t/aws-ec2-ci-cd-github-action-workflow/3362
아쉬웠던 점
이루지 못한 추가구현 (web socket)
원래 web socket을 통한 1:1 채팅 기능을 구현하고싶었다. 시간이 부족해서 해보진 못했지만 다들 정말 하고 싶었던 채팅기능을 구현하지 못해 아쉬웠다.
🔼 trello back log에 덩그러니 남겨져있는 웹소켓.! 나중에 꼭 구현해봐야지
마무리-!
이번 프로젝트는 코딩 외적으로도 많은 경험을 해볼 수 있던 프로젝트라 더 애착가고 재밌었던 프로젝트였다.
기업협업 일정과 겹쳐 코딩할 수 있는 절대적인 시간이 부족했지만 그 안에서 나름대로 최선을 다해 임했던 것 같다.
여태까지 개발을 하면서 코드 한 줄 한 줄 칠 때마다 정말 쉬운게 하나도 없었는데.. 자동배포를 경험하고 나니까 코드 치는 순간은 정말 행복한 순간이라는 걸 느꼈다. 🥲
난생 처음 PM이라는 직책도 맡게 되었는데 PM의 역할을 제대로 한 것 같지는 않아서 팀원들에게 미안한 마음뿐..
프론트엔드 재원님, 명진님. 백엔드 희원님, 득영님 그래도 여러분들이랑 함께 할 수 있어서 재밌게 마무리할 수 있던 프로젝트였습니다 🥰
.jpg)
.jpg)
.jpg)
.jpg)
마지막으로 발표 ppt에 넣으려고 했으나 너무 자랑같아서 넣지 못했던 종택님의 디엠을 끝으로 찐 마무리!
남멘~👍🏻👍🏻