개발일기 개발일기

JSP

• [jQuery] - $(document).ready(function() { ... });

  JSP 2025. 5. 10. 21:11

  $(document).ready(function() { ... }); 구문은 jQuery의 핵심 기능 중 하나로, JavaScript 코드가 HTML 문서가 완전히 로딩된 이후에 실행되도록 보장하는 메커니즘입니다. ✅ 기본 개념 $(document).ready(function() { // 여기에 DOM이 완전히 로드된 후 실행할 코드를 작성});즉, 태그 안에 있든 에 있든 관계없이, DOM이 준비되었을 때 정확하게 실행된다는 장점이 있습니다.✅ 왜 중요한가?HTML 요소들이 아직 로딩되지 않은 상태에서 JavaScript가 실행되면, 아래와 같은 문제가 발생할 수 있습니다.document.getElementById("myButton").addEventListener("click", functio..

  Read More
• Ajax - 비동기,동기 차이 및 예제(async/await, Promise, fetch API)

  JSP 2025. 3. 26. 14:14

  JSP에서 Promise와 async/await를 활용한 AJAX 개발1️⃣ 기존 jQuery AJAX 방식 (기본적인 JSP + AJAX)$.ajax({ url: "", type: "POST", data: { id: $("#id").val() }, success: function(response) { if (response === "YES") { alert("중복된 아이디입니다."); } else { alert("사용 가능한 아이디입니다."); } }, error: function() { alert("서버 오류 발생"); }});기존 jQuery 방식으로 AJAX 요청을 보내는..

  Read More
• [JSP] - Ajax 파일 업로드

  JSP 2025. 3. 25. 22:39

  @Overridepublic String requestHandler(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String UPLOAD_DIR = "file_repo"; String uploadPath = request.getServletContext().getRealPath("") + File.separator + UPLOAD_DIR; // 실제 파일 경로 객체 생성 File currentDirPath = new File(uploadPath); // 디렉터리가 존재하지 않으면 생성 if (!currentDirPath.exists(..

  Read More
• Ajax(Asynchronous JavaScript and XML) - 비동기,동기 차이 및 예제 1편

  JSP 2025. 3. 24. 22:50

  AJAX(Asynchronous JavaScript and XML) - 비동기 방식과 동기 방식 설명동기(Synchronous) 방식 일처리동기 방식에서는 클라이언트가 서버에 요청을 보내면 응답이 도착할 때까지 기다려야 합니다. 즉, 서버의 응답이 도착할 때까지 클라이언트는 다른 작업을 할 수 없으며, 다음 코드가 실행되지 않습니다.동기 방식 예제 (JavaScript)function syncRequest() { var xhr = new XMLHttpRequest(); xhr.open("GET", "https://api.example.com/data", false); // false는 동기 방식 xhr.send(); // 응답이 올 때까지 여기서 대기 if (xhr.status ==..

  Read More
• JSP - JSTL에서 ArrayLIst출력하기

  JSP 2025. 2. 11. 23:01

  1. JSP 기본 설정: 페이지의 언어를 Java로 설정하고, 콘텐츠 타입과 문자 인코딩을 UTF-8로 지정합니다. 이는 JSP 페이지에서 데이터를 제대로 처리하고 표시하기 위해 필요합니다.: Java에서 제공하는 java.util 패키지의 클래스를 임포트합니다. 여기서는 ArrayList와 같은 자료 구조를 사용할 예정이므로 이를 임포트합니다.http://java.sun.com/jsp/jstl/core" %>: JSTL을 사용하기 위한 설정입니다. c는 JSTL 태그의 접두어로, c를 사용하여 forEach와 같은 태그를 사용할 수 있게 됩니다. 2. Java 코드 - List 객체 생성 및 속성 설정 list = new ArrayList();list.add("Java");list.add("vue");..

  Read More
• JSP - JSTL 배열 반복문으로 출력하기

  JSP 2025. 2. 11. 22:58

  1. JSTL 설정: JSP에서 JSTL 태그를 사용하기 위해 c라는 접두어를 설정하고 있습니다. 이 접두어는 JSTL의 core 라이브러리를 참조하는데 사용됩니다.uri="http://java.sun.com/jsp/jstl/core": c 접두어가 참조하는 URI로, JSTL의 core 태그들을 사용하려면 이 URI를 지정해야 합니다. 2. Java 코드 - 배열 설정String[] str = {"apple", "banana", "grape", "orange", "kiwi"};: str이라는 이름의 문자열 배열을 선언하고 초기화합니다. 배열에는 5개의 과일 이름이 저장됩니다.request.setAttribute("str", str);: str 배열을 request 객체에 속성으로 설정하여 JSP 페이지..

  Read More
• JSP - JSTL 반복문 사용하기

  JSP 2025. 2. 11. 22:46

  1. 코드 설명(1) JSTL 설정: JSP에서 JSTL 태그를 사용하기 위해 JSTL 코어 라이브러리를 임포트합니다. 여기서 c는 JSTL의 core 라이브러리를 나타내는 접두어입니다. (2) 변수 설정: cnt라는 변수를 80으로 설정합니다. 이 코드에서는 cnt 변수는 실제로 사용되지 않지만, 예제로 포함된 코드입니다. 변수 설정과 관련된 다른 코드가 필요 없다면 이 부분은 생략할 수도 있습니다. (3) - 반복문 출발: 이 태그는 반복문을 처리하는 데 사용됩니다. begin, end, step 속성으로 반복의 범위와 증가 값을 설정할 수 있습니다.var="i": 반복문이 실행될 때마다 i라는 변수에 값을 할당합니다. 이 값을 통해 반복문 내에서 현재 인덱스를 사용할 수 있습니다.begin=..

  Read More
• JSP - JSTL 조건문 swich 사용하기

  JSP 2025. 2. 11. 22:44

  1. 코드 설명(1) JSTL 설정: JSP에서 JSTL 라이브러리를 사용하려면 이 설정이 필요합니다. c는 JSTL의 코어 태그 라이브러리를 참조하는 접두어입니다.uri="http://java.sun.com/jsp/jstl/core": 이 URI는 JSTL의 코어 태그 라이브러리를 참조하는 것입니다. 이를 통해 c 접두어를 사용하여 JSTL 태그들을 사용할 수 있습니다. (2) 변수 설정: cnt라는 변수를 80으로 설정하는 태그입니다. cnt는 조건문을 처리하는 데 사용될 값입니다. (3) c:choose - 조건 분기 짝수입니다. 홀수입니다. 일치하는 when 절이 없는 경우에 실행한다. : 여러 조건을 처리할 수 있는 ..

  Read More