티스토리 모바일 페이지 완벽히 비활성화하기

사진처럼 홈 화면까진 접속되지만, 글을 클릭하는 순간 /m이 사라진 주소로 리다이렉트됩니다. 191215 업데이트 - 티스토리 앱에서도 작동210614 업데이트 - 텐핑 코드 사용하도록 업데이트 기초 작업 먼저, 관리자 페이지에서 꾸미기 모바일로 가셔서 티스토리 모바일웹 자동 연결을 "사용하지 않습니다."로 먼저 변경해주세요. 플러그인 작업 위 작업을 마쳐도 자동으로 리다이렉트되는 것만 막을 뿐이지 접속은 됩니다. 심지어 검색 엔진에 노출도...

3년 전

[자바스크립트] 현재 중심적인 시간 표시하기

"2019.12.04 23:00" 처럼 표기된 시간을 현재 시각을 기준으로 "13분 전" 처럼 변경하는 스크립트입니다. export const SECOND_TO_MS = 1000; export const MINUTE_TO_SECOND = 60; export const HOUR_TO_SECOND = MINUTE_TO_SECOND * 60; export const DAY_TO_SECOND = HOUR_TO_SECOND * 24; export const WEEK_TO_DAY = 7; export const WEEK_TO_SECOND = WEEK_TO_DAY * DAY_TO_SECOND; // (365.24 / 12).toFixed(2) export const...

3년 전

왜 텅 빈 Array는 true인가

자바스크립트가 좀 이상한 구조를 보이는 부분이 많아서 그런지 그냥 사용자가 많아서 그런지 자바스크립트를 까는 밈이 여기저기 많더라고요. this는 꽤 예전엔 진심으로 까는 사람도 많았고, [] == 0이고 "\t" == 0이지만 [] != "\t"인 기묘한 등식([] != []인데 [] == "\t"인게 더 기묘하지 않았을까 싶지만)을 이용한 건 물론이거니와, 자바스크립트의 기묘함을 이용해 []()!+ 만으로 코딩하는 JS**ck까지 꽤...

3년 전

[티스토리] 원하는 태그만 랜덤으로 출력하기

티스토리에서 기본적으로 랜덤 태그 치환자를 제공해줍니다만, 원하는 태그 몇 개 안에서만 랜덤으로 태그를 출력하고 싶으실 때 이 스크립트를 사용하시면 됩니다.*주의 : 티스토리 치환자와 달리 cloud(숫자) class를 추가하실 수 없습니다. const 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) 제일 마지막에 들어간...

3년 전

[자바스크립트] 이미지의 우클릭만 방지하기

가끔 웹서핑하다 보면 텍스트를 복사해가라고 해뒀는데, context menu를 막아둬서 모바일에선 복사할 수 없을 때가 있습니다.무분별하게 퍼진 우클릭 방지 스크립트 때문이지 싶은데, 원하시는 게 이미지의 우클릭 방지라면 이미지의 우클릭만 막을 수 있습니다. document.addEventListener("contextmenu", e => {     e.target.matches("img") && e.preventDefault() }) 심화 우클릭 방지에서 나아가 위 사진처럼 우클릭을 한 위치에 저작권 문구를 표기하는 커스텀 우클릭 메뉴 (context menu, 이하 컨텍스트 메뉴)를 만드실...

3년 전

[자바스크립트] 한 번만 실행되는 Event Listener

가끔 onclick, onerror 등의 이벤트가 한 번만 실행돼야 할 때가 있습니다. 가령 이미지에 에러가 있을 때 그 이미지를 다른 이미지로 교체하는 함수를 만들었을 때, 교체된 이미지에도 에러가 있다면 여러분은 콘솔에 찍히는 어마어마한 양의 404 에러를 보실 수 있을 겁니다.잡렉은 덤이고요. 다행히도, 위와 비슷한 상황을 예방할 수 있도록 이벤트 리스너가 한 번만 작동하게 할 수 있는 간단한 방법이...

3년 전

[자바스크립트] 스와이프 방향 알아내기

제 블로그에서 드로워를 열거나, 홈 화면 슬라이더를 넘길 때 사용 중인 스와이프 감지 스크립트입니다. 굉장히 단순한 구조지만, 간단한 사용엔 크게 무리가 없습니다. let initialX = null,   initialY = null; function initTouch(e) {   initialX = `${e.touches ? e.touches[0].clientX : e.clientX}`;   initialY = `${e.touches ? e.touches[0].clientY : e.clientY}`; }; function swipeDirection(e) {   if (initialX !== null && initialY !== null) {     const currentX = `${e.touches ? e.touches[0].clientX : e.clientX}`,       currentY = `${e.touches ? e.touches[0].clientY : e.clientY}`;     let diffX = initialX - currentX,       diffY = initialY - currentY;     Math.abs(diffX) > Math.abs(diffY)     ? (       0 < diffX       ? console.log("to left")       : console.log("to right")     )     : (       0 < diffY       ? console.log("to top")       : console.log("to bottom")     )     initialX = null;     initialY = null;   } } window.addEventListener("touchstart", initTouch); window.addEventListener("touchmove", swipeDirection); window.addEventListener("mousedown", (e) => {   initTouch(e),   window.addEventListener("mousemove", swipeDirection) });...

3년 전

사파리 그래디언트 오류 수정하기

애플의 사파리(Safari) 브라우저에서 그래디언트를 넣을 때, 다른 색은 괜찮지만, 투명(transparent)색을 그래디언트에 추가하면 그래디언트가 망가지는 오류가 있습니다. 사파리를 제외한 브라우저 대부분에선 위아래 전부 아래와 같은 색의 그래디언트가 들어가는데, 사파리는 transparent를 넣으면 검은색을 잔뜩 끼얹어버립니다. #first {     background: linear-gradient(transparent, red) } #second {     background: linear-gradient(rgba(255, 255, 255, 0), red) } 위 #second에 적용한 예시처럼 transparent 대신 색의 alpha 값을 0으로 설정한 후 그래디언트를 넣으시면 해결됩니다. #first {...

3년 전

티스토리에서 Lazy Load 사용하기

Lazy Load(레이지 로드)란? 오프스크린 이미지(사용자가 보고 있는 화면에 보이지 않는 이미지)를 로딩하지 않고 있다가, 사용자가 스크롤을 움직여서 해당 이미지가 보여야 할 시점에 이미지를 로딩하는 기술입니다. 완벽하게 작동하기 위해선 서버사이드에서 이미지의 경로를 삽입하지 않거나, loading="lazy"란 옵션을 줘야 하기 때문에, 티스토리에선 완벽하게 작동하기 힘듭니다. 투명 이미지 업로드 이미지에 오류가 발생하면 티스토리에서 위 이미지를 집어넣습니다.굳이 로딩하지 않아도 될...

3년 전