자바스크립트 런타임 구조/ 동작원리콜스택에서 한 번에 하나의 작업만 실행하는 싱글스레드 모델로 동작한다.비동기 작업은 브라우저(Web API), Node 환경에서 처리 한 후 테스크큐로 이동한다.이벤트루프는 콜스택이 비는 순간 테스크큐에 있는 작업을 콜스택으로 이동시켜 실행흐름을 이어간다. 1) 콜스택(Call Stack)지금 바로 실행해야 할 함수들맨 위 하나만 실행됨2) 웹 API (브라우저/Node가 제공)setTimeout, fetch 같은 것들 여기서 처리됨JS 엔진이 아님! (브라우저가 처리)ex) 스케쥴링, 서버와의 통신, 이벤트, 파일 I/O, Cache API3) 태스크 큐(Task Queue / Callback Queue)“준비 끝났으니까 실행해도 돼!” 하고 기다리는 함수들4) 이벤트..

비동기 프로그래밍작업이 완료될 때까지 기다리지 않고 다음 코드 실행 setTimeout() 라는 Web API(콜백 대기 공간)에게 맡기고 '기다리지 않고' Main Thread 실행asyncPrint 를 먼저 호출 했으나 foo 함수는 기다리지 않고 먼저 실행 된 후 3초뒤 asyncPrint 가 실행됨 싱글쓰레드에서 (스케쥴링, 서버와 통신, 이벤트, 파일I/O, Cache API)와 같은 이벤트들은메인쓰레드가 아닌 별도의 백그라운드 쓰레드를 활용 하고그 후에 다시 메인쓰레드에서 작업을 진행한다. JS(FE/BE) 실제 예시스케쥴링서버와 통신이벤트파일 I/OCache API 결론JS는 싱글쓰레드지만 비동기 방식을 통해서 동시성을 달성 할 수 있음 출처: AI시대의 웹개발 : 비동기 프로그래밍과 데..

JavaScript 가비지 컬렉션(GC)더 이상 사용되지 않는 메모리를 자동으로 해제해주는 엔진 내부 기능.자바스크립트는 개발자가 malloc() 같은 걸 직접 쓰지 않기 때문에, 대신 엔진(V8 등)이 알아서 사용 여부를 판단하고 메모리를 해제함 GC는 “어떤 메모리를 버릴지” 어떻게 판단할까?핵심 개념: Reachability(도달 가능성)어딘가에서 접근 가능한 값이면 = 살아있음 (해제 X)어디에서도 접근할 수 없게 되면 = 죽음 (해제 O)도달 가능한 시작점(roots):전역 객체 (window, global)현재 실행 중인 함수 스코프클로저에 묶인 변수call stack에 존재하는 변수들예제 1let a = { name: '홍소영' };let b = a;// 이제 a, b 둘 다 이 객체를 참..

👉 자신이 만든 모듈로 npm package 배포하는 법을 설명한다. git repository 를 node 로 만들어준 후 clone을 하였습니다. 그 다음 index.js 파일을 만들고 간단하게 sum 함수를 만든뒤 module.exports 를 하였습니다. module.exports 도 만들 수 있고 import 를 해오려면 export 로 만들어줘야 합니다. npm init 에 -y를 붙여주면 package.json 파일을 만들어 줍니다. 그 다음 npm login 을 해준 후 npm publish 를 해주면 배포가 됩니다. access를 설정해주지 않아서 'You muse sign up for private packages' 라고 에러 문구가 나왔습니다. 테스트 용도로 작업한것이기 때문에 acc..

👉 브라우저를 코딩 에디터로 사용하는 방법을 설명한다. 우선 내 컴퓨터에 폴더를 만들어준다. 개발자 모드를 킨 후에 Source 탭으로 들어가서 폴더 드롭하여 추가해준다. '완전한 엑세스를 요청합니다. ' 라는 문구가 보이면 승인 버튼을 눌러줘야 수정을 할 수 있다. 오른쪽에 보면 web 폴더가 추가 되었고 해당 폴더 아래에 test.html 파일을 추가해주었다. 이제 수정이 가능하다. script 태그를 추가해서 JS 테스트를 해보았다. 그리고 수정을 하면 test.html 왼쪽에 * 이 표시가 생긴다. 👉 VS Code 에서도 수정할 수 있지만 Node 보다는 브라우저에서 테스트 하는 것이 더 편하고 Scope 나 Closure, Call Stack 등 확인 할 수 있어서 더 편리하다. 출처: 브라우..

👉 호이스팅 (Hoisting): 끌어 올리다. 게양하다. 호이스팅은 끌어 올린다는 뜻을 갖고 있다. JavaScript 에서 호이스팅을 무엇을 의미할까? 우선 아래 코드를 살펴보자. console.log(score); // 변수 참조 var score; // 변수 선언문 변수 선언문 보다 변수를 참조하는 코드가 앞에 있다. 자바스크립트는 인터프리터에 의해 한 줄씩 순차적으로 실행되므로 console.log 가 가장 먼저 실행될 것이다. 참조에러 ReferenceError 가 발생할 것으로 예상했지만, undefined가 출력된다. 그 이유는 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점 런타임 runtime이 아니라 그 이전 단계에서 먼저 실행되기 때문이다. 변수 선언은 소스코드의 어디에 있..