오늘 끝나면
프론트엔드
- ✓프론트엔드의 핵심 문제를 한 문장으로 설명한다
- ✓오른쪽 실습에서 프론트엔드이 어떻게 움직이는지 관찰한다
- ✓다음 강의와 이어지는 한계를 말할 수 있다
실습 미션
사용자가 보는 쪽 — 화면과 상호작용 이 문장이 실제로 무슨 뜻인지 실습에서 한 번 손으로 확인한다.
성공 조건
- □실습의 기본값을 먼저 관찰
- □입력값이나 모드를 한 번 이상 바꿔 결과 비교
- □왜 결과가 바뀌었는지 한 문장으로 설명
개발 · Day 15
프론트
엔드
사용자가 보고 만지는 쪽임. HTML·CSS·JS로 만듦. 내 브라우저에서 돎.
화면 쪽이 프론트엔드
앱·웹사이트는 크게 두 덩어리로 나뉨.
프론트엔드는 사용자가 보고 만지는 쪽임. 버튼·글자·색·움직임.
백엔드는 뒤에 숨은 쪽임. 데이터 저장·계산·로그인 처리.
식당으로 치면 프론트엔드는 홀임. 손님이 앉는 자리·메뉴판.
주방은 백엔드임. 다음 날 다룸. 오늘은 홀 이야기임.
식당의 홀(앞) vs 주방(뒤) — 오늘은 홀 이야기
화면을 만드는 세 재료
프론트엔드 화면은 딱 세 가지로 만들어짐.
HTML — 뼈대임. 제목·문단·버튼이 여기 있다고 적음.
CSS — 꾸밈임. 색·크기·위치를 입힘. 화장 같은 거.
JS(자바스크립트) — 움직임임. 누르면 반응하게 만듦.
뼈대 세우고 → 옷 입히고 → 움직이게 함. 셋이 합쳐져야 살아 있는 화면이 됨.
셋 다 브라우저가 읽음. 따로 설치할 거 없음.
뼈대 세우고 → 옷 입히고 → 움직이게 함
프론트엔드는 브라우저에서 돎
프론트엔드 코드는 어디서 실행될까.
서버가 HTML·CSS·JS 파일을 내 기기로 한 번 보내 줌.
그다음부턴 내 폰·내 노트북 안에서 돎. 서버 손 안 거침.
그래서 버튼을 눌렀을 때 즉시 반응함. 인터넷 왕복을 안 기다림.
반대로 백엔드 코드는 멀리 있는 서버에서만 돎. 다음 장 주제임.
보낼 땐 서버 → 받은 뒤엔 내 기기 안에서 돎
상태가 바뀌면 화면이 따라옴
프론트엔드의 진짜 핵심은 이거 하나임.
화면 뒤엔 상태(state)라는 값들이 숨어 있음. 좋아요 수·다크모드 켜짐 같은 거.
우리는 화면을 직접 안 고침. 값만 바꿈. likes를 1 늘리는 식.
그럼 화면이 알아서 그 값에 맞춰 다시 그려짐. 옆 칩에서 버튼을 눌러 보셈.
버튼·표 값·미리보기가 한 몸으로 같이 바뀜.
그래서 React 같은 게 나옴
“값만 바꾸면 화면이 따라온다”를 누가 해 주냐임.
옛날엔 화면 조각을 손으로 하나하나 고쳤음. 숫자 바뀌면 글자도 따로 교체. 헷갈리고 잘 깨짐.
React는 그 일을 대신해 줌. 값과 화면을 묶어 두고, 값이 바뀌면 화면을 다시 그림.
개발자는 값만 신경 씀. 큰 화면도 안 깨지고 빨리 만듦.
Vue·Svelte도 같은 일을 함. 이름만 다르지 생각은 같음 — 상태 → 화면.
코드 보기 — 값 하나에 화면이 묶임
// 값(상태) 하나
const [likes, setLikes] = useState(0)
// 화면은 그 값을 그냥 비춤
<button onClick={() => setLikes(likes + 1)}>
좋아요 {likes}개
</button>
// likes 를 바꾸면 → 글자가 알아서 따라 바뀜
// 글자를 직접 고치는 코드는 한 줄도 없음개발자는 값만 신경 씀 — 화면 갱신은 React가 함