Web
-
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..
-
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..
-
🥁 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..