CJS(CommonJS) vs ESM(ECMAScript Modules) 정리
CJS, ESM은 자바스크립트에서 모듈을 관리하고 불러오는 방식이다.구분CommonJS (CJS)ECMAScript Modules (ESM)도입 배경Node.js 환경을 위해 설계된 비표준 모듈 시스템JavaScript 공식 표준(ES6)에서 도입된 모듈 시스템문법require(), module.exportsimport, export, import() (동적 로딩 가능)로딩 방식동기적 로딩- require() 호출 시 즉시 평가비동기적 해석 기반 로딩- 정적 import: 모듈 그래프를 비동기적으로 해석 후, 모든 의존성 로드가 끝나면 의존성 순서대로 평가됨 (로드는 비동기, 실행은 동기적)- 동적 import(): 런타임에 Promise 기반으로 비동기 로드 및 평가모듈 해석 시점런타임 해석(동적)→ ..
2025. 11. 18. 20:57JavaScript 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