하루살이 개발일지

JavaScript의 비동기 처리 (Event Loop와 Call Stack) 1. 자바스크립트와 싱글 스레드 자바스크립트는 싱글 스레드 기반 언어이다. 즉, 한 번에 하나의 작업만 처리할 수 있는 환경에서 동작한다. 이러한 구조는 동시에 발생하는 여러 작업을 처리할 때 제한점이 될 수 있는데, 특정 코드가 긴 작업을 수행하면 다음 코드 실행까지 전체 시스템이 멈추게 되어 비효율적이다. 1.1. 블로킹 vs 논블로킹 블로킹(Blocking)과 논블로킹(Non-Blocking)은 애플리케이션에서 작업 처리 방식을 설명할 때 사용하는 용어다. 블로킹 방식은 특정 작업이 완료될 때까지 기다렸다가 다음 작업을 수행하는 반면, 논블로킹 방식은 작업 완료 여부와 상관없이 다음 작업을 진행한다. 자바스크립트는 싱글 ..

AJAX란? AJAX는 "Asynchronous JavaScript and XML"의 약자로, 웹 페이지가 전체 페이지를 다시 로드하지 않고도 서버와 데이터를 교환할 수 있도록 해주는 기술이다. 이 기술은 사용자의 경험을 크게 향상시키며, 특히 웹 애플리케이션의 성능 개선에 중요한 역할을 한다. 1. AJAX의 탄생 배경: 과거 웹 페이지는 SSR(Server-Side Rendering) 방식을 사용했다. 이 방식은 사용자가 요청할 때마다 새로운 페이지가 서버로부터 로드되고 전체 페이지가 새로고침되었다. 이로 인해 사용자 경험은 끊겨 보일 수 있었고, 서버에 불필요한 부하를 주는 원인도 되었다. AJAX는 이러한 문제를 해결하기 위해 고안되었다. 페이지의 일부분만 비동기적으로 업데이트할 수 있도록 함으로..

콜백 지옥 1. 콜백 지옥이란? 비동기적인 JavaScript 코드에서 콜백 함수를 과도하게 중첩하여 사용할 때 발생하는 문제를 말한다. 특히 프로미스나 async/await와 같은 비동기 코드 관리 기법이 도입되기 전에 일반적이었다. 이는 다수의 비동기 연산이 서로 의존할 때 발생하며 코드의 가독성, 유지관리, 오류 처리 등에 문제를 일으킨다. doSomething(result1 => { doSomethingElse(result1, result2 => { doThirdThing(result2, result3 => { ... }); }); }); 2. 발생 이유 비동기 코드의 복잡성 : JavaScript에서 입출력, 네트워크 요청, 타이머 등은 비동기적으로 처리된다. 이는 해당 연산이 완료될 때까지 코..

동기 & 비동기 동기(Synchronous) 동기는 '같은 시간에 일어나는'이라는 뜻 프로그래밍에서는 한 작업이 완료될 때까지 다음 작업이 기다린다는 것을 의미 즉, 작업들이 순서대로 차례차례 진행 예를 들어, 세 개의 작업이 있을 때, 두 번째 작업은 첫 번째 작업이 완전히 끝날 때까지 기다리고, 세 번째 작업은 두 번째 작업이 완전히 끝날 때까지 기다림 비동기(Asynchronous) 비동기는 '동시에 일어나지 않는'이라는 뜻 프로그래밍에서 비동기는 한 작업이 완료되는 것을 기다리지 않고 다음 작업을 시작한다는 것을 의미 예를 들어, 네트워크 요청과 같은 긴 작업을 시작하고, 그것이 완료되기를 기다리는 대신 다른 작업을 계속 수행할 수 있음 작업이 완료되면 그 때 결과를 처리 이 둘의 주요 차이점은 ..