분류 전체보기
-
Whack a Mole Game 🎮Web/JS30 2021. 1. 2. 19:52
벌써 Javascript 30의 마지막 주제까지 왔다. 사실 2020년 안에 전부 끝내는 게 목표였는데, 아쉽게도 이틀정도 딜레이됐다. 다른 이유가 있는 건 아니고, 그냥 중간중간에 딴 것도 자꾸 하고싶고 게을러지기도 하고 그랬던 것 같다. 그래도 예제들 중에 실제로 써먹어본 것들도 많고, 전혀 몰랐던 브라우저의 기능을 새로 알게 된 경우도 많고 해서 끝까지 오는 데에 크게 지루한 적은 없었다. 나름 재미있었다. 생각보다 실제로 써먹을 일이 좀 있었다는 게 신기했지. 마지막 주제는 'Whack-A-Mole', 즉 두더지 잡기 게임을 만들어보는 예제이다. 우선 HTML 코드를 살펴보자. Whack-a-mole! 0 Start! HTML 코드를 보면 알 수 있듯이, 각각의 구멍들 안에는 이미 mole(두더지..
-
Countdown Timer ⏱Web/JS30 2021. 1. 2. 03:13
이번에는 정해진 시간만큼 카운트다운을 해주는 타이머를 만들어보는 예제이다. 맨 처음 예제였던가, 시계를 만드는 예제가 있었는데 이번에도 거기서 사용되었던 Date 객체를 이용한다. 우선, HTML 코드는 다음과 같다. 20 Secs Work 5 Quick 15 Snack 20 Lunch Break 우선, 사용될 예정인 HTML 태그들을 변수에 담아준다. const timerDisplay = document.querySelector('.display__time-left'); const endTime = document.querySelector('.display__end-time'); const buttons = document.querySelectorAll('[data-time]'); 위의 GIF에서 봤을..
-
Git 커밋 메시지 컨벤션Git 2020. 12. 30. 01:04
최근에 커밋 메시지 또한 작업 내역을 파악하는 데에 굉장히 중요한 역할을 한다는 것을 깨달은 뒤 커밋 메시지도 좀 보기 좋게 작성해야겠다고 생각을 하고 있다. 요 근래에 계속해서 참고했던 커밋 메시지 컨벤션 관련 블로그 글을 간단하게 정리해놓고 앞으로 계속해서 참고해가면서 커밋 메시지를 작성해야겠다. 습관을 들이다보면 언젠가는 찾아보지 않고도 몸에 익을거라고 생각한다. 커밋 메시지에 본문을 작성할 수 있다는 것도 최근에서야 알게 되었다. 윈도우에서는 커밋 메시지를 작성할 때 줄바꿈이 안돼서, 항상 git commit --amend를 사용해서 메모장을 켜서 본문을 작성하고 있는데 혹시 그러지 않고 cmd 창에서 작성할 수 있는 방법을 아시는 분이 있다면 알려주세용 ■ 커밋의 종류 - feat: 새로운 기능..
-
From jQuery to VanillaJSWeb/자바스크립트 2020. 12. 28. 04:07
사실 나는 jQuery를 버리고 VanillaJS를 써야한다는 움직임이 이미 시작되고 난 후에 자바스크립트를 접했기 때문에, jQuery를 즐겨 쓰지도 않았고 관련 메소드들도 많이 모른다. 그래서 jQuery를 VanillaJS로 바꾸기 위한 교정 과정이 따로 필요하진 않았지만, 관련된 글을 읽어보면서 내가 잘 몰랐던 것들에 관해 많이 배울 수 있었기에 새로 배운 내용들을 간단하게 정리해보려 한다. // jQuery $(document).ready(function() { // code }); // Vanilla document.addEventListener('DOMContentLoaded', function() { // code }); 나는 보통 '페이지를 불러오고 난 후'의 코드를 작성하고 싶을 때 w..
-
Video Speed Controller UIWeb/JS30 2020. 12. 27. 22:03
오늘은 예전에 배웠던 내용들을 섞어서 만든 예제인 듯하다. HTML5 비디오와 마우스 이벤트를 가지고 비디오의 배속을 조절하는 기능을 만들어 보는 아주 간단한 예제이다. 1× 우선, 우리가 조작하고자 하는 요소들을 변수에 담아보자. 일단 마우스로 조작해야하는 부분은 오른쪽에 보라색으로 그라데이션이 들어가있는 부분이다. 흰 배경은 'speed'라는 클래스를 가진 div 태그이고, 보라색 그라데이션 부분은 'speed-bar'라는 클래스를 가진 div 태그이다. 이 둘을 각각 'speed'라는 변수와 'bar'라는 변수에 담아준다. 그리고 저 스피드바를 이용해서 우리가 조작하게 될 대상은 비디오 태그의 배속이기 때문에 비디오 태그 역시나 'video'라는 변수에다가 담아주도록 한다. 우리가 mousemove..
-
Click and Drag to ScrollWeb/JS30 2020. 12. 26. 21:56
웹서핑을 하다보면, 마우스로 드래그해서 스크롤을 할 수 있게끔 해 놓은 페이지들을 종종 볼 수 있다. 마치 터치를 하는 것과 비슷한 조작감을 주곤 하는데, 오늘은 이 드래그 스크롤을 구현해보도록 하자. HTML 코드는 간단하다. items라는 클래스를 가진 div 안에 item이라는 클래스를 가진 div들이 총 25개 들어있다. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 우선, 변수 선언부는 다음과 같다. const slider = document.querySelector('.items'); let isDown = false; let startX; let scrollLeft; 아이템들을 포함하고 있는 가장 상위 d..
-
Stripe Follow Along NavWeb/JS30 2020. 12. 26. 04:11
미국의 결제 서비스인 stripe 홈페이지에 가보면 다음과 같은 네비게이션 메뉴를 볼 수 있다. 메뉴를 이동하더라도 자연스럽게 연결되면서 컨텐츠에 따라 크기도 알아서 바뀌고 하는 아주 신기한 드롭다운 메뉴인데, 사실은 저 메뉴들이 각각 다 다른 div가 아니라 하나의 div로 구성되어있다. 오늘은 이 신기한 드롭다운 메뉴를 따라서 구현해보는 시간을 갖도록 하자. 며칠전에, 흰 span이 링크들을 따라가면서 위치를 옮기는 효과를 구현했던 것과 꽤 유사하다. HTML 코드는 대략적으로 다음과 같다. About Me Wes Bos sure does love web development. He teaches thin ... ... 보시다시피 드롭다운 메뉴가 nav 태그 안에 포함되어있고, 메뉴 안의 내용들은 u..
-
Event Capture, Propagation, Bubbling and OnceWeb/JS30 2020. 12. 24. 22:24
오늘은 이벤트 캡쳐와 버블링 등 자바스크립트의 이벤트를 다루기 위해서는 필수적으로 알아야 할 이론들에 관한 내용을 가르쳐주는 예제이다. 다른 것들은 이미 알고 있었지만 복습하는 데에 의미가 있었고, capture이나 once 같은 옵션들은 새로 배운 내용이어서 나중에 꽤나 유용하게 써먹을 수 있을 듯 하다. 이벤트 버블링(Event Bubbling) 우리가 자바스크립트의 특정 요소에 클릭을 하게 되면, 당연히 해당 요소에서만 이벤트가 발생할 것 같지만 사실은 그렇지 않다. 특정 요소에 클릭을 하게 되면, 해당 요소에서 이벤트가 발생하는 것은 물론이고 그 요소의 부모 요소, 그 부모의 부모 요소, 이런 식으로 쭉쭉 타고 올라가면서 이벤트가 전달이 된다. 위의 사진에서, 맨 안쪽의 div에는 three라는 ..