Web
-
비동기 자바스크립트Web/자바스크립트 2021. 2. 20. 19:29
■ 비동기 코드는 동기 코드와 비교해서 설명하면 간단하게 이해할 수 있다. 먼저, 동기(synchronous) 코드는 말 그대로 '동기화'를 생각하면 된다. 코드가 작성된 순서와 코드가 실행 완료되는 순서가 동일하다, 혹은 동기화되어있다. 반면, 비동기(asynchronous) 코드는 코드의 작성 순서와 코드의 실행 완료 순서가 동기화되어있지 않다. 그래서 상단에 작성된 코드가 하단에 작성된 코드보다 나중에 실행이 완료될 수도 있다. 다음과 같은 경우를 생각해보자. const image = document.getElementById('img').src; processLargeImage(image, () => { console.log('Image Processed!'); }); ■ processLargeI..
-
자바스크립트의 thisWeb/자바스크립트 2021. 2. 13. 23:33
자바스크립트의 this는 다른 언어에서와 달리, 그다지 직관적이지가 않은 편이다. 그래서 예전에 한 번 날 잡고 this에 관한 내용을 엄청 찾아보면서 '이 정도면 한동안 this때문에 헤맬 일은 없겠다' 하고 정리를 마쳤었는데, 시간이 지나면서 그 내용들이 흐리멍텅해졌다. 한동안 this때문에 골치 아플만한 일이 딱히 없었다가 최근에 this때문에 시간을 많이 잡아먹었던 적이 있어서, 간단하게나마 정리를 해둬야겠다는 생각을 하게 됐다. 자바에서의 this는 인스턴스 자기 자신을 가리키는 참조 변수이다. 객체 자신에 대한 참조를 하고 있기 때문에, 보통 매개변수명과 멤버변수명이 같을 때 이들을 구분하는 용도로 사용되곤 한다. public class Stock { private String ticker; ..
-
Cypress로 BDD 테스트 코드 작성하기 👍Web/자바스크립트 2021. 2. 7. 23:11
■ Cypress 는 'End-to-End 테스팅'을 위한 프레임워크이다. End-to-End는 쉽게 말해서, 종단(Endpoint)간 테스트, 즉 사용자의 입장에서 테스트하는 것을 의미한다. ■ npm 혹은 yarn을 이용해서 여느 프레임워크처럼 쉽게 설치할 수 있다. 나는 원래 npm만 이용했는데 yarn이 좀 더 안정적이고 속도도 잘나온다는 소리가 있길래. 어차피 사용법은 비슷하니까, 사용하고 싶은 거 아무거나 골라서 사용하면 될 듯. 참고로, npm과 yarn을 하나의 프로젝트에서 같이 쓰면 충돌이 일어날 수 있다고 하니 조심하자. 🚫 npm install cypress --save-dev yarn add cypress --save-dev 설치를 하고 나면, 특별한 설정이 필요없이 다음의 명령어를..
-
Whack a Mole Game 🎮Web/JS30 2021. 1. 2. 19:52
벌써 Javascript 30의 마지막 주제까지 왔다. 사실 2020년 안에 전부 끝내는 게 목표였는데, 아쉽게도 이틀정도 딜레이됐다. 다른 이유가 있는 건 아니고, 그냥 중간중간에 딴 것도 자꾸 하고싶고 게을러지기도 하고 그랬던 것 같다. 그래도 예제들 중에 실제로 써먹어본 것들도 많고, 전혀 몰랐던 브라우저의 기능을 새로 알게 된 경우도 많고 해서 끝까지 오는 데에 크게 지루한 적은 없었다. 나름 재미있었다. 생각보다 실제로 써먹을 일이 좀 있었다는 게 신기했지. 마지막 주제는 'Whack-A-Mole', 즉 두더지 잡기 게임을 만들어보는 예제이다. 우선 HTML 코드를 살펴보자. Whack-a-mole! 0 Start! HTML 코드를 보면 알 수 있듯이, 각각의 구멍들 안에는 이미 mole(두더지..
-
Countdown Timer ⏱Web/JS30 2021. 1. 2. 03:13
이번에는 정해진 시간만큼 카운트다운을 해주는 타이머를 만들어보는 예제이다. 맨 처음 예제였던가, 시계를 만드는 예제가 있었는데 이번에도 거기서 사용되었던 Date 객체를 이용한다. 우선, HTML 코드는 다음과 같다. 20 Secs Work 5 Quick 15 Snack 20 Lunch Break 우선, 사용될 예정인 HTML 태그들을 변수에 담아준다. const timerDisplay = document.querySelector('.display__time-left'); const endTime = document.querySelector('.display__end-time'); const buttons = document.querySelectorAll('[data-time]'); 위의 GIF에서 봤을..
-
From jQuery to VanillaJSWeb/자바스크립트 2020. 12. 28. 04:07
사실 나는 jQuery를 버리고 VanillaJS를 써야한다는 움직임이 이미 시작되고 난 후에 자바스크립트를 접했기 때문에, jQuery를 즐겨 쓰지도 않았고 관련 메소드들도 많이 모른다. 그래서 jQuery를 VanillaJS로 바꾸기 위한 교정 과정이 따로 필요하진 않았지만, 관련된 글을 읽어보면서 내가 잘 몰랐던 것들에 관해 많이 배울 수 있었기에 새로 배운 내용들을 간단하게 정리해보려 한다. // jQuery $(document).ready(function() { // code }); // Vanilla document.addEventListener('DOMContentLoaded', function() { // code }); 나는 보통 '페이지를 불러오고 난 후'의 코드를 작성하고 싶을 때 w..
-
Video Speed Controller UIWeb/JS30 2020. 12. 27. 22:03
오늘은 예전에 배웠던 내용들을 섞어서 만든 예제인 듯하다. HTML5 비디오와 마우스 이벤트를 가지고 비디오의 배속을 조절하는 기능을 만들어 보는 아주 간단한 예제이다. 1× 우선, 우리가 조작하고자 하는 요소들을 변수에 담아보자. 일단 마우스로 조작해야하는 부분은 오른쪽에 보라색으로 그라데이션이 들어가있는 부분이다. 흰 배경은 'speed'라는 클래스를 가진 div 태그이고, 보라색 그라데이션 부분은 'speed-bar'라는 클래스를 가진 div 태그이다. 이 둘을 각각 'speed'라는 변수와 'bar'라는 변수에 담아준다. 그리고 저 스피드바를 이용해서 우리가 조작하게 될 대상은 비디오 태그의 배속이기 때문에 비디오 태그 역시나 'video'라는 변수에다가 담아주도록 한다. 우리가 mousemove..
-
Click and Drag to ScrollWeb/JS30 2020. 12. 26. 21:56
웹서핑을 하다보면, 마우스로 드래그해서 스크롤을 할 수 있게끔 해 놓은 페이지들을 종종 볼 수 있다. 마치 터치를 하는 것과 비슷한 조작감을 주곤 하는데, 오늘은 이 드래그 스크롤을 구현해보도록 하자. HTML 코드는 간단하다. items라는 클래스를 가진 div 안에 item이라는 클래스를 가진 div들이 총 25개 들어있다. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 우선, 변수 선언부는 다음과 같다. const slider = document.querySelector('.items'); let isDown = false; let startX; let scrollLeft; 아이템들을 포함하고 있는 가장 상위 d..