[TIL] 자바스크립트 비동기 처리 방식 (feat. 이벤트 루프)

📌 들어가며자바스크립트는 흔히 싱글 스레드 언어라고 한다. 즉, 한 번에 하나의 작업만 수행할 수 있는 구조처럼 보인다.그런데 우리는 실제로 웹사이트에서 네트워크 요청을 보내고, UI가 끊김 없이 렌더링되고, 이벤트도 정상적으로 처리되는 경험을 한다. 어떻게 싱글 스레드가 멀티 스레드 처럼 동시에 여러 일을 하는 것처럼 보일까?오늘은 그 비밀인 자바스크립트의 비동기 처리 모델을 정리했다. 📌 자바스크립트의 싱글 스레드자바스크립트는 원래 브라우저의 DOM 조작을 안전하게 하기 위해 싱글 스레드로 설계되었다.여러 스레드가 동시에 DOM을 만지면 Race Condition이 발생할 수 있기 때문이다. 그래서 JS 엔진은 하나의 콜 스택(Call Stack) 만 두고 코드를 순차적으로 실행한다.콜 스택이란?..

• format_list_bulleted FE/Javascript
• · 2025. 11. 16.
• textsms

[TIL] 나는 React Query를 왜 사용했을까?

📌 들어가며React를 사용하며 처음에는 API 요청을 useEffect와 useState로 직접 관리했다.단순한 데이터 요청이라면 괜찮았지만, 프로젝트가 커질수록 아래와 같은 문제가 생겼다.동일한 데이터를 여러 컴포넌트에서 사용하면서 중복 요청이 발생데이터가 갱신되어도 화면에 즉시 반영되지 않음로딩/에러 상태를 직접 관리해야하는 불편함 발생결국 "서버에서 가져온 비동기 응답을 어떻게 효율적으로 처리할 것인가" 가 중요한 과제가 되었다.📌 React Query가 뭔데?React Query는 위와 같은 문제를 해결하기 위해 만들어진 서버 상태 관리 라이브러리다. Zustand나 Redux가 클라이언트 상태를 관리하는 데 초점을 둔다면, React Query는 서버의 데이터(fetch, cache, sy..

• format_list_bulleted FE/React
• · 2025. 11. 14.
• textsms

[TIL] 제어 컴포넌트와 비제어 컴포넌트 (feat. React Hook Form + Zod)

📌 들어가며React의 폼 입력 관리 방식인 제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(Uncontrolled Component)를 비교하고, 비제어 방식의 단점을 React Hook Form이 어떻게 보완하는지, 그리고 Zod와 함께 사용하면 좋은 이유를 정리한다.📌 제어 컴포넌트 (Controlled Component)React의 state가 입력값을 직접 제어하는 방식function ControlledInput() { const [value, setValue] = useState(""); return ( setValue(e.target.value)} /> ); }입력값(value)이 항상 state에 의해 결정됨React 렌더링마다 값이 ..

• format_list_bulleted FE/React
• · 2025. 11. 14.
• textsms

[Javascript] 실행 컨텍스트 복습

소스코드의 평가와 실행- 소스코드 평가 - 실행 컨텍스트 생성 - 변수, 함수 등의 선언문 실행 -> 렉시컬 환경의 환경 레코드에 등록 - 소스코드 실행 (런타임) - 실행에 필요한 정보를 렉시컬 스코프에서 검색 실행 컨텍스트의 역할1. 코드 실행 순서 관리 - 실행 컨텍스트 스택으로 관리 - 현재 실행 중인 코드의 실행 순서를 변경 가능(ex 함수 호출에 의한 실행 순서 변경) 2. 스코프 관리(식별자 관리) - 렉시컬 환경으로 관리 - 선언에 의해 생성된 모든 식별자를 스코프를 구분하여 등록 - 스코프는 중첩 관계에 의해 스코프 체인을 형성 -> 상위 스코프로 이동하며 식별자 검색 가능 실행 컨텍스트 스택> 코드의 실행 순서를 관리> 소스코드 평가 -> 실행 컨텍스트 생성 -> 실행 ..

• format_list_bulleted FE/Javascript
• · 2025. 9. 7.
• textsms

[Javascript] this 복습

this 개념- 자신이 속한 객체, 자신이 생성할 인스턴스를 가리키는 식별자 (자기 참조 변수)- this 바인딩은 함수 호출 방식에 따라 동적으로 결정된다.- 자바스크립트 엔진이 암묵적으로 생성함 호출 방식에 따른 this 바인딩1. 객체 리터럴 → 메서드를 호출한 객체를 가리킨다const circle = { radius: 5, getDiameter() { return 2 * this.radius; }}console.log(circle.getDiameyer()); // 10 2. 생성자 함수 → 생성자 함수가 생성할 인스턴스를 가리킨다function Circle(radius) { this.radius = radius;}Circle.prototype.getDiameter = function(..

• format_list_bulleted FE/Javascript
• · 2025. 8. 4.
• textsms

[Javascript] 프로토타입 복습

프로토타입 개념- 자바스크립트는 프로토타입을 기반으로 상속을 구현 -> 코드 재사용에 용이- 생성자 함수는 동일한 프로퍼티(메서드 포함) 구조를 갖는 객체를 여러 개 생성할 때 유용- 생성자 함수에서 this로 할당된 프로퍼티,메서드는 인스턴스가 생성될때 할당된다.// 아래 Circle 생성자 함수의 getArea는 모든 인스턴스가 가지는 메서드 이므로 메모리 낭비가 됨function Circle(radius) { this.radius = radius; this.getArea = function () { return Math.PI * this.radius ** 2; }}// 프로토타입을 이용한 getArea 중복 제거// 모든 인스턴스는 getArea 메서드를 공유함function Circle..

• format_list_bulleted FE/Javascript
• · 2025. 7. 29.
• textsms