Project Detail

프로젝트 상세내용 화면입니다.뒤로가기

산책어때

내가 원하는 지역의 산책로를 지도에 표시해 주는 사이트. 그 지역의 리뷰나 평점들도 함께 확인할 수 있는 사이트

사이트 링크 바로가기(서비스 종료)

깃허브 바로가기

작업기간 : 2023-11-03 ~ 2023-11-17 (2주)

React

Redux Toolkit

styled-components

json-server

axios

lodash

pupperteer

react-toastify

express

프로젝트 소개
프로젝트 주소
https://outsoursing-project-8ue3.vercel.app/
팀 프로젝트
참여인원 : 프론트엔드 4명
담당 파트
Kakao Map API (맵, 현재위치, 마커 및 클러스터러 사용)
지도 사용성 향상 - 지도 정보(줌레벨, 좌표)를 세션 스토리지로 저장
페이지 이동 후 다시 지도를 보더라도 이전 장소를 이어 볼 수 있도록 구현
현재 위치를 유저에게 알림 → 지도만 보았을 때 부족한 정보인 주소 저장
크롤링 작업 nodejs로 백엔드 서버 구축하여 작업
puppeteer 사용 → 눈에 보이지 않는 브라우져(headLess browser)를 띄운 후 브라우저에 렌더링된 값을 가져와 크롤링 하는 방식이 때문에 동적페이지를 크롤링하는데 많이 쓰임
express 서버 구축 → puppeteer가 node.js 에서 작동하기 때문에 크를링한 정보를 클라이인트에 response로 보내주어야 한다. 클라이인트에서 get요청이 들어오면 크롤링 데이터를 reponce로 보내주는 express서버를 구축
트러블슈팅
크롤링 작업
이슈1 React에서는 프론트 기능만으로는 크롤링 불가
해결1 nodejs로 백엔드 서버 구축하여 작업
이슈2 크롤링 서버를 aws Ec2로 배포시 백엔드 작업이 된 부분이기에 따로 서버 배포가 필요했는데, aws 서버 배포시 배포가 성공해도 얼마 지나면 서버가 터지는 현상 발생
해결2 서버 배포가 현재 프론트 작업에서 주요 작업이 아니기에 server 폴더를 따로 구축하여 fontend와 backend를 폴더별 따로 구조화해서 frontend 쪽에서 server 폴더를 바라보게 작업