본문 바로가기

전체 글

 (73)
[JavaScript] 한 달 동안 자바스크립트 박살내기 (15) - HTTP/AJAX/브라우저 데이터 「한 달 동안 자바스크립트 박살내기」는, ChatGPT쨩이 선생님이 되어, 매일 수업해주는 느낌으로 진행합니다.GPT쨩의 말은 이렇게 작성합니다. 오늘 공부 내용 및 목표 오늘 학습 목표fetch()를 써본 적은 있지만, 오늘은 그 아래에서 브라우저와 서버가 어떤 형태로 대화하는지를 정리하는 날이야. 그리고 서버와 통신하는 데이터와 브라우저 안에 저장해두는 데이터가 어떻게 다른지도 같이 본다. 프론트엔드 코드를 읽을 때 GET, POST, status, headers, JSON, localStorage, cookie, cache가 한 파일에 섞여 나오는 경우가 많아. 각각의 역할을 따로 잡아두면 Network 탭이나 레거시 AJAX 코드를 읽을 때 훨씬 덜 헷갈린다.내가 정말 약한 부분이라 이 부분은..
[JavaScript] 한 달 동안 자바스크립트 박살내기 (14) - 브라우저 이벤트 「한 달 동안 자바스크립트 박살내기」는, ChatGPT쨩이 선생님이 되어, 매일 수업해주는 느낌으로 진행합니다.GPT쨩의 말은 이렇게 작성합니다. 오늘 공부 내용 및 목표 오늘 학습 목표어제는 state → render() → DOM 흐름을 만들었지. 오늘은 그 흐름의 시작점이 되는 브라우저 이벤트(event) 를 다룬다. 버튼 클릭처럼 사용자의 행동이 어디서 시작되고, DOM 트리를 따라 어떻게 전달되며, 어떤 요소가 실제 출발점인지 구분할 수 있어야 해. 오늘 핵심은 API 이름을 외우는 게 아니라 이벤트가 DOM 트리를 따라 이동하는 흐름을 머릿속으로 그리는 거야. 이걸 잡아두면 오래된 jQuery 코드의 이벤트 처리나 Backbone View의 events도 훨씬 읽기 쉬워진다.그렇다고 한다...
[JavaScript] 한 달 동안 자바스크립트 박살내기 (13) - DOM과 상태 「한 달 동안 자바스크립트 박살내기」는, ChatGPT쨩이 선생님이 되어, 매일 수업해주는 느낌으로 진행합니다.GPT쨩의 말은 이렇게 작성합니다. 오늘 공부 내용 및 목표 오늘 학습 목표오늘은 어제 배운 fetch와 비동기 결과가 실제 브라우저 화면으로 이어지는 지점을 다룬다. 지금까지는 값, 객체, Promise처럼 JavaScript 안쪽의 흐름을 많이 봤다면, 오늘부터는 그 데이터를 HTML 화면에 어떻게 반영하는지가 중심이야. 오늘 핵심은 DOM API 몇 개를 외우는 게 아니라, 데이터(state)와 화면(DOM)을 분리하고 state 변경 → render() → DOM 갱신 흐름을 만드는 것이야. 이 흐름은 나중에 React 같은 프레임워크를 이해할 때도 그대로 연결된다. 이번엔 말로만 자..
[JavaScript] 한 달 동안 자바스크립트 박살내기 (12) - Promise / async-await / fetch 「한 달 동안 자바스크립트 박살내기」는, ChatGPT쨩이 선생님이 되어, 매일 수업해주는 느낌으로 진행합니다.GPT쨩의 말은 이렇게 작성합니다. 오늘 공부 내용 및 목표 오늘 학습 목표오늘은 어제 배운 event loop 위에 실제 비동기 코드를 얹는 날이야. Promise를 이어서 처리하는 방법, async / await로 같은 흐름을 읽기 쉽게 쓰는 방법, fetch로 HTTP 요청을 보내고 실패를 구분하는 방법까지 잡을 거야. 오늘 제일 중요한 건 네트워크 실패, HTTP 404/500, JavaScript 예외가 서로 다른 사건이라는 점이야.오늘 배우는건 이제, API 호출 처리에 아주아주 중요한 개념이다. 오늘의 위치단계: JavaScript 비동기 실행 주제: Promise chainin..
[JavaScript] 한 달 동안 자바스크립트 박살내기 (11) - event loop 「한 달 동안 자바스크립트 박살내기」는, ChatGPT쨩이 선생님이 되어, 매일 수업해주는 느낌으로 진행합니다.GPT쨩의 말은 이렇게 작성합니다. 오늘 공부 내용 및 목표 오늘 학습 목표오늘은 JavaScript에서 비동기 코드를 읽을 때 가장 중요한 기반인 event loop를 다룰 거야. setTimeout(..., 0)이 왜 즉시 실행되지 않는지, Promise의 후속 처리가 왜 timer보다 먼저 보이는지를 call stack → task → microtask → event loop 순서로 추적해보자. 오늘은 Promise 자체의 사용법을 깊게 배우는 날은 아니야. Promise는 실행 순서를 설명하는 데 필요한 최소 범위만 먼저 정의하고, chaining이나 async/await, fetch..
[JavaScript] 한 달 동안 자바스크립트 박살내기 (10) - 모듈/오류처리, JS핵심 체크포인트 「한 달 동안 자바스크립트 박살내기」는, ChatGPT쨩이 선생님이 되어, 매일 수업해주는 느낌으로 진행합니다.GPT쨩의 말은 이렇게 작성합니다. 오늘 공부 내용 및 목표 오늘 학습 목표오늘은 지금까지 배운 JavaScript 핵심을 한 번 묶으면서, 코드를 파일 단위로 나누는 방법과 오류를 다루는 기본기를 배울 거야. 새 진도를 많이 벌리기보다는 ESM, IIFE/module pattern, try/catch/finally, Error를 정확히 이해하고, 지난 1주일간의 실행 모델을 연결하는 날이라고 보면 돼. 특히 오래된 대규모 웹 코드에서는 “이 값이 어디서 왔는지”, “어느 파일이 어느 파일에 의존하는지”, “오류가 어디서 만들어져 어디서 처리되는지”를 읽는 능력이 중요해. 오늘은 그 흐름을 ..
[JavaScript] 한 달 동안 자바스크립트 박살내기 (9) - closure 「한 달 동안 자바스크립트 박살내기」는, ChatGPT쨩이 선생님이 되어, 매일 수업해주는 느낌으로 진행합니다.GPT쨩의 말은 이렇게 작성합니다. 오늘 공부 내용 및 목표 오늘 학습 목표오늘은 JavaScript에서 난도가 한 단계 올라가는 날이야. 핵심은 함수가 끝난 뒤에도, 그 함수가 만들어질 때 보던 바깥 변수에 접근할 수 있는 이유를 이해하는 거야. closure는 이벤트, callback, 상태 유지, 모듈 패턴, 레거시 프론트엔드 코드를 읽을 때 정말 자주 만나게 돼. 오늘은 용어부터 차근차근 정의하고, factory → private state → callback → 참조 수명 순서로 연결해보자. 오늘의 2강째. 중요한 개념을 배우는 모양이다. 오늘의 위치단계: JavaScript 핵심 ..
[JavaScript] 한 달 동안 자바스크립트 박살내기 (8) - prototype 「한 달 동안 자바스크립트 박살내기」는, ChatGPT쨩이 선생님이 되어, 매일 수업해주는 느낌으로 진행합니다.GPT쨩의 말은 이렇게 작성합니다. 오늘 공부 내용 및 목표 오늘 학습 목표오늘은 JavaScript 객체가 다른 객체의 기능을 어떻게 찾아서 쓰는지, 그 핵심인 prototype을 보는 날이야. 오래된 JavaScript 코드나 레거시 프론트엔드에서는 constructor function과 .prototype을 직접 쓰는 코드가 많이 보여서, property 탐색 경로를 머릿속으로 따라가는 감각이 중요해. 오늘 목표는 문법 암기보다 객체에서 property를 찾는 경로를 추적하는 것이야. constructor function, new, Object.create, class까지 연결해서 결국..

티스토리툴바