LANGUAGE
JavaScript
브라우저에서 실행되는 유일한 언어로, 사용자의 클릭과 서버의 응답이 뒤섞이는 비동기 이벤트 흐름을 다루는 훈련을 합니다. 콜백에서 Promise, async/await로 이어지는 흐름을 직접 설계하며, 실시간으로 변화하는 데이터를 화면에 정확히 반영하는 기초 체력을 기릅니다.
전체 12건
1. 출력(Output)
console.log·error·warn·table을 상황에 맞게 골라 쓰고, 브라우저 개발자 도구에서 결과를 읽는 법을 익힙니다
console.log로 여러 값을 한 번에 찍는 법, 객체와 배열을 표 형태로 보여주는 console.table, 로그의 급을 나누는 error·warn을 실제 개발자 도구 콘솔에서 비교합니다. 템플릿 리터럴 ${...} 로 문자열을 조립하는 법과, 브라우저의 console.log와 달리 줄바꿈을 직접 제어하는 Node.js의 process.stdout.write도 함께 확인합니다.
2. 변수·스코프와 클로저
var/let/const의 스코프 차이와, 함수가 자신이 선언된 환경을 기억하는 클로저의 원리를 다룹니다
블록 스코프와 함수 스코프의 차이를 실제 버그 사례로 확인하고, 클로저가 어떻게 상태를 캡슐화하는 데 활용되는지 카운터 함수 같은 예제로 직접 구현합니다.
3. 함수와 this 바인딩
일반 함수, 화살표 함수, 메서드 호출에서 this가 각각 다르게 바인딩되는 원리를 실습으로 확인합니다
call/apply/bind로 this를 명시적으로 지정하는 방법과, 화살표 함수가 상위 스코프의 this를 그대로 물려받는 이유를 다양한 호출 상황을 재현하며 이해합니다.
4. 배열·객체와 구조 분해
배열/객체 메서드로 데이터를 다루고, 구조 분해 할당으로 필요한 값만 간결하게 꺼내는 법을 익힙니다
map/filter/reduce 같은 배열 고차 함수와 스프레드 연산자, 구조 분해 할당을 조합해 불변성을 유지하며 데이터를 다루는 최신 JS 코드 스타일을 실습합니다.
5. 프로토타입과 클래스
JS 객체가 프로토타입 체인으로 상속을 구현하는 원리와, 그 위에 문법 설탕으로 얹힌 class 키워드를 다룹니다
__proto__와 prototype의 차이, 프로토타입 체인을 통한 메서드 조회 과정을 직접 추적합니다. class 문법이 내부적으로 프로토타입 기반 상속과 동일하게 동작함을 확인합니다.
6. 비동기 프로그래밍
콜백 지옥이 왜 생기는지 재현해보고, Promise가 이를 어떻게 해결하는지 체인 구조로 이해합니다
중첩된 콜백 코드를 직접 작성해 콜백 지옥을 경험하고, 같은 로직을 Promise의 then/catch 체인으로 리팩터링하며 가독성 차이를 체감합니다.
7. async/await와 에러 처리
Promise를 동기 코드처럼 읽히게 해주는 async/await 문법과 try-catch를 활용한 에러 처리를 다룹니다
async/await로 비동기 흐름을 순차적으로 작성하는 법과, 여러 비동기 작업을 병렬로 처리하는 Promise.all의 활용법을 실습하며 상황에 맞는 패턴을 익힙니다.
8. DOM 조작과 이벤트 위임
DOM 트리를 탐색·조작하고, 이벤트 버블링을 활용한 이벤트 위임 패턴으로 효율적인 이벤트 처리를 익힙니다
querySelector로 요소를 찾고 동적으로 DOM을 변경하는 기본기부터, 부모 요소 하나에만 리스너를 걸어 자식 요소들의 이벤트를 처리하는 이벤트 위임 패턴까지 실습합니다.
9. fetch API와 REST 통신
fetch로 서버와 데이터를 주고받고, REST API의 요청/응답 구조를 이해하며 실전 통신 코드를 작성합니다
GET/POST 요청과 JSON 파싱, 에러 상태 처리를 포함한 fetch 사용법을 익히고, 로딩·에러·성공 상태를 UI에 반영하는 실전 패턴을 다룹니다.
10. 모듈 시스템(ESM)과 번들링 기초
import/export로 코드를 모듈 단위로 나누는 ESM 문법과, 번들링이 필요한 이유를 이해합니다
여러 파일로 나눈 모듈이 브라우저에서 어떻게 로드되는지, 그리고 실무에서 번들러(Webpack/Vite 등)가 왜 필요한지 개념적으로 살펴봅니다.
11. React 기초
컴포넌트 단위로 UI를 나누고 useState/props로 상태와 데이터 흐름을 설계하는 법을 다룹니다
단방향 데이터 흐름 원칙 위에서 부모-자식 컴포넌트 간 상태를 어떻게 전달하고 끌어올리는지(lifting state up) 실전 컴포넌트 설계로 익힙니다.
12. 미니 프로젝트
지금까지 배운 비동기 처리와 React 기초를 총동원해 실시간으로 갱신되는 데이터 대시보드를 직접 구현합니다
외부 API를 주기적으로 호출해 최신 데이터를 가져오고, React 컴포넌트에 반영하는 미니 프로젝트를 진행합니다. 코드 리뷰를 통해 실전 프론트엔드 설계 관점의 피드백을 받습니다.