Follow Work/SpringbootBoard 54

[API] 카카오maps API 목록으로 표출하기 오류

Kakao maps API 오류잡기 ↓ 카카오맵 API 사용 설명 링크 ↓ https://rebornbb.tistory.com/entry/API-%EC%B9%B4%EC%B9%B4%EC%98%A4maps-API-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 카카오maps API 샘플 사용 중 (https://apis.map.kakao.com/web/sample/keywordList/) 키워드로 장소검색하고 목록으로 표출하기 에서 지도는 출력이 되나, 목록만 출력되지않는 오류가 발생했다. 동일한 코드임에도데스크탑에서는 잘되는 API 라이브러리 서비스가 노트북에서만 출력이 되지않으니 이해가 되지않았다 우선 크롬 개발자도구에서 콘솔에러를 확인했다. 아래와 같은 에러가 떴다. Access to..

[API] 카카오maps API 사용하기

Kakao maps API 카카오maps API는 간략하고 친절한 설명 문서로 접근하기 편했다. 해당 게시글은 웹으로 사용 시 카카오maps API 사용방법을 정리하였다. 1. 카카오maps API 홈페이지접속 https://apis.map.kakao.com/ 로그인 후 상단 오른쪽에 APP KEY 발급 클릭 2.애플리케이션 추가하기 앱이름, 사업자명을 입력해준 후 저장 애플리케이션 목록에 새롭게 생성된 것을 확인할수있다. 3.애플리케이션 플랫폼 설정하기 애플리케이션이 추가된 것을 클릭 > 플랫폼 > 플랫폼설정하기 웹 > 웹플랫폼등록 아직은 도메인이 없으니 http://localhost:8080/ 을 입력해주었다. 4.샘플 파일 사용하기 https://apis.map.kakao.com/web/sample..

[API] openweathermap API를 통해 현재 날씨 출력하기

openweathermap API 참고 유튜브영상 : https://www.youtube.com/watch?v=QxEZCSfUrzs openweathermap API에서 Free로 사용할수있는 것은 한정되어있다. 아래는 사용가능한 것을 알려주는 표이다. 1.openweathermap API 사이트 접속 후 가입 API사이트 : https://openweathermap.org/ Сurrent weather and forecast - OpenWeatherMap Access current weather data for any location on Earth including over 200,000 cities! The data is frequently updated based on the global and ..

[HTML CSS JS] 자동 카드 슬라이더 만들기

Auto scroll Card Slider - HTML CSS vanilla JS codepen link: https://codepen.io/bongcasso01/pen/xxjbQJG See the Pen weather card slider by rebornbb (@bongcasso01) on CodePen. html ❮ 현재날씨 강원도 현재기온: 최저기온: 최대기온: 경기도 현재기온: 최저기온: 최대기온: 충청북도 현재기온: 최저기온: 최대기온: 충청남도 현재기온: 최저기온: 최대기온: 전라북도 현재기온: 최저기온: 최대기온: 전라남도 현재기온: 최저기온: 최대기온: 경상북도 현재기온: 최저기온: 최대기온: 경상남도 현재기온: 최저기온: 최대기온: 제주 현재기온: 최저기온: 최대기온: ❯ /*-----..

[HTML CSS JS] 자동 스크롤 카드 슬라이더 만들기

Auto scroll Card Slider - HTML CSS vanilla JS codepen link: https://codepen.io/bongcasso01/pen/zYjxamJ See the Pen auto card slider vanilla js css by rebornbb (@bongcasso01) on CodePen. html number 1 number 2 number 3 number 4 number 5 number 6 css .TeamPic { border-radius: 50%; width: 60%; } .FlipCardcontainer { margin-top: 5%; width: 100%; height: 100%; display: flex; justify-content: center; ..

[HTML CSS] 플립 카드 만들기

Hover Flip Card - HTML CSS codepen link: https://codepen.io/bongcasso01/pen/MWGYXXr See the Pen hover flip card vanilla css by rebornbb (@bongcasso01) on CodePen. html Earth Keeper 지키는 사람들 우리는 자연을 지키는 모든 이들을 위한 사이트입니다. 개인의 이익만이 아닌 더 나아가 공공의 미래를 위한 아름다운 여러분들의 선행들을 우리는 도우며 함께합니다! css .flip-card { background-color: transparent; border: none; width: 300px; height: 220px; perspective: 1000px; /* pers..

[Springboot] 게시글 파일 업로드 -1 [37]

SpringBoot · intelliJ · OracleDB · Thymeleaf 1. Question 엔티티에 column 추가하기 Question.java private String filepath;/*파일저장경로*/ private String filename;/*파일이름*/ 2.QuestionService에서 create 메서드 수정하기 public void create(String subject, String content, SiteUser user, String category, MultipartFile file) throws Exception{ String projectPath = System.getProperty("user.dir") + "\\\\src\\\\main\\\\resources\\..

[Springboot] 회원 정보 수정하기(닉네임,이메일) [36]

SpringBoot · intelliJ · OracleDB · Thymeleaf 1. UserModifyForm 엔티티 작성 회원가입을 해줬을 때 만들어줬던 UserCreateForm 방식과 같이 UserModifyForm.java 를 작성 UserModifyForm.java package com.gosari.repick_project.user; import lombok.Getter; import lombok.Setter; import javax.validation.constraints.Email; import javax.validation.constraints.NotEmpty; @Getter @Setter public class UserModifyForm { @NotEmpty(message = "수정할..

[API] 네이버지도 API에 현재 위치 표시 [35]

NAVER MAPS API 웹에 네이버 지도 API 추가하기 참고 사이트 링크 : https://navermaps.github.io/maps.js/docs/tutorial-6-map-geolocation.example.html NAVER Maps API v3 NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다. navermaps.github.io 1. script 에 코드 추가 2.위치권한을 허용해주어야 현재위치를 확인 할 수 있다.