분류 전체보기59 JavaScript에서 옵저버 패턴을 활용한 클릭 이벤트 흐름 JavaScript에서 옵저버 패턴을 적용하면 모듈 간의 결합도를 낮추고, 이벤트 중심의 구조를 구현할 수 있다. 이번 예제에서는 버튼 클릭 이벤트를 통해 옵저버 패턴이 어떻게 동작하는지 살펴보자. 🧩 옵저버 패턴이란?옵저버 패턴은 객체의 상태 변화를 관찰하는 옵저버들의 목록을 객체에 등록하여, 상태 변화가 있을 때마다 객체가 직접 각 옵저버에게 통지하도록 하는 디자인 패턴이다. 이를 통해 객체 간의 결합도를 낮추고, 시스템의 유연성과 확장성을 높일 수 있다.📁 파일 구조/project-root├── js/│ ├── ObserverControl.js│ ├── SampleMain.js│ └── SampleList.js├── index.html🧱 옵저버 패턴 구성 요소ObserverCon.. 2025. 4. 15. JSP + Mustache.js + Ajax로 동적으로 데이터 렌더링하기 🔰 Mustache.js란?Mustache.js는 HTML에 데이터를 바인딩해주는 가볍고 심플한 템플릿 엔진이다.이름 그대로 {{변수}} 형태의 중괄호 문법을 사용해서 데이터를 템플릿 안에 삽입할 수 있다.Mustache의 특징은 다음과 같다:{{변수}}, {{#반복}}, {{/반복}} 같은 간단한 문법JavaScript 코드가 템플릿에 섞이지 않는 논리 없는 템플릿HTML 템플릿을 미리 만들어두고, Ajax로 받아온 데이터를 바로 렌더링 가능React나 Vue처럼 무겁지 않아서 JSP 기반 프로젝트에 가볍게 붙이기 좋음✅ 목표JSP 화면에서 Ajax로 서버 데이터를 요청하고Mustache.js로 데이터를 템플릿에 바인딩해서HTML에 출력하는 전체 흐름 구성📁 파일 구조resources/├── js/.. 2025. 4. 15. JSP에서 페이지별 JS 모듈을 invoke로 효율적으로 호출하는 방법 JSP 기반 프로젝트에서페이지마다 JS 파일을 독립적으로 구성하면서공통된 방식으로 초기화하는 패턴이 필요할 때가 있다.이 글에서는 invoker 객체를 통해JSP → JavaScript 객체를 호출하고 데이터를 전달하는 방식을샘플 예제와 함께 작성. ✅ 이런 구조가 필요한 이유✅ JS 모듈을 기능별로 분리하고 싶을 때✅ JSP에서 서버 데이터를 JS로 넘겨야 할 때✅ 페이지마다 init 함수를 호출하는 반복 코드를 통일하고 싶을 때 📁 예시 구성resources/├── js/│ ├── test.js ← 공통 invoker 정의│ ├── sampleMain.js ← 메인 페이지용 모듈│ └── sampleList.js ← 리스트 페이지용 모듈webap.. 2025. 4. 15. [javascript] DateRangePicker 달력 라이브러리 날짜를 사용하는경우는 종종 datepicker를 사용하는데 기간으로 받기 위해 알아보다 DateRangePicker를 알게되어 사용하게 되었다. 시작일과 종료일을 받을수있고 옵션으로 시간까지 받을 수 있기때문에 선택하였다. www.daterangepicker.com/ Date Range Picker — JavaScript Date & Time Picker LibraryOriginally created for reports at Improvely, the Date Range Picker can be attached to any webpage element to pop up two calendars for selecting dates, times, or predefined ranges like "Last .. 2024. 9. 27. [보안] 개발자 도구 감지 및 차단 개발자 도구란?개발자 도구란 개발자들이 페이지 수정과 문제 원인 파악을 쉽게 하기위해 브라우저에서 제공하는 도구이다.F12를 사용해서 열 수 있고, 웹 개발자들은 보통 개발자 도구를 열어놓고 작업을 하는 경우가 굉장히 많다. 1.Elements 패널GTML과 CSS 코드를 분석하고 실시간으로 수정이 가능 2. Console 패널자바스크립트를 실시간으로 실행할 수 있는 환경 제공 3. Network 패널 HTTP 네트워크의 통신을 확인 할 수있는 패널. 4. Application 패널브라우저의 저장소 기능을 담당하는 패널 이 처럼 편의성을 제공하기도 하고 개발을 하는데 있어서는 꼭 필요한 도구중 하나이다. 하지만 많은 것을 제공해주고 있는만큼 위험도 보안취약점을 가져올 수 있기도하다. 개발자 .. 2024. 8. 7. [restAPI] @restcontroller API converter 오류 @RestController 어노테이션을 사용해서 API를 만들려고했으나 오류가 발생해서 egov-comservelt.xml에 를 추가해서 package com.test.controller;import java.util.HashMap;import java.util.List;import java.util.Map;import javax.annotation.Resource;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;import org.springframework.stereotype.Controller;import org.s.. 2024. 7. 5. [Github Pages] 깃허브 페이지(github.io) 만들기 Githun PageGithub에서 제공하는 정적 웹사이트 호스팅 서비스 Github page는 github에서 제공하는 정적 웹사이트 호스팅 서비스로 자신의 repository에서 웹페이지를 구동할 수 있도록 해주는 서비스다. 이것을 이용해 나의 스팩을 소개하는 페이지를 만들 예정이다. 1. 우선 Github에서 새로운 repository를 생성한다리파지토리이름은 username.github.io형태로 작성한다 내 계정 기준이면 kangjaesoon.github.io가 된다 2. 만들어진 repository 확인 및 코드스페이스 접속 3. index.html생성 및 commit 1번을 통해 index.html을 만들고2번에서 원하는 html을 입력Tip : !(느낌표) + Tap을 사용하면 기본 htm.. 2024. 6. 25. [ubuntu] Apache Rewrite 설정하기 모바일로 접근할때 모바일도메인으로 리다이렉트 하는방법 1. JAVA 코드를 이용하는 방법 String userAgent = request.getHeader("user-agent");boolean mobile1 = userAgent.matches(".*(iPhone|iPod|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia|SonyEricsson).*");boolean mobile2 = userAgent.matches(".*(LG|SAMSUNG|Samsung).*");if(mobile1 || mobile2) { return new ModelAndVie.. 2024. 5. 24. [apache2] 아파치 Mod_jk 설정 mod_jk 모듈을 이용한 WEB/WAS 연동을 해보려한다 os : 우분투apache2 사용중 apache와 tomcat은 설치되어있다고 가정하고 1. mod_jk 설치apt-get install libapache2-mod-jk명령어로 모듈 설치 해당 패키지를 설치하면 /etc/libapache2-mod-jk/ 경로에 /workers.properties/ 파일과 httpd-jk.conf 심볼릭링크 파일이 생김. workers.properties 파일은 아파치와 톰캣사이에 연동과정에서 전달하는 worker 즉, 일하는 자를 정하는 파일이고 httpd-jk.conf 파일은 링크가 아파치 모듈 중 jk.conf 라는 파일로 이어지는데 이 파일은 workers.properties 의 경로와 로깅 경로를 .. 2024. 5. 24. 이전 1 2 3 4 ··· 7 다음
