학습 공간 개념 · 판단 · 실험

Frontend Performance Lab

JavaScript

처음 접하는 개념부터 원리와 설계 적용까지, 필요한 단계부터 시작하세요.

개념 노트 23개 · 직접 실습 5개

시작 전 HTML 요소와 기본 CSS 선택자를 알아두면 DOM 예제를 읽기 쉽습니다.

처음부터 시작 →

순서는 권장 경로입니다. 이미 아는 내용은 건너뛰어도 됩니다. 함수·배열·객체와 이벤트를 다룰 수 있다면 모든 심화를 끝내지 않아도 React를 시작할 수 있습니다.

01

시작하기

JavaScript의 역할과 결과를 확인하는 방법부터 시작합니다.

02

기초 익히기

값 저장 → 분기·반복 → 함수 → 목록·객체 → 화면·비동기 순서로 익힙니다.

03

원리 이해하기

앞에서 사용한 코드의 값·범위·실행 순서와 실패 경계를 깊게 읽습니다.

04

설계에 적용하기

예상과 실제 결과를 비교하고 비동기 화면의 처리 전략을 선택합니다.

직접 실습

코드 실습이벤트 루프와 Microtask비동기 예약(Microtask)과 별도 스레드 실행(Worker)의 차이를 구분할 수 있습니다.코드 실습메인 스레드와 긴 작업하나의 긴 JavaScript 작업이 입력 처리와 화면 렌더링을 지연시키는 이유를 이해할 수 있습니다.코드 실습Web Worker와 실행 위치전체 완료 시간과 메인 스레드의 입력 반응성을 구분해 해석할 수 있습니다.코드 실습데이터 전달과 Worker 수명Worker 내부 계산 시간과 전체 완료 시간의 측정 경계를 구분하고 cold/warm 차이를 해석할 수 있습니다.코드 실습티켓팅 요청 경쟁과 취소응답 도착 순서를 바꿔 보며 오래된 응답 덮어쓰기, 최신 요청 확인, 요청 취소를 비교해 볼 수 있습니다.

상황 판단

설계 상황티켓팅 페이지, 공연 정보와 좌석 목록을 어떻게 불러올까요?독립적인 API 병렬 호출부터 부분 실패 처리, 요청 경쟁(Race Condition) 방지와 응답 스키마 검증까지 차례대로 설계합니다.설계 상황챗봇 답변이 스트리밍되는 도중에 다른 대화방으로 이동하면?스트리밍 청크(Chunk) 파싱, 대화방 전환 시 응답 격리, 생성 중단 처리와 XSS 방지 렌더링을 함께 설계합니다.

직접 해볼 과제

날짜 선택에 따라 좌석을 보여 주는 화면에서 로딩·성공·실패·오래된 응답을 어떻게 구분할지 정리해 보세요.

확인할 기준

  • 선택 날짜와 응답 날짜가 다른 상황을 설명할 수 있는가
  • 취소와 오래된 응답 무시의 차이를 구분하는가
  • 비동기 예약과 별도 스레드 실행을 구분하는가

과제는 직접 작성·확인하는 연습입니다. 자동 채점이나 완료 기록은 제공하지 않습니다.