🔴 FE(17)
-
Observable의 특징 (vs promise, events API, arrays)
자바스크립트를 공부하여 observable을 알게 되었는데, 다른 비동기 처리 기술들과 비교해서 obervable이 어떤 특징이 있는지 궁금했다. 다행이도 정리가 잘된 문서가 있어서 공부도 할 겸 번역해보기로 했다. (번역 오류가 있으면 언제든지 알려주세요, 수정하겠습니다☺) https://angular.io/guide/comparing-observables Angular angular.io 우리는 observable를 promise대신 사용해서 값들은 비동기적으로 전달할 수 있다. 이처럼 observable는 event handler의 역할을 할 수도 있다. 그리고 observable는 여러개의 값들을 전달할 수 있기 때문에 우리는 이를 배열을 만들고 실행하는 데에 사용할 수도 있다. observabl..
2020.06.08 -
<움짤로 보는 자바스크립트 동작 원리> 시리즈를 마치며 ..
자바스크립트 공부를 하려다가 Lydia의 자바스크립트 시리즈를 우연히 보게 되었고, 공부도 할 겸 영문으로 된 그녀의 글을 하나하나 번역을 했다. https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif ✨♻️ JavaScript Visualized: Event Loop Oh boi the event loop. It’s one of those things that every JavaScript developer has to deal with in o... dev.to 뒤로 갈 수록 글이 점점 더 길어져서 포기할까도 했지만.. 후 오기로 번역을 끝냈다! (최대한 잘 읽히도록 번역했는데 번역오류가 있으면 얘기해주세요😩) 글을 쓰면서 느낀건 자바스트립..
2020.05.26 -
움짤로 보는 자바스크립트 동작 원리(5) - Promises & Async/Await
원문 (영어) : https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke#syntax 저자 : Lydia Hallie 👩🏻💻Thanks to Lydia for this amazing article about Javascript! 🖍 Introduction 자바스크립트로 코드 작성을 할 때, 우리는 흔히 다른 작업들에 의존하는 작업들을 처리해야하는 경우가 있다. 이미지를 받아서 압축하고, 필터를 입히고, 저장해야한다고 가정을 해보자. 제일 먼저 해야하는 일은 편집할 이미지를 받는 것이다. getImage 함수로 이를 실행할 수 있다. 이미지가 성공적으로 로트된 후에 이를 resizeimage 함수로 전달할 수 있다. 이미지가 ..
2020.05.25 -
움짤로 보는 자바스크립트 동작 원리(4) - Generators and Iterators
원문 (영어) : https://dev.to/lydiahallie/javascript-visualized-generators-and-iterators-e36 저자 : Lydia Hallie 👩🏻💻Thanks to Lydia for this amazing article about Javascript! ES6은 generator functions(제너레이터 함수)를 소개했다. generator functions는 무엇일까? 먼저 기존에 자주 썼었던 함수를 살펴보자. 이 코드에는 확실히 뭔가 특별하지는 않다. 그저 4번 로그를 찍는 평범한 함수일 뿐이다. 이를 호출한다면, 이렇게 나올 것이다. "하지만 왜 당신은 나의 5초의 시간을 이 지루하고 평범한 함수를 보는 것에 낭비하게 만들었나요?"라고 물을 수 있..
2020.05.19 -
움짤로 보는 자바스크립트 동작 원리(3) - Scope (Chain)
원문 (영어) : https://dev.to/lydiahallie/javascript-visualized-hoisting-478h 저자 : Lydia Hallie 👩🏻💻Thanks to Lydia for this amazing article about Javascript! 아래의 코드를 보자 : const name = "Lydia" const age = 21 const city = "San Francisco" function getPersonInfo() { const name = "Sarah" const age = 22 return `${name} is ${age} and lives in ${city}` } console.log(getPersonInfo()) 우리는 name, age, city 변수들의..
2020.05.14 -
움짤로 보는 자바스크립트 동작 원리(2) - Hoisting
원문 (영어) : https://dev.to/lydiahallie/javascript-visualized-hoisting-478h 저자 : Lydia Hallie 👩🏻💻Thanks to Lydia for this amazing article about Javascript! 만약 당신이 자바스크립트가 익숙하지 않다면, 어떤 변수들이 랜덤하게 'undefined'로 되어서 ReferenceError가 던져지는 이상한 경험을 해본 적이 있을 것이다. 호이스팅은 '변수와 함수들을 파일의 맨 위쪽에 놓은 것'이라고 주로 설명되는데, 그렇게 보일 수 있지만 맞지 않다. 자바스크립트 엔진이 스크립트를 받게 되면, 처음으로 하는 일은 바로 코드 안의 데이터를 위해 메모리를 세팅하는 일이다. 이 때 코드는 실행되지 않..
2020.05.14