Develop/React8 붕어빵 프로젝트 업데이트 v1.0 🎯v1.0 업데이트 내용 기능적인 부분들이 추가돼서 버전을 업데이트 했습니다. 💡거리뷰 기능 추가 ✅ 해당 가게에 대한 거리뷰 기능이 추가되었습니다. 💡길 찾기 기능 추가 ✅ 해당 가게까지의 길 찾기 기능이 추가되었습니다. 길찾기 기능은 다양한 환경(웹 및 모바일)에서 작동되게 구현했습니다.자동차, 버스, 도보, 자전거 등 여러 운송수단 중 원하는 방식을 선택하여 경로를 확인할 수 있습니다. 📒업데이트 공부하기 ❗ 거리뷰거리뷰 기능을 추가했다. DB에 저장된 x,y좌표를 가지고 해당 좌표에 마커를 그리는 컴포넌트는 bbangmap이다.axios 요청으로 가져온 DB값은 fishstores에 상태가 저장되고, 가져온 값의 좌표를 통해 마커를 찍은 후찍힌 마커를 클릭하면.. 2024. 12. 26. 붕어빵 프로젝트 업데이트 v0.3 🎯v0.3 업데이트 내용 💡가게 정보 스타일 변경 ✅ 기존 가게 정보 표시 방식을 보다 직관적이고 사용자 친화적으로 개선했습니다.✅ 정보 수정 제안, 즐겨찾기, 거리뷰, 공유하기, 길 찾기 기능은 개발 예정이며 추후 업데이트를 통해 제공될 예정입니다.✅ 소개 페이지를 추가했습니다. 💡 반응형 CSS ✅ 반응형 디자인을 적용하여 모바일 기기에서도 최적의 사용자 경험을 제공하도록 개선되었습니다. 📒업데이트 공부하기 가게 정보를 담은 jsx를 따로 컴포넌트화 해서 관리하게 했다.여기서 ReactDOM.createRoot를 사용했는데 ReactDOM.createRoot는 리액트 18에서 도입된 새로운 랜더링 API로, 이전 버전의 ReactDOM.render를 대체한다고 한다. ❗ .. 2024. 12. 22. 붕어빵 프로젝트 업데이트 v0.2 🎯v0.2 업데이트 내용 💡마커 로고 업데이트 ✅ 지도에 더 많은 로고가 업데이트되었습니다. 군고구마, 호떡 등이 추가되었습니다. 💡정보 저장 시 구분값 추가 ✅ 어떤 간식이 메인인지 마커로 구별할 수 있게 각 가게마다 gubun 값을 추가했습니다. ✅ 간식 가게 정보 저장 시 구분값을 선택할 수 있게 하였습니다. 💡지번 주소 업데이트 ✅ 현재 위치에서 도로명 주소가 없을 시 지번주소로 대체해서 저장할 수 있게 수정했습니다. 📒업데이트 공부하기 ✏️gubun 컬럼 추가 가게 정보 수집하려고 돌아다니면서 느낀건 붕어빵 말고도 호떡이나 군고구마 등 여러가지를 파는 가게들도 많이 보였다.이런 가게들도 따로 구분으로 분류하고 구분값에 따라 지도 마커 로고를 다르게 설정.. 2024. 12. 18. 붕어빵 프로젝트 업데이트 v0.1 개인 프로젝트 개발 일지를 정리해서 올리려고 하는데 항상 글 쓸때마다 제목 정하기가 너무 어렵다!!그래서 앞으로 버전 관리처럼 올려보려고 한다. 큰 업데이트가 있을때는 v1, v2, v3으로작은 업데이트는 v0.1 v0.2 v0.3으로오늘의 업데이트는 v0.1 ! 🎯v0.1 업데이트 내용 💡입력 폼 업데이트 ✅기존에 항상 보여지고 있던 입력 폼을 사용자가 직접 열고 닫을 수 있게 변경하였습니다.✅사용자 경험 개선을 위해 X좌표와 Y좌표를 카카오 맵 API의 window.kakao.maps.services.Geocoder의 coord2Address를 이용해 도로명 주소로 표기하였습니다.(메서드 참고 : https://apis.map.kakao.com/web/sample/coord2addr/)✅.. 2024. 12. 17. 붕어빵 지도 프로젝트 도메인으로 배포하기 (2) 로컬 환경에서 어느 정도 프론트랑 백엔드 만들어놨으니,이걸 외부 도메인으로 배포해서 직접 돌아다니면서 DB에 저장시켜야 한다. 그러기 위해선 외부 도메인을 사용하기 위해 서버로 배포를 해야 하는데지금 기존에 팀 프로젝트로 진행했던 2차, 3차 프로젝트가 외부 tomcat으로 배포 중이어서 거기다가 똑같이 배포하면 되지 않을까? 하고 그렇게 해봤다. 결론부터 말하면 실패! 지금 프로젝트 구성이프론트는 vscode에서 react를 사용백엔드는 sts3에서 spring boot로 하기 때문에 외부 tomcat으로 배포가 안된다. 2차 프로젝트나 3차 프로젝트는 최초 프로젝트 설정 때부터 Spring Legacy Project의 Spring MVC Project로 시작했기 때문에 프론트와 백엔드가 하나의 프로젝.. 2024. 12. 15. 붕어빵 지도 프론트 + 백엔드 (1) 환경설정이 다 됐으니 기본적인 프론트 작업 시작!기본적인 프론트 + 백엔드를 다 해놓고 웹으로 배포하면서 핸드폰으로 돌아다니면서 데이터를 저장하려고 한다. 그렇다면 오늘 목표는 1. 기본 프론트 잡기2. 가게 정보 백엔드 로직 짜기3. 저장된 DB 가져오는 로직 짜기 로 정해놓고 시작! 1️⃣ 프론트 (React + Vite) 간단한 헤더를 추가하고 그 밑에 지도가 배치되게 했다.지도가 메인인 상태에서 내 위치 찾기 버튼, 데이터 저장 부분으로 나눴다.일단 화면 좌측 아래에 내 위치 버튼을 뒀다.이번에도 지도는 카카오 지도 사용!프로젝트에 .env라는 환경 변수 파일을 만들어서 거기서 kakaomap key를 추가했다. 🎯여기서 알게 된 포인트!CRA로만 리액트 프로젝트를 설정할땐 REACT_A.. 2024. 12. 14. 이전 1 2 다음
