본문 바로가기

Programming49

[GeoServer] 좌표계 이격 문제 해결 ● 문제 - 공간데이터 좌표계 변환 과정 중 좌표계를 올바르게 설정해 줬음에도 불구하고 300m 정도의 이격 발생 ● 원인 - 옛날 좌표계로 된 자료를 요즘 좌표계로 변환하는 과정에서 발생 - 옛날 좌표계 : 7개 파라미터 사용 · 이동(3) + 회전(3) + 축척(1) · Bursa-Wolf 모델 - 요즘 좌표계 : 10개의 파라미터 사용 · 이동(3) + 회전(3) + 축척(1) + 회전기준점(3) · Molodensky-Badekas 모델 ● 해결 ❗3개의 추가인자를 대체할 만한 것이 필요 ❗towgs84(타원체 변환 계수) 파라미터가 포함된 좌표계로 재정의 해줘야 함 1. geoserver 디렉터리 내 user_projections > epsg_overrides.properties를 아래 첨부파일.. 2023. 11. 9.
[Javascript] jQuery TableDnD를 이용하여 테이블 순번 바꾸기 ● jQuery TableDnD(Table Drag and Drop) - HTML 테이블의 행을 Drag and Drop 하여 재정렬할 수 있게 하는 jQuery 플러그인 - jquery.tablednd.js 스크립트 추가 필요 ❗ 프론트단에서만 사용할 경우 "3-1. tableDnd 플러그인 적용 및 옵션 설정 "까지만 봐도 됨 ❗ DB 상에서 테이블 순번을 바꿔야 하는 경우 끝까지 확인 필요(아래 예제는 Spring 사용) ● 사용방법 1. 라이브러리 가져오기 - 다운로드 : https://github.com/isocra/TableDnD 소스 다운로드 후 TableDnd/js/jquery.tablednd.js 파일 사용 2. HTML 테이블 생성 - table 및 각 row 마다 id 필요 Row 1.. 2023. 11. 2.
[Javascript] Debounce와 Throttle의 차이 Debounce Throttle 공통점 - 과도한 이벤트 발생으로 인한 성능 저하 방지 예방하기 위해 이벤트를 제어(제한)하는 방법 - ex : input text에 키보드가 입력될 때 마다 DB 조회를 하게 된다면, 서버 부하를 야기할 수 있음 - 일정 시간 간격을 두고 이벤트 호출 - 별도의 스크립트 호출 없이, 순수 바닐라 스크립트로 구현 가능 차이점 - 동일 이벤트 발생 시, 가장 마지막 이벤트 실행 - ex : 1000ms 동안 동일 이벤트 발생 시, 입력이 끝날 때 가장 마지막 이벤트만 실행 - 마지막 이벤트에서 일정 시간동안 이벤트가 발생한다면, 또 일정 시간을 기다림 - 동일 이벤트 발생 시, 일정 시간 동안 한 번만 실행 - ex : 1000mx 동안 이벤트 실행을 막고, 한 번만 실행 .. 2023. 11. 1.
[Javascript] 전개 연산자(Spread Operator) ● 전개 연산자(Spread Operator) - JavaScript에서 데이터를 확장하거나 복사할 때 사용 - 주로 배열과 객체를 다룰 때 사용 - ES6 (ECMAScript 2015) 문법 - "[Javascript] 배열 합치는 방법 5가지(concat, spread, push, Array.from, reduce)" 에서 소개된 문법 ● 배열에서의 전개 연산자 예시 1. 배열 병합 const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const mergedArray = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6] const arr3 = [7, 8, 9]; const mergedArray2 = [...arr1, ...arr2, ...ar.. 2023. 10. 28.
[Javascript] val()과 attr("value")의 차이 ● $("").val() - DOM 요소의 현재 입력된 값을 반환 - 사용자가 입력한 내용이나 JavaScript 코드를 통해 동적으로 변경된 값을 가져옴 - input, textarea, select와 같은 입력 요소의 값을 가져올 때 사용 ● $("").attr("value") - DOM 요소의 초기 속성(attribute) 값을 반환 - HTML 속성으로 정의된 초기 값을 가져옴 - 요소의 속성(attribute)를 가져올 때 사용 ! 일반적으로 입력 요소(input)의 초기값과 실제 입력값이 다를 수 있음 ! val()을 사용하여 실제 입력값을 가져오는 것이 일반적 ! 초기 속성값을 가져오고 싶을 때 attr("value") 사용 2023. 8. 24.
[Javascript] jQuery Datepicker 특정 날짜만 선택 가능/불가능 설정 ● jQuery UI Datepicker를 사용하여 Calendar 기능을 구현할 때 특정 날짜(들)만 선택 가능 또는 불가능하게 하는 방법 - beforeShowDay : 각 날짜마다 호출되면서 해당 날짜를 표시할지 여부를 결정하는데 사용 - 선택 가능 또는 불가능하게 할 날짜를 배열에 담아 차례대로 돌리면서 선택 가능하게 하려면 [false], 가능하게 하려면 [true]를 반환 * 참고 return true : true라는 boolean 값을 반환. true로 인식. return [true] : true라는 값을 포함하는 배열을 반환. 길이가 1인 배열의 첫번째 요소로 true가 포함되어 있는 상태. - 방법은 2가지(객체를 사용하여 초기화 하는 방법 / option 메소드를 사용하여 옵션을 업데이.. 2023. 8. 22.
[Javascript] 배열 합치는 방법 5가지(concat, spread, push, Array.from, reduce) 1. concat() 메서드 const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const combined = arr1.concat(arr2); console.log(combined); // [1, 2, 3, 4, 5, 6] 2. Spread 연산자 const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const combined = [...arr1, ...arr2]; console.log(combined); // [1, 2, 3, 4, 5, 6] 3. push() 메서드 const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; for (let i = 0; i < arr2.length; i++) { arr1.pu.. 2023. 7. 17.
[Javascript] 두 배열의 겹치는 값을 제외한 배열 추출하기 1. filter 메소드를 사용하여 배열 a의 각 요소 검사 2. includes 메소드를 사용하여 b에 현재 요소가 포함되어 있는지 확인 3. 포함되지 않은 요소만을 남기기 위해 ! 연산자 사용 const a = [1, 2, 3, 4, 5]; const b = [3, 4, 6]; // 배열 a에서 배열 b와 겹치는 값들을 제거한 배열 c 생성 const c = a.filter(item => !b.includes(item)); console.log(c); // [1, 2, 5] 2023. 7. 6.
[Javascript] context path 가져오는 방법 1. window.location.pathname 이용하는 방법 (비추) // 1. split 사용하는 방법 const pathArray = window.location.pathname.split('/'); const contextPath = pathArray[1]; console.log(contextPath); // 2. substring 사용하는 방법 const contextPath = window.location.pathname.substring(0, window.location.pathname.indexOf("/",2)); console.log(contextPath); => contextPath가 '/' 일 경우에 원하는 결과를 얻지 못할 수 있다. 따라서 2번 방식을 추천한다. 2. sessio.. 2023. 6. 23.
[Javascript] class 내 비동기 함수에서 this를 현재 class로 설정하는 방법 ● 문제 - Class 내부에서 ajax나 axios와 같은 비동기 함수 사용 시 success, then과 같은 콜백 영역에서 this가 현재 class로 인식하지 못함 - ajax : jQueyr Ajax 객체 자체를 가리킴 "context" 옵션을 통해 명시적으로 컨텍스트 지정 가능 - axios : then 내부에서 this는 axios의 콜백 함수에서의 컨텍스트를 가리킴 기본적으로 "undefined"로 설정 됨 ● 해결 1) 화살표 함수(Arrow Function) 사용 // ajax 방식 $.ajax({ url: "/api/data", success: response => { console.log(this); // 원하는 컨텍스트를 참조 // ... }, error: error => { co.. 2023. 6. 12.
[Javascript] Ajax async(동기 처리)가 먹히지 않을 때 ● Ajax(Asynchronous JavaScript and XML) * 자바스크립트의 라이브러리 중 하나 * 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 * 전체 페이지를 새로 고치지 않고 페이지의 일부만을 로드하는 기법 * 자바스크립트를 사용한 비동기 통신 * 클라이언트와 서버간에 XML 데이터를 주고받는 기술 ● Ajax async 옵션 * 동기(false) : 웹에서 서버측에 데이터를 요청하고 데이터의 수신이 완료될 때까지 기다리는것 * 비동기(true) : Ajax를 이용하여 데이터의 수신을 기다리지않고 바로 다른 작업을 실행 - 페이지의 로딩을 기다리지않으므로 웹의 속도가 빠르게 반응 가능 - async 옵션을 따로 지정해주지 않을 경우 true로 기본 설정됨 ● Aja.. 2023. 5. 15.
[Javascript] 문자열 표현 시 '(작은 따옴표), "(큰 따옴표), `(억음 부호) 차이 ● 문자열 표현 방식 1) '(작은 따옴표) 사용 const str = 'abcd'; 2) "(큰 따옴표) 사용 const str = "abcd"; 3) `(억음 부호 : backtick) 사용 const str = `abcd`; ● 방식별 차이 * '(작은 따옴표)와 "(큰 따옴표)의 차이는 거의 없음 * `(억음 부호)의 경우엔 개행 처리가 가능 - 개행 처리를 하기 위해서는 '(작은 따옴표)와 "(큰 따옴표)는 \n을 직접 넣어줘야 함 * `(억음 부호)의 경우, 변수 작성 시 ${} 태그로 값을 부여가 가능함 * 문자열 상수를 표현하기 위해 \" \' 같은 escape 필요 없음 - 사실 '(작은 따옴표)로 묶을 경우 "(큰 따옴표)를 사옹하고, "(큰 따옴표)로 묶을 경우 '(작은 따옴표)를 사.. 2023. 5. 12.
[Javascript] 숫자 천 단위로 ,(콤마) 찍는 방법 ⊙ 아래 방식은 정규식을 이용한 방식으로 ⊙ 여러 블로그들을 참고했을 때 가장 깔끔하고 간단한 방법이였다. function numberWithCommas(val) { return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } ※ 더 다양한 방법을 통해 구현하고 싶을 경우, 아래의 링크 참고 https://hianna.tistory.com/441 참고 쥬리리리 - [Javascript] 천 단위(숫자 3자리) 콤마 찍기 https://s-yeonjuu.tistory.com/48?category=967890 2023. 5. 11.
[Java] SpringBoot 서버 포트 변경 방법 ⊙ 스프링부트 설정 파일이 application.properties(또는 application.yml)의 server port 부분을 변경해준다. ⊙ default port는 8080이다. ⊙ 스프링부트의 경우 내장 Tomcat을 사용하기 때문에 Tomcat을 따로 세팅해주지 않아도 된다. 만약, 8080에서 8050으로 변경하고 싶을 경우 아래와 같이 변경해준다. 1) application.properties 사용할 경우 server.port = 8050 2) application.yml 사용할 경우 server: port: 8050 2023. 5. 10.
[Unity] 15. 3D 기초 게임 개발 1. 계획하기 게임 개발은 계획부터 차근차근 2. 플레이어 공(Sphere), 바닥(Plane) 생성 Material 적용 기본 움직임, 점프(더블 이상 점프 불가능) 기능 적용 공의 움직임이 너무 빠르면 Mass를 늘리거나 Power를 낮추거나 테스트를 용이하게 위해서 변수를 public로 선언하여 Inspector창에서 값 설정 공과 부딪히면 점수를 올리고, 해당 아이템이 없어지는 기능 적용 SetActive(bool) : 오브젝트 활성화 함수 공과 부딪힐 때 사운드 삽입 AudioSource : 사운드 재생 컴포넌트, AudioClip 필요 AudioClip : 사운드 파일 컴포넌트 비활성화 구간에서는 컴포넌트 함수가 실행되지 않을 수도 있음 3. 아이템 아이템(Capsule) 생성 Material.. 2022. 7. 25.
[Unity] 14. 게임 인터페이스 Canvas - UI가 그려지는 도화지 역할인 컴포넌트 Screen - 게임이 표시되는 화면 - 해상도로 크기 결정 - Unity의 좌표계 : Screen(카메라 X) vs World(카메라 O) - 마우스 커서도 스크린 좌표계에 포함 Text - 문자열을 표시하는 UI - (상업적으로 사용할 때) 폰트 라이선스 꼭 확인 Image - 이미지를 표시하는 UI - 이미지 파일을 Sprite로 설정해야 UI 적용 가능 - Filled 기능으로 쿨타임 효과 구현 가능 Button - 클릭 이벤트를 가지고 있는 반응형 UI - OnClick() : 버튼 클릭 시 호출되는 이벤트 함수 - 버튼 클릭은 누르기-떼기 한 세트로 동작 Anchors - 빨간 점 : 캔버스에서의 기준점 - 파란 점 : 컴포넌트에서의 기준.. 2022. 7. 11.
[Unity] 13. 물리 충돌 이벤트 물리 충돌 이벤트 - MeshRenderer를 통해서 오브젝트의 재질 접근 - OnCollisionEnter : 물리적 충돌이 시작할 때 호출되는 함수 - OnCollisionStay : 물리적 충돌이 일어나고 있을 때 호출되는 함수 - OnCollisionExit : 물리적 충돌이 끝났을 때 호출되는 함수 - Color : 기본 색상 클래스 - Color32 : 255 색상 클래스 - Collision : 충돌 정보 클래스 using System.Collections; using System.Collections.Generic; using UnityEngine; public class OtherBall : MonoBehaviour { MeshRenderer mesh; Material mat; void .. 2022. 7. 10.
[Unity] 12. 물리 영향을 받는 게임 오브젝트 이동 컴포넌트 가져오기 - GetComponent : 자신의 T타입 컴포넌트를 가져옴 using System.Collections; using System.Collections.Generic; using UnityEngine; public class MyBall : MonoBehaviour { Rigidbody rigid; void Start() { rigid = GetComponent(); } } 물체 속도 설정으로 이동 - velocity : 현재 이동 속도 - RigidBody 관련 코드는 FixedUpdate에 작성 (일반 Update 함수에 X) using System.Collections; using System.Collections.Generic; using UnityEngine; public c.. 2022. 7. 10.
반응형