반응형 JavaScript36 [지도 API] leaflet 해당 게시글은 leaflet이라는 지도 라이브러리를 활용하여, 지도에 특정 도형 레이어를 생성하는 모듈에 대한 내용을 정리한 글이다. 목차는 다음과 같다.1. 지도 객체 생성2. 값 변환에 따른 polygon 컨트롤 표출 결과를 먼저 하단에 첨부하였다. See the Pen leaflet by HamJeong (@HamJeong) on CodePen.">See the Pen leaflet by HamJeong (@HamJeong) on CodePen. 1. 지도 객체 생성지도 생성을 위해 필요한 leaflet라이브러리(js, css)와 간편한 요소 조작을 위한 jquery라이브러리를 참조한 후, 값 변경에 필요한 select요소와 지도를 생성할 div 요소를 추가한 html코드 및 스타일 시트 .. 2024. 11. 22. [zoomer.js] 이미지 확대 축소 라이브러리 활용 해당 게시글은 JQuery라이브러리인 zoomer.js를 활용하여 이미지 요소의 확대 축소 기능을 구현하는 내용에 대해 정리하였다. 목차는 아래와 같다.1. 정적소스 참조2. 구현3. 한계점 1. 정적소스 참조라이브러리 사용을 위해 필요한 정적소스를 참조해야한다(CDN 방식) 본인의 경우, 인터넷망이 연결된 환경이 아니기 때문에 직접 파일을 다운로드하여 세개의 필수 파일을 프로젝트 내 추가하여 참조하였다. 버전 관리로 인한 이슈 방지를 위해서는 가급적 아래 공식 링크를 참조하여 파일 다운로드 및 CDN 방식으로 필요 파일을 로드하는 것을 추천한다.https://www.jqueryscript.net/zoom/Smooth-Image-Enlargement-Plugin-Zoomer.html Smooth I.. 2024. 11. 21. [JS] 부등식 검증 함수 javascript에서 "0>1"등의 형식과 같은 문자열로 된 부등식의 결과가 올바른지, 아닌지 판별하기 위해 eval()함수를 사용할 수 있다. 하지만 어딜 찾아봐도 해당 함수는 보안상의 위험이 있으니 사용을 지양하라고 한다. 해당 함수를 대체하기 위해 동일한 결과를 제공하는 함수를 하단에 공유한다.function evaluateInequality(inequalityString) { // 정규 표현식을 사용하여 부등식 패턴을 추출 const regex = /^([-+]?\d+(\.\d*)?)\s*([]=?)\s*([-+]?\d+(\.\d*)?)$/; const match = inequalityString.match(regex); if (!match) { throw ne.. 2024. 7. 4. [구축] vue, spring boot 병합 1. 서론이전 게시물에서는 front 단락을 서술한 vue.js프로젝트와 back 단락을 서술한 spring boot프로젝트를 구분하여 구축하고, 이 두 프로젝트를 연동하는 내용에 대해 정리하였다. 이번 게시물에서는 한개의 프로젝트에서 vue.js 기반의 front 코드와 spring boot 기반의 back코드를 다루며, 두 소스가 연결될 수 있도록 병합 처리하는 과정에 대해 다루어 볼 예정이다. 병합을 진행하려는 이유는 간단하다. 프로젝트가 두개로 구분되면 개발 및 배포 작업을 위해서 두개의 디렉토리에 접근해야하는 부분이 번거롭다고 느껴졌기 때문이다. 규모가 작은 소스들이기 때문에 별도로 구분하는게 더 비효율적인 것 같다는 단순한 생각에서 출발한 작업이다. chatGPT 피셜 해당 작업에 대한 장단점.. 2024. 6. 4. [v-model] 자동 바인딩 : input입력 값 변수에 자동 저장하기 이 게시물에서는 v-model을 활용하여 사용자가 input에 입력한 내용을 변수에 자동으로 바인딩하는 방법에 대해 다룬다. 목차는 아래와 같이 하였다.1. v-model?2. 예시3. 번외 1. v-model?v-model은 데이터 바인딩을 쉽게 구현할 수 있도록 vue에서 제공하고 있는 디렉티브이다. 데이터 바인딩이 무엇이냐? binding은 묶다, 결박하다 등의 의미로 사용되는 영단어이다. data binding이라 하면 쉽게 말해, 화면 요소와 객체 데이터를 묶어서 동기화 시키는 기법이라고 설명할 수 있다. 어떠한 상태 변화에 따라 화면이 실시간으로 자동 업데이트 되어야한다거나, 사용자에게 실시간으로 반응하는 어플리케이션이 필요하다거나 등의 여러 상황에서 데이터 바인딩이 활용된다. 특정 데이터.. 2024. 4. 25. [tooltip] JQuery-ui.js, 요소 tooltip 생성부터 커스텀까지 특정요소 mouseover 이벤트를 감지하여 tooltip을 표출하는 작업을 진행하기에 앞서, 'tooltip관련 라이브러리가 없을리가 없는데?'하는 내면의 질문에서 출발하였다. 역시 직접 생성해내는 것 보다, 만들어진 라이브러리를 활용하는게 가장 빠르고 편한 것 같다. 관련 라이브러리는 Bootstrab, JQuery-ui로 두 개의 검색 결과가 있었으나, 본인의 경우 JQuery-ui를 활용하여 tooltip을 생성하고, 그에 대한 내용을 포스팅할 예정이다. https://jqueryui.com/tooltip/ Tooltip | jQuery UI Tooltip Customizable, themeable tooltips, replacing native tooltips. Hover the links ab.. 2023. 12. 7. 이전 1 2 3 4 5 6 다음 반응형
