웹사이트 제목에 효과 주기

예전에 작성했던 글자 적고 지우는 스크립트를 타이틀에 사용하는 방법입니다. 예전엔 무조건 글자를 적고 지우는 기능만 넣어뒀는데, 이번엔 글자를 단순히 적기만 하고 끝나는 기능과 지우는 애니메이션은 생략하고 적기만 하는 애니메이션 두 가지를 추가했습니다. 또한, Array뿐 아니라 String도 사용할 수 있도록 업데이트했습니다. function typeTitle(title, animation, speed) {   const isString = typeof(title) === "string";   let i = 0, j = 0;   speed === undefined && (     speed = 500   ),   function txtnum() {     j == textArray.length - 1     ? j = 0     : j++   }   function type() {     const max = isString ? title.length : title[j].length;     i <= max     ? (...

4년 전

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

일반적으론 인스타그램 API를 이용해 피드를 가져오는 게 맞지만, 본인이 소유하지 않은 계정의 피드는 가져올 수가 없더라고요. 이러면 남은 방법은 해당 페이지의 내용을 긁어오는 방법뿐인데, 다행히도 인스타그램은 Cross Origin Resource Sharing을 허용해둬서 다른 도메인에서도 인스타그램 페이지를 긁어올 수 있습니다.* PC / 모바일 크롬, iOS 사파리 등에선 모두 성공했지만, 파이어폭스에선 요청을 차단했습니다. const wrapper = document.getElementById("instagram"); fetch("https://www.instagram.com/twicetagram/") .then(a => {     return a.text(); }).then(a => {...

4년 전

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

사진처럼 보는 각도에 따라 보이는 이미지가 달라지는 걸 렌티큘러 카드(Lenticular Card)라 부릅니다. 저번에 작성했던 기기 방향을 감지하는 스크립트를 이용하면 굉장히 쉽게 구현할 수 있습니다. HTML <div id="card">     <div id="layer1" class="lenticular"></div>     <div id="layer2" class="lenticular"></div> </div> 배경 이미지가 보일 메인 레이어 하나와 각도에 따라 표시할 레이어 두 개만 추가해주면 끝납니다. CSS #card {     position: relative;     max-width: 100%;     height: 0;     padding-bottom: 100%;     background-image: url(배경_이미지);     background-size: cover; } #card .lenticular {     position: absolute;     width: 100%;...

4년 전

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

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

4년 전

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

"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...

4년 전

왜 텅 빈 Array는 true인가

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

4년 전

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

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

4년 전

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

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

4년 전

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

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

4년 전