01 정적 페이지에서 서버 CRUD 게시판까지 가는 프론트엔드 여정 프론트엔드 과정 전체가 정적 화면, 브라우저 동작, React 상태, 서버 통신으로 차례로 확장되는 하나의 게시판 만들기 여정이라는 점을 이해한다. KT AIVLE School
Frontend
HTML/CSS에서 React state와 서버 CRUD까지 이어지는 프론트엔드 산문
- 원고
- 32
- 8월 25일-9월 24일
- 0편
01 정적 페이지에서 서버 CRUD 게시판까지 가는 프론트엔드 여정 프론트엔드 과정 전체가 정적 화면, 브라우저 동작, React 상태, 서버 통신으로 차례로 확장되는 하나의 게시판 만들기 여정이라는 점을 이해한다. 
02 VS Code와 웹: 개발 환경 속 Client/Server의 숨겨진 이야기 개발자는 VS Code에서 코드를 작성하고, 브라우저는 Client로 그 결과를 실행하며, Server는 요청을 받아 데이터와 화면 자원을 응답한다는 기본 구조를 이해한다. 
03 HTML 문서 골격: 브라우저와 대화하는 뼈대 이해하기 HTML 문서가 브라우저에게 문서 종류, 메타 정보, 실제 화면 구조를 알려주는 뼈대라는 점을 이해한다. 
04 HTML 태그, 모양을 넘어 의미를 만들다 HTML 태그는 모양보다 의미와 구조를 먼저 표현하며, 시맨틱 태그는 페이지의 영역과 역할을 읽기 쉽게 만든다는 점을 이해한다. 
05 HTML class와 id, 이름표 이상의 의미 속성은 태그에 추가 정보를 주고, class와 id는 스타일과 동작 연결을 위해 요소를 구분하는 이름 체계라는 점을 이해한다. 
06 CSS 기초: 역할, 문법, 선택자, 연결 방식 완벽 이해하기 CSS가 선택자로 HTML 요소를 고르고, 속성과 값으로 모양을 지정하며, 외부 파일 연결로 페이지 전체 스타일을 관리한다는 점을 이해한다. 
07 CSS 박스 감각 익히기: 여백과 경계의 시각적 차이 CSS 기본 속성이 글자, 배경, 테두리, 안쪽 여백, 바깥 여백을 나누어 화면의 박스 감각을 만든다는 점을 이해한다. 
08 Flexbox의 두 축: 주축과 교차축 마스터하기 Flexbox가 주축과 교차축을 기준으로 요소의 방향, 간격, 정렬을 제어하는 도구라는 점을 이해한다. 
09 스타일 미적용, 어디서부터 문제일까? CSS 연결 오류 완전 분석 정적 게시판 실습에서 HTML 구조, CSS 선택자, 파일 연결, 클래스 이름이 서로 맞아야 스타일이 적용된다는 점을 이해한다. 
10 JavaScript 연결, 콘솔, 변수와 자료형: 웹페이지에 생명 불어넣기 JavaScript가 브라우저에서 실행되어 값을 저장하고, 콘솔로 확인하며, HTML 페이지에 동작을 붙이는 언어라는 점을 이해한다. 
11 연산자, 조건문, 함수로 JavaScript 동작 묶기 JavaScript가 값을 비교하고 조건에 따라 분기하며, 반복되는 동작을 함수로 묶어 재사용한다는 점을 이해한다. 
12 게시판 데이터 모델링: 왜 '객체 배열'일까요? 게시글의 제목, 작성자, 좋아요 같은 속성은 객체로 묶고, 여러 게시글은 배열에 담아 화면 데이터의 기본 모델을 만든다는 점을 이해한다. 
13 React 개발자를 위한 자바스크립트 불변성 패턴 배열 메서드와 spread가 데이터를 직접 훼손하지 않고 새 값으로 변환하는 패턴이며, 이후 React state 변경의 기초가 된다는 점을 이해한다. 
14 DOM 조작의 기초: HTML에서 동적인 웹 페이지까지 브라우저가 HTML을 DOM 트리로 만들고, JavaScript는 선택자를 통해 요소를 찾아 내용, 속성, 클래스, 스타일을 바꾼다는 점을 이해한다. 
15 DOM 요소 생성, 이벤트, Form 입력 처리: 뒤섞인 화면 갱신 흐름 이해하기 JavaScript가 요소를 만들고 DOM에 붙이며, 이벤트 핸들러를 통해 사용자 행동과 입력값을 읽어 화면을 갱신한다는 점을 이해한다. 
16 바닐라 JS 게시판: 데이터와 화면은 왜 따로 움직일까? 바닐라 JS 게시판에서 데이터 배열 변경과 DOM 다시 그리기가 별도 단계이며, render 함수가 둘 사이를 연결한다는 점을 이해한다. 
17 바닐라 게시판의 한계와 React로 넘어가는 이유 바닐라 JS에서는 데이터 변경, DOM 생성, 이벤트 재연결을 개발자가 직접 맞춰야 하며, React는 이 반복을 선언형 렌더링으로 줄여준다는 전환점을 이해한다. 
18 React 핵심 개념: 복잡한 용어, 명확한 이해 React가 바닐라 JS의 수동 DOM 조작을 선언형 UI와 컴포넌트 구조로 바꾸며, SPA와 Virtual DOM은 화면 갱신 방식을 설명하는 배경이라는 점을 이해한다. 
19 Vite와 npm으로 React 프로젝트 시작하기: 시작점과 구성 요소 탐험 npm은 패키지 실행과 설치를 맡고, Vite는 React 개발 환경을 만들며, main.jsx에서 App.jsx가 화면에 연결되는 시작 흐름을 이해한다. 
20 JSX 마스터하기: HTML과 JavaScript의 조화 JSX는 JavaScript 표현식 안에 UI 구조를 적는 문법이며, 단일 부모, 중괄호 표현식, className, self closing, camelCase 이벤트 같은 규칙을 따른다는 점을 이해한다. 
21 React 컴포넌트: 단순한 정리인가, UI의 뼈대인가? React 컴포넌트는 UI 책임을 나누는 단위이고, props는 부모에서 자식으로 내려가는 읽기 전용 데이터이며, key는 목록의 각 항목을 구분하는 식별자라는 점을 이해한다. 
22 React UI 갱신의 비밀: useState와 상태 불변성 일반 변수와 state의 차이는 변경 통보이며, useState의 현재값과 설정 함수가 React에게 다시 그릴 타이밍을 알려준다는 점을 이해한다. 
23 React 이벤트 핸들링: 삭제 요청을 위로 올리는 방법 React에서는 state를 가진 부모가 실제 변경을 수행하고, 자식은 이벤트 핸들러 props를 호출해 삭제 의도를 위로 전달한다는 점을 이해한다. 
24 Controlled Component: input 값, 누가 주인인가? Controlled Component는 input 값을 React state가 소유하게 만들어 입력, 검증, 추가, 초기화를 한 흐름으로 처리한다는 점을 이해한다. 
25 배열 state 불변성과 좋아요 업데이트 React는 참조 비교로 state 변화를 감지하므로 Create는 spread, Delete는 filter, Update는 map과 객체 spread로 새 값을 만들어야 한다는 점을 이해한다. 
26 비동기 코드, 혼란을 넘어 명확함으로 비동기는 시간이 걸리는 작업을 나중에 완료하고, Promise는 그 결과의 약속이며, async/await와 try/catch는 성공과 실패를 읽기 쉬운 흐름으로 다루는 방법이라는 점을 이해한다. 
27 fetch로 JSON 데이터 완전 정복: 두 번의 await와 HTTP의 원리 브라우저 앱이 HTTP로 서버에 요청하고, fetch의 Response 객체에서 .json()으로 실제 데이터를 꺼내 게시글 배열을 얻는 흐름을 이해한다. 
28 useEffect로 게시글 Read와 loading/error 화면 만들기 useEffect는 렌더 후 실행할 부수 효과를 맡고, 서버 데이터 읽기는 loading, error, success 세 상태를 화면에 분기해 보여줘야 한다는 점을 이해한다. 
29 POST와 DELETE로 새 글과 삭제를 서버에 반영하기 Create와 Delete는 로컬 state만 바꾸는 것이 아니라 HTTP 메서드와 fetch options로 서버 데이터를 먼저 변경하고, 그 응답을 기준으로 화면 state를 갱신해야 한다는 점을 이해한다. 
30 PATCH로 좋아요 업데이트 완성하기 Update는 PATCH로 바꿀 필드만 서버에 보내고, 서버가 돌려준 수정 객체를 map과 불변성 패턴으로 로컬 state에 반영한다는 점을 이해한다. 
31 게시판 진화로 보는 프론트엔드-서버 아키텍처 연결 정적 HTML/CSS, 바닐라 JS, React 컴포넌트, state CRUD, 서버 CRUD가 같은 게시판의 단계별 확장이며 브라우저와 서버의 대화 구조로 완성된다는 점을 이해한다. 
32 프론트엔드 완성 후, 한계를 지도로 바꾸는 방법 완성한 게시판의 한계가 실패가 아니라 백엔드, 라우팅, 상태 관리, 스타일링, 배포 같은 다음 학습 주제를 가리키는 지도라는 점을 이해한다.