JavaScript Engine - 4. 블럭 스코프와 매개변수
https://youtu.be/QME8w1zV82g memo 조금 더 복잡한 코드를 가지고 콜 스택 & 선언 맵을 그리면서 코드 분석하기
2023. 7. 1. 03:32Promise, async/await 복습
Promise는 비동기 작업의 완료 결과를 알려주는 객체이다.new Promise에 전달되는 함수(실행자 함수, executor)는 자동으로, 동기적으로 실행되며resolve, reject 라는 2개의 콜백함수를 받는다.executor 함수의 작업이 끝나는 대로 결과에 따라서 resolve / reject 중 하나의 함수를 호출한다.정확히는 작업이 성공했을 경우, 결과를 나타내는 value와 함께 resolve(value) 호출 resolve는 Promise가 성공적으로 완료되었을 때 결과를 반환하기 위해 설계된 내부 콜백 함수resolve() 호출 = Promise 완료(성공)에러 발생했을 경우 에러 객체를 나타내는 error와 함께 reject(error) 호출then은 비동기작업이 끝나고 실행될 함..
2022. 7. 8. 13:21commonjs vs module
https://jh-7.tistory.com/9 CommonJS와 ES6의 모듈(module) 시스템 먼저 자바스크립트의 모듈시스템에 대해 설명하자면 기존에는 html 파일에서 태그를 이용하여 필요한 자바스크립트 파일들을 불러왔다. 이러한 방식에는 큰 문제가 있었는데 html 파일에서 불러 jh-7.tistory.com 추가 정리 필요
2022. 6. 13. 20:11JavaScript Engine - 5. 비동기 시작(callback, promise)
2-1 프로미스의 최고 장점을 아십니까 https://youtu.be/0f-jNhnN0Qc "프로미스는 결과값을 나중에 쓸 수 있다" call back setTimeout(() => { console.log('a'); }, 1000); 위 코드는 1초만 지나면 () => {console.log('a');}가 반드시 즉시 실행됨 (코드 분리 불가능. 강제적으로 즉시 실행) 콜백함수의 단점 결과값을 바로 받아야 한다. 코드 가독성이 떨어진다. 콜백이라고 꼭 비동기가 아니다. 비동기콜백/동기콜백 비동기콜백의 대표적인 것 setTimeout Promise const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve(); }, 1000..
2022. 3. 23. 00:02JavaScript Engine - 3. this
this this는 함수가 호출될 때 결정된다! -> 비동기에서도 마찬가지 this는 함수가 호출될 때 호출 방식에 따라 정해진다.(동적) 1. JS에서 this는 기본적으로 window이다.(브라우저에서) - window가 아닌 경우는 다음 2~4번과 같다. - Node.js에서는 global - 최근에는 브라우저, 노드 모두 globalThis로 통합됨 console.log(this); // window function a() { 'use strict'; console.log(this); } a(); // undefined 'use strict'; 가 있으면 window가 아닌 undefined 2. 객체의 메서드가 호출될 때, 해당 메서드를 호출한 객체에 바인딩 - 단, 반드시 .앞 객체에 바인딩된..
2022. 3. 23. 00:01
JavaScript Engine - 2(호출 스택, 스코프, TDZ, 선언, 초기화...)
호출과 선언을 구분하라 호출스택 참고로 console.log()는 다음과 같은 코드가 있다고 생각하면 됨 const console = { log() { // 콘솔에 글자 적는 기능 }, }; 호출스택: 함수의 호출과 동시에 스택에 쌓임 스코프체인: 함수의 선언으로 생기는 것. 블록 안에서 어떠한 값에 접근이 가능한지/불가능한지 const x = 'x'; function c() { const y = 'y'; console.log('c'); } function a() { const x = 'x'; console.log('a'); function b() { const z = 'z'; console.log('b'); c(); } b(); } a(); // a b c c(); // c // a b c c 여기서 ..
2022. 3. 22. 11:29JavaScript Engine - 1
코드가 실행되기 전에 어떻게 돌아갈지 정확하게 알기 위해 다음 강의를 듣고 정리한 내용 출처: https://youtu.be/NS1cIsWlFGI 1. 함수와 함수 호출 // 함수 선언 const add = (a, b) => a + b; console.log(add(3, 5)); // 8 function calculator(func, a, b) { return func(a, b); } console.log(calculator(add, 3, 5)); // 8 // func 파라미터 자리에 함수 호출이 아니라 함수를 넣어야 함 // 만약 헷갈린다면, 머릿 속으로 함수 호출을 넣었을 때, 그 함수 호출 넣은 자리에 그 함수 리턴값을 넣어보면 됨 // 그 함수의 리턴값이 없으면 함수 호출 자리에 undefine..
2022. 3. 21. 13:19[복습] 자바스크립트 동작 원리
JSON 데이터를 주고 받을 때 쓸 수 있는 간단한 파일 포맷 프로그래밍 언어, 플랫폼에 관계없이 쓸 수 있음 데이터를 서버와 주고 받을 때 직렬화 함. serialization 대부분 언어들이 JSON으로 serialize된 object를 다시 그 언어의 특징에 맞게 object로 변환하고, object를 다시 JSON으로 serialize하는 것을 지원해줌. 혹은 외부 라이브러리를 통해 변환함. 직렬화 JSON.stringify(): object -> string(JSON) 역직렬화 JSON.parse(): string(JSON) -> object web api 브라우저 api에서 제공하는 web api 브라우저 api의 종류 DOM API Network API Graphics API Storage ..
2022. 3. 17. 15:23import export { }
import 할 때 { } 붙는 것과 안 붙는 것의 차이? export default 인 것은 {} 없이 import 할 수 있음 default 아닌 것들은 {} 해서 import 해야 함
2021. 3. 11. 12:26
자바스크립트 개념 다시 - 블로킹/논블로킹, json, ajax, REST API, promise
그냥 공부 집중용 필사... 프로젝트에 들어가기 앞서 관련 개념 정리. 5.32 동기식 처리 모델 vs 비동기식 처리 모델 동기식 처리 모델은 태스크를 직렬적으로 수행함. 순차적으로! 그래서 어떤 작업이 수행 중이면 그 작업이 끝날 때까지 블로킹(작업중단) 됨 비동기식 처리 모델은 병렬적으로 태스크를 수행함. 태스크가 종료되지 않은 상태라도 대기하지 않고 다음 태스크를 실행함! 논 블로킹!! 자바스크립트의 대부분 DOM 이벤트 핸들러와 Timer 함수, Ajax 요청은 비동기식 처리 모델로 동작함. function func1() { console.log('func1'); func2(); } function func2() { setTimeout(function() { console.log('func2');..
2021. 3. 10. 08:04