Thief of Wealth
article thumbnail
Chrome console.log 텍스트에 color 를 적용하는 법
개발/FrontEnd Interview 2021. 4. 13. 00:54

console.log('%c색깔', `color: ${"#FF0000"}`); 위 코드처럼, console.log(text, `color: ${색상코드}`) 문법으로 사용하고 text의 %c 이후의 텍스트의 색상을 바꿀 수 있다.

굳이 requestAnimationFrames를 사용하는 이유는?
개발/FrontEnd Interview 2021. 4. 11. 13:09

자바스크립트에서 비동기 함수 중에 requestAnimationFrame 이라는 함수가 있다. setInterval보다 더 좋은 점은, 브라우저가 프레임 생성초기 단계에 맞춰서 애니메이션 코드를 실행시킴으로써, 애니메이션이 더 부드럽게 동작하게 할 수 있다는 점이다. (setInterval이나 setTimeout은 프레임을 신경쓰지 않음)

Promise.all, Promise.race 차이는?
개발/FrontEnd Interview 2021. 4. 9. 15:55

function add5(num) { return new Promise((resolve, reject) => { setTimeout(() => { console.log(num + 5); resolve(num + 5); }, 2000) }) } Promise.all( [add5(1), add5(2), add5(3)] ).then(result => { console.log(result) }) // [6,7,8]여러가지 비동기 작업을 병렬로 처리하고 싶을 때 사용하는 것이 Promise.all이다. 배열로 인자를 주게되면, 배열에 있는 모든 Promise들이 거의 동시에 트리거된다. 즉, 위 코드는 add5를 3개 실행하여 총 6초가 걸리는 것이 아니라 2초만에 3개의 비동기 작업이 완료된다.그리고 결과값은 ..

Promise란 무엇이고, 왜 등장하게 되었는가
개발/FrontEnd Interview 2021. 4. 9. 15:37

정의 Promise는 자바스크립트 비동기 처리에 사용되는 객체입니다. (실제 연산을 직접 처리해주는 것은 아니고, 해당 연산을 대리하여 결과나 실패를 처리하기 위한 처리기와 연결할 수 있도록 하는 객체) 그리고 비동기란, "특정 코드의 실행이 완료될 때까지 기다리지 않고, 다음 코드를 먼저 수행하는 특성"을 말합니다. 탄생 배경 예전 작은 규모의 웹에서는 비동기 요청이 많지 않아서, 각 비동기 요청간 의존성이 크지 않았지만, 웹이 발전하고 다양한 플랫폼으로 진출하면서, 단순히 callback만으로는 모든 상태를 통제하기 어렵게 되었다. 그래서 기존 비동기 처리 코드들을 동일한 (표준) api형태로 사용할 수 있게 해주는 ES6에서 추가된 기능이다. Promise 없이 Callback으로만 비동기 처리할 ..

[명상록] 제 10권 31
개발/자기계발 2021. 4. 8. 23:11

사티론이나 에우티케스나 휘멘을 보거든 소크라테스를 떠올리고, 에우티키온이나 실바누스를 보거든 에우프라테스를 떠올려보고, 트로파이오포로스를 보거든 알키프론을 떠올려보고, 세베로스를 보거든 크리톤이나 크세노폰을 떠올려보고, 네 자신을 보거든 카이사르들 중 한명을 떠올려 보라. 매사에 이런식으로 비슷한 예를 떠올려 보라. 그러면 네게는 문득 이런 생각이 떠오르게 될 것이다. "그들은 지금 어디에 있나." 그들은 그 어디에도 없거나, 어디에 있는지를 아무도 모른다. 이것이 습관이 되면, 네게는 인간사들이 금방 사라질 연기처럼 느껴지거나 무로 보이게 될 것이다. 한 번 변화되어서 사려져 버리면 영원토록 다시는 그 모습으로 존재할 수 없게된다는 생각이 들게 된다면, 더욱 그렇게 느껴질 것이다. 그렇다면 왜 괴로워하..

마이크로 태스크 큐란?
개발/FrontEnd Interview 2021. 4. 8. 22:53

let i = 0; setTimeout(function () { // (A) console.log(i++, 'A'); }, 0); Promise.resolve() .then(function () { // (B) console.log(i++, 'B'); }) .then(function () { // (C) console.log(i++, 'C'); }); // 0 'B' // 1 'C' // 2 'A' 순으로 출력 위 코드는 B → C → A 순서로 실행된다. 분명 셋다 비동기 동작이라서, 태스크 큐에 순차적으로 들어가서 콜 스택으로 차례 대로 빠져나와서 실행되었을 것이다. 근데 왜 A → B → C 순서로 동작하지 않았을..

IIFE와 클로저 (수정중)
개발/FrontEnd Interview 2021. 4. 8. 01:48

즉시 실행 함수 (Immediately Invoked Function Expression)은 정의되자마자 즉시 실행되는 함수이다. IIFE를 변수에 할당하면 IIFE 자체는 저장되지 않고, 함수가 실행된 결과만 저장된다. 사실 IIFE는 클로저를 활용한 패턴이다. IIFE가 모두 클로저인 것은 아니고, 비공개 변수를 가질 수 있는 환경에 있는 함수가 클로저이다. 비공개 변수는 클로저 함수 내부에 생성한 변수도 아니고, 매개변수도 아닌 변수를 의미한다. 비공개변수는 클로저 함수의 매개변수도 아니고, 클로저 함수 내부에서도 생성한 변수가 아닌 변수를 뜻하고 "자유 변수"라고도 불린다. 비공개변수는 비공개이기 떄문에, 남들이 조작할 걱정이 없다. 프로그램 사용자가 예상을 뒤엎는 행동을 하는 것을 막을 수 있다..

[방법서설] 2규칙
개발/자기계발 2021. 4. 7. 11:25

모든 지식은 확실하고 명증적인 인식이다. 많은 것을 의심하는 사람이 그것을 생각하지 않는 사람보다 더 많은 학식을 갖고 있는 것은 아니다. 오히려 그가 많은 것에 대해 잘못된 견해를 갖고 있다면, 더 적은 학식을 갖고 있다고 볼 수 있다. 그러므로 난해한 대상들에 몰두해서 참된 것을 거짓된 것에서 구별하지 못한 채, 의심스러운 것을 확실한 것으로 인정하는 것 보다는 차라리 연구를 하지 않는 편이 더 낫다. 왜냐하면 그런 경우에 지식을 증대시킬 수 있다는 희망 못지않게 지식이 감소될 수 있다는 염려도 크기 때문이다. 따라서 우리는 위의 규칙에 따라 단지 개연적인 인식을 모두 내던지고, 완벽하게 인식된 것 및 더 이상 의심할 수 없는 것만을 신뢰해야 한다. 배웠다는 사람들은 물론 이런 것이 거의 없다고 생각..

profile on loading

Loading...