프론트엔드 개발 포트폴리오 | 팝업스토어 안내 서비스
내일배움캠프 4기 웹 개발 과정 React 트랙 수료생 최종 프로젝트 '팝콘'을 소개합니다.
Sep 04, 2023
POPCORN - 전국 팝업스토어 모음
- GitHub :
- web : popcorn-web
⚙️ 아키텍쳐
📒 기술적 의사결정 (아키텍쳐 도입 배경)
React Router Dom
- 리액트 라우터 돔 사용 이유
- 리치 라우터 (reach-router), Next.js 등 여러가지가 있지만 리액트 라우터 돔(react-router-dom)은 클라이언트 사이드에서 이루어지는 라우팅을 간단하게 구현할 수 있도록 해준다.
- 페이지를 이동하면서 필요한 데이터를 전달해 줄 수 있어 react-qurey로 받아온 데이터를 다른 홈페이지에서 서버통신을 하지 않고 사용할 수 있다.
React Query
- 리액트 쿼리 사용 이유
- 동일한 데이터에 반복해서 접근해야 하거나 많은 연산이 필요할 때, 결과를 빠르게 이용하고자 성능이 좋은 혹은 가까운 곳에 저장하는 것을 캐싱이라고 한다.
- CPU에 캐시메모리를 둠으로써 캐시 메모리에 나중에 재사용할 가능성이 높을 것 같은 데이터의 복사본을 저장해두고, CPU 가 요청하는 데이터들을 바로바로 전달할 수 있도록 했다.
Recoil
- 리코일 선택 이유
- 사용이 쉽다.
- 동적 데이터를 만들 수 있다.
- 비동기 처리를 기반으로 작성되어 동시성 모드를 제공, Redux와 같이 다른 비동기 처리 라이브러리에 의존할 필요가 없다.
- atom -> selector를 거쳐 컴포넌트로 전달되는 하나의 data-flow를 가지고 있어, 복잡하지 않은 상태 구조를 가지고 있다.
- atom과 selector만 알고도 어느정도 구현이 가능하기 때문에 러닝커브가 비교적 낮다고 할 수 있다.
- store와 같은 외부 요인이 아닌 React 내부의 상태를 활용하고 context API를 통해 구현되어 있기 때문에 더 리액트에 가까운 라이브러리라고 할 수 있다.
AXIOS
- 두 개의 then() 호출을 갖거나, 객체를 문자열로 변환한 뒤 body에 할당하는 fetch() 보다 사용하기 편함
- fetch()는 error 처리를 할 때 네트워크 장애가 발생한 경우에만 promise를 거부하기 때문에 then 절에서 수동으로 에러처리를 해야하는 불편함이 있음
TypeScript
- 타입스크립트 사용 이유
- 타입 지정으로 오류를 줄일 수 있다.
🖥️ 핵심기능
메인 페이지
- 키워드 검색 및 카테고리별 검색
- 카테고리별 팝업스토어 목록
팝업스토어 검색
- 키워드 검색 및 진행중인 날짜, 팝업 기간, 위치, 제품 카테고리, 기타 카테고리로 필터링이 가능합니다.
- 연관 검색결과에 따른 스토어들을 캘린더로 조회
마스터 페이지
- 정보 오류, 수정 제보 목록 조회 (완료를 눌러 사용자에게 완료되었음을 알림)
- 신규 팝업스토어 제보 목록 조회
- 신규 팝업스토어 글쓰기
- 팝업스토어 정보 수정
Map
- 팝업스토어 표시
- 키워드 검색
- 해당 위치 날씨, 기온
- 주변 음식점, 카페 추천
💥 트러블슈팅
배포
- heroku 배포 에러
- heroku logs --tail을 활용하여 에러 메세지 확인
- Procfile안에 server.ts였는데 아무래도 Typescript도 컴파일 후에 js로 변환이 되서 그런지 js로 변경해 배포가 안된 에러 해결
- 배포 후 데이터를 불러오지 못하는 에러
- package.json에서 실행 명령어가 적힌 scrips 코드를 로컬 환경 명령어에서 노드 환경 명령어로 코드를 변경하여 해결
팝업스토어 주변 데이터 불러오기
- 팝업스토어 위치 기반으로 주변 식당과 카페를 보여줘야 하는데 데이터가 없음
- 있어도 용량이 너무 커서 불러오는데 어려움이 있음
- 해결책 1 - 크롤링
- 해결책 2 - 카카오 Map API 주변 키워드 검색 기능
- 해결 - 프로젝트 시간 관계 및 법적으로 문제가 될 수 있는 크롤링이 아닌 해결책 2로 해결
- 팝업스토어와 관련없이 필터링 되지 않은 키워드 데이터가 받아와짐
- 팝업스토어의 이름이나 주소와 관련된 검색어가 아니면 return하여 데이터를 불러오기전에 코드를 종료
- 받아온 데이터에 이미지가 없는 문제점
- 카카오 이미지 검색 API를 사용하여 키워드로 받아온 데이터를 이용해 이미지를 받아와 해결
LazyLoading
- Map 페이지에서 팝업스토어의 모든 이미지를 사용
- 화면에 비춰질 때 이미지를 불러오게 하는 LazyLoading 기능을 활용하여 페이지 로드시 속도 개선
- 66 requests ⇒ 43 requests
- 30.5MB resources ⇒ 24.2MB resources
- Finish: 3.27s ⇒ Finish 880ms
- DOMContentLoaded: 2.32s ⇒ DOMContentLoaded: 262ms
- Load: 2.39s ⇒ Load: 322ms
👥 팀원
이름 | 깃허브 | 블로그 주소 | 이메일 |
FE 최희라 | heera7722@gmail.com | ||
FE 한재창 | abcwockd95@gmail.com | ||
FE 한지은 | beastje1016@gmail.com | ||
FE 김유안 | mini5621@gmail.com | ||
DE 최현실 | ㅤ | hschoi1995@gmail.com |
Share article
Subscribe to our newsletter