개발 카테고리 글

왜 블로그에 Vanilla JS를 사용했나

블로그를 Vanilla JS만 이용해 SPA(Single Page Application)로 업데이트한 후기도 정리해봤습니다.바닐라 자바스크립트로 SPA 만든 과정과 후기 들어가기 앞서 jQuery는 한때 굉장히 강력한 라이브러리였지만, 자바스크립트가 해야 할 일(eg. 양방향 데이터 바인딩)이 갈수록 많아지면서 React, Angular, Vue와 같은 라이브러리에 묻히는 라이브러리가 되었습니다. 하지만, 웹 애플리케이션 같은 거대한 규모가 아닌, 블로그 같은 작은 규모의 페이지에선 여전히 쉽고 강력한 라이브러리임은

[자바스크립트] 로또 추첨기

우연히 새로 발견한 개발자 커뮤니티를 둘러보다 발견한 프로젝트에서 아쉬운 점이 보여 후다닥 만들어봤습니다. 개선하고 싶었던 점은 1 - 버튼을 연타하면 애니메이션이 진행되는 중에도 결과가 바뀐다.2 - 새로운 숫자를 부여받을 때 조금 더 역동적인 애니메이션이 표시됐으면 좋겠다. 이 두 가지 사항입니다. let tmp = 1; let numbers; function decryptEffect(element, time) { const effect = setInterval(() =>

HTML5 Canvas로 밤하늘 그리기

https://codesandbox.io/s/z68y1012yl 참고한 글 https://github.com/marshallku/canvas-night-sky 깃허브 땐나의 계절인 여름도 왔고, 호텔 델루나 보다 보니 보름달이 뜬 밤하늘이 예뻐서 인터넷 뒤적이며 만들어 봤습니다.어디에 써먹을지 고민을 좀 해봤는데, 막상 써먹을 데가 없는 게 아쉽네요. ㅠㅠ HTML에 nightsky란 ID를 지닌 canvas 추가하시고 아래 스크립트만 붙여 넣으셔도 작동합니다. const width = window.innerWidth, height = window.innerHeight, stars = createStars(width, height, 30),

[워드프레스] 하위 카테고리를 포함한 카테고리의 포스트 개수 구하기

워드프레스에서 카테고리의 포스트 개수를 표현하고 싶을 때 $category->count 혹은 $category->category_count 를 사용하면 해당 카테고리의 포스트 개수가 출력됩니다. 하지만, 위와 같은 코드는 하위 카테고리의 포스트는 세지 않고, 순수하게 해당 카테고리의 포스트 개수만 출력합니다. function postCount($id) { $count = get_category($id)->count; foreach (get_categories(array("child_of" => $id)) as $category) { $count += $category->count; } return $count; } function.php에 위 함수를

[워드프레스] 플러그인 없이 Infinite Scroll 사용하기

Infinite Scroll(무한 스크롤)이란 페이지의 이동 없이 스크롤을 내리는 것만으로 다음 페이지의 내용을 불러오는 것을 의미합니다. 제 블로그의 프론트엔드 카테고리 등에 가보시면 라이브 데모를 확인해보실 수 있습니다.

[자바스크립트] 자동으로 글자 적고 지우기

How to code 위 예시처럼 글자들을 자동으로 타이핑하고 지우는 스크립트입니다.

바닐라에서 jQuery slideToggle 구현하기

jQuery의 slideToggle()이란 함수를 바닐라 자바스크립트로 구현하는 방법입니다.최소한의 코드로 동작하게 해뒀으며, jQuery의 slideToggle과는 달리 대상 요소만 지정하고 애니메이션 진행 시간은 자바스크립트에서 작성하지 않습니다.

CSS filter blur 렉 해결하기

filter blur만 사용하면 버벅이는 브라우저 렉 해결하기

[자바스크립트] 기기 방향 감지하기

기기를 회전해 테스트해보세요! 이런 정보도 가져올 수 있을지 몰랐는데, 자이로 센서를 이용해 기기의 방향도 가져올 수 있더라고요. const box = document.getElementById("testBox"); function handleOrientation(event) { const alpha = event.alpha, beta = event.beta, gamma = event.gamma; if (!beta) { addMouseEvent() } document.getElementById("alpha").innerText = alpha, document.getElementById("beta").innerText = beta, document.getElementById("gamma").innerText = gamma, box.style.transform