전체 글
-
Array Cardio Day 1 🎈Web/JS30 2020. 9. 21. 16:25
배열의 메소드들을 돌아가면서 한 번씩 사용해보는 예제였다. filter, map, sort, reduce를 사용해봤는데, 사실 기존에 다 알고 있던 내용이므로 새로 알게 된 사실 위주로만 간단하게 포스팅을 해보려 한다. 1. 우선, DOM을 활용할 때 사용하는 querySelector, getElementbyId 같은 메소드들은 주로 document.querySelector라는 식으로 많이들 사용한다. 근데, 한 가지 새로 알게 된 점은 무조건 document에서만 사용해야하는 게 아니라는 점. 범위를 좁히고 싶다면, 특정 DOM element 내에서 사용하는 게 가능하다. const category = document.querySelector('.mw-category'); const links = [...
-
Update CSS variables with JS 🎨Web/JS30 2020. 9. 20. 02:10
이번 시간은, 원래는 전혀 알지 못했던 새로운 개념을 배우는 아주 유익한 시간이었다. 바로 CSS 변수를 사용하는 방법을 배운 것. 나는 CSS에도 변수라는 개념이 있는 지 몰랐다;; 그래서 변수를 사용하려면 SASS같은 preprocessor들을 사용해야 하는 줄 알았는데. SASS에서는 변수를 compile time에 정의하고, 그 이후에는 변경할 수 없다고 한다. 반면, CSS variables는 자바스크립트를 이용하여 계속해서 변경할 수 있다. CSS 변수는 특정 element 내부에 선언되어야 하며, 이름의 앞에 '--'를 붙여줘야 한다. 우리는 root element에다가 선언을 해줄 것이며, 해당 변수들의 default value와 함께 선언을 해주면 된다. base, spacing, blu..
-
CSS + JS Clock ⏱Web/JS30 2020. 9. 20. 01:13
CSS와 JS를 이용해서 움직이는 시계를 만들어보는 예제이다. 역시나 크게 복잡하지 않은, 시간에 맞춰서 시침, 분침, 초침을 움직이기만 하면 되는 예제이다. transform과 transition에 관한 공부였다. 우선은 CSS에 관한 내용부터. 일단은 초기 세팅을 이렇게 해놨는데, 초침을 회전시켜보면 다음과 같이 회전된다. 이는 transform origin이 요소의 정중앙으로 설정되어있기 때문인데, 사실 대부분의 경우에는 회전이던 이동이던 중심이 정중앙이어야 하는 경우가 많다. 하지만 이 예제의 경우에는 시계의 초침을 만들어야 하기 때문에, 회전의 중심이 끝으로 가야 한다. 그래서, transform-origin이라는 속성을 이용해줘서 회전 중심을 이동시켜준다. default 값은 50%이지만 10..
-
[백준] 0919 오늘의 문제 풀이📚Algorithm 2020. 9. 19. 21:25
오늘은 재귀 문제를 풀어봤다. 사실 백트래킹을 공부하려고 했는데 재귀쪽은 기초가 하나도 안되어 있다보니 거슬러 거슬러 올라가다 어떻게 기초 재귀문제부터 풀게 됐다.. 그냥 감만 잡고 가는 정도로 풀어봤는데 역시나 감잡기는 커녕 시간 허비가 미친 수준; 혼자선 하나도 못 풀었다. 다 준내 고민하다가 결국 답을 보고 다시 풀어봤다.. 1. 곱셈 문제 링크 var input = []; const readline = require('readline'); const fs = require('fs'); const r = readline.createInterface({ input: process.stdin }); r.on('line', function(line) { input.push(line.trim()); });..
-
[백준] 0917 오늘의 문제 풀이📚Algorithm 2020. 9. 18. 03:58
오늘은 달랑 두 문제 풀었다. 아직도 게으름을 벗지 못했다니.. 1. 체스판 다시 칠하기 2. 영화감독 숌 1. 체스판 다시 칠하기 a. 처음 풀이 var input = []; const readline = require('readline'); const fs = require('fs'); const r = readline.createInterface({ input: process.stdin }); r.on('line', function(line) { input.push(line.trim()); }); r.on('close', function() { const firstline = input.shift().split(' '); const height = Number(firstline[0]); const ..
-
🥁 JS Drum Kit 🥁Web/JS30 2020. 9. 18. 03:24
첫 번째 주제는 간단한 드럼 키트를 자바스크립트로 구현하는 것. A, S, D, F, G, H, J, K, L 키를 하나씩 누를 때마다 드럼 소리가 재생된다. 🥁🥁 주제들이 생각보다 간단한 걸 보니, 하루에 하나씩 가볍게 자바스크립트 감을 놓치지 않는 용도로 공부하면 될 듯. 우선, html의 오디오 태그를 사용해서 드럼 소리를 저장했다. ... 드럼 소리를 재생하는 함수는 다음과 같다. function playSound(e) { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); if(!audio) ret..
-
📖 일일 공부량 정하기Diary 2020. 9. 17. 01:59
최근 공채 시즌을 맞으면서, 자소서를 쓴다는 핑계로 너무 게을러졌었다. 사실 자소서를 최대한 정성들여 쓰느라 머리가 아픈 건 맞지만, 그래도 따로 시간 내서 공부를 할 수 있었을 텐데 공부도 얼마 안했고, 그마저도 블로그에 공부한 내용 정리도 하나도 안했다. 이제 어느 정도 자소서도 다 썼으니까 정신을 좀 차리고, 다시 내 개발 역량을 증진시키는 데에 몰두를 해야겠다. 웹 개발에 대한 감각도 좀 다시 끌어올리고, 알고리즘 문제도 매일매일 한두개라도 풀어서 블로그에 올려야겠다. 일단, 매일매일 필수로 해야 할 공부량을 정하는 것부터 시작이라고 생각한다. 큰 목표를 이루기 위해서는 작은 목표로 잘게잘게 쪼개서 공부하는 게 좋은 듯. 'JAVASCRIPT30'이라는 프로젝트가 있던데, 하루에 하나씩 30일동안..