브라우저 JavaScript 기본

목차

현재 공개된 원고만 표시합니다. 읽음 표시는 직접 선택하며 자동 완료되지 않습니다.

1. 자바스크립트 실행 환경 - 브라우저와 Node.js, defer async 스크립트 로딩

   같은 코드가 브라우저에서는 되고 Node에서는 안 되는 이유, script 로딩 시점과 defer·async 차이를 실행 오류에서 출발해 정리한다.

2. 자바스크립트 변수와 자료형 - var let const 차이와 typeof 함정

   const를 기본값으로 쓰는 근거, 원시값과 객체의 복사 차이, typeof null이 object인 문제와 실무에서 쓰는 타입 판별법을 다룬다.

3. 자바스크립트 형변환 - == 와 === 차이, 암묵적 변환이 만드는 버그

   입력값이 문자열로 들어와 생기는 계산 오류부터 시작해 Number·parseInt 선택, == 의 위험, NaN 판별까지 실무 기준으로 정리한다.

4. 자바스크립트 연산자와 제어문 - truthy falsy, 옵셔널 체이닝, nullish 병합

   falsy 여섯 값과 조건문의 함정, ?. 와 ?? 로 방어 코드를 줄이는 법, ||로 기본값을 주다 0이 사라지는 버그를 다룬다.

5. 자바스크립트 함수 - 선언식과 화살표 함수, 기본값과 나머지 매개변수

   함수 선언식·표현식·화살표의 차이, 매개변수 기본값과 나머지 매개변수, 화살표 함수를 객체 메서드로 쓰면 깨지는 이유를 설명한다.

6. 자바스크립트 배열과 객체 - 구조 분해, 전개 구문, 얕은 복사와 깊은 복사

   filter·map·reduce로 목록을 다루는 법, 구조 분해와 전개 구문, sort가 원본을 바꾸는 문제와 깊은 복사 방법을 정리한다.

7. 자바스크립트 DOM 다루기 - 요소 선택 생성 수정과 innerHTML 이 위험한 이유

   querySelector로 요소를 찾고 데이터 배열로 목록을 그리는 방법, textContent와 innerHTML의 차이와 XSS 위험을 다룬다.

8. 자바스크립트 이벤트 - addEventListener, 버블링과 이벤트 위임, preventDefault

   이벤트 등록과 제거, 버블링을 이용한 위임으로 목록을 처리하는 법, 폼 새로고침과 리스너 누적 같은 실수를 정리한다.

9. 자바스크립트 스코프와 클로저 - 반복문 var 버그와 상태 감추기 (JS 중급 9단원)

   클로저가 실제로 쓰이는 자리를 대출번호 발급기와 조회 캐시로 만들어 보고, var 반복문에서 콜백이 전부 같은 값을 보는 고전 버그를 세 가지 방법으로 고친다.

10. 자바스크립트 this 바인딩 - call apply bind 와 화살표 함수 (JS 중급 10단원)

    메서드를 콜백으로 넘기면 this 가 유실되는 이유를 호출 방식별 규칙으로 정리하고, bind 와 클래스 필드 화살표 중 어느 쪽을 쓸지 판단한다.

11. 자바스크립트 프로토타입과 클래스 - 상속이 체인으로 동작하는 방식 (JS 중급 11단원)

    class·extends·super 가 프로토타입 링크 조작으로 번역되는 과정을 확인하고, ES2022 의 #private 필드와 Object.hasOwn 을 도서 모델에 적용한다.

12. 자바스크립트 Promise 기초 - 콜백 지옥과 에러 전파 (JS 중급 12단원)

    콜백 방식의 구조적 결함 세 가지를 Promise 가 각각 어떻게 없애는지 대응시키고, then 체인에서 에러가 흐르는 경로와 체인이 끊기는 지점을 추적한다.

13. 자바스크립트 async await - 순차와 병렬, Promise.all 로 절반 줄이기 (JS 중급 13단원)

    await 가 함수의 나머지를 마이크로태스크로 미루는 동작을 확인하고, forEach 안 await 함정과 불필요한 순차 대기를 실측 시간으로 비교한다.

14. 자바스크립트 배열 고차 함수 - map filter reduce 와 체이닝 비용 (JS 중급 14단원)

    고차 함수를 상황에 맞게 고르는 기준을 세우고, 체이닝의 순회 비용과 reduce 스프레드 누적이 O(n제곱)이 되는 지점을 실측 수치로 확인한다.

15. 자바스크립트 모듈 - ESM 과 CommonJS 차이, 순환 참조 (JS 중급 15단원)

    두 모듈 시스템의 판별 기준과 라이브 바인딩을 정리하고, 순환 참조가 CJS 에서는 undefined 로 ESM 에서는 ReferenceError 로 깨지는 과정을 재현한다.

16. 자바스크립트 fetch 와 JSON - HTTP 에러 처리, CORS 가 막는 것 (JS 중급 16단원)

    fetch 가 404 와 500 에서 예외를 던지지 않는 문제를 감싸는 요청 함수로 해결하고, CORS 가 브라우저 쪽 제약인 이유와 no-cors 가 답이 아닌 이유를 짚는다.