분류 전체보기 (19) 썸네일형 리스트형 Spring JSP Model1, Model2, Spring MVC pattern 먼저 JSP에서 모든 로직과 출력을 처리하는지 JSP에서 출력만 처리하는지에 따라 모델 1과 모델 2의 구조로 구분된다. Model 1 모델 1 방식은 JSP가 데이터 입력과 출력은, 자바빈이 데이터 처리를 담당하는 구조를 가진다. 장점 : 단순한 구조로 간단한페이지를 구성할시 빠르게 개발할 수 있다 단점 : JSP페이지에서 모든 로직과 뷰를 처리하기에 JSP페이지 내에 자바 코드가 섞이게 되어 코드가 복잡해지므로 백엔드롸 프론트엔드의 분업이나 코드 유지보수가 어렵게 된다. Model 2 모델 2에서는 서블릿이 데이터 입력과 데이터 처리를 담당하고, 처리된 데이터를 자바빈에 담아 JSP에 전달한다. JSP는 모델 1과 다르게 데이터의 .. JSP 개발환경, 새프로젝트, 깃허브 연동 JSP 개발환경 JSP 개발환경을 만들어주기 위해서 다음 4가지를 설치해야한다 1. JDK 8 이상 : 설치후 JAVA_HOME과 path 설정 2. Tomcat 8.5 3. Spring Tool Suite 4 4. Maven 3 이상 : 설치 후 path 설정 각 설치는 순서대로 이곳에서 할 수 있다. 1. https://www.oracle.com/java/technologies/javase-jdk14-downloads.html 2. https://tomcat.apache.org/download-80.cgi 3. https://spring.io/tools 4. http://maven.apache.org/download.cgi JDK와 Maven은 cmd창에서 java -version과 mvn -vers.. jQuery jQuery란 jQuery는 자바스크립트 라이브러리로서 더 심플하고 쉬운 자바스크립트 코딩이 가능하게 해준다. jQuery 라이브러리는 다음을 포함한다 HTML/DOM manipulation CSS manipulation HTML event methods Effects and animations AJAX Utilities jQuery는 두가지 버전이 있고 모두 jQuery.com 에서 다운 받을 수 있다. jQuery Syntax jQuery 문법은 html 요소를 선택하고 그것에 대한 action을 행하게 하는 구성으로 이루어져있다 $(selector).action() ex) html에서 사용했던 id, class, tag들을 한번에 지정하여 사용할 수 있는것 $(this).hide() - hides .. Javascript AJAX AJAX - 페이지 로드 후 웹서버에서 데이터를 읽음 - 페이지를 다시 로드하지 않고 웹페이지 업데이트가 가능 - 뒷단에 있는 웹서버로 데이터 전송 AJAX Example 원하는 정보를 로드 할 수 있는 버튼을 생성한다 Let AJAX change this text Change Content ajax_info.txt 파일에서 원하는 정보를 가져와 페이지에 보여줄 수 있도록 로드한다 function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerH.. Javascript Browser BOM BOM은 Browser Object Model의 약자이다 window : 브라우저 윈도우 window.innerHeight - the inner height of the browser window (in pixels) window.innerWidth - the inner width of the browser window (in pixels) window.open() - open a new window window.close() - close the current window window.moveTo() - move the current window window.resizeTo() - resize the current window window.screen : 유저 스크린에 대한 정보 screen.width.. Javascript Form & HTML DOM Validation document.forms["myForm"]["fname"].value 로 form에 입력된 값을 가져와 유효검사할 수 있다 onsubmit="return validateForm() HTML에서는 생성한 함수를 불러줘야한다 checkValidity() 유효한 값이면 true를 리터난다 setCustomValidity() Sets the validationMessage property of an input element. Valid Properties html에서 설정한 유효한 범위의 값에 대해 판별한다 customError Set to true, if a custom validity message is set. patternMismatch Set to true, if an elemen.. Javascript : 자바스크립트는 스크립트 태그에 한데 모아서 작성할 수 있다. 와 두 곳 다 위치할 수 있다 getElementById() : id로 html 요소를 찾아 접근하는데에 쓰인다 id : html 요소 정의 innerHTML : html 요소안의 컨텐츠 정의 document.write() : 쉽게 html에 결과작성할 수 있지만 html 페이지 로드 후 사용된다면 현재 존재하는 html 페이지의 내용을 삭제해버리므로 test용도로 적절한 function window.alert() : 알림창 띄우기. window 키워드는 생략가능 console.log() : 브라우저가 데이타를 보여준다 (f12 -> Consol -> 새로고침하면 입력한 값을 볼 수 있다) window.print() : 현재 페이지를 인쇄할.. CSS Responsive Responsive Web Design Responsive Web Design이란 웹페이지가 디스플레이 환경에 따라 웹 페이지가 자동으로 변화하도록 하는 것이다. (반응형 웹페이지) The Viewport view point란 사용자가 볼 수 있는 웹페이지의 영역을 말한다. : 메타 태그로 viewpoint를 조절할 수 있다. 다음과 같은 viewpoint를 웹페이지에 항상 포함시켜야한다. width=device-width : 페이지의 가로길이가 디바이스의 디스플레이 길이를 따르도록 해준다 intial-scale = 1.0 : 페이지 로드시 initial zoom level을 설정한다 반응형 웹페이지를 위해 주의할점 크게 고정된 요소를 사용하지 말 것 특정 viewpoint에 대해 고정된 웹페이지를 만들.. 이전 1 2 3 다음
