🐕 계산된 속성 이름이란? https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer 객체 초기자 - JavaScript | MDN 객체는 new Object(), Object.create() 또는 literal 표기법(initializer 표기법)을 사용해 초기화될 수 있습니다. 객체 초기자는 중괄호({})로 묶인 0개 이상의 객체의 프로퍼티명과 관련 값의 쌍을 콤마로 구 developer.mozilla.org 위 Mozila 링크에서 확인해볼 수 있는 내용입니다. Computed Property Name 문법은 ECMAScript 2015에 추가된 문법으로 // 프로퍼티명 약식 (ES2015) l..
🐕 async/await 제너레이터 함수를 사용해 비동기 처리를 동기 처리처럼 동작하도록 구현할 수 있습니다. 제너레이터 함수가 뭐냐고요? 함수 제어권을 양도해줄 수 있는 함수입니다. 더 자세한 개념은 따로 찾아보세요 하여튼 제너레이터 함수를 이용해 비동기 처리를 동기 처리처럼 구현할 수 있는데 그렇게 하면 코드가 굉장히 장황해진다는 문제점이 있습니다. 코드가 굉장히 장황해지면 저같은 허수개발자들은 코드를 제대로 치지도 못하겠죠? 따라서 좀 더 간편하고 가독성 좋으면서도 비동기 처리를 동기 처리처럼 동작할 수 있게 도와주는 문법에 대한 필요성이 있었고 그를 위해 async/await 문법이 ES8(ECMAScript2017)에서 도입되었습니다. async/await은 프로미스와 제너레이터함수를 기반으로 ..
🐕 스레드 풀은 스레드풀(Thread pool)은 프로그램이 동시에 처리해야 할 작업이 많은 경우, 이를 처리할 스레드를 관리하는 기법입니다. 스레드풀은 미리 정해진 개수의 스레드를 생성하고 유지함으로써, 새로운 작업이 들어올 때마다 매번 스레드를 생성하지 않고 생성된 스레드 중에서 작업을 할당하여 처리합니다. 말투가 뭔가 이상하죠 네 챗지피티입니다.그러니까 스레드 풀이란 것은 프로그램이 동시에 처리해야할 작업이 많으면이를 동시에 처리해줄 스레드도 많이 필요하겠죠?동시에 처리해야할 작업이 많으면 많을 수록 컴퓨터는스레드를 동시에 처리해야할 작업의 수만큼 생성할 것입니다. 문제는 스레드를 생성하는 것 자체도 꽤 자원이 많이 드는 일이라는 것입니다.따라서 스레드를 그때그때 필요한 만큼 생성하고 지우는 방식은..
위와 같이 현재 Node.js에서 fetch API는 실험적으로 제공되고 있는 상태입니다. 따라서 fetch API를 브라우저 환경이 아닌 node.js 환경에서 바로 동작시키고 확인하고 싶은 경우 가장 쉬운 해결책은 fetch API 모듈을 설치하는 것입니다. 그다지 어렵지 않으니 잘 따라오시면 쉽게 할 수 있을거에요 🐕 먼저 빈 폴더를 만든다. 기존에 이미 폴더가 있으신 분들은 상관없습니다. 다만 위 실습에서는 package.json의 설정을 조금 변경하기 때문에 기존에 모듈을 ES6 방식이 아닌 다른 방식으로 불러오면서 코드를 작업하고 계시던 분들은 기존 코드와 충돌이 발생할 수 있으니 유의해주세요 ES6 방식은 다음과 같습니다. export function sayHello(name) { conso..
https://xionwcfm.tistory.com/142 자바스크립트의 this를 이해해보자 ⚡this는 뭔가요? this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수입니다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참 xionwcfm.tistory.com 😎물론 과거의 나는 해놨지만. 과거의 나... 나자신만 알아보게 써놓으면 어쩌라는 것인지? 뭐지? 자기과시? 따라서... this의 개념이 희박한 현재 이벤트 루프를 다시 보니 this 개념이 부족해서 동작이 이해안되는 걸 체감하고 this부터 봅니다.. 😎미래의 나야 이 표 보렴 네가 중첩함수,콜백함수의 this가 헷갈려할 것을 알고있단다. 일반함수 호출 전역객체가 바인딩됩니..
🐕Promise는 뭐냐.. 비동기로 작동하는 코드를 제어할 수 있는 방법 중 하나입니다. 자바스크립트에서 비동기의 처리 순서를 보장하기 위해서는 콜백함수 기법을 사용하는 방법을 주로 사용했습니다. 예컨대 이런 코드를 작성해서 실행시켜보면 아주 직관적으로 이해가 됩니다. let UMJUNSICK setTimeout(() => { UMJUNSICK = "어떻게 사람이름이" } , 4) console.log(UMJUNSICK) // undefined 우리의 기대는 setTimeout을 통해 0.004초 뒤에 UMJUNSICK 변수에 "어떻게 사람이름이"를 할당해주고 출력해주는 것이었지만 안타깝게도 그것은 불가능했습니다. undefined가 반환되어 버리죠 아주 당연한 일입니다. 좀 더 심화해서 콜백을 사용할 ..
😎 난 타이머도 제대로 모른다. 실행컨텍스트와 이벤트루프에 대해 공부하면서 뼈저리게 생각한 부분입니다. 타이머는 어떻게 동작하는지 세부적으로 나눠서 생각하면 정말 어려워요 하지만 뭔가 헷갈리는게 있을 땐 일단 모던 자바스크립트 딥다이브 책을 펴보면 얼추 내가 궁금해하는게 이미 명쾌하게 적혀있다. 내가 기억을 못하는 것일 뿐... 물론.. 진짜 딥다이브에도 안나와있는 문제 상황들도 간혹 있긴하지만 그런 경우엔 눈물 흘리면서 영어의 파도를 헤쳐나가 답을 찾아야하죠.. 다행히 타이머의 경우엔 제가 제대로 안읽은거지 딥다이브에서 아주 상세하게 설명해주고 있었습니다. 오늘은 딥다이브를 참고해서 타이머를 다시 정리하는 시간을 가져봅니다. 😎호출 스케줄링을 알아야한다. Object [global] { global: ..
😎자바스크립트에는 이벤트루프가 있다. 이벤트 루프... 너무나도 어렵다. 라고 생각하기 쉽지만 추상적으로 이해하는 건 생각보다 어렵지않다!! 그만큼.. 인터넷에도 여러 추상적이게 설명해주는 명강의들이 존재한다. 하지만 영어와 친하지 않은 나같은 사람들을 위해 적극 추천하는 링크를 남기도록 하겠다. https://ko.javascript.info/event-loop#ref-635 이벤트 루프와 매크로태스크, 마이크로태스크 ko.javascript.info 아주 좋은 설명이 담겨있습니다. 후반부의 프로그레시브 바 등 실제로 웹 환경에서 써먹기 좋은 내용도 담겨있지만 그 후반부분은 우선 이벤트루프에 대한 이해가 선행되지 않으면 봐도 뭔소린지 모르니까.. 이벤트 루프에 대한 이해가 충분히 선행되어야만합니다. h..
