Web/자바스크립트
-
콜백을 이용한 비동기 자바스크립트Web/자바스크립트 2021. 2. 20. 19:30
■ 콜백함수를 이용하는 방법은 비동기 코드를 다루는 가장 기본적인, 그리고 오래된 방법이라고 할 수 있다. ■ 보통 비동기 코드는 데이터를 불러오거나 할 때 자주 사용되는데, 많은 예제들에서 AJAX 호출을 setTimeout 함수를 이용해서 흉내를 내곤 한다. 그래서 이 글에서도 마찬가지로 setTimeout 함수를 이용해서 '데이터를 전부 불러오는 데에 몇 초가 걸리더라' 하는 것을 시뮬레이션할 것이다. ■ 자. 이제 웹 서버로부터 '레시피'를 가져오는 코드를 작성해야 하는 상황이라고 상상을 해보자. 🍕🍕 우리는 우선, 웹 서버에게 요청을 보내서 'recipeID'의 목록을 받는다. 이 번호는 각각의 레시피들을 구분해주는 숫자이고, 이 숫자를 서버로 보내면 그 숫자에 맞는 레시피가 넘어온다. 그러면 ..
-
비동기 자바스크립트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 설치를 하고 나면, 특별한 설정이 필요없이 다음의 명령어를..
-
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..
-
ES Lint + Prettier 도입하기 🔥🔥🔥Web/자바스크립트 2020. 12. 4. 00:23
원래 '지켜야 할 원칙들은 지키자' 라는 마인드로 코딩을 하고 있었기 때문에, 코딩 스타일이나 규칙들에 대해서는 꽤나 자신이 있는 편이다. 즉, 굳이 따로 툴을 사용하지 않더라도 깔끔한 코드를 작성하고 있었다고 생각한다는 것. 하지만 자바스크립트가 무슨 언어인가. 아무리 내가 완벽하다고 생각해도 예상치 못한 어느 한 곳에서 구멍이 발견될 수 있는 위험천만한 프로그래밍 언어아닌가. 그리고 언제 어디서 내가 안일하게 코딩할 지 또한 모르는 일이다. 그래서 만일을 대비해 정적 코드 분석 도구를 언젠가는 사용해봐야겠다고 생각을 하고 있었다. 생각만 하고 있었다. 정작 필요성을 느끼진 못해서 차일피일 미루고 있던 찰나, 마침 ES Lint + Prettier를 사용해 볼 만한 기회가 찾아와서 '이번 기회에 써보자..
-
배열의 중복 다루기Web/자바스크립트 2020. 10. 30. 20:41
1. 배열의 중복 검사 [1, 2, 3].every((el, idx, arr) => arr.indexOf(el) === idx); // true [1, 2, 1].every((el, idx, arr) => arr.indexOf(el) === idx); // false indexOf는 인자로 들어가는 값과 동일한 첫 번째 원소의 index를 찾아준다. 그래서, 첫 번째 원소와 중복되는 이후 원소들의 idx는 indexOf(el)과 다르게 된다. (el은 같아서 indexOf(el)이 계속 동일하게 나오는데, idx는 달라지기 때문) 그래서 두, 세번째로 나오는 중복 원소들은 false를 return하게 된다. 2. 배열의 중복 제거 [1, 2, 2, 4, 3, 4].filter((e, i, a) => a...
-
JS로 CSS 스타일 값 다루기Web/자바스크립트 2020. 10. 30. 13:49
이때까지 JS로 CSS 속성값을 가져올 일이 딱히 없어서 몰랐는데 현재 element의 CSS 속성값을 가져오려고 할 때 style property를 사용하면 올바르게 동작하지 않는다. // 요렇게 하면 안된다. const buttonDisplay = document.querySelector('#example').style.display; 이 style 이라는 property는 해당 element의 'inline CSS'를 의미한다. 근데 태그에서 적용한 CSS나, 외부 파일로 적용한 CSS랑 inline CSS는 따로 동작하는 것 같더라. function toggleButton() { const button = document.querySelector('#example'); if(button.style..