전체 글 169

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) 이라고도 부른다. 자바스크립트는 웹 브라우저를 제어하고 웹 페이지의 동적인 변화..

Exception - javax.mail.SendFailedException

javax.mail.SendFailedException - address 를 보고email값을 먼저 확인해본 결과요청한 이메일이 null값으로 넘어오는 것을 확인 민감한 정보라고 생각해, POST 요청을 했지만servlet에서 GET으로 받음 또한 url로 요청을 하고 있었기 때문에 json으로 맵핑 후 post 요청servlet에서는 post로 받아서 응답 해결 해야할 일 요청 값이나 응답 데이터를 적어두고하나하나 꼼꼼하게 확인하자

DB - 데이터 모델링의 이해

데이터 모델링의 이해 데이터 모델링의 중요성 및 유의점- 중복 : 같은 시간 같은 데이터 제공- 비유연선 : 사소한 업무변화에 데이터 모델이 수시로 변경되면 안됨   데이터 정의를 사용 프로세스와 분리- 비일관성 : 데이터 간 상호 연관 관계에 대해 명확히 정의해야 함 데이터 모델링개념적, 논리적, 물리적 데이터 모델링 데이터 독립성 요소외부 스키마 : 개개 사용자가 보는 개인적 DB 스키마개념 스키마 : 모든 사용자 관점을 통합한 전체 DB내부 스키마 : 물리적 장치에서 데이터가 실제적 저장 데이터 독립성논리적 독립성 : 개념스키마 변경, 외부스키마에 영향 X물리적 독립성 : 내부스키마 변경, 외부 / 개념스키마에 영향 X Mapping(사상) : 상호 독립적인 개념을 연결시켜주는 다리논리적 사상 : ..