Develop/React13 붕어빵 프로젝트 업데이트 v0.3 🎯v0.3 업데이트 내용 웹 사이트 주소 : https://www.ys2ys2.com/bbangmap/ 💡가게 정보 스타일 변경 ✅ 기존 가게 정보 표시 방식을 보다 직관적이고 사용자 친화적으로 개선했습니다.✅ 정보 수정 제안, 즐겨찾기, 거리뷰, 공유하기, 길 찾기 기능은 개발 예정이며 추후 업데이트를 통해 제공될 예정입니다.✅ 소개 페이지를 추가했습니다. 💡 반응형 CSS ✅ 반응형 디자인을 적용하여 모바일 기기에서도 최적의 사용자 경험을 제공하도록 개선되었습니다. 📒업데이트 공부하기 가게 정보를 담은 jsx를 따로 컴포넌트화 해서 관리하게 했다.여기서 ReactDOM.createRoot를 사용했는데 ReactDOM.createRoot는 리액트 18에서 도입된 새로운 랜더링.. 2024. 12. 22. 붕어빵 프로젝트 업데이트 v0.2 🎯v0.2 업데이트 내용 웹 사이트 주소 : https://www.ys2ys2.com/bbangmap/ 💡마커 로고 업데이트 ✅ 지도에 더 많은 로고가 업데이트되었습니다. 군고구마, 호떡 등이 추가되었습니다. 💡정보 저장 시 구분값 추가 ✅ 어떤 간식이 메인인지 마커로 구별할 수 있게 각 가게마다 gubun 값을 추가했습니다. ✅ 간식 가게 정보 저장 시 구분값을 선택할 수 있게 하였습니다. 💡지번 주소 업데이트 ✅ 현재 위치에서 도로명 주소가 없을 시 지번주소로 대체해서 저장할 수 있게 수정했습니다. 📒업데이트 공부하기 ✏️gubun 컬럼 추가 가게 정보 수집하려고 돌아다니면서 느낀건 붕어빵 말고도 호떡이나 군고구마 등 여러가지를 파는 가게들도 많이 보였다.이런.. 2024. 12. 18. 붕어빵 프로젝트 업데이트 v0.1 개인 프로젝트 개발 일지를 정리해서 올리려고 하는데 항상 글 쓸때마다 제목 정하기가 너무 어렵다!!그래서 앞으로 버전 관리처럼 올려보려고 한다. 큰 업데이트가 있을때는 v1, v2, v3으로작은 업데이트는 v0.1 v0.2 v0.3으로오늘의 업데이트는 v0.1 ! 🎯v0.1 업데이트 내용 웹 사이트 주소 : https://www.ys2ys2.com/bbangmap/ 💡입력 폼 업데이트 ✅기존에 항상 보여지고 있던 입력 폼을 사용자가 직접 열고 닫을 수 있게 변경하였습니다.✅사용자 경험 개선을 위해 X좌표와 Y좌표를 카카오 맵 API의 window.kakao.maps.services.Geocoder의 coord2Address를 이용해 도로명 주소로 표기하였습니다.(메서드 참고 : https://.. 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 다음
