SpringBoot Port 변경하기 Spring Boot 실행 Spring Boot 실행 시 많은 문구가 올라간다. 그 문구를 자세히 들여다보면 WAS 서버 중에서 Tomcat이라는 문구를 찾을 수 있다. Spring Boot는 Tomcat이 내장으로 들어있어서 별도의 Server 설정 없이 실행할 수 있다는 장점이 있다. Spring Boot 실행 시, 기본 Port는 8080이다. 실행 결과를 확인하기 위해 localhost:8080으로 접속했지만, 내가 원하는 화면은 나오지 않고 엉뚱한 것이 이미 port를 차지한 것을 알 수 있다. 이를 해결하기 위해서는 Spring Boot의 기본 port를 변경할 수밖에 없다. Port 변경 방법 src > resources > application.prop..
Spring Boot 생성하기 Spring Boot 생성 https://start.spring.io/ 스프링 부트를 생성할 때는 보통 start.spring.io를 이용한다. 이클립스나 인텔리제이 등 많은 IDE로도 생성이 가능하지만 대부분 이 방법을 선호하는 듯 보였다. 이 사이트에 접속하면 바로 만드는 창이 출력된다. Project는 Maven Project 방식과 Gradele Project로 나뉜다. Maven은 Spring의 초창기 때부터 자주 이용한 방식이며, 요즘도 흔히 검색되는. xml 방식을 주로 사용된다. 그러나 최근 Java는 xml을 멀리하는 추세로 이에 대항하기 위해 Gradle Project 방식이 추가되었다고 한다. 그래서 최근 Project 생성 시엔, Gradle방식을 많이..
[Spring Error] Loading XML bean definitions from class path resource [org/springframework/jdbc/support/sql-error-codes.xml] 제목 Error 코드 sql-error-codes.xml 이 발생되었습니다. 이 Error Code를 풀기 위해서 제 세 시간을 버렸습니다. Error Log를 정말 잘못 설정해서, 어디서 Error 뜬 건지 많은 헛고생을 하게 되었는데요. SQL 코드도 간단한 거이기 때문에 대체 왜 Error가 나오나 생각했습니다. 앞의 $과 #을 제가 착각해서 sql Error가 발 새하게 되었더라고요. $은 받은 값 그대로 오기 때문에 String, Int타입만 맞는다면 사용하시는 데에는 문제가 ..
[JavaScript] JavaScript 활용하기 - 기초(3) 이전 글 JavaScript의 Event 2022.01.29 - [Web/JavaScript] - [JavaScript] JavaScript 기초 [JavaScript] JavaScript 기초 [JavaScript] JavaScript의 기초 JavaScript HTML과 같이 쓰는 친구로 객체 기반의 스트리트 언어이다. 정적인 HTML을 동적으로 변환시키고, 다양한 접근 방식으로 웹의 편의를 높여준다. Java와 언어와 유사 mollangpiu.tistory.com JavaScript의 변수 타입 사용 2022.01.29 - [Web/JavaScript] - [JavaScript] JavaScript의 변수 [JavaScript] Ja..
JavaScript의 변수 JavaScript의 변수 JavaScript에서 데이터를 다루기 위해서는 변수가 존재한다. 만약, Java를 배웠다면 int, char을 배웠을 것이다. 마찬가지로 JavaScript에도 변수가 존재하는데, 이는 var이다. var은 정수, 문자, 실수, true 등 모든 것을 담을 수 있는 편의를 제공한다. var은 숫자도 문자도 모두 표현할 수 있는 것을 확인할 수 있다. 여기서 주목할 점은, JavaScript는 문자와 숫자를 임의로 변경하므로 반대로 말하면 변수 타입이 불안정하게 저장된다는 뜻을 나타낸다. let과 const 그렇다면 정말로 var만 사용할까? 만약 이런 질문을 받는다면, No 다. var은 어디까지나 javascript의 입문 혹은 과거에 사용하던 변..
[JavaScript] JavaScript의 기초 JavaScript HTML과 같이 쓰는 친구로 객체 기반의 스트리트 언어이다. 정적인 HTML을 동적으로 변환시키고, 다양한 접근 방식으로 웹의 편의를 높여준다. Java와 언어와 유사하여, Java를 할 줄 안다면 반은 먹고 들어가는 언어이다.다만 Java와는 다르게 JavaScript는 자동으로 개발자의 편의를 지원하다 보니 차이가 존재할 수 있다는 것은 꼭 명심해야 한다. JavaScript 사용 방법 JavaScript는 보통 body 태그의 마지막에 위치한다. JavaScript가 종종 HTML문구를 불러오지 못하는 경우가 발생하는데, 이를 해결하기 위해서 body 끝부분에 안착시킨다. html을 실행할 경우, JavaScript에 작성된 글이..
JQuery, Filter 활용하기 filter 사용 예시 다양한 음식 사진들 중에서, filter를 황용하여 위의 목록에 따라서 해당되는 음식값만 골라내도록 하였다. filter는 말 그대로 필터링한다고 보면 된다. filter 대상의 값을 유, 무에 따라 true와 false로 구분된다. 체크하기 all ice-cream chocolate cake juice sandwich div 태그 안에 여러 img가 출력되었다. 위 경우는 연습에 해당되어 태그를 종류별로 정리를 하였지만 실제로는 뒤죽박죽 섞이는 바람에 사진의 정렬은 어렵다고 봐야 한다. 그러므로, 여기서 중요한 것은 a 태그의 class에 해당되는 image와 sandwich, juice 등 명칭을 바라보면 된다. filter의 활용 var f..
OpenLayer, 지도 클릭시 마커를 지도에 표시하기 이전 글 참조 2021.11.12 - [Web/JavaScript] - OpenLayer, 클릭시 좌표 가져오는 방법 OpenLayer, 클릭시 좌표 가져오는 방법 OpenLayer, 클릭시 좌표 가져오는 방법 클릭시 좌표 가져오는 방법 지도를 클릭시, 좌표를 가져오는 방법이다. 이동 var map = new ol.Map({ view: new ol.View({ zoom: 16, center: [ 126.97659.. mollangpiu.tistory.com 2021.11.09 - [Web/JavaScript] - OpenLayer, 마커 만들기 OpenLayer, 마커 만들기 OpenLayer, 마커 만들기 마커 만들기 기존 과정을 넘겨, 바로 Ma..
OpenLayer, 클릭시 좌표 가져오는 방법 클릭시 좌표 가져오는 방법 지도를 클릭시, 좌표를 가져오는 방법이다. 이동 var map = new ol.Map({ view: new ol.View({ zoom: 16, center: [ 126.97659953, 37.579220423 ], //포인트의 좌표를 리턴함 projection : 'EPSG:4326', }), target: 'js-map', layers: [ new ol.layer.Tile({ source : new ol.source.XYZ({ //vworld api 사용 url: 'http://xdworld.vworld.kr:8080/2d/Base/202002/{z}/{x}/{y}.png', //tileGrid: tileGrid }) }) ] }..
CSS, 지도 검색 목록 만들기 결과 이전 글을 모두 응용하여, 검색 버튼 누를 시, 목록이 출력되도록 설정하였다. CSS는 간단하게 적용하였다. 옵션 1 옵션 2 옵션 3 검색 닫기 소개 글 2021.11.10 - [Web/CSS] - CSS, 카카오 sample 지도, 목록 CSS, 카카오 sample 지도, 목록 CSS, 카카오 SAMPLE 지도 목록 내용 https://apis.map.kakao.com/web/sample/keywordList/ 본 내용은, 카카오 지도 API에서 제공하는 CSS 입니다. 문단제목 키워드로 장소검색하고 목록으로 표출.. mollangpiu.tistory.com 본문은 이전글, CSS 작업 내역에서 진행되었다. 작업은 소소하게, 지도 목록이 필요해서 간단하게 제작되었..
JavaScript, CSS의 @keyframes 제어하기 막대그래프 CSS를 통해서 막대그래프 하나를 만들어보았다. 이는 Youtube를 참조하였다. 그리고 데이터를 바탕으로 막대그래프의 크기가 변동될 수 있도록 하였다. 버튼 수치 변경 75% 보이기, 감추기 var cnt = 0; function view() { var graph = document.getElementById('graph'); if(cnt == 0) { graph.style.display ="block"; cnt++; } else { cnt--; graph.style.display = 'none'; } } 먼저, 버튼을 눌러서 그래프의 보이기 / 감추기를 만들었다. 기본적인 style을 이용해서, display의 block과 none..
CSS, 카카오 SAMPLE 지도 목록 내용 https://apis.map.kakao.com/web/sample/keywordList/ 본 내용은, 카카오 지도 API에서 제공하는 CSS 입니다. 문단제목 키워드 : 검색하기 카카오가 제공하는 지도 sample이 마음에 들어서 필요한 부분만 뜯어서 만들게 되었습니다. 지금 갖고 있는 지도 css에 적용하기에 매우 좋아보입니다.
OpenLayer, 마커 만들기 마커 만들기 기존 과정을 넘겨, 바로 Marker 생성으로 넘어가 보도록 한다. 2021.11.09 - [Web/JavaScript] - OpenLayer, 지도 이동하기 OpenLayer, 지도 이동하기 OpenLayer, 지도 이동하기 지도 이동하기 map.getView().setCenter('좌표'); 지도 이동하는 방법은 다음과 같다. map을 담고 있는 변수 명의 getView(). setCenter(경도, 위도)를 담으면 이동이 가능하다. 그러.. mollangpiu.tistory.com 이전 글에서 코드를 추가하여 마커 기능을 추가하였다. 소스 공유 이동 앞서, 오픈레이어의 구조 중 제일 중요한 것을 꼽는다면, Layer가 되겠다. Layer는 OpenLaye..
OpenLayer, 지도 이동하기 지도 이동하기 map.getView().setCenter('좌표'); 지도 이동하는 방법은 다음과 같다. map을 담고 있는 변수 명의 getView(). setCenter(경도, 위도)를 담으면 이동이 가능하다. 그러나 이를 활용하기 위해서는 조금 복잡한 과정을 겪는다. 그냥 된다면 매우 행운스럽겠지만, 안타깝게도 오픈 레이어를 노말로 사용할 확률은 매우 적기 때문이다. 지도를 이용하는 방법 오픈레이어 라이브러리를 가져온 오픈 레이어는 단순하다. 여기서, 이전 글을 살펴보았다면 좌표계의 설정이 안 된 OpenLayer인 것을 확인할 수 있다. 이를 확인하는 방법은, Map에 설정된 View의 설정에서 projection이 존재하는 여부에 따라 결정된다. 여기서는 존재하..
React, JAX 사용방법 유튜브 - 출처 https://www.youtube.com/watch?v=FqnAFX9lQPQ 본 내용은 코딩애플님의 Youtube 내용을 참고하여 공부하였습니다. 데이터 바인딩 방법 데이터 바인딩, JavaScript에서 Script의 데이터를 HTML에 넣기 위해서는 .innerHTML 함수가 필요했다. 그러나 React는 중괄호를 이용해서 데이터 바인딩을 쉽게 할 수 있다. 그리고 이는 함수 또한 데이터 바인딩이 가능하다. test() 함수의 return 값은 100이므로, 출력값은 100으로 출력된다. 이미지 불러오기 이미지 또한 간단하게 가져올 수 있다. 상단의 import를 이용하여, 이미지의 경로를 지정하면, logo라는 image를 쉽게 불러올 수 있다. Cla..