awspspgh 님의 블로그

최종 프로젝트(13) - AWS 풀스택 과정 102일차

에러 고치기 GetMapping("/") -> getmapping이라서 redirect를 붙여야하고 "/"를 썼기에 "/index"가 아닌 "/"를 사용해야 함 @GetMapping("/") public String showWeatherForm(@RequestParam(name = "address", required = false) String address, Model model, Principal principal) { @PostMapping("/register") public String register(@ModelAttribute BoardVO boardVO, Principal principal){ log.info("boardVO >>> {} ", boardVO); ..

목차1.로그인 상태에 따른 주소, 날씨 출력하기 1. 로그인 상태에 따른 주소, 날씨 출력하기▷ 출력

목차1.db의 주소를 지도로 출력하기 1. db의 주소를 지도로 출력하기▷ 출력 ▣ 참고 자료 출처◈ 주소로 장소 검색https://apis.map.kakao.com/web/sample/addr2coord/  ◈ model의 변수 -> javascripthttps://velog.io/@gimminjae/Spring-Boot-model%EB%A1%9C-%EB%84%98%EA%B2%A8%EC%A4%80-%EB%B3%80%EC%88%98-javascript%EC%97%90%EC%84%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 Spring Boot - model로 넘겨준 변수 javascript에서 사용하기Spring Boot를 사용하는 사람이라면, 스프링 컨트롤러에서 model로 ..

목차1.db 연동 1. db 연동db에 있는 user의 도로명 주소 가져오기- 날씨 API와 도로명 주소 가져오는 Controller가 각각 나눠져 있어서 index.html에 동시에 출력하기 매우매우 어려웠다. 하루종일을 한 결과 Controller를 하나로 합치기로 나 자신과 합의를 보기로 했다 ▷ 출력

목차1.swiper 1. swiper▷ 출력 ▣ 참고 자료 출처https://swiperjs.com/swiper-api Swiper - The Most Modern Mobile Touch SliderSwiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.swiperjs.com https://ktsmemo.cafe24.com/s/SwiperJS/777 Swiper 이미지 동적 로딩 (lazy)자바스크립트 스와이퍼 예제 모음ktsmemo.cafe24.com https://jineecode.tistory.com/77 swiper-button-next , pr..

목차1.날씨 아이콘 1. 날씨 아이콘▣ OpenWeather APIOpenWeather API에서 날씨 아이콘을 출력하려면 weather에서 날씨에 따른 아이콘 코드를 가져와야 함... "weather": [ { "id": 500, "main":"Rain", "description": "light rain", "icon": "10n" } ],... icon의 코드는 weather 배열에 있는 첫 번째 객체에 있음 아래의 OpenWeather API URL을 통해서 이미지를 화면에 출력할 수 있음https://openweathermap.org/img/wn/10d@2x.png URL을 해석하자면- https://openweathermap.org/img/wn/: OpenWeatherMap의..

목차1.새로고침 시 날씨 API null2.무한 새로고침3.href = "/" 클릭 시 null 1. 새로고침 시 날씨 API null 처음에 출력되는 메인 페이지는 @PostMapping("/")가 아닌 @GetMapping("/")을 사용해야 함(@PostMapping("/")은 href = " " or href = "/"를 이용한 새로고침을 하면 계속 address 정보를 가져오지 못 함) 또한 다른 페이지에서 다시 메인 페이지로 돌아가기 위해서는 redirect:/를 사용해야 함!=> PostMapping만 사용하면 새로고침을 할 때마다 날씨 API의 정보를 못 가져올 수 있기에 GetMapping 또는 비동기 방식으로 하기 ▣ 문제 상황◈ WeatherController.javapackage c..

▣ Figma◈ main

목차1.지도 & 날씨 연동2.properties 1. 지도 & 날씨 연동▶ 코드◈ index.html 주변 인기 장소 찾기--> 위치를 찾지 못했습니다 Geolocation API로 현재 위치 가져오기--> -->-->입력-->-->  ◈ currentLocationMap.js let map; let geocoder; function initializeMap() { // Geocoder 객체 생성 geocoder = new kakao.maps.services.Geocoder(); // 페이지 로..

목차1.현재 위치2.날씨 1. 현재 위치▣ Geolocation API: Geolocation API는 웹 브라우저에서 사용자의 위치 정보를 가져올 수 있는 표준 API이다.GPS, Wi-Fi, 셀룰러 네트워크, IP 주소 등의 데이터를 활용하여 사용자의 현재 위치를 확인한다. ◈ 특징- 사용자 동의 필수: 브라우저는 사용자의 위치 정보를 수집하기 전 동의를 요구한다.- 다양한 위치 수집 소스: GPS, Wi-Fi, 셀룰러 네트워크, IP 주소 등 여러 소스로부터 정보를 수집한다.- 높은 정확도 지원: enableHighAccuracy 옵션을 통해 정확도를 조정할 수 있다.- 브라우저 지원: 대부분의 현대 브라우저에서 지원되며, 모바일에서도 동작한다. ◈ Geolocation API 사용 방법: 주로 두..