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

왜 블로그에 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로 밤하늘 그리기

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),

190717 워드프레스 테마 제작일지

190717 워드프레스 테마 제작일지

일단 이쯤하고 테마 수정은 멈춰야 하나 싶네요 ㅋㅋㅋ블로그에 추가되는 포스트는 별로 없는데, 와중에 테마는 수정하려니 뭔가 한계가 오네요. 당분간은 테마 수정보다 무슨 글 쓸지를 고민해봐야겠습니다. 테마 부분을 손봤습니다.예전처럼 밝은 / 어두운 테마만 선택할 수 있는 게 아니라, 블로그에 있는 모든 테마를 선택할 수 있습니다. 예전엔 2페이지에서 1페이지를 불러올 때도 글 목록 아래의 로더가 표시됐는데, 이젠

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

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

워드프레스에서 카테고리의 포스트 개수를 표현하고 싶을 때 $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에 위 함수를

190715 워드프레스 테마 제작일지

190715 워드프레스 테마 제작일지

홈 화면을 조금 더 꾸며봤습니다.예전 티스토리처럼 특정 카테고리의 글을 표시하는데, 아직 쓴 포스트가 별로 없어 뭘 좀 많이 추가하진 못했습니다. 작업하며 썸네일이 배경으로 들어가는 리스트도 만들었습니다. 예전엔 커버에만 사용할 수 있었지만, 이번엔 카테고리 글 목록 등에도 사용할 수 있도록 했습니다. 헤더에 카테고리 글 목록을 표시하고, 해당 카테고리에 3일 내로 쓴 글이 있으면 동그라미 하나가 표시되도록

홈 화면 변경점

홈 화면 변경점

Kiss me 님의 추천으로 만들어본 슬라이드 쇼입니다. 대략 2시간가량의 삽질 끝에 성공했네요 ㅠㅠ 처음엔 background-position을 옮기는 간단한 방법을 사용했는데, background-position을 animation으로 움직여버리면 repaint가 발생하며 렉이 꽤 많이 생깁니다.아마 어지간한 게이밍 PC가 아니라면 꽤 거슬릴 정도로 생길 겁니다. 어떻게 하면 기기에 부담을 안 주고 저런 애니메이션을 표시할 수 있을까 생각하다 img 태그를 사용하고 translateX를 이용해 이미지를