PromleeBlog
개발
개인학습
sitemap
aboutMe
Menu
개발
개인학습
Map: 2 Zero
1. Intro
Map 2 Zero는 지속가능한 삶을 위한 ESG 서비스 입니다.
서울 내 다양한 지역에서 운영되고 있는
제로 웨이스트 샵
의 위치와 리뷰, 판매 제품 정보, 매장 이용 방법, 다양한 이벤트를 한눈에 확인할 수 있는 플랫폼 입니다.
Stack
Tools
2. Project Detail
개발 기간📅: 2024.01.05 ~ 2024.02.25
Github 🔗:
map2zero-frontend
인원 구성
PM
1 명
디자이너
2 명
프론트엔드
4 명
백엔드
4 명
프론트엔드와 백엔드 개발자, 디자이너, PM으로 구성된 팀으로 진행되었으며
프론트엔드 팀장
으로 참여
Neordinary Demoday 출품 및 실 사용자 100여명 유치
3. My Role - 1
Kakao 로그인 구현 🔗
Kakao에서 지원하는 Rest api 방식의 Oauth 로그인을 구현
1차적으로 서버에 로그인을 하겠다는 요청을 보내 가짜 토큰을 발급받음
사용자가 Kakao 로그인에 성공 시 받은 accessToken과 이전에 가지고 있던 가짜 토큰을 함께 서버로 전송(
CSRF 방지
)
서버에서 받은 로그인 토큰을 이용해 localstorage에 저장하고 로그인
Naver map 활용 데이터 표시 🔗
Naver map Api를 활용하여 매장 상세 정보를 지도에 표시
현재 위치 권한
을 받아 사용자의 위치를 기준으로 가까운 매장을 표시
최적화를 위해 화면에 보이는 매장만 표시하고 이외의 마커는 숨김
줌앤 아웃, 드래그, 클릭 등의 이벤트를 활용해 사용자가 편리하게 매장 정보를 확인할 수 있도록 구현
4. My Role - 2
기타 주요 페이지 구현 및 배포
매장 정보와 리뷰를 확인할 수 있는 페이지 구현 🔗
스와이프 이벤트로 매장의 주요 이미지를 확인 가능하도록 구현
리뷰 작성, 수정, 삭제 기능을 구현
매장 리뷰 열람 시
페이지네이션
제공
점주가 직접 매장 정보를 등록하고 수정할 수 있는 페이지 구현 🔗
매장 판매 제품과 이벤트를 등록, 수정, 삭제 가능하도록 구현
매장 정보 등록 시 Naver map api를 활용한 위치 등록 기능 구현
S3, Cloudfront를 이용한 정적 배포와 CI/CD 파이프라인 구축
커스텀 도메인을 활용하여 Route53등록 및 Cloudfront 배포
Github Actions를 활용하여 배포 브랜치에서 S3로의 자동 Push 설정
관련 UI
관련 UI
5. 결과 및 느낀 점
팀장으로써..
코드 컨벤션 관리, 일정 관리, 소통 등을 주도
개발 규모는 꽤 컸지만 출품까지 개발 기간이 두 달 정도밖에 되지 않았고 디자인 속도 부진 등의 문제가 생겼지만 정교한 역할 분배와 지속적인 소통으로 잘 마무리했음
데모 출품을 하며 자체 QA에서 발견하지 못한 기능적 문제점도 발견하였고 반응형을 목표로 했지만 모든 기기에 대응하지 못했던 부분도 찾았음
소규모 프로젝트의 한계라고 생각하고 다음 기회에는 어떻게 대응해야 할지 생각하게 된 소중한 경험
개발자로써..
프론트엔드 개발자로서의 성장
React, Typescript 를 이용하여 규모 있는 첫 프로젝트를 진행
QA 과정에서 예상치 못한 사용자들의 행동을 발견하고 이에 대응하는 법을 배움
유지 보수를 위한 코딩 방법, 컴포넌트 구조 등을 고민하게 되었음