AI가 놓치는 엣지 케이스까지: Next.js와 TypeScript 실전
단순히 화면을 그리는 것을 넘어, 서버 통신과 상태 관리에서 발생하는 수많은 예외 상황(로딩, 에러, 권한 등)을 완벽하게 처리하는 Next.js 프론트엔드 구축법을 배웁니다.
대상 독자: 바이브코딩으로 웹 프론트엔드를 구축하려는 비개발자
1강 시작하기회차 목록
Part 1. AI 코드를 읽기 위한 JS/TS 필수 지식
프론트엔드 코드를 이해하고 수정하기 위해 반드시 알아야 하는 자바스크립트와 타입스크립트의 핵심 문법을 익힙니다.
프론트엔드의 기초: 변수, 함수, 그리고 모듈
프론트엔드 개발의 가장 기본이 되는 데이터 저장, 재사용 가능한 로직, 그리고 파일 간 코드 공유 방법을 배웁니다.
예상 학습 시간 8분
2강데이터를 다루는 마법: 배열과 객체, 그리고 map/filter
수많은 데이터를 하나로 묶어 관리하고, 화면에 필요한 형태로 자유자재로 가공하는 필수 배열 메서드를 알아봅니다.
예상 학습 시간 10분
3강기다림의 미학: 비동기 처리와 Promise, async/await
서버에서 데이터를 받아올 때 화면이 멈추지 않도록 하는 비동기 프로그래밍의 원리와 깔끔한 작성법을 학습합니다.
예상 학습 시간 10분
4강안전망 설치하기: 타입, 인터페이스, 그리고 Null 처리
데이터의 생김새를 미리 약속하여 AI의 실수를 막고, 데이터가 없는(Null) 상황에서 앱이 죽지 않게 방어하는 법을 배웁니다.
예상 학습 시간 10분
5강[요약] Part 1. AI 코드를 읽기 위한 JS/TS 필수 지식
Part 1. AI 코드를 읽기 위한 JS/TS 필수 지식의 핵심 내용을 정리하고 복습하는 요약 회차입니다.
예상 학습 시간 3분
Part 2. 화면을 구성하는 Next.js와 React 기초
컴포넌트를 조립하여 화면을 만들고, 서버 컴포넌트와 클라이언트 컴포넌트의 차이를 명확히 이해합니다.
레고 블록 조립하기: React 컴포넌트, Props, State
화면을 작은 부품(컴포넌트)으로 쪼개고, 부품 간에 데이터를 전달(Props)하며 기억(State)하는 원리를 배웁니다.
예상 학습 시간 10분
7강최신 트렌드: 서버 컴포넌트와 클라이언트 컴포넌트
Next.js의 핵심 특징인 서버 컴포넌트와 클라이언트 컴포넌트를 언제, 어떻게 나누어 써야 하는지 명확히 구분해 봅니다.
예상 학습 시간 10분
8강페이지 이동과 데이터 주고받기: 라우팅과 폼 처리
폴더 기반의 직관적인 라우팅 방식과, 사용자로부터 입력(Form)을 받아 서버로 전달하는 기초를 학습합니다.
예상 학습 시간 10분
9강[요약] Part 2. 화면을 구성하는 Next.js와 React 기초
Part 2. 화면을 구성하는 Next.js와 React 기초의 핵심 내용을 정리하고 복습하는 요약 회차입니다.
예상 학습 시간 3분
Part 3. 빈틈없는 프론트엔드: 예외와 상태 처리
정상 작동 외에 로딩, 에러, 권한 없음 등 사용자가 겪을 수 있는 모든 실패 상태를 방어적으로 구현하는 방법을 배웁니다.
데이터 가져오기, 캐싱, 그리고 환경 변수
서버에서 데이터를 효율적으로 가져오고 저장(캐싱)하는 방법과 민감한 보안 키를 다루는 환경 변수에 대해 배웁니다.
예상 학습 시간 8분
11강유저의 기다림을 위로하다: 로딩과 데이터 없음 상태
데이터를 기다리는 빈 화면을 로딩 스피너와 스켈레톤 UI로 채우고, 검색 결과가 없을 때의 친절한 안내 화면을 구현합니다.
예상 학습 시간 10분
12강접근 차단과 인증: 권한 없음, 그리고 인증 상태 관리
로그인 여부에 따라 화면을 다르게 보여주고, 권한이 없는 페이지 접근을 막아내는 프론트엔드 보호 기법을 배웁니다.
예상 학습 시간 10분
13강서버와 네트워크가 아플 때: 서버 오류와 네트워크 장애
인터넷이 끊기거나 백엔드 서버가 다운되었을 때 사용자가 당황하지 않도록 우아하게 에러 화면(Error Boundary)을 보여줍니다.
예상 학습 시간 10분
14강완벽한 사용자 경험: 중복 제출 방지와 낙관적 업데이트
게시글이 두 번 등록되는 것을 막고, '좋아요'를 누르는 즉시 화면에 반영했다가 실패 시 되돌리는 고급 UI 기법을 배웁니다.
예상 학습 시간 12분
15강[요약] Part 3. 빈틈없는 프론트엔드: 예외와 상태 처리
Part 3. 빈틈없는 프론트엔드: 예외와 상태 처리의 핵심 내용을 정리하고 복습하는 요약 회차입니다.
예상 학습 시간 3분