WakaraNai

MVC Model-View-Controller의 약자 Model : View가 렌더링하는데 필요한 데이터. ex - 사용자가 요청한 상품 목록이나, 주문 내역 View : 웹 애플리케이션에서 View는 실제로 보이는 부분이며, 모델을 사용해 렌더링을 합니다. 뷰는 JSP, JSF, PDF, XML등으로 결과를 표현 Controller : 사용자의 액션에 응답하는 컴포넌트. 컨트롤러는 Model을 업데이트하고, 다른 액션을 수행. MVC Model Model 1 아키텍처 브라우저가 요청하면 해당 요청을 JSP가 받음 -> 그렇기에 요청만큼 JSP 페이지가 필요함 JSP는 JAVA로 만든 클래스인 Java Bean(DAO클래스 등)을 이용해 DB를 사용 그 결과를 화면에 출력. 단점 - JSP 자체에 Jav..

DTO Data Transfer Object의 약자 계층간 데이터 교환을 위한 자바빈즈 여기서의 계층이란 컨트롤러 뷰, 비지니스 계층, 퍼시스턴스 계층을 의미 일반적으로 DTO는 로직을 가지고 있지 않고, 순수한 데이터 객체 데이터를 한꺼번에 들고 다닐 수 있도록 만들어짐 필드와 getter, setter를 가진다. 추가적으로 toString(), equals(), hashCode()등의 Object 메소드를 오버라이딩 할 수 있습니다. public class ActorDTO { private Long id; private String firstName; private String lastName; public String getFirstName() { return this.firstName; } pub..

Spring JDBC JDBC를 사용하면 반복적인 코드가 많기에 저수준의 세부사항을 Spring이 처리해줌 개발자는 필요한 부분만 개발하면 됨 (연결 파라미터 정의) : 이 사용자가 어떤 DB에 접속하게 할 건지 (SQL문 지정) : 어떤 테이블에 query문을 보낼지 등을 정함 Spring JDBC 패키지 org.springframework.jdbc.core JdbcTemplate 및 관련 Helper 객체 제공 org.springframework.jdbc.datasource DataSource를 쉽게 접근하기 위한 유틸 클래스, 트랜젝션매니져 및 다양한 DataSource 구현을 제공 org.springframework.jdbc.object RDBMS 조회, 갱신, 저장등을 안전하고 재사용 가능한 객..

DI 설정을 java config로 설정해보기 xml로 설정하면 에러 찾기 여간 까다롭지만 다음과 같이 설정하면 어느 지점에서 에러가 발생하였는지 조금 더 쉽게 찾을 수 있다 Java config를 이용한 설정을 위한 어노테이션 @Configuration 스프링 설정 클래스를 선언하는 어노테이션 java config 클래스를 읽어들여 IoC와 DI를 적용. @Bean bean을 정의하는 어노테이션 @Bean이 붙은 메소드를 자동 실행하여 그 결과로 반환된 객체들은 기본적으로 싱글턴으로 관리 아래의 4 종류의 어노테이션이 붙어 있지 않은 객체는 @Bean으로 직접 생성하여 사용 @ComponentScan @Controller, @Service, @Repository, @Component 어노테이션이 붙은 ..

Container 객체의 생명주기를 관리하며, 그 객체에 추가적인 기능을 제공 예로 Servlet을 실행해주는 WAS는 Servlet 컨테이너를 가지고 있다고 말함. WAS는 웹 브라우저로부터 Servlet URL에 해당하는 요청을 받으면, Servlet을 메모리에 올린 후 실행 개발자가 Servlet 클래스를 작성했지만, 실제로 메모리에 올리고 실행하는 것은 WAS가 가지고 있는 Servlet 컨테이너. Servlet 컨테이너는 동일한 Servlet에 해당하는 요청을 받으면, 메모리에 올리지 않고 기존에 메모리에 올라간 Servlet을 실행하여 그 결과를 웹브라우저에 전달 IoC (Inversion of Control) Container가 코드 대신 객체의 제어권을 갖고 있어 이 상황을 IoC(제어의 ..

Spring Framework란? . 엔터프라이즈급 어플리케이션을 구축할 수 있는 가벼운 솔루션이자, 원스-스탑-숍(One-Stop-Shop) 원하는 부분만 가져다 사용할 수 있도록 모듈화가 잘 되어 있습니다. 모든 과정을 한꺼번에 해결 가능 IoC 컨테이너입니다. 선언적으로 트랜잭션을 관리할 수 있습니다. 완전한 기능을 갖춘 MVC Framework를 제공합니다. AOP 지원합니다. 스프링은 도메인 논리 코드와 쉽게 분리될 수 있는 구조로 되어 있습니다. Spring Framework Module - 20가지 필요한 모듈만 가져와서 사용 가능 AOP와 Instrumentation spring-AOP : AOP 얼라이언스(Alliance)와 호환되는 방법으로 AOP를 지원합니다. spring-aspect..

세로로 나열되는 block 요소를 가로로 배치하고 싶을 때 사용 float한 박스 요소에 가로 사이즈를 지정해야만 적용된다 heading과 inline 요소는 가로 사이즈를 지정하지 않아도 레이아웃이 유지된다 속성값 left : 요소를 왼쪽에 배치. 나머지는 그 주변을 흐르도록 함 보리건빵 보리분말을 함유한 건강건빵으로 입안 가득히 퍼지는 구수한 맛을 느끼시며 드실 수 있는 건빵입니다. right : 요소를 오른쪽에 배치. 나머지는 그 주변을 흐르도록 body { text-align: justify; } .float { float: right; width: 40px; margin: 10px; text-align: center; background-color: burlywood; }​ float된 요소와 ..

이벤트 등록을 하는 경우 각각의 항목에 클릭 시 특정 이벤트가 발생해야 할 때 addEventListner로 이벤트 등록 예1) 4개의 li 태그에 이벤트 등록하기 var log = document.querySelector(".log"); var lists = document.querySelectorAll("ul > li"); for(var i=0,len=lists.length; i < len; i++) { lists[i].addEventListener("click", function(evt) { log.innerHTML = "clicked" + evt.currentTarget.firstElementChild.src; }); } 만약 동적으로 새로운 li 태그가 추가된다면? 추가된 엘리먼트에도 이벤트를 ..

1. JavaScript파일 구성 Javascript 코드가 많지 않다면 한 페이지에 모두 표현하는 것도 좋습니다. 그렇지 않다면 의미에 맞게 구분하는 방법이 더 좋습니다. 적은 양의 코드면 HTML 안에 넣어서 더 빨리 가동되게 해줍니다. HTTP 요청은 CSS에 별도로 요청 없이 화면에 보일 수 있으니깐요. 2. HTML안에 JavaScript 구성하기 CSS는 head태그 안에 상단에 위치합니다. JavaScript는 body 태그가 닫히기 전에 소스파일 간 의존성을 이해해서 순서대로 배치합니다. 이미 선언된 element에 대해서만 js에서 인식할 수 있음 그래서 script를 html 하단에 적는 경우가 많음 Hello World DomContentLoaded element는 모두 로드 되었으나..

애니메이션 element가 좌우로 움직인다거나 사라질 때 점점 작아지면서 사라지는 것, 스크롤과 브라우저의 이동에 반응하여 브라우저가 다시 렌더링하는 과정 끊김없이 부드럽게 움직이는 방법을 고민하는 과정 CSS3의 transition과 transform 속성을 사용해서 구현 가능 js보다 더 빠름. 특히 모바일 웹에서는 CSS가 더욱 빠름 정리하면 간단하고 규칙적인 것 -> css 세말한 조작이 요하는 것 -> js FPS frame per second 초당 정지 화면 수 매끄러운 애니메이션은 보통 60fps JS 애니메이션 setInterval( 콜백함수, 실행간격) 개발자도구의 console 탭에서 실행해보기 //const interval = window.setInterval(()=> { // con..