web 썸네일형 리스트형 [JS][HTML] 브라우저 이미지 캐싱 피하기 브라우저 이미지 캐싱 피하기 요약 : 요청 url에 ? 쿼리를 추가한다. 프로필 사진을 변경하는 기능을 구현하던 중, 프로필 사진 변경요청에서 성공적인 응답을 받으면 프로필사진 태그만을 reload 하는 기능을 구현하였습니다. 태그의 src속성을 다시 초기화하면 될줄 알았지만, 이는 동작하지 않았습니다. 개발자 콘솔의 네트워크탭을 확인해보니, 아얘 서버에 있는 프로필 image에 접근하지 않는 현상을 발견하였습니다. 이유는 브라우저가 이미지를 캐싱하기때문입니다. 브라우저는 네트워크 성능 향상을 위해, 해당 페이지에서 요청한, image, file, js, css등을 캐싱하여 사용합니다.(원래 몰랐습니다 TT) 아래의 사진은 크롬의 인터넷 사용기록 삭제 기능입니다.여기서 보면, 캐시된 이미지 또는 파일 이.. 더보기 [wed][HTML/CSS] vh/vw와 %의 차이 vh / vw와 %의 차이요약 : vw와 vh는 스크롤바 포함, %는 미포함 안녕하세요. 부끄럽지만, vh/vw라는 css단위를 최근에서야 알게 되었습니다.기본적으로 vh와 vw는 각각 view port의 높이와 너비를 의미합니다. 즉 body의 width를 100vw, height를 100vh로 지정하면 body의 부피는 화면 전체를 차지하게 됩니다.그렇다면, body의 width와 height를 100%로 지정하는 것과는 어떤 차이가 있을까요? vw와 vh를 사용한 경우 %를 사용한 경우 위 두 사진의 차이점은 스크롤 바가 발생했느냐 아니냐의 차이입니다.vw와 vh를 사용하여 body의 크기를 설정한 경우(100으로), 스크롤바가 발생되게 됩니다.%의 경우는 그렇지 않고요. vw와 vh에서 스크롤바가.. 더보기 [web][jquery][jquery-ui] jquery color관련 animation 사용하기 jquery-ui.js jquery를 사용하면 js를 사용해서 복잡한 애니메이션 조금 더 간편하게 구현할 수 있습니다.그런데, jquery만 가지고는 하지못하는 애니메이션들이 있습니다. 대표적인 예로 color속성이 있습니다. 예를들어 이러한 js코드가 있습니다. 1234$(".remote .category").children("a").eq(0).animate({ fontSize: "1.5em", color: "white"})Colored by Color Scriptercs 위의 코드는 어떤 DOM객체에 fontSize와 color를 변경하는 애니메이션입니다.단순 jquery만을 로드한채라면 저 애니메이션은 예상한대로 동작하지 않습니다.fontSize만 증가하고, color는 변화가 없을 것입니다. 이때 필요한 것이, jque.. 더보기 [node][socket.io][redis] cluster사용시 socket.io와 redis node에는 cluster라는 것이 있습니다. node는 sigle thread이지만, cluster를 사용하여, 다수의 프로세스에서 서버를 동작시킬 수 있습니다.하지만 cluster간에는 데이터의 공유가 불가능 합니다. 이렇게 분리된 cluster환경에서 socket.io 을 이용한 프로그래밍을 하다보면, cluster끼리 socket.io 객체를 공유해야 하는 상황이 발생할 수 있습니다. socket.io에서는 redis를 이용한 store를 제공합니다. 이에대해서 (조대협님의 블로그)에서 자세히 다루었지만, socket.io 최신버전에서는 링크된 블로그에서 사용하는 io.set을 통해 redis설정을 할 수 없습니다. 본 글에서는 최신버전에서 적용방법을 다루었습니다. (1.4.8 버전기준) redi.. 더보기 [JavaScript]2중 반복문, 중첩 반복문에서 break, continue break와 continue는 코딩에서 굉장히 유용하게 사용되는 키워드 입니다.두 제어문 모두 반복문을 제어하기 위해 쓰입니다. 코딩을 하다보면 2중반복문 혹은 n중반복문을 사용하게 되는 경우가 많은데요. 이렇게 중첩반복문에서는 원하는 대로 반복문을 컨트롤 하고 싶다면, 약간 특이한 형태의 반복문을 사용해야 합니다. 123456789for(let outLoop = 0; outLoop 더보기 [html][JavaScript] localStorage HTML 5 명세에는 localStorage라는 내부 저장소가 있습니다.localStorage는 Window객체에 정의된 property입니다. whatwg명세 브라우저 지원 현황입니다. (Opera Mini는 지원하지 않습니다) localStorage는 각각의 origin당 개별 공간이 유저의 로컬저장소에 주어집니다. origin은 한국어로 "기원"이라는 말입니다. 현재 이 페이지에서 document.origin을 출력하면, "http://graykick.tistory.com/" 이 출력될것 입니다. 사용 예제를 보겠습니다. 123456window.onload = function() { if (window.localStorage && window.localStorage.getItem("nick")) {.. 더보기 이전 1 다음
