분류 전체보기
-
스프링 controller에서 파라미터를 받는 다양한 방법 ( @RequestParam, @RequestBody, @PathVariable)Knowledge/Spring 2019. 9. 4. 11:15
컨트롤러에서 파라미터를 받을 수 있는 다양한 방법이 있다 1. @RequestParam 어노테이션 활용 GET방식으로 넘어온 URI의 queryString을 받기에 적절해 html부터 단계별(?)로 밟아온 사람이라면 가장 쉽게 이해할 수 있을 어노테이션이다. 예를 들어 http://localhost:8080/reservation/api/reservations?reservationEmail=test@naver.com 이런 URI가 있다고 치면 Controller 단에서 1 2 3 4 5 6 7 8 9 10 11 @RestController @RequestMapping(path = "/api") public class ReservationsApiController { // email로 예약 내역 조회 @Ge..
-
데이터 바인딩을 도와주는 handlebars.js 사용법Knowledge/javascript 2019. 8. 26. 23:50
ajax로 가져온 데이터를 동적으로 추가해야 하는 상황은 상당히 자주 발생한다. Handlebars.js는 이런 상황을 좀 더 쉽게 처리할 수 있도록 도와주는 라이브러리.. 라는데 사실 익숙하지 않으면 되려 더 어렵다. 필자도 이번에 처음 써보면서 많이 헤맸는데 헤매면서 알게된, 진작 알았으면 좋았을 만한 것들을 정리해두려 한다. - 기본 사용법 기본사용법은 다음과 같다. 1. 템플레이팅할 html을 세팅한다. 이때 데이터 바인딩 시킬 부분은 {{바인딩시킬 데이터의 프로퍼티명}} 의 형태로 적는다. 2. htmlTemplate을 가져온후 Handlebars로 compile 한다. 3. 컴파일한 템플릿에 데이터를 집어넣는다. 이 때 리턴값은 html로 나온다. 4. 리턴받은 html을 target에 inn..
-
setTimeout에서 this사용하는 방법!Knowledge/javascript 2019. 8. 26. 13:35
자바스크립트 코드를 객체 리터럴 패턴으로 정리하던 중 이상한 현상이 발생했다. 객체안에 무한슬라이드의 다음 슬라이드 가져오는 함수를 집어넣었는데 setTimeout안에서는 객체내의 프로퍼티에 this로 접근할 수 없었던 것 말로하자니 두루 뭉술해서 간략화한 코드를 붙여보자면 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var slideObj = { // 이미지 UL imageUl : document.querySelector("ul"), getNextSlide : function (){ setTimeout(function() { // 201초 후( 넘어가는 듯한 트랜지션 효과가 모두 끝난 후 )에 xPosition 적용 this.imageUl.style.transition = "0s";..
-
클릭시 스크롤이 상단으로 이동하거나 주소 뒤에 #이 붙으면 범인은 A태그!Knowledge/HTML & CSS 2019. 8. 22. 23:02
어딘가를 클릭했는데 갑자기 스크롤이 상단으로 이동하거나 다른 주소로 이동했는데 이렇게 URI 가장 뒤에 #이 붙어있는 걸 본적 있는가? 이 두가지 현상의 범인은 모두 a태그다. 정확히는 형태의, #으로 막아놓은 A태그 보통 A태그 형태만 쓰고 기능은 자바스크립트로 구현하고 싶을 때 이런식으로 #으로 A태그의 기능을 막곤 하는데 #이 나름의 기능을 해버리기 때문에 원래 의도와 다르게 작동하는 것이라고 할 수 있다. 해결 방법은 여러가지가 있고 다 간단한데 ( 참고 : https://blog.mywebstyle.pe.kr/?p=65 ) 필자는 의 형태로 a태그 기능을 막는 걸 선호하고 추천한다. 뭐 특별한 이유는 없지만 애초에 A태그를 #으로 막는다는 것 자체가 귀차니즘의 산물인데 굳이 javascrip..
-
Spring에서 JSON을 편하게 리턴해보자! Jackson 라이브러리와 RestControllerKnowledge/Spring 2019. 8. 21. 21:29
- JSON 먼저 JSON에 대해 알아보자. JSON은 경량의 데이터 교환에 유용한 데이터 포맷이다. 주로 Ajax로 서버와 통신하며 데이터를 주고 받을 때 데이터 교환을 쉽게 하기 위해 사용한다. 그러나 Spring에서 클라이언트 단으로 JSON을 리턴하고 싶을 땐 이런 저런 조치가 필요하다. 이를 본격적으로 알아보기 전에 우선 MessageConvertor에 대해 알아보자 - MessageConvertor MessageConvertor는 스프링에서 자바 객체와 HTTP 요청 / 응답 바디를 변환하는 역할을 한다. 종류는 이처럼 다양한데 jackson라이브러리를 추가할 경우 객체를 JSON으로 변환하는 메시지 컨버터가 사용되도록 @EnableWebMvc에서 기본으로 설정되어 있다. 그렇기 때문에 Jac..
-
CSS와 javascript는 눈보다 빠르다 슬라이드와 무한슬라이드Knowledge/javascript 2019. 8. 13. 18:30
일정 시간이 지나면 가로로 넘어가는 슬라이드를 만들어보자. 준비물은 다음과 같다. div 하나, 가로로 쭉 이어붙인 li 다섯개, 그 li 다섯개의 총 너비와 같은 너비를 가진 ul 하나! 여기에 필자는 알아보기 좋게 배경색과 border를 좀 추가해서 준비했다 코드로 보면 아래와 같다 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 슬라이드 무한 슬라이드 body * { height: 50px; } .slide_box{ width: 200px; position: rela..
-
script 태그 위치와 onload, DOMContentLoaded, readyKnowledge/javascript 2019. 8. 13. 15:10
script는 아무 데나 넣을 수 있다. 그러나 아무 데나 놔서는 안된다 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 DOMContentLoaded var target = document.querySelector('div'); console.log(target); 시작 중간 끝 이 코드는 아래와 같은 결과가 나온다 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 DOMContentLoaded 시작 var target = document.querySelector('div'); console.log(target); 중간 끝 이 코드는 아래와 같은 결과가 나오고.. 뻔한 중간은 건너뛰고 script를 바로 위에 위치시키면 그제서야 비로소 의도한 결과를 얻을 수 있..
-
자바스크립트로 리스트에 이벤트 다는 방법 ( Event delegation / 이벤트 위임 )Knowledge/javascript 2019. 8. 12. 21:51
먼저 자바스크립트로 이벤트를 걸기 위해선 어떻게 해야할까? querySelector나 getElementBy를 활용해 이벤트를 걸 대상을 찾고 addEventListener를 활용해 원하는 이벤트를 걸어주면 된다 코드로 보면 아래와 같다 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 자바스크립트 이벤트 #target { width: 100px; height: 100px; background: blue; }; document.querySelector("#target").addEventListener("click",function(){ alert("테스트"); }); 그렇다면 같은 클래스명을 공유하는 여러개의 엘리먼트에 한번에 이벤트를 ..