Knowledge
-
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("테스트"); }); 그렇다면 같은 클래스명을 공유하는 여러개의 엘리먼트에 한번에 이벤트를 ..
-
클라이언트, 웹 서버, RDBMS, WASKnowledge/Architecture 2019. 8. 6. 23:35
URL과 HTTP에 대한 포스팅을 하면서 서버와 클라이언트에 대한 언급을 몇번 한적 있다. 이번 포스팅에선 이 클라이언트와 웹 서버가 구체적으로 무엇인지, 어떻게 동작하는지와 함께 RDBMS, WAS 개념도 간단히 정리해서 포스팅 하려한다. - 클라이언트 요청을 하는 쪽, 쉽게 말하자면 웹 브라우져라고 해도 무방하다. 브라우저 주소창에 URI를 입력하여 웹 서버에 어떤 요청을 하니까. - 웹 서버 클라이언트의 요청을 받고 그에 해당하는 HTML 문서나 각종 리소스, 즉 서비스를 전달하는 것. 웹 서버는 이러한 기능을 수행하는 서버 컴퓨터를 칭하기도 하지만 웹 서버 소프트웨어를 의미하기도 한다. 웹 서버 소프웨어로는 Apache, Nginx, Microsoft IIS 등이 있다. - 요청 / 응답 과정을 ..
-
HTTP와 HTTPSKnowledge/Web 2019. 8. 6. 18:09
- 프로토콜 한국어만 할 줄 아는 사람과 영어만 할 줄 아는 사람간의 의사소통이 가능할까. 누군가는 바디랭귀지 같은 소리하면서 가능할 수도 있다고 하겠지만 정확하고 심도있는 논의는 불가능할 것이다. 그리고 만약 화자가 사람과 사람에서 컴퓨터와 컴퓨터로 바뀐다면 언어가 다른 상황에선 아주 간단한 의사소통의 가능성 마저도 완벽히 차단될 것이다. 이처럼 네트워크 상에서 컴퓨터간의 정확한 정보 교환을 위해서는 공통된 언어가 필요하다. 이를 표준통신규약, 프로토콜이라고 한다. 프로토콜의 종류엔 여러가지가 있는데 월드와이드웹에서 사용되는 HTTP도 그 중 하나다 - HTTP (Hypertext Transfer Protocol) HTTP는 서버와 클라이언트가 인터넷 상에서 데이터를 주고받기 위한 프로토콜이다. 주고받..