개발 카테고리 글

구조화된 데이터 추가

신경을 끄고 살다 검색 엔진에 블로그가 어떻게 노출되는지 확인해보니, 분명 티스토리 쓸 땐 본문에 첨부한 이미지도 검색 결과에 표시되고 그랬는데 블로그를 옮긴 후로는 그런 게 싹 사라졌더라고요.원인을 찾다 보니 구조화된 데이터(Structured Data)가 빠져서 그런 거였습니다. SEO 최적화 플러그인만 설치하면 끝날 문제긴 하나, 외부 플러그인 사용의 최소화란 똥고집 때문에 구조화된 데이터를 직접 만들어가는 중입니다. 새삼스럽게 정말

API 없이 인스타그램 피드 가져오기

일반적으론 인스타그램 API를 이용해 피드를 가져오는 게 맞지만, 본인이 소유하지 않은 계정의 피드는 가져올 수가 없더라고요. 이러면 남은 방법은 해당 페이지의 내용을 긁어오는 방법뿐인데, 다행히도 인스타그램은 Cross Origin Resource Sharing을 허용해둬서 다른 도메인에서도 인스타그램 페이지를 긁어올 수 있습니다.

[자바스크립트] 렌티큘러 카드 구현하기

보이는 각도에 따라 달라지는 렌티큘러 카드를 자바스크립트로 구현하기

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

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

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

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

캐싱 초보의 비애

10월 24일에 적은 제작일지에서 캐시 헤더를 추가했다고 적었는데, 일단 거기서부터 틀렸습니다. 제일 먼저 .htaccess를 수정해 코드를 작성했습니다. 제가 어드민이라 conf 파일을 수정할 수 있음에도요. 더 큰 문제는 서버에 캐시 헤더를 추가하기 위한 모듈이 설치되어 있었지만 저는 그 모듈을 활성화하지 않고 모듈이 활성화돼있으면 캐시 헤더를 설정하는 코드만 추가해뒀고, 당연히 캐싱은 제대로 작동하고 있지 않았습니다. 그제 그

왜 텅 빈 Array는 true인가

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

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

티스토리에서 기본적으로 랜덤 태그 치환자를 제공해줍니다만, 원하는 태그 몇 개 안에서만 랜덤으로 태그를 출력하고 싶으실 때 이 스크립트를 사용하시면 됩니다.

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

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