Web/JS30
-
Key Sequence Detection(KONAMI CODE) 🎮🎲Web/JS30 2020. 11. 11. 16:55
Key sequencing detection, 즉 키보드로 연속된 입력을 할 때 어떤 키를 입력했는지를 기억했다가 특정 문자열이 입력되었는지를 검사하는 예제이다. 흔히 게임에서는 '커맨드'라는 이름으로 많이 사용된다. 격투 게임에서 특정 커맨드를 입력하면 필살기가 나간다거나 마리오 게임에서 특정 커맨드를 입력하면 목숨이 무한이 된다거나, 그런 것들. 우선, 내가 입력한 키들을 담아둘 배열(pressed 배열)을 만들고 어떤 문자열을 입력했을 때 커맨드가 되도록 할건지(secretCode 변수)를 변수로 만들어준다. 그리고, 키를 입력할 때마다 pressed에 집어넣어주면 된다. const pressed = []; const secretCode = 'javascript'; window.addEventLis..
-
Custom HTML 5 Video Player 🎬🎥Web/JS30 2020. 11. 10. 20:29
HTML5의 비디오 플레이어의 인터페이스는 고정되어있어서, 그 디자인을 바꾸는 게 불가능하다. 그래서, 기본 인터페이스를 숨기고 우리가 새로운 인터페이스를 직접 만들어서 사용해야한다. 우선, 전체 HTML 태그 구조는 다음과 같다. 기능 구현에 관한 예제이므로, CSS 코드는 올리지 않는다. ► « 5s 5s » 우선, 자바스크립트 코드로 제어하기 위해서는 당연히 DOM Element들을 가져와서 변수에 담아야 한다. const player = document.querySelector('.player'); const video = player.querySelector('.viewer'); const progress = player.querySelector('.progress'); const progres..
-
Hold Shift to Check Multiple Checkboxes 📦Web/JS30 2020. 11. 9. 23:39
쉬프트 버튼을 누른 채 두 개의 체크박스를 클릭했을 때 그 두 개의 체크박스 사이에 있는 모든 체크박스들까지 전부 체크되도록 하는 예제이다. * 체크된 체크박스 옆에 있는 설명에 취소선이 그어지게 하는 CSS 코드. input:checked + p { background: #F9F9F9; text-decoration: line-through; } 우선, 체크박스를 범위로 다루기 위해서 모든 체크박스들을 변수에 담아둬야한다. 그리고, 그 체크박스들에 클릭 이벤트를 붙여준다. 이 예제에서는, 클릭을 할 때 쉬프트 키가 눌렸는지 여부를 검사할 필요가 있다. 그래서 change 이벤트 대신, 그런 키보드 이벤트들까지 체크가 되는 click 이벤트를 사용했다고 한다. const checkboxes = docume..
-
14 Must Know Dev Tools Tricks 💪Web/JS30 2020. 11. 4. 16:38
개발자 도구의 기능들을 알려주는 예제였다. 사실 이미 유명한 것들이 대부분이고, 그냥 기억나는 몇 가지만 다시 상기하는 목적으로. 1. 중단점(Breakpoint) 개발자도구에는 중단점(breakpoint)를 설정할 수 있는 기능이 있다. 1) 코드 줄 중단점 개발자도구의 Sources 탭에 가면 소스코드를 볼 수 있는데, 이 소스코드의 오른쪽에 위치한 줄 번호를 클릭하면 파란색 표시가 생긴다. 그러면 이 코드가 실행되기 직전에 전체 실행이 일시 중지된다. 2) 코드를 이용한 코드 내 중단점 console.log('a'); console.log('b'); debugger; console.log('c'); 위의 '코드 내 중단점'과 동일한 기능을 하지만, 개발자 도구 UI가 아니라 소스 코드 내부에서 설정..
-
Fun with HTML5 Canvas 🎨Web/JS30 2020. 11. 1. 18:40
HTML5의 기능인 Canvas를 다뤄보는 예제이다. 솔직히 처음 배웠을 때는 어디다 쓰나 했는데, 많은 분들이 Canvas로 재미있는 것들을 하시더라. 생각보다 활용도가 높을수도 있을 것 같다는 생각이 든다. 1. HTML Canvas element 위에다가 직접 무언가를 그릴 순 없다. 무언가를 그리기 위해서는 Canvas 위에 'Context'를 만들어서, 그 위에다가 그림을 그려야 한다. const canvas = document.getElementById('draw'); const ctx = canvas.getContext('2d'); // context는 2d도, 3d도 가능하다. 2. 기본 세팅 코드 // 브라우저의 크기만큼 가로, 세로를 설정 canvas.width = window.inne..
-
Array Cardio Day 2 🎈Web/JS30 2020. 10. 30. 17:09
배열 메소드 두 번째 시간. 이번에는 some(), every(), find(), findIndex() 메서드를 다뤄봤다. 사실 알고리즘 문제를 풀면서 수도 없이 다뤘던 메서드들이라 별로 새롭진 않았지만 그냥 다시 한 번 되새긴다는 마인드로.. 데이터는 다음과 같다. const people = [ { name: 'Wes', year: 1988 }, { name: 'Kait', year: 1986 }, { name: 'Irv', year: 1970 }, { name: 'Lux', year: 2015 } ]; const comments = [ { text: 'Love this!', id: 523423 }, { text: 'Super good', id: 823423 }, { text: 'You are the ..
-
Type Ahead ⌨Web/JS30 2020. 9. 25. 19:28
이번에는 프론트엔드 코딩테스트로도 자주 등장하는 자동완성 기능에 대한 예제이다. 검색창에다가 특정 단어를 입력하면, 해당 단어로 이루어진 도시나 주를 찾아서 화면에 보여주는 방식이다. 우선, 데이터를 불러올 URL을 변수에 저장해둔다. 그리고 불러온 데이터를 저장해 둘 배열을 만들어 둔다. const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json'; const cities = []; 데이터를 fetch하는 데는 fetch API를 사용한다. 사실 나는 이때까지 데이터를 불러오는 가장 좋은 방법이 axios인 줄 알..
-
Flex Panel Gallery 🎫Web/JS30 2020. 9. 21. 18:02
Flex의 여러 속성들을 살펴보고, 직접 다뤄보는 예제였다. Flex를 사용하면서도 항상 뭔가 아리송한 점이 많았는데, 조금 정리된 듯한 느낌. 아직도 헷갈리는 점들이 좀 있기 때문에, 나중에 따로 더 시간을 내서 공부해야 될 것 같다. Flex와 Grid는 CSS의 핵심이기 때문에 꼭 시간을 내서 공부를 해야 할 듯. 아래와 같이 5개의 그림이 있는데, 그 중 하나의 패널을 클릭하면 여러 transition이 발생하게끔 해야 했다. 일단 처음에는 이런 식으로 5개의 패널들이 세로로 나열되어있다. Hey Let's Dance Give Take Receive Experience It Today Give All You can Life In Motion 이들을 가로로 나열하기 위해서는 container를 fl..