손영배 블로그 누구나 쉽게 이해하고 습득하기

https://madplay.github.io/post/why-constructor-injection-is-better-than-field-injection

@Controller와 @RestController의 차이 HTTP @Response Body가 생성되는 방식의 차이 기존의 MVC @Controller는 View를 반환하지만, @RestController는 객체를 반환할때 객체 데이터는 Json/XML 타입의 HTTP응답을 직접 리턴하게 된다. @Controller + @ResponseBody를 선언해서 객체를 리턴하는 방법도 있다. 실행흐름 순서 @Controller의 실행 흐름 Client -> Request -> Dispacher Servlet ->Handler Mapping -> Controller -> View -> Dispatcher Servlet -> Response -> Client @Controller + @ResponseBody Cl..

H2DB H2DB는 자바 기반의 오픈소스 관계형 데이터베이스 관리 시스템(RDBMS)이다. Server mode Embedded mode 두 가지의 in-memory DB 기능 지원한다. *in-memory 데이터 스토리의 메인 메모리에 설치되어 운영되는 방식 브라우저 기반의 콘솔모드를 이용할 수 있고, 별도의 설치과정이 없이 용량도 2MB이하로 매우 저용량이다. 가볍기 때문에 빠르고, JDBC API또한 지원하고 있다. SQL 문법도 다른 DBMS들과 마찬가지로 SQL 지원 가능. 위와 같은 장점들 때문에 어플리케이션 개발 단계의 테스트DB로서 많이 이용된다. 자바 기반의 DBMS이므로 자바가 설치되어 있어야 한다. Spring Boot가 지원하는 인-메모리 데이터베이스 H2 HSQL Derby 더보기..

HTML과 data를 섞어서 html 화면에 변화를 주는 것. 1. HTML Templating 작업이란? 반복적인 HTML 부분을 template로 만들어두고, 서버에서 온 데이터(주로JSON)을 결합해서, 화면에 추가하는 작업이라고 할 수 있습니다. 랜더링이 서버에서 할까? 클라이언트에서 할까?는 고민사항이다. 문자열을 replace 해서 변환하는 작업을 해보자 var data = { title : "hello", content : "lorem dkfief", price : 2000 }; var html = "{title}{content}{price}"; var result = html.replace("{title}", data.title) .replace("{content}", data.conten..

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; }); } 문제 : 만약에 리스트가 몇개가 더 추가된다면 그 만큼 또 추가된 element들에게 addEventListener를 해줘야 하기 때문에 불편하다. 그래서 그래서 ul의 target에 다가 addEvnentLlist를 걸 수 있다. va..

var base = document.querySelector(".outside"); base.style.transform = "scale(2)"; base.style.left = "300px"; transittion, transform 속성의 변화를 주어 변경한다. CSS로 transform 효과 주는게 자바스크립트보다 더 빠르고 좋다 네이버나 구글에서는 애니메이션 효과를 어떻게 주는지 훔쳐보도록 하자

1. 애니메이션 애니메이션은 반복적인 움직임의 처리입니다. 웹UI 애니메이션은 자바스크립트로도 가능하지만, 규칙적이고 비교적 단순한 방식으로 동작되는 방식은 CSS3의 transition과 transform속성을 사용해서 대부분 구현가능합니다. 뿐만 아니라 자바스크립트보다 더 빠른 성능을 보장한다고 합니다. 특히 모바일웹에서는 CSS를 사용한 방법이 훨씬 더 빠릅니다. 2.FPS FPS(frame per second)는 1초에 화면에 표현할 수 있는 정지화면(frame)수 입니다. 매그러운 애니메이션은 보통 60fps입니다. 따라서 16.666초 간격으로 frame 생성이 필요한 셈이죠. (1000ms / 60fps = 16.6666ms) 앞서 말한 것처럼, 애니메이션은 CSS의 transition 속성..

GNB(Global Navication bar) 어는 페이지에 들어가든 공통적으로 사용할 수 있는 메뉴 최상위 메뉴로 보통 상단에 위치하고 있다. 메인메뉴 LNB (Local Navigation Bar) GNB를 누를 경우 소제목 형식으로 나오는 메뉴를 가리킨다. 네이게이션을 통해 특정 지역으로 가는 네비게이션 bar이다. SNB (Side Navigation Bar) 일반적으로 왼쪽에 많이 있기 때문에 LNB(Left Navigation Bar)라고 부르기도 한다. 메인메뉴와 서브메뉴를 제외한 나머지 사이드 메뉴이다. FNB (Foot Navigation Bar) 하단 메뉴를 가리킨다.