Web/JS30
-
Following Along LinksWeb/JS30 2020. 11. 29. 20:57
최근에 뭔가 낭비되는 시간이 많아졌다. 교육 준비하면서 코딩하는 것도 있고, 학교 과제로 코딩을 하는 것도 있는데 둘 다 마음대로 되지 않는지라, 코딩은 하고싶은데 에러가 해결되지 않아 해결책을 찾아 헤매는 시간이 많아진다거나 하는 식으로 버려지는 시간이 길어지고 있다. 물론 에러를 해결하기 위해 검색을 하고 해결책을 찾아가는 과정은 낭비라고 할 순 없겠지만 아무리 검색을 해도 뭐가 원인인지 모르겠고, 마땅한 해결책이 나오지 않는 지금같은 경우는 낭비라고 부를 수 있을만큼 많은 시간이 할애되는 게 문제다. 그래서, 뭔가 결과물을 하나 만들어서 마음의 위로를 얻고자 정신차리고 틈틈이 Javascript 30 같은 것들을 좀 해야겠다. 이번에는 링크 태그에 마우스를 올릴 때마다 하이라이트가 씌워지도록 할 건..
-
🎤Native Speech Recognition📢Web/JS30 2020. 11. 23. 19:23
브라우저에 이렇게 다양한 기능이 내장되어있는 줄은 몰랐다. 오늘은 Speech Recognition이라는 글로벌 변수에 대해 알아보자. 간단히 말하자면, 음성 인식 기능이다. 0. 일단, 이 기능을 수행하려면 서버가 필요하다. 그냥 로컬 파일로 실행했을 때는 실행되지 않는 기능이므로 localhost로 간단한 서버를 만들어 실행해보도록 하자. 1. 우선, 브라우저마다 변수 이름이 다르기 때문에 다음과 같이 설정해준다. 파이어폭스의 경우 window.SpeechRecognition이지만 크롬의 경우에는 window.webkitSpeechRecognition이다. window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecogni..
-
⌚Tally String Times with Reduce⏱Web/JS30 2020. 11. 20. 18:50
오늘은 아주 간단한 예제이다. dataset, map, reduce 등을 이용해서 시간을 연산하는 방법에 관한 예제인데 특별히 뭔가를 새로 배운다는 생각보다는, 다시 리마인드 한다는 느낌으로.. 위의 사진은 유튜브에 동영상을 올렸을 때, 유튜브측에서 제공해주는 동영상의 길이를 나타내는 timestamp이다. 흔히 이런 경우, 시간이 HTML 태그에 담겨져있는 경우가 많은데 이 시간들을 DOM에서 뽑아내서, 문자열을 숫자로 변환하여 모두 더해주는 방법에 관한 내용이다. (dataset에 담겨있는 데이터는 모두 문자열이기 때문에 숫자로의 변환이 필요함. 만약 span 같은 태그에 text로 담겨있다고 쳐도, 역시나 문자열이기 때문에) HTML 태그를 훑어보면 다음과 같다. Video 1 Video 2 Vid..
-
📊 Sort Without Articles 🎢Web/JS30 2020. 11. 19. 22:03
Articles라고 함은, 'a', 'an', 'the'와 같은 관사를 의미한다. 보통 영화 제목같은 것들을 정렬할 때는, 관사를 빼고 정렬을 해야 올바른 정렬이 가능하기 때문에 (만약 관사를 빼지 않으면 거의 대부분의 영화 제목이 'The ~'로 인해 t에 정렬이 될 것이므로..) 이런 식으로 조건을 정해 놓은 정렬이 꼭 필요한 경우가 많다. 우리는 여러 밴드들의 이름을 가진 배열을 정렬해볼건데, 그 배열은 다음과 같다. const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans'..
-
🤩 CSS Text Shadow Mouse Move Effect 😎Web/JS30 2020. 11. 18. 19:14
오늘은 마우스 커서의 움직임에 따라 그림자의 위치가 변하는 효과를 구현해보자. 생각보다 새로 배우는 내용이 너무 많아서 나름 알찬 예제였다. 🔥WOAH! 여기서 한 가지 신기했던 점은 바로 저 h1 태그에 붙어있는 'contenteditable'이라는 속성이다. 저런 속성이 존재한다는 사실을 이번 예제를 통해 처음 알게 되었다. 특정 태그에다가 contenteditable 속성을 붙여주면, 사용자가 해당 요소의 내용을 편집할 수 있다. 1. 우선, DOM 요소들을 담은 변수부터 살펴보자. const hero = document.querySelector('.hero'); const text = hero.querySelector('h1'); hero가 한글로 변역했을 때 정확히 무엇을 의미하는지는 잘 모르겠..
-
💿 LocalStorage & Event Delegation 📤Web/JS30 2020. 11. 17. 17:33
어느 순간부터 약간 의무감으로 하고 있었는데 주제들을 차근차근 다시 살펴보니, 자바스크립트를 다루기 위해서 꼭 필요한 것들을 잘 모아놓은 것 같다. 복습하는 셈 치고(물론 그 와중에 새로 배우는 내용들도 많다) 열심히 해야겠다. 이번에는 Local Storage와 Event Delegation에 관한 내용이다. 전혀 관련 없어보이는 두 내용이 함께 등장한 이유는 아마도 투두 리스트를 만드는 데에 있어서 함께 사용되는 기능이기 때문일 것. 미리 생성되어있는 변수들은 다음과 같다. const addItems = document.querySelector('.add-items'); const itemsList = document.querySelector('.plates'); const items = []; ad..
-
🍴 References VS Copying 🎎Web/JS30 2020. 11. 13. 17:27
배열이나 객체의 복사는 종종 문제가 되는 주제 중의 하나이다. 복사해서 새로운 배열을 만든 줄 알았는데, 알고보니 원본을 참조하고 있어서 각종 버그의 원인이 되는 경우가 적지 않다. 오늘은 이런 참조(reference)와 복사(clone, copy)에 대해 알아보는 예제이다. 1. Number, String, Boolean 우선 Number, String, Boolean의 경우, 원본을 할당한 새로운 변수를 만들었을 때 원본 변수의 값을 바꾼다고 해서, 새로운 변수의 값이 같이 바뀌진 않는다. let age = 100; let age2 = age; console.log(age, age2); age = 200; console.log(age, age2); let name = 'Wes'; let name2 =..
-
Slide In on Scroll 💻Web/JS30 2020. 11. 12. 18:02
오늘은 스크롤을 하면서 viewport 내로 이미지가 들어오면 이미지가 서서히 슬라이드되면서 나타나는 효과를 구현해보는 예제이다. 사실 이런 효과는 글을 읽는데 방해가 된다고 생각해서 썩 좋아하진 않지만 그래도 몇 가지 배울 점이 있는 예제였다. 우선, querySelectorAll로 이미지들을 모두 변수에 담아준 후, 스크롤 이벤트 리스너를 window에다 붙여준다. const sliderImages = document.querySelectorAll('.slide-in'); function checkSlide(e) { console.count(e); } window.addEventListener('scroll', checkSlide); 위에서 console.count(e)의 결과를 보면, 스크롤을 할 ..