javaboiii의 Web 34

Web - 리스너(Listener)

WEB리스너(Listener)란리스너는 웹 애플리케이션의 다양한 이벤트를 감지하고 처리할 수 있는 특수한 형태의 서블릿 클래스임.서블릿(Servlet)이라는 것은 자바 기반의 서버측 컴포넌트로, 웹 애플리케이션에서 클라이언트의 요청을 처리하고응답을 생성하는 역할을 함.리스너는 이러한 서블릿의 하위 클래스이며, 기본 서블릿 기능 외에도 특정 이벤트에 반응하여추가적인 처리를 수행할 수 있음웹 어플리케이션을 개발할 때, 특정 이벤트에 반응하거나 애플리케이션 상태를 감시해야 할 때가 있이러한 기능을 제공하는 것이 '리스너(Listener)'임 POJO와 리스너의 차이POJO (Plain Old Java Object): POJO는 간단한 자바 객체로, 특정 인터페이스를 구현하지 않거나 상속받지 않으며, 복잡한 제..

javaboiii의 Web 2024.09.02

Web - 12) 프로젝트 작성

WEB웹 애플리케이션 개발을 시작하려면 체계적인 프로젝트 구조를 설정하고, 필요한 파일과 폴더를 정리하며, 웹 사이트 템플릿을 적용하는 것이 중요함웹 앱 프로젝트 작성 및 구조 생성웹 애플리케이션 프로젝트를 효과적으로 작성하기 위해서는 서버 환경을 설정하고, 프로젝트의 파일 구조를 체계적으로 정리하는 것이 필수적(1) 웹 서버 추가 (Tomcat)웹 애플리케이션을 실행하려면 웹 서버가 필요함. Apache Tomcat은 자바 서블릿 컨테이너로, 자바 기반 웹 애플리케이션을 실행할 수 있게 해줌Tomcat 다운로드 및 설치:Apache Tomcat의 최신 버전을 Tomcat 공식 웹사이트에서 다운로드다운로드한 파일을 압축 해제하여 적절한 위치에 설치Tomcat 설정:conf/server.xml 파일을 열어..

Web - 11) 프로젝트 구조 설계

WEB웹 애플리케이션의 성공적인 개발을 위해서는 명확한 프로젝트 구조 설계가 필요함.프로젝트의 복잡성을 줄이고, 팀원 간의 협업을 원활하게 하며, 유지보수를 용이하게 함웹 앱의 구조도 작성웹 애플리케이션의 구조도는 시스템의 구성 요소와 그들 간의 관계를 시각적으로 표현한 다이어그램임.구조도를 통해 애플리케이션의 전반적인 아키텍처를 이해하고, 개발 과정에서의 방향성을 제시할 수 있음(1) 웹 앱 구조도웹 앱 구조도는 애플리케이션의 주요 컴포넌트와 이들 간의 상호작용을 나타냄 클라이언트: 사용자 인터페이스(UI)와 사용자와 상호작용하는 브라우저 측의 애플리케이션서버: 비즈니스 로직을 처리하고, 클라이언트의 요청을 처리하며, 데이터베이스와 상호작용하는 서버 측 애플리케이션데이터베이스: 데이터를 저장하고 관리하..

Web - 10) 캔버스를 사용한 애니메이션

WEBHTML5 캔버스를 사용하면 웹 페이지에서 동적인 애니메이션을 쉽게 구현할 수 있음. 애니메이션을 구현하기 위해서는 캔버스의 상태를 관리하고, 애니메이션의 프레임을 업데이트하며, 화면을 갱신하는 과정이 필요함 캔버스에서 애니메이션을 구현하는 순서(1) 캔버스 클리어애니메이션을 매 프레임마다 새롭게 그리기 위해서는 캔버스를 먼저 지워야 함. clearRect 메소드를 사용하여 캔버스의 전체 영역을 지울 수 있음function clearCanvas(ctx, canvas) { ctx.clearRect(0, 0, canvas.width, canvas.height);}이 함수는 주어진 ctx(2D 콘텍스트)와 canvas를 사용하여 전체 캔버스를 지움(2) 캔버스 상태 저장애니메이션에서 그림을 그리기 전에..

Web - 9) 자바스크립트로 Canvas 제어

WEBHTML5의 요소는 웹 페이지에 동적 그래픽을 그릴 수 있는 강력한 도구임. 자바스크립트를 사용하여 2D 또는 3D 그래픽을 렌더링하고, 애니메이션을 구현하며, 사용자와 상호작용할 수 있음.HTML5 캔버스의 사용법HTML5 캔버스는 태그를 사용하여 웹 페이지에 삽입할 수 있음. 캔버스는 기본적으로 비어 있으며, 자바스크립트를 통해 그래픽을 그릴 수 있는 영역을 제공(1) 기본 캔버스 설정HTML 문서에 요소를 추가하여 캔버스를 설정. 캔버스의 너비와 높이는 속성으로 지정할 수 있으며, 이를 통해 캔버스의 크기를 정의함 id 속성을 사용하여 캔버스를 식별할 수 있으며, width와 height 속성으로 캔버스의 크기를 설정함캔버스 제어하기자바스크립트를 사용하여 캔버스에 그래픽을 그리려면 ..

Web - 8) 제이쿼리를 사용한 태그 제어와 Ajax

WEB제이쿼리(jQuery)는 웹 개발에서 매우 유용한 JavaScript 라이브러리로, HTML 문서의 탐색, 이벤트 처리, 애니메이션, Ajax 요청을 간편하게 다룰 수 있게 도와줌제이쿼리 기본 사용법제이쿼리를 사용하려면 제이쿼리 라이브러리를 다운로드 받아서 소스에 포함하거나CDN(Content delivery network, 컨텐츠 전송 네트워크)을 사용해 HTML 파일에 추가 해야됨기본 문법제이쿼리는 $() 함수를 사용하여 DOM(Document Object Model) 요소를 선택하고 조작할 수 있음$(선택자).메소드(); 선택자(selector)는 HTML 엘리먼트를 선택하는 방법이며, 메소드는 선택한 엘리먼트에 적용할 작업을 정의임제이쿼리 셀렉터는 다양한 방법으로 HTML 엘리먼트를 선택할 ..

javaboiii의 Web 2024.08.30

Web - 7) JavaScript 함수와 객체

WEB함수와 객체함수 개요와 내장 함수함수 개요함수는 특정 작업을 기술하는 곳으로 함수명(인수리스트) { } 로 구성되며 실행결과는 return문을 사용해서 반환함또한 재사용성과 모듈화를 제공함수를 사용할 때 반드시 알아야 할 3가지 사항은 다음과 같음함수가 하는 일 : 함수명함수 인수의 개수와 타입 : 인수리스트함수의 실행결과 타입(리턴타입) : return문내장 함수자바스크립트에는 자주 사용되는 다양한 내장 함수들이 있음parseInt(), parseFloat(), isNaN(), isFinite(),alert() 등예)alert("메세지 내용");사용자 정의 함수사용자 정의 함수는 특정 작업을 처리하기 위한 절차나 나열한 함수로 필요에 따라서 작성함. 사용자 정의 함수는 var 함수명 = funct..

Web - 파일 업로드 예제

WEB파일 업로드는 클라이언트(사용자)가 자신의 로컬(본인의 PC나 폰)에서 파일을 선택해서 웹 서버로 전송하는 과정을 의미함. 이 파일은 서버에서 처리되며, 데이터베이스에 저장되거나 웹 페이지에서 사용됨 cos(Component Object Server) 라이브러리는 Apache Commons FileUpload의 파일 업로드 기능을 지원하기 위한 컴포넌트임. 이 라이브러리는 파일 업로드 요청을 처리하고 파일을 서버에 저장하는 기능을 제공함. COS는 파일 업로드를 쉽게 처리할 수 있도록 도와줌 jakarta.servlet의 @MultipartConfig 어노테이션을 이용해 이미지 파일을 처리 @MultipartConfig 어노테이션은 파일을 가지고 이동되는 경로(servlet 또는 Action)에 작..

javaboiii의 Web 2024.08.28

Web - 6) JavaScript 제어문

WEB제어문프로그램의 실행 순서를 제어하는 조건문, 반복문, 기타 제어문이 있다.조건문 : 조건을 사용해서 프로그램 실행 순서 제어if문, switch문반복문 : 프로그램 실행을 반복문을 사용해서 제어for문, while문, do-while문기타 제어문 : 그 밖의 프로그램 실행 순서 제어반복문을 탈출 또는 일시 탈출 : break문, continue문객체 생략 : with문예외처리 : try-catch-finally문조건문조건문에는 if문, switch문, 조건 연산자가 있다. if문주어진 값에 따라 결과가 2개로 분기 시 사용되며, 조건과 결과로 구성된다.조건 : ~이면결과가 2개 : 참 또는 거짓복잡한 조건식을 구현할 떄는 and, or 연산자를 사용한다. 자바스크립트의 and, or 연산자는 &&..

Web - 5) JavaScript의 개요

WEB1. 자바스크립트의 개요자바스크립트란자바스크립트는 넷스케이프사에서 웹 페이지의 처리 능력을 향상시킬 목적으로 개발한 LiveScript 기반으로,넷스케이프사와 선마이크로시스템즈사가 공동으로 개발한 스크립트 언어.연산자와 제어문은 C/C++과 유사하며 객체지향의 상속 방식은 프로토타입(prototype)기반. 프로토타입 기반(prototype-based)프로토타입 기반은 객체지향의 한 형태로, 클래스가 없이 객체의 프로토타입(원형)을 복제해서 재사용하는 방식으로 상속한다. 프로토타입 기반은 클래스리스(class-less), 프로토타입 지향(prototype-oriented) 또는 인스턴스 기반(instance-based) 이라고도 부른다. 자바스크립트는 웹 브라우저를 제어하고 웹 페이지의 동적인 변화..