왜 텅 빈 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) 제일 마지막에 들어간 숫자는...
[자바스크립트] 이미지의 우클릭만 방지하기

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

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

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

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

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

제 블로그에서 드로워를 열거나, 홈 화면 슬라이더를 넘길 때 사용 중인 스와이프 감지 스크립트입니다. 굉장히 단순한 구조지만, 간단한 사용엔 크게 무리가 없습니다. 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) });...
티스토리에서 Lazy Load 사용하기

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

Lazy Load(레이지 로드)란? 오프스크린 이미지(사용자가 보고 있는 화면에 보이지 않는 이미지)를 로딩하지 않고 있다가, 사용자가 스크롤을 움직여서 해당 이미지가 보여야 할 시점에 이미지를 로딩하는 기술입니다. 투명 이미지 업로드 이미지에 오류가 발생하면 티스토리에서 위 이미지를 집어넣습니다.굳이 로딩하지 않아도 될 이미지를 로딩할 필요가 없으니, 이미지의 src에 1px * 1px짜리 이미지를 하나 넣어줘서 이미지에 아무런 오류가 발생하지 않도록...
[자바스크립트] 부모창과 자식창 정보 교환

[자바스크립트] 부모창과 자식창 정보 교환

window.open() 혹은 a (anchor) 태그에 target="_blank" 어트리븃을 붙여서 연 윈도우와 원래 윈도우 간 정보 교환하는 방법입니다. 새 윈도우를 연 창을 부모창, 부모창에 의해 window.open()이나 a 태그로 열린 창을 자식창이라 칭하겠습니다. 부모창에서 자식창 접근 <!DOCTYPE html> <html> <head>     <title>부모창</title> </head> <body>     <input type="text" id="parentInput">     <div id="childOutput"></div><button id="getChildOutput">자식창 입력 가져오기</button>     <script>         const newWindow = window.open('tmp-child.html');                      document.getElementById("getChildOutput").addEventListener("click", () => {             document.getElementById("childOutput").innerText = newWindow.document.getElementById("childInput").value         })     </script> </body> </html> window.open() 함수를 변수에 집어넣고(예시에선 newWindow),...
T 전화 테마 미리보기 꾸미기

T 전화 테마 미리보기 꾸미기

T 전화 테마를 올릴 때 항상 이미지만 죽 나열하곤 했는데, 좀 더 테마 미리 보기 같은 느낌을 낼 순 없을까 싶어 만들어본 데모입니다. CSS로 휴대폰 목업을 만들고, 제 휴대폰과 동일한 화면 비를 갖도록 한 후에, 안에 이미지를 넣어주면 끝납니다. 화면을 클릭하시면 이미지 목록 레이어가 보이고, 이미지를 클릭하면 레이어가 사라지며 휴대폰 화면이 변경됩니다. 만들긴 했는데, 아무래도...
티스토리 썸네일에 유튜브 썸네일 불러오기

티스토리 썸네일에 유튜브 썸네일 불러오기

위 이미지처럼 티스토리 썸네일이 아무것도 없을 때, 만약 글에 유튜브 영상이 포함되어 있다면 자동으로 해당 유튜브의 썸네일을 썸네일로 표시하는 스크립트입니다. 대부분 스킨 제작자가 썸네일을 첨부하지 않았을 때를 대비해 짜둔 스크립트가 존재할 텐데, 이 스크립트는 해당 스크립트와 충돌할 가능성이 있으니 주의해주세요. HTML <a href="[##_article_rep_link_##]" class="indexArticle">     <div class="index_thumbnail">         <img src="<s_article_rep_thumbnail>https://i1.daumcdn.net/thumb/R700x0/?fname=[##_article_rep_thumbnail_raw_url_##]</s_article_rep_thumbnail>" class="index_img" alt="[##_article_rep_title_##]">     </div>     <div class="tit_post">[##_article_rep_title_##]</div>     <div class="detail">         <div class="category">[##_article_rep_category_##]</div>         <div class="cnt-wrap"><img class="heart" src="./images/heart.svg">             <s_rp_count><span class="cnt">[##_article_rep_rp_cnt_##]</span></s_rp_count>         </div>     </div>     <div class="date hidden">[##_article_rep_date_##]</div> </a> 임의로...