What's New

191205 블로그 제작일지
191205 블로그 제작일지
캐시 헤더 캐싱 초보의 비애에서도 정리했지만, 캐시 헤더를 올바르게 추가해서 캐시가 제대로 동작합니다. 과하게 잘 돼서 문제였죠. HTML엔 캐시 헤더가 들어가지 않도록 해뒀습니다. Cache-Control 보시면 HTML 파일엔 no-cache가 들어가 있는 걸 보실 수 있을 겁니다. 각종 최적화 이제 무작정 늘어놓기보단 최적화도 좀 하면서 일을 벌일까 생각 중입니다. 워드프레스는 각종 쿼리 덕에 사이트 편집이 쉽지만, 쿼리...
[자바스크립트] 현재 중심적인 시간 표시하기
[자바스크립트] 현재 중심적인 시간 표시하기
"2019.12.04 23:00" 처럼 표기된 시간을 현재 시각을 기준으로 "13분 전" 처럼 변경하는 스크립트입니다. 아래 작성한 코드는 티스토리에 적용하는 용도로 작성한 코드인데, 시간 바꾸는 부분만 응용하시면 어디서든 사용하실 수 있지 싶네요. function date() {   const now = new Date().getTime();   [...document.querySelectorAll(".date a")].forEach(a => {       a.classList.add("abuseReport");       a.parentNode.parentNode.appendChild(a);   });   //티스토리 댓글 신고 버튼 밖으로 뺴기   [...document.querySelectorAll(".date")].forEach(a => {       if (!a.classList.contains("modded")) {           const text = a.innerText.trim(),               date = new Date(text).getTime(),               diff = (now - date)/1000,               dayDiff = Math.floor(diff/86400);           a.innerText = `${               diff < 86400               ? (                   text.length > 13                   //글자가 13자 초과면 보통 시간 정보가 있으니 13자 초과일 때만 n시간 전으로 표시                   ? (                       diff < 240 ? "방금" : diff < 3600 ? `${Math.floor(diff/60)}분 전` : `${Math.floor(diff/3600)}시간 전`                   )                   : (                       "오늘"                   )               )...
캐싱 초보의 비애
캐싱 초보의 비애
10월 24일에 적은 제작일지에서 캐시 헤더를 추가했다고 적었는데, 일단 거기서부터 틀렸습니다. 제일 먼저 .htaccess를 수정해 코드를 작성했습니다. 제가 어드민이라 conf 파일을 수정할 수 있음에도요. 더 큰 문제는 서버에 캐시 헤더를 추가하기 위한 모듈이 설치되어 있었지만 저는 그 모듈을 활성화하지 않고 모듈이 활성화돼있으면 캐시 헤더를 설정하는 코드만 추가해뒀고, 당연히 캐싱은 제대로 작동하고 있지 않았습니다. 그제 그...
왜 텅 빈 Array는 true인가
왜 텅 빈 Array는 true인가
자바스크립트가 좀 이상한 구조를 보이는 부분이 많아서 그런지 그냥 사용자가 많아서 그런지 자바스크립트를 까는 밈이 여기저기 많더라고요. this는 꽤 예전엔 진심으로 까는 사람도 많았고, [] == 0이고 "\t" == 0이지만 [] != "\t"인 기묘한 등식([] != []인데 [] == "\t"인게 더 기묘하지 않았을까 싶지만)을 이용한 건 물론이거니와, 자바스크립트의 기묘함을 이용해 []()!+ 만으로 코딩하는 JS**ck까지 꽤...
[T 전화 테마] TWICEZINE 2
[T 전화 테마] TWICEZINE 2
소개 테마로 만들만한 사진 없나 찾아보다 정장 입은 트와이스가 눈에 들어와 만들어본 테마입니다. 배경이 깔끔하게 흰색이라 작업하기 생각보다 편했네요.아무리 그래도 자동 선택으로 그냥 지워버리면 꽤 끔찍한 결과가 도출돼서, 특정 색상을 지우는 방법이나 레이어의 테두리를 다듬는 방법 등을 공부하는 계기도 됐습니다. 그리고, 이번 테마에선 다이얼 화면의 버튼을 점으로 바꾼 버전도 제작해봤습니다.안 그래도 피쳐폰 쓰던 시절부터 익숙해진...
티스토리 스킨 배포 - Frameless Gallery
티스토리 스킨 배포 - Frameless Gallery
사진 중심의 블로그를 꾸미시는 분들을 위한 스킨입니다.다양한 썸네일 중심의 기능과, 이미지를 편하게 볼 수 있는 기능들을 제공합니다. 라이브 데모 주요 기능다운로드상세 설명 주요 기능 - Lazy Load : 화면 밖에 있는 이미지의 로딩을 지연해 훨씬 바른 블로그 제작 가능- 이미지 갤러리 : 본문의 이미지를 한 번에 모아볼 수 있도록 해주는 기능- 이미지 크게 보기 :...
[티스토리] 원하는 태그만 랜덤으로 출력하기
[티스토리] 원하는 태그만 랜덤으로 출력하기
티스토리에서 기본적으로 랜덤 태그 치환자를 제공해줍니다만, 원하는 태그 몇 개 안에서만 랜덤으로 태그를 출력하고 싶으실 때 이 스크립트를 사용하시면 됩니다.*주의 : 티스토리 치환자와 달리 cloud(숫자) class를 추가하실 수 없습니다. randomTag = (tags, element, count) => {   const target = document.getElementById(element);   let i = 0;   for (i; i <= count; i++) {     const random = Math.floor(Math.random() * tags.length),       a = document.createElement('a');          tags[random] !== undefined && (       a.href = `/tags/${encodeURI(tags[random])}`,       a.innerHTML = tags[random],       tags.splice(random, 1),       target.append(a)     )   } }; 위 스크립트를 </body> 앞에 추가하신 뒤 randomTag(['원하는', '태그를', '여기에', '입력'], '태그가 들어갈 요소 ID', 10) 제일 마지막에 들어간 숫자는...
191125 블로그 제작일지
191125 블로그 제작일지
서버 서버에 간단한 것들을 자동화했습니다. 1. 한 달에 한 번 SSL 인증서(Let's Encrypt)의 갱신을 시도합니다.2. 매일 04시에 업데이트를 진행합니다.3. 매일 04시 30분에 서버 컴퓨터를 재부팅 합니다. php 모듈도 몇 개 추가로 설치했는데, 쓸 일이 있을진 모르겠네요… 포스트 리스트 썸네일 중심의 Masonry 리스트를 좀 수정했습니다. 상하 / 좌우 간격을 조금 줄이는 동시에, 기존엔 상하 / 좌우...
[T 전화 테마] &TWICE 웹 카메라 컨텐츠
[T 전화 테마] &TWICE 웹 카메라 컨텐츠
&TWICE 발매 기념 웹 카메라 컨텐츠 이벤트에 나온 사진으로 만든 테마입니다. 그놈의 & 로고가 발을 가리는 게 많아서, 발 아래로 잘린 멤버가 좀 있습니다…ㅠㅠ Kiss Me 님 테마를 기반으로 작업했습니다. 미리보기 휴대폰을 클릭해 이미지를 변경해보세요! 다운로드

Tips

[자바스크립트] 현재 중심적인 시간 표시하기
[자바스크립트] 현재 중심적인 시간 표시하기
"2019.12.04 23:00" 처럼 표기된 시간을 현재 시각을 기준으로 "13분 전" 처럼 변경하는 스크립트입니다. 아래 작성한 코드는 티스토리에 적용하는 용도로 작성한 코드인데, 시간 바꾸는 부분만 응용하시면 어디서든 사용하실 수 있지 싶네요. function date() {   const now = new Date().getTime();   [...document.querySelectorAll(".date a")].forEach(a => {       a.classList.add("abuseReport");       a.parentNode.parentNode.appendChild(a);   });   //티스토리 댓글 신고 버튼 밖으로 뺴기   [...document.querySelectorAll(".date")].forEach(a => {       if (!a.classList.contains("modded")) {           const text = a.innerText.trim(),               date = new Date(text).getTime(),               diff = (now - date)/1000,               dayDiff = Math.floor(diff/86400);           a.innerText = `${               diff < 86400               ? (                   text.length > 13                   //글자가 13자 초과면 보통 시간 정보가 있으니 13자 초과일 때만 n시간 전으로 표시                   ? (                       diff < 240 ? "방금" : diff < 3600 ? `${Math.floor(diff/60)}분 전` : `${Math.floor(diff/3600)}시간 전`                   )                   : (                       "오늘"                   )               )...
왜 텅 빈 Array는 true인가
왜 텅 빈 Array는 true인가
자바스크립트가 좀 이상한 구조를 보이는 부분이 많아서 그런지 그냥 사용자가 많아서 그런지 자바스크립트를 까는 밈이 여기저기 많더라고요. this는 꽤 예전엔 진심으로 까는 사람도 많았고, [] == 0이고 "\t" == 0이지만 [] != "\t"인 기묘한 등식([] != []인데 [] == "\t"인게 더 기묘하지 않았을까 싶지만)을 이용한 건 물론이거니와, 자바스크립트의 기묘함을 이용해 []()!+ 만으로 코딩하는 JS**ck까지 꽤...
[티스토리] 원하는 태그만 랜덤으로 출력하기
[티스토리] 원하는 태그만 랜덤으로 출력하기
티스토리에서 기본적으로 랜덤 태그 치환자를 제공해줍니다만, 원하는 태그 몇 개 안에서만 랜덤으로 태그를 출력하고 싶으실 때 이 스크립트를 사용하시면 됩니다.*주의 : 티스토리 치환자와 달리 cloud(숫자) class를 추가하실 수 없습니다. randomTag = (tags, element, count) => {   const target = document.getElementById(element);   let i = 0;   for (i; i <= count; i++) {     const random = Math.floor(Math.random() * tags.length),       a = document.createElement('a');          tags[random] !== undefined && (       a.href = `/tags/${encodeURI(tags[random])}`,       a.innerHTML = tags[random],       tags.splice(random, 1),       target.append(a)     )   } }; 위 스크립트를 </body> 앞에 추가하신 뒤 randomTag(['원하는', '태그를', '여기에', '입력'], '태그가 들어갈 요소 ID', 10) 제일 마지막에 들어간 숫자는...
작업물
티스토리 스킨 배포 - Frameless Gallery
사진 중심의 블로그를 꾸미시는 분들을 위한 스킨입니다.다양한 썸네일 중심의 기능과, 이미지를 편하게 볼 수 있는 기능들을 제공합니다. 라이브 데모 주요 기능다운로드상세 설명 주요 기능 - Lazy Load : 화면 밖에 있는 이미지의 로딩을 지연해 훨씬 바른 블로그 제작 가능- 이미지 갤러리 : 본문의 이미지를 한 번에 모아볼 수 있도록 해주는 기능- 이미지 크게 보기 :...
&TWICE 웹 카메라
카메라 앱 링크 트와이스의 일본 앨범 "&TWICE"의 발매를 맞아 진행하는 [&TWICE Web 카메라 컨텐츠]란 이벤트를 보고 제작하게 됐습니다. 그냥 트와이스 멤버가 들어간 액자(프레임)가 있고, 본인이 찍은 사진을 그 안에 집어넣어서 사진을 만드는 단순한 이벤튼데, Web 카메라라면서 찍어둔 사진만 업로드가 가능하길래, HTML5 Canvas 공부도 할 겸 실제로 카메라를 쓰는 앱을 만들어 봤습니다. 굉장히 단순한 앱입니다. 화면...
워드프레스 테마 - withHC
Home 홈 화면입니다. 첫 화면엔 유튜브 영상이, 아래로 내리면 Carousel Slider와 최근 뉴스 목록 등이 나오도록 했습니다. About Parallax Scroll을 이용해 소개 페이지를 제작했습니다. Artist News Album 커스텀 포스트 타입을 이용해, 외부 링크로 연결할 수 있도록 했습니다.해당 페이지로 억지로 접속하면 404 에러를 반환합니다.
TWICE New Tab
크롬 확장 프로그램으로 제작한 TWICE New Tab을 싱글 페이지 앱으로 옮겼습니다. 앱 링크 외관은 크롬 확장 프로그램 버전과 크게 다르지 않습니다.크롬 외의 브라우저에서 해당 페이지를 홈페이지로 설정하면 크롬 확장 프로그램과 똑같이 사용하실 수 있습니다. 당연히 모바일도 지원합니다. 기본적으로 새 탭을 꾸미기 위해 만든 앱입니다.밋밋한 새 탭을 트와이스, 할 일 목록, 날씨 등으로 채울 수 있습니다....