React, JAX 사용방법 유튜브 - 출처 https://www.youtube.com/watch?v=FqnAFX9lQPQ 본 내용은 코딩애플님의 Youtube 내용을 참고하여 공부하였습니다. 데이터 바인딩 방법 데이터 바인딩, JavaScript에서 Script의 데이터를 HTML에 넣기 위해서는 .innerHTML 함수가 필요했다. 그러나 React는 중괄호를 이용해서 데이터 바인딩을 쉽게 할 수 있다. 그리고 이는 함수 또한 데이터 바인딩이 가능하다. test() 함수의 return 값은 100이므로, 출력값은 100으로 출력된다. 이미지 불러오기 이미지 또한 간단하게 가져올 수 있다. 상단의 import를 이용하여, 이미지의 경로를 지정하면, logo라는 image를 쉽게 불러올 수 있다. Cla..
메뉴 리뉴얼 - Java 문제 문제 해석 이 문제에 관해서는 토너먼트에 대해 이해를 하신다면 쉽게 풀 수 있습니다. 토너먼트가 진행했을 때 좌측팀과 우측팀의 경기인데, 결국 홀수팀과 짝수팀의 경쟁입니다. 1라운드 1vs2, 3vs4, 5vs6, 7vs8 등... 2라운드 1vs2, 3vs4. 결국, 좌측은 홀수여야 하고 우측은 짝수라는 의미를 갖습니다. 두 번째, 서로 맞붙기 위해서는 둘의 차이가 1이어야 한다는 점 입니다. 즉, 2개의 조건을 맞춘다면 풀이가 쉽게 해석이 됩니다. if(left % 2 != 0 && right - left == 1){ break; } 토너먼트의 종료 조건 2가지를 충족했을 때, 멈출 수 있도록 if문의 조건을 걸어 줍니다. 그리고 이 조건이 될 떄 까지, 문제처럼 진행을..
OpenLayer, Layer 수정하기 수정하기 해당 글은 이전의 글을 이어가는 과정이다. 글을 나눈 이유는 수정하기가 생각보다 어렵지 않기 때문이다. 그러나 헷갈릴 수 있으므로, 글을 나누어 추가하는 과정을 통해 응용하길 바라는 마음으로 나누게 되었다. 1. Vector에 수정권한 넣기 VectorLayer에 editable을 추가하였다. 이는 true일 경우 해당 Layer를 수정할 수 있는 권한을 준다는 의미이다. 2. 수정할 Layer의 값 불러오기 수정하기는 interaction의 기능 중 하나이다. 여기서 포인트는 수정하기 위해서는 수정할 대상의 VectorLayer가 존재해야 한다는 것이다. 그러나 해당 소스는 불러오는 Source가 따로 없고 만들어진 Source를 수정하는 과정이므로 선택..
OpenLayer, 등록하기, 선택하기 동시 사용하기 화면 구성 Draw or Select Interaction: Draw Select html의 화면은 다음과 같다. Select박스의 공간과 map을 표시하는 div의 공간이 전부이다. 등록하기 이전에도 설명한 글이지만, 중요한 부분이므로 다시 작성하게 되었다. 음식을 담기 위해서는 반드시 그릇이 필요하다. 마찬가지로 데이터를 저장하기 위해서는 반드시 Object가 필요하다. OpenLayer에서 좌표를 받기 위해서는 Vector의 Layer가 필요하다. 이를 map 선언 시 다음과 같이 입력해야 한다. 후에 map.addLayer를 이용하여 추가할 수 있지만, Layer가 다수로 나뉘어서 관리하기 어렵다는 단점이 있다. 따라서 하나로 관리할 수 있도록..
OpenLayer, 데이터 저장하기와 불러오기 데이터 저장하기 기존의 글을 이어서 데이터 저장하기 기능부터 만들었다. 저장하는 방법은 다음과 같다. var vectorLayer1 = new ol.layer.Vector({ source: new ol.source.Vector() }); $('#map_value').on('click', function(e) { var json = new ol.format.GeoJSON().writeFeatures(vectorLayer1.getSource().getFeatures()); console.log(json); }); 2021.10.08 - [Web/JavaScript] - OpenLayer, 좌표 등록하기 OpenLayer, 좌표 등록하기 OpenLayer, 좌표 ..
JavaScript, addEventListner 알아보기 addEventListner 다른 사람의 JavaScript 문구를 본다면, addEventListner를 종종 볼 수 있다. 이를 사용하는 이유, 기존 function와 무슨 차이가 있는지에 대해 알아보는 시간을 갖도록 하겠다. Draw Select 시작은 바로 addEventListner를 사용하여, 간단한 예시를 들었다. 의 id='js-select'를 빌려서 select 변경 시 발생되는 event를 작성하였다. 실행 시, alert창이 발생되는 것을 확인할 수 있다. 여기서 의문을 갖게 된다. 그렇다면 왜? function을 사용하지 않고 addEventListner를 사용하게 될까? 이의 해답은 아래에서 쉽게 찾아 볼 수 있다. 보통 ..
OpenLayer, 스타일 변경하기 스타일 변경하기 기존의 오픈레이어를 사용하기에는 표시되는 선이 매우 얇다. 지도의 가독성이 떨어지고, 구분이 어려워지는 단점이 있다. 그래서 선의 스타일을 변경하려고 한다. 기존의 좌측모습에서, 변경된 우측으로 바꿀 예정이다. Style 적용방법 drawControl = new ol.interaction.Draw({ type: geometryType, //Point, LineString, Polygon, Circle source: vectorLayer1.getSource(), //vectorLayer1.getSource(); //클릭 했을 때 선 스타일 변경하기 style: [ new ol.style.Style({ stroke: new ol.style.Stroke({ ..
Java, 메모장 파일 만들기 메모장 파일 만들기 데이터의 길이가 일정하지 않으며, 데이터의 길이가 초과될 수도, 없을 수도 있는 상황 속에서 이 데이터를 DB에 넣기에는 매우 안 좋다고 생각되었습니다. DB의 용량을 1000으로 했을 때, 길이가 100이 될 수도 있는거고, 길이가 1000이 넘을 수 있는 상황도 있을 수 있기 때문입니다.그래서 메모장을 만들어 저장을 한다면, 이런 위험에 대해서 대비 할 수 있고 메모장의 이름만 DB에 저장한다면 가능할지 모른다고 생각하여 만들게 되었습니다. package test; import java.io.BufferedWriter; import java.io.File; import java.io.FileWriter; public class test02 { publ..
OpenLayer, 좌표계 변환하기 좌표계 변환하기 전의 글 사진을 인용을 해보았다. 오픈 레이어를 처음 사용한 사람이라면, 모르겠지만 카카오 API로부터 지도 API를 처음 접한 나의 입장에서는 좌표의 위치가 다르다는 것을 알 수 있다. 흔히, 우리나라의 아픈 추억으로 일컫는 북위 38선.그래서 우리나라의 수도의 위도의 좌표는 대략 37.5 정도로 나온다. 그러나 저 위의 코드로는 수도, 경복궁이 중심임에도 37이라는 숫자는 어디서도 찾을 수가 없다.이는 오픈 레이어가 표시하는 좌표가 우리나라 지도 API에서 제공하는 좌표계가 달라서 생겨나는 이유이다. 만약, 오픈레이어만 사용한다면 이런 문제점에 대해서 그냥 지나칠 수 있지만다른 곳에서 가져온 좌표를 오픈 레이어에 적용을 한다면, 좌표에서 벗어난 값이..
OpenLayer, 한국에 익숙한 Layer 소개 OpenLayer의 VWORLD 소개 https://www.vworld.kr/dev/v4api.do 공간정보 오픈플랫폼 오픈API 오픈 API 누구나 사용할 수 있는 지도 오픈플랫폼의 오픈 API 서비스는 국가 공간정보의 개방, 공유, 참여를 통해 공간정보의 자율적이고 창조적인 다양한 애플리케이션을 개발할 수 있도록 기술 www.vworld.kr 오픈레이어를 공부하는 도중, 재밋는 사이트를 알게되었습니다. 저희가 사용하는 오픈레이어에 대해 '한국 주소'에 대한 정보가 담겨 있는 오픈레이어 api 입니다. 오픈레이어의 최대 단점은 '주소검색' 입니다. 기본적인 오픈레이어 사용방법으로는 카카오, 네이버, 구글 API처럼 주소검색기능이 없습니다. 그러나 위의 ..
OpenLayer, 좌표 등록하기 OpenLayer의 Vector 이전 글에 대해서 외부 WEB을 통해서 불러오는 연습을 하였다 이번에는 외부 WEB의 도움 없이 좌표를 등록하는 과정을 갖도록 한다. MAP에 대한 구조는 생각보다 단순하다. MAP의 OBJECT가 VECTOR과 TILE을 필요로 한다. 그중 우리가 알아야 할 것은 Vector이다.Vector은 좌표를 저장하는 역할을 하기 때문에, 이의 도움을 받아야 좌표를 등록할 수 있다. //좌표를 저장할 Object(공간)을 생성한다. var vectorLayer1 = new ol.layer.Vector({ source: new ol.source.Vector() }); //Map을 호출한다. var map = new ol.Map({ //지도에 대한 ..
자바 Stack 클래스 사용 방법 Stack의 소개 시험이나 책에서 단골 소재로 소개되는 Stack은 FILO(First In Last Out)로 외우면 끝이다. 먼저 들어온 상자가 제일 나중에 나가듯이 먼저 들어온 데이터가 가장 나중에 나가는 구조를 가진 원리이다. import java.util.Stack;//import 하기 Stack stack = new Stack();//String 형 Stack 선언 사용 방법은 Stack을 선언해서 사용하면 된다. 제네릭 부분에는 사용할 객체를 담으면 된다. Stack의 사용 stack.push(값);//추가 stack.pop();//삭제 먼저 Stack에 대해 설명을 했듯이, 들어오는 것만 값을 입력하고, 삭제는 값을 입력하지 않는다. 제일 마지막에 들어온 ..
Java - 짝지어 제거하기 난이도 난이도 ★☆ ? 문제 이 문제를 보고 생각하는 도중, Stack의 구조와 유사하다는 것을 떠오르게 되었다. 2021.10.08 - [Language/JAVA] - [Java] 자바 Stack 클래스 사용 방법 Java의 Stack에 대해 공부를 한 후 접근을 한다면 누구나 쉽게 풀 수 있는 문제로 생각된다. 해답 풀이 import java.util.*; class Solution { public int solution(String s) { int answer = -1; Stack stack = new Stack(); for(int i=0; i < s.length(); i++) { //만약 stack에 값이 존재하고, 마지막값이 입력값하고 같다면. if(!stack.em..
[MariaDB] mysqldump가 실행이 안 되는 경우 mysqldump 명령어가 실행이 안 될 때 보통 백업을 mysqldump를 활용하여 복원한다면 mysqldump를 통해 복원이 되지만, SQL 프로그램(HeidSQL, SQLDeveloper 등)을 활용한다면 Mysqldump를 통해 복원이 안 되는 경우가 발생된다. 이는 sql의 종료 문구인 ';'(쎄미 클론)들이 존재함을 확인해야 한다. 만약 나의 백업된 sql에 저렇게 쎄미 클론들이 존재한다면, 보통 방법으로는 mysqldump를 실행하다가 강제 종료 처리당하고 종료된다. 이를 해결하기 위해서는 잠시 SQL종료 문구를 변경할 필요가 있다. DELIMITER 사용하기 사용 방법은 매우 단순하다. 그냥 MYSQL의 SQL 입력창에 'DELIM..
[MariaDB] 대, 소문자 구분 없애기 MariaDB 설치 시, 주의해야 할 점 MariaDB는 정상 작동된다. 그러나 서버에서 SQL이 제대로 실행되지 않는 경우가 발생된다. Error querying database. Cause: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Table [테이블 명] 만약 서버의 log나 catalina에서 위와 같은 오류가 발생되었다면, 이는 TABLE의 대, 소문자의 불명확으로 발생되는 에러이다. 만약 위와 같은 오류가 동일한지를 확인하고 싶다면, 아래의 명령어를 MariaDB에서 실행해 보면 알 수 있다. show variables like 'lower_case_table_names'; Value 값..