choiyongwon / at

나만의 지도를 만들고 공유할 수 있는 웹 서비스입니다.

최용원 ChoiYongWon

👨‍💻 Frontend Engineer

RESUME | TIL BLOG

Introduce

• 사이드 프로젝트를 통해 아이디어를 실체화하는 것을 좋아합니다.
• 성장을 위해 점진적인 과부하를 지속적으로 거는 것을 선호합니다.
• 이론에 과하게 집착하기보다는 최소한의 이론을 바탕으로 경험을 통해 학습하는것을 선호합니다.

On Service

service	description
a-spot-thur.app	위치를 기반한 오프라인 취미활동에 재미를 더하고자 자신만의 장소를 기록하고 공유할 수 있는 서비스
jyj-map.vercel.app	신세계 정용진 부회장의 맛집 지도
choiyongwon.github.io/GuitarSheet	기타 악보 제작 웹 서비스

at's Issues

유저는 자신의 AT(장소)을 추가할 수 있다.

• router 추가
• 사진 추가
  • UI
  • API
• 카테고리 추가
  • UI
  • API
• 주소 추가
  • UI
  • API
• 설명 추가
  • UI
  • API
• 지도 추가
  • API
  • UI

구글 애널리틱스 적용

router 렌더링 느림

prefetching이 잘안되는거 같음

메타 태그 추가

로그인시 오류

로그인할 때 간헐적으로 오류남

옆에서 지켜본 결과 연속으로 클릭시 나는 오류로 추정

유저는 최초 로그인 후 닉네임을 정할 수 있다.

• 온보딩 UI
  • Input 커스텀
    • 닉네임 중복 여부 자동 체크 useDebounce
    • 중복 결과 표시 UI
    • 영어와 숫자만 입력
    • 로그아웃 추가
• API
  • 닉네임 중복 여부
  • 닉네임 규칙 검사
• 스키마 user unique 설정

AT 상세 페이지

• 이미지
• 상세 정보
• 스켈레톤 (이미지 최적화는 다음에)
• 삭제
• 수정
• 신고
• Modal UI
• Toast UI
• 조회수

Modal 버그

이벤트 버블링으로 인한 닫힘

닉네임 변경시 디바이스간 세션 동기화 이슈

디바이스 A, B에 동시에 로그인이 되어있다고 가정.
A에서 at_id를 변경하고 B에서 확인 시 바꾸기 이전 닉네임으로 세션이 설정되어있음.

세션을 변경할 수 있는 경우

1. 로그인 할때
2. 회원가입 할때
3. client에서 수동적으로
4. 매 요청마다 (비효율적)

생각좀 해볼것

사실

매 요청을 at_id 기준으로 처리하는게 아니라 id나 email (변경되지 않는 요소)로 처리하면 되긴함.
그리고 사실 B에서 로그아웃하고 로그인하면 해결되긴함.

유저는 url 별로 다른 유저의 지도를 조회할 수 있다.

• 공통
  • 지도 UI
  • 인디케이터 UI
• 메인 페이지 (통합 지도)
  • API
• dynamic url 처리
  • /{사용자 ID}
    • /profile, /onboard 같은 중복 라우터 닉으로 못정하게 예외처리
    • url 마다 사용자 프로필 불러오기
    • 사용자가 만든 모든 지도 반환
  • /{사용자 ID}/{지도 명}
    • 사용자의 지도명에 해당하는 모든 spot 갯수 불러오기

자잘한 기능 3

• 네이버 지도 검색어 변경 (시 구 동 + 가게 이름)
• at_id에 지역명이 들어가있을때 redirect
• 사용자의 지도 방문 후 뒤로가기 시 메뉴 안보임 수정
• 수정 페이지 이미지 새로 추가 시 안보이는 오류
• 로그인 뒤로가기 / 대신 back로 수정
• 이미지 최적화 사진 퀄리티 수정
• 서비스 소개 다른 사람 지도 탐방 추가
• 지도 추가 및 수정 시 카테고리 탭에서 엔터누르면 submit 되는 버그
• gps 실시간 캐시 추가
• 배너 추가
• 카테고리 -> 태그로 명칭 변경 (헷갈림 이슈)
• 지도 & 태그 부가 설명 추가

FAQ 추가하기

• 앱처럼 사용하고 싶어요
• 원하는 주소 검색이 안돼요

신고 오류

• 로그인 안하고 신고하면 오류남

라우터간 이동 애니메이션 추가

• framer-motion 추가

Font 최적화

Variable 폰트 적용해볼까 함

자잘한 기능 + 코드 정리

• 무한 스크롤 로딩 상태
• 스웨거 추가 ( API에 대한 요청과 응답값 타입으로 정리 )
• AT List 검색결과 없을 때 보여주는 UI
• AT 업로드 시 장소 중복될 시 노티
• 이미지 로딩시 로딩 상태 ( 대안이 없음. 좀 더 지켜보는걸로 )
• Query placeholder 추가
• 처음 접속시 뭐하는 사이트인지 소개할만한 요소 고민 (직관적인)
• AT List에 총 몇개의 검색결과가 나왔는지 보여주기
• AT Card에 네이버 지도 버튼 화살표로 대체 고민
• 검색 기준 범위 넓히기 (카테고리, 지도, 유저명, 구 명)
• 디자인 패턴 정리
• 맵 생성시 로딩 아이콘 변경
• INFO 버튼 추가 ( 다른 페이지에서 )
• 업로드 후 캐시 초기화
• AT List 화면에서 뒤로가기 버튼
• PWA 추가
• 에러 처리
  • 커스텀 에러 코드 419
  • 각 query마다 handling code를 인자로 받아서 처리 (의존성 감소, 확장성)
  • interceptor를 통해 공통 에러처리 로직
  • 네트워크 에러처리
• 맵 생성 버튼 가시화
• 주소 추가시 placeholder 변경 (가게명을 입력해주세요
• 카테고리 추가시 엔터로도 추가되게
• SearchBar 제목 누르면 메인으로 이동

S3 요금

POST (AT 등록) : 1000개당 6.2원
저장 용량 : 100GB 당 3444원
데이터 전송 (등록) : 무료
데이터 전송 (불러오기) : CloudFront로 매월 1TB 까지는 무료 ( 이후 GB당 165원 )

현재 위치 기준 기능

자잘한 기능 2

• 지도 최대 4개
• 이미지 최대 10개
• 카카오에서도 탈퇴가 되게끔
• 의존성 최소화 ( 응답속도 개선 )
• cold start 방지 위해 cron 설정 (Pro Plan 필요)
• 공지사항 추가
• 지도 위에 margin 줄이기
• ThirdAddress 추가
• 위치기반 주소 검색
• FAQ 추가
• 개인정보 처리 방침 추가
• 이용약관 추가
• 카카오 토큰 리프레시 추가
• 서비스 소개

닉네임 수정 버그

닉네임 수정 후 세션 업데이트가 안됨

어드민 기능

• 신고 페이지
  • Resolve 되지 않은거 필터링 해서 보여주기
  • 게시글링크, 신고자 정보(이름, 이메일), 피신고자 정보(이름, 이메일), 유저 이름, 신고 날짜, 작성 날짜, 신고 유저,
  • Resolve하면 게시글 삭제
  • 페이지네이션
• 신고 처리 API
  • Resolve 시키는거, 게시글 삭제
• 밴 API
  • 점진적 재제

신고 기능

유저 페이지

• 닉네임 수정
• 회원탈퇴
• 지도 삭제
• 본인이 올린 지도
• 지도 공유하기

UI/UX 개선

• Query 컴포넌트 SearchBar가 focus되었을때만 나오게
• gps 버튼 위치 수정