분류 전체보기
-
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..
-
[프로그래머스] 1106 오늘의 문제 풀이Algorithm 2020. 11. 6. 15:43
예전에 풀어봤던 문제들인데, 알고리즘 감을 되살리기 위해 다시 한 번 풀어보는 중. 사실 예전에 풀어봤다는 게 별 의미가 없는 것 같다. 너무 오래돼서, 내가 어떻게 풀었는지 기억이 하나도 안나기 때문에. 1. 실패율 function solution(N, stages) { let Nstages = new Array(N + 1).fill(0); const current = new Array(N + 1).fill(0); for(let i = 0; i Nstages[b - 1]) { re..
-
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..
-
웹 스크래핑과 MongoDBPython 2020. 11. 1. 01:22
웹 스크래핑(Web Scraping) 1. 파이썬에서 웹 스크래핑은 주로 'Beautiful Soup'를 이용해서 이루어진다. 2. 웹 스크래핑을 할 때는 크롬 개발자도구로 html 구조를 파악해야 한다. 3. Beautiful Soup 패키지를 설치할 때는 beautifulsoup4 패키지를 설치해야 한다. 그냥 beautifulsoup 패키지는 옛날 버전이므로 최신 버전과 호환이 되지 않기 때문. 4. 기본 구조는 다음과 같다. import requests from bs4 import BeautifulSoup headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) C..
-
리스트의 중복 요소 카운트Python 2020. 10. 31. 04:42
파이썬의 예외 처리 구문인 try-except 구문을 이용한 창의적인 중복 카운트 방법이다. fruits = ['사과', '배', '배', '감', '수박', '귤', '딸기', '사과', '배', '수박'] count = {} for fruit in fruits: try: count[fruit] += 1 except: count[fruit] = 1 print(count) 원래 파이썬은 딕셔너리에 존재하지 않는 키값을 검색하면 예외가 발생해서 자바스크립트처럼 사용하는 것이 불가능하다. 하지만 그 코드를 try 안에다가 넣어주면, 존재하지 않는 키값으로 인해 예외가 발생할 경우 except로 넘어가서 count[fruit] = 1을 실행하게 된다. 그래서 딕셔너리에 해당 키 값의 초기값이 세팅된다. 만약 ..
-
파이썬 시작하기Python 2020. 10. 31. 04:38
1. '패키지'는 여러 가지 모듈들을 모아 놓은 단위이고, 이러한 패키지들의 묶음을 '라이브러리'하고 한다. 2. 파이참으로 프로젝트를 만들 때 생성되는 'venv' 폴더는 Virtual Environment, 즉 '가상환경'을 의미한다. 더보기 가상환경 파이썬 사용자와 응용 프로그램이, 같은 시스템에서 실행되는 다른 파이썬 응용 프로그램들의 동작에 영향을 주지 않으면서, 파이썬 배포 패키지들을 설치하거나 업그레이드하는 것을 가능하게 하는, 협력적으로 격리된 실행 환경. 3. 한 프로젝트 내에서 사용되는 패키지의 수는 다양하고, 서로 다른 프로젝트들끼리 요구되는 패키지의 목록이나 버젼이 서로 다를 수 있다. 이런 경우에 충돌을 없애기 위해 가상 환경을 사용하는 것. 자바스크립트 프로젝트마다 node_mo..