자바스크립트 런타임 구조/ 동작원리콜스택에서 한 번에 하나의 작업만 실행하는 싱글스레드 모델로 동작한다.비동기 작업은 브라우저(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 둘 다 이 객체를 참..

👉 스트리밍클라이언트에서는 모든데이터가 오지 않아도 지금까지 받은 데이터에 접근할 수 있음 -> 결과적으로 사용자가 긴 로딩 없이 사용자에게 좋은 경험 제공 가능스트리밍을 이용하면 일단 뭐라도 빠르게 보여줄 수 있음느리게 렌더링 되는 부분?로딩바 같은 대체 UI를 보여주면 된다!Dynamic 페이지에 자주 이용된다.페이지 스트리밍오래 걸리는 컴포넌트의 렌더링을 사용자가 좀 더 좋은 환경에서 기다릴 수 있도록 해주는 기능      👉 Stream - 개천, 강물스트리밍 - 강물에 데이터를 흘려 보내듯이 연속적으로 한 데이터씩 흘려 보내는 것   출처: https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs/dashboar..

👉 클라이언트 라우트 캐시브라우저에 저장되는 캐시 - 페이지 이동을 효율적으로 진행하기 위해 페이지의 일부 데이터 보관Layout을 ~/, ~/search 일 경우에 계속 불러옴 (중복 요청) - 클라이언트 라우트 캐시적용 안될 경우공통된 레이아웃만 따로 보관해서 서버에 중복요청 하지 않음자동으로 next app 에 적용되어있음클라이언트 라우트 캐시는 새로고침 되면 사라짐 (브라우저니까!) new Date().toLocaleString() //리렌더링 되는지 확인할 때 사용하면 좋음   출처: https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs/dashboard 한 입 크기로 잘라먹는 Next.js(15+) 강의 | ..

👉 Full Route Cache(풀 라우트 캐시)Next 서버측에서 빌드 타임에 특정 페이지의 렌더링 결과를  캐싱하는 기능 👉 Dynamic Page로 설정되는 기준특정 페이지가 접속 요청을 받을 때 마다 매번 변화가 생기거나, 데이터가 달라질 경우캐시되지 않는 Data Fetching을 사용할 경우동적 함수(쿠키, 헤더, 쿼리스트링)을 사용하는 컴포넌트가 있을 때👉 Static Page로 설정되는 기준Dynamic Page 가 아니면 모두 Static Page가 된다 (Default)동적 함수(ex: Query String)데이터 캐시페이지 분류YesNoDynamic PageYesYesDynamic PageNoNoDynamic PageNoYesStatic Page - 풀 라우트 캐시 적용  R..

👉 Request Memoization (요청을 기억한다)하나의 페이지를 보여줄 때 중복된 API요청들을 자동으로 캐싱 👉 중요하나의 페이지를 렌더링하는 동안에 중복된 API 요청을 캐싱하기 위해 존재!그래서 렌더링이 종료되면 모든 캐시가 소멸됨Next에서 자동으로 제공👉 Data Cache 가 메모이제이션과 다른 점백엔드 서버로부터 불러온 데이터를 거의 영구적으로 보관하기 위해 사용서버 가동중에는 영구적으로 보관      출처: https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs/dashboard 한 입 크기로 잘라먹는 Next.js(15+) 강의 | 이정환 Winterlood - 인프런이정환 Winterloo..

👉 Data Cachefetch 메서드를 활용해 불러온 데이터를 Next서버에서 보관하는 기능영구적으로 데이터 보관, 특정 시간을 주기로 갱신 시키는 것 가능불 필요한 데이터 요청 수를 줄여서 웹 서비스의 성능 크게 개선 가능const response = await fetch('/api',{ cache: "force-cache" });//요청의 결과를 캐싱함, 한 번만 불러옴//next.js 에서 fetch 라는 메서드만 사용해야함const response = await fetch('/api',{ cache: "no-store" });//데이터 페칭의 결과를 저장하지 않는 옵션//캐싱을 아예 하지 않도록 설정하는 옵션const response = await fetch('/api',{ next: { re..