프론트
엔드

화면 쪽이 프론트엔드

앱과 웹사이트는 크게 두 덩어리로 나뉜다.

프론트엔드는 사용자가 보고 만지는 쪽이다. 버튼, 글자, 색, 움직임이 여기 있다.

백엔드는 뒤에 숨은 쪽이다. 데이터를 저장하고 계산하고 로그인을 처리한다.

식당으로 치면 프론트엔드는 손님이 앉는 홀이고, 백엔드는 주방이다.

화면을 만드는 세 재료

프론트엔드 화면은 세 가지로 만들어진다.

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 를 바꾸면 글자가 알아서 따라 바뀐다
// 글자를 직접 고치는 코드는 한 줄도 없다