본문 바로가기

전체 글

 (91)
JSP_6강(MVC 예제) Model - DataDto Lombok 어노테이션 선언 후 DB table 안에 저장한 컬럼명과 똑같이 변수를 작성해준다. @Data // Lombok 어노테이션(Getter/Setter) public class DataDto { private int m_code; private String m_str; private int m_int; private String m_date; } View - jsp - home.xml 각 페이지로 이동할 수 있는 메인페이지 데이터 관리자 [데이터 입력] [데이터 목록] ${nowtime} - inputFrm.jsp 정보를 입력하는 페이지 데이터 입력 다음 데이터를 입력하세요. 문자열 : 정수 : 날짜 : - dataList.jsp 입력한 정보 리스트를 한번에 볼 수 ..
JSP_5강(MVC) Web 프로젝트 디자인 패턴 MVC 틀 Model - Data 처리용 => Model, ModelAndView, Dto 클래스 View - 화면 처리용 => jsp, thymeleaf, react 등 (HTML) Controller - 서비스 제공 및 제어 => Service, Dao 클래스 등 서비스(기능) 처리 단계 = View(url) -> Controller -> Service -> Dao -> DB 이때 Dao는 Mybatis를 이용하기 때문에 Class가 아닌 Interface로 작성해준다. 참고) Interface란? 객체지향 특성인 추상화(Abstraction)을 제공하기 위한 코드 작성 방법으로, 메소드의 선언부만 작성한다. 인터페이스의 존재는 다중상속에 있다. 클래스를 이용해 다중상속을..
JDBC_3강(spr) JDBC 연동 프로그램 추가 1. 프로그램 생성 시 프로젝트명 등 설정을 마친 뒤 Dependencies를 선택할 때 Lombok / Spring Web과 함께 세 가지를 추가해준다. => JDBC API / MyBatis Framework / MySQL Driver 2. pom.xml 추가 앞서 tomcat과 jstl 라이브러리 추가해준 것과 마찬가지로 다음 내용을 추가해준다. org.bgee.log4jdbc-log4j2 log4jdbc-log4j2-jdbc4.1 1.16 3. apllication.properties 설정 jsp와 static resources를 설정하고 DB 및 Mybatis에 대해서도 설정해주어야 한다. // jdbc setting spring.datasource.driver-cl..
jQ_5강 요소의 관계로 요소 선택 방법 1. 상위 요소 선택 한 단계 위의 요소(부모) : $(selector).parent(); 윗단계 모든 요소(조상) : $(selector).parents(); 선택 요소와 지정 요소 사이의 조상 : $(selector).parentsUntil(other_selector); 예제) div (great-grandparent) ul (grandparent) li (direct parent) span div (grandparent) p (direct parent) span 부모선택 상위요소선택 ...까지선택 2. 하위 요소 선택 한 단계 하위 요소(자식) : $(selector).children(); 자손 요소 : $(selector).find("filter"); 예제) div(..
jQ_4강 style(CSS) 변경 1. $(selector).css("css 속성", "속성값") 2. class로 변경 클래스 추가 : $(selectro).addClass("클래스 속성값"); 클래스 제거 : $("selector).removeClass("클래스 속성값"); 클래스 토글 : $("selector).toggleClass("클래스 속성값"); 예제) 클래스 추가 클래스 삭제 클래스 토글 DIV 요소의 추가/삭제 1. 추가 밑에 추가 : $(selector).append("추가 요소"); 위에 추가 : $(selector).prepend("추가 요소"); 특정 요소 밑에 추가 : $(selector).after("추가 요소"); 특정 요소 위에 추가 : $(selector).before("추가 요소..
jQ_3강 jQuery Effect 1. 기본 effect hide/show : 요소 숨김(display: none)/보임 fade : 서서히 나타나거나 사라지게 하는 효과 slide : 아래에서 위로 사라지거나 위에서 아래로 나타나게 하는 효과 animate : 사용자 정의 애니메이션 효과를 요소에 추가 stop : 동작 중인 effect를 중지시킴 => 모든 effect에는 시간을 설정할 수 있음(밀리초 단위) => callback(콜백) 함수 : 작업 처리 후 호출하는 함수로, effect 함수는 모두 callback 함수를 정의해 effect 처리가 종료되는 시점에서 또다른 작업을 처리하도록 작성할 수 있음 2. Fade In & Out fadeIn(speed, callback) : 서서히 나타나는 효과 f..
jQ_2강 Selector(선택기, 선택자) 태그명, id 속성값(#), class 속성값(.), *(모든 요소 선택), this(이벤트 발생 요소) 이때 this는 버튼일 경우 클릭한 버튼 자체가 되며, 문자열로 넣지 않는다. 조합 선택기) 태그명.클래스값 => ex) $("p.cls") : 태그명.first => ex) $("p:first") : 여러 p 요소 중 첫 번째 기타 선택기) [속성] => ex) $("[href]") : href 속성이 있는 들 태그[속성='값'] => ex) $("a[target='_blank'") : 인 요소들 버튼 타입의 input 태그 : $(":button") $("tr:even") : 테이블 짝수 행 $("tr:odd") : 테이블 홀수 행 CSS의 선택기와 동일 : $(..
jQ_1강 jQuery 구문(작성법) HTML 요소를 '선택(Selecting)'하고, 그 요소에 '동작(Action)'을 수행하도록 한다. 기본 문법 : $(Selector).action(); - Selector(선택자) : HTML 요소를 찾기 위한 키워드 => CSS와 동일 - action() : 요소에 대해 수행할 작업(요소의 동작), 이벤트 처리 등 - 태그명 : 태그 이름 그대로 작성 ex) 무언가 => '.div01' - class/id명 : 각각 '.' 및 '%'과 클래스명 ex) 무언가... => '#d01' ex) $("p").hide() => 모든 태그를 안 보이게 함 기본 js 상태는 아래와 같이 긴 코드로 이루어져 있다. const pelem = document.getElementsByTag..

티스토리툴바