Develop/React6 붕어빵 프로젝트 업데이트 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. 지도에 붕어빵 마커를 누르면 해당 가게의 정보 제공3. 현재 위치를 실시간으로 업데이트 하는 내 위치 정보 제공4. 지도 중심을 내 위치로 이동시켜 주는 아이콘 제공5. 가게 이름, 좌표, 메뉴, 가게 사진, 기타 정보등을 테이블에 저장할 수 있 기능 제공(웹으로 서비스하고 돌아다니면서 저장할 예정) 일단은 이 정도로 구상해놨다.아직 가게를 눌렀을 때 어떤 식으로 사용자들한테 정보를 제공할지는 더 고민해봐야겠다. 프로젝트 시작하기 전에 왜 리액트를 쓰는 건지, 리액트가 어떤 부분에서 좋은건지 알고 쓰고 싶어서 찾아봤다. 🪐리액트? 1️⃣ 컴포넌트 기반 아키텍쳐리액트는 각각.. 2024. 12. 13. 붕어빵 지도 만들기! 학원에서 1차 프로젝트로 리액트를 배웠지만 너무 부족한 것 같아서 더 공부해보고 싶었다.2차 3차 프로젝트를 진행하면서 지도 API와 공공데이터 API를 많이 사용했는데, 이걸 리액트로 해보고 싶었다. 그동안 진행했던 프로젝트에서는 지도를 이용해서 해당 지도에 마커를 찍고, 마커를 클릭하면 정보가 담긴 팝업이 열리게 만들었는데 그걸 응용해서 지도 위에 붕어빵 가게를 마커로 띄우고, 해당 마커를 클릭하면 그 가게에 대한 정보가 보이게 하고 싶었다.이걸 리액트를 사용해서 구현해보는게 이번 프로젝트 목표! 붕어빵 가게에 대한 공공데이터 같은건 없으니까 데이터는 내가 직접 돌아다니면서 얻기! 개발 환경은React + Vite, Springboot, Java, JavaScript, tomcat, MySQL로 진행.. 2024. 12. 12. 이전 1 다음
