ch-02.md

[자바스크립트 성장의 역사]

초창기:

• 브라우저는 웹 서버로부터 전달받은 html,css를 단순히 렌더링(문서를 해석해서 브라우저에 시각적으로 출력하는 것)함. → html 코드 통째로 서버로부터 전달 받아 웹 페이지 전체를 렌더링함.(성능 넘 낮아)

1. Ajax

• 서버와 브라우저가 데이터를 비동기 방식으로 교환할 수 있는 통신 기능임. (> XMLHttpRequest)
• 서버로부터 필요한 데이터만 전달 받아서 한정적인 렌더링이 가능해짐.

2. Node.js

• 비동기 I/O 지원 → 단일 스레드 이벤트 루프 기반으로 동작 → 요청 처리 성능이 좋다 (== 멀티플렉싱 효과)
  • 요청마다 스레드를 생성하지 않는다. 그로 인해 스레드 간 자원 관리가 쉽고 컨텍스트 스위칭 등 비용이 발생하지 않는다.
• 즉, I/O 작업을 외부 리소스에 맡겨 처리한다.

  1. 싱글 스레드에서 요청 받고, 처리 가능한 작업 먼저 처리함.
  2. I/O 작업이 필요한 경우, 해당 작업을 백그라운드로 넘기고, 즉시 다음 요청을 처리함.
  3. 이벤트 루프는 백그라운드 작업이 완료되면, 그 작업을 처리할 콜백을 task queue에 추가함.
  4. 이벤트 루프가 큐에 있는 콜백을 하나씩 처리하면서, 비동기 작업 결과를 반환하거나 처리함.
  

  여기서, 이벤트 루프란?

  • JS는 기본적으로 단일 스레드 언어이지만. 비동기 작업이 순서대로 실행될 수 있음. → 이벤트 루프와 태스크 큐 메커니즘 덕분임.
  • 동기와 비동기 코드가 한 스레드 내 공존할 수 있도록 조율해줌.

  1. JS는 동시에 여러 작업을 병렬로 처리 못함. → 호출 스택에 함수를 쌓아서 실행하는 방식으로 동작함.
  2. 이벤트 루프는 콜 스택(Call Stack) 과 태스크 큐(Task Queue)를 모니터링하면서, 처리 가능한 작업을 스택으로 넘겨 실행하는 역할을 한다. 동기 코드는 호출 스택에서 실행되고, 비동기 코드는 테스크 큐에 콜백 함수를 넣음. 이벤트 루피는 스택이 비자마자 큐에서 하나씩 테스크를 꺼내서 실행시킴.

  +) 태스크 큐의 구조

  • 이벤트 루프가 비동기 작업을 다시 실행 스택으로 옮길 때 사용하는 대기열
  • 매크로 태스크(setTimeout,setInterval,setImmediate,DOM: 실행 스택이 완전히 비어야 실행 가능) / 마이크로 태스크(Promise의 then,catch,finally: 마이크로 태스크 큐 실행 뒤에 매크로 태스크 실행 가능) 존재 // Promise가 setTimeout보다 먼저 실행되는 이유

  console.log("시작");
  setTimeout(() => console.log("setTimeout"), 0);
  Promise.resolve().then(() => console.log("Promise"));
  console.log("끝");
  // 출력 순서
  // "시작"
  // "끝"
  // "Promise"
  // "setTimeout"
  

[특징]

• 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어이다.

---

크로스 브라우징 이슈?

• 웹사이트가 여러 브라우저에서 동일하게 동작하지 않는 문제 == 기기가 달라지더라도, 웹페이지가 일관된 서비스를 제공할 수 있도록 해 주는 작업

비동기 처리 관련 트러블 슈팅 내용 정리

📌 상황:

• API 호출 → state 업데이트 → 리렌더링이 일어나야 하는데, 모달이 이미 닫혀있거나 잘못된 toggle 동작으로 화면이 다시 초기화됨.
• 모달 open/close 토글용 state를 여러 곳에서 공통으로 재사용해버려, 시점에 따라 의도치 않은 toggle이 호출됨.

📌 분석:

• 이벤트 루프 상에서 API 비동기 응답(Microtask) → 렌더링 필요 시점에 토글 로직이 덮어쓰기되어 UI 반영이 무효화된 흐름으로 추론됨.

📌 해결:

• 콜백 함수를 자식에 넘기고, 자식에서 이벤트가 발생할 때 값을 인자로 전달하여 함수 호출함. 상태를 모달 컴포넌트 내부에서 독립적으로 관리하지 않고, 부모가 소유하도록 변경함.

• 자식이 UI만 담당하고 데이터 제어권은 부모가 가짐 → state sync 문제 해결함.

  항목	개선 전	개선 후
  모달 상태 관리	여러 toggle 재사용 → 충돌	부모에서 단일 state로 관리
  API 결과 반영	모달이 닫히거나 초기화되어 반영 실패	callback 통해 안전하게 state 업데이트
  데이터 흐름	자식 → 내부 state로 소유	자식 → 부모로 값 전달
  유지보수	모달 추가 시 toggle 충돌 위험	확장 용이, 예측 가능