분류 전체보기
-
async/await을 이용한 비동기 자바스크립트Web/자바스크립트 2021. 2. 21. 14:57
■ Promise를 consume함으로써 비동기 자바스크립트를 다루는 것은 물론 코드를 이전보다 훨씬 깔끔하게 만들어주는 역할을 하지만, 여전히 코드의 양이 만만치가 않다. 조금 더 사용법을 간단히 만들 필요가 있겠다고 느꼈는지, ES8(ES2017)에서는 async/await이라는 새로운 consume 방법을 내놓았다. ■ 참고로, async/await은 개발자들이 consume을 더 쉽게 하기 위한 문법이므로 produce와는 전혀 관계가 없다. promise를 produce하는 방식은 이전과 동일하다. ■ Promise에 관한 포스팅에서 다루었던 아래의 예제를 async/await을 사용해서 작성해볼 것이다. const getIDs = new Promise((resolve, reject) => { ..
-
Promise를 이용한 비동기 자바스크립트Web/자바스크립트 2021. 2. 21. 04:22
■ Promise는 Callbak Hell에서 벗어나, 비동기 자바스크립트를 좀 더 효율적으로 다루기 위해 ES6에서 새로 생겨난 개념이다. 정확히는, 좀 더 깔끔한 비동기 코드를 만들기 위해서 생겨난 개념이다. ■ Promise는 특정 이벤트가 발생했는지 / 아닌지를 추적하는 객체이다. 만약 그 이벤트가 발생하면, Promise는 다음에 무엇(future value, 미래 값)이 발생할지를 결정해준다. 여기서 이벤트는 비동기 이벤트, 즉 타이머 종료나 AJAX 호출로부터 데이터가 오는 등의 이벤트를 의미한다. ■ 만약 우리가 '야, background 에서 서버로부터 데이터 좀 가져와줘' 라고 요청하면 Promise는 우리에게 그 데이터를 가져다 주겠다고 약속(promise)한다. 그러면 우리는 미래에..
-
콜백을 이용한 비동기 자바스크립트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; ..
-
.gitignore가 올바르게 작동하지 않을 때 😤Git 2021. 2. 7. 23:32
Git을 사용하다보면 세팅 파일같은 것들은 굳이 올리지 않아도 되는 경우가 많다. 그래서 .gitignore파일을 이용해서 Git이 추적하지 않도록 해야하는데 이 .gitignore가 제대로 작동하지 않아 문제가 생기는 경우가 종종 있다. 😤 최근에 Cypress를 사용하면서, .gitignore에 Cypress 관련 폴더와 vscode 설정 폴더 등등 굳이 추적하지 않아도 되는 파일이나 폴더들을 .gitignore에 추가하고 커밋을 했는데 웬걸, repository에 들어가보니 모든 파일들이 당당하게 자신들의 이름을 저장소에 등재한 모습을 볼 수 있었다. 😤😤😤😤😤 ■ 정확한 원리는 모르겠지만, 이렇게 한 번 git으로 추적을 하게 된 경우 .gitignore에 추가하더라도 git이 이미 해당 파일을 ..
-
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 설치를 하고 나면, 특별한 설정이 필요없이 다음의 명령어를..
-
1월 중순Diary 2021. 1. 15. 21:25
Javascript30을 끝내고 나서, 데일리 코딩 주제로 삼을만한 다른 게 뭐가 있을까 찾아다니다가 '김종민' 개발자님이 유튜브를 하고 있다는 사실을 알게 되었다. ㄴ😮ㄱ 예전에 김종민 개발자님의 작품을 보고 너무 감탄해서 다른 작품들은 어떤 것들이 있는지 밤을 새가며 이리저리 찾아다녔던 기억이 있다. 출연하신 팟캐스트도 다운받아서 보고, 방송도 많이 찾아봤는데 비교적 최근에 유튜브를 개설하셨고, 거기서 짤막짤막하게 크리에이티브 코딩 강의 영상을 올리고 계시다는 것을 알게 되었다. 언젠가는 크리에이티브 코딩을 꼭 해보고 싶었는데, 이왕 이렇게 된 거 강의 영상들을 조금씩 따라해보면서 입문을 하면 좋을 것 같다는 생각이 들었다. 그래서 요즘은 크리에이티브 코딩 영상을 보면서 따라하고 있다. 코드를 따라서..