정리 & 연습
핵심 요점
- 모든 앱은 네 부분입니다: (사용자가 보는 것), (규칙과 로직), 데이터베이스(데이터가 지속되는 곳), 그리고 호스팅(이 모든 게 돌아가는 곳). frontend는 절대 데이터베이스에 직접 손대지 않습니다 — backend를 거칩니다.
- 브라우저에서 HTML은 구조, CSS는 스타일, JavaScript는 동작입니다. 코드는 DOM을 바꿈으로써 페이지를 바꿉니다.
- 모든 걸 직접 쓰지 않습니다 — 패키지(
package.json과 잠금 파일을 통해 npm이 관리)가 해결된 문제들을 의존성으로 공급합니다. - 환경 변수는 비밀을 코드 바깥에 두고, 같은 코드가 dev와 prod에서 올바르게 동작하게 해줍니다.
- 요청은 frontend → 호스팅 → backend → 데이터베이스로 흘렀다가 되돌아옵니다. 문제가 머무는 계층을 짚어내는 것이 해결의 절반입니다.
해보기
매일 쓰는 앱 하나를 골라 한 가지 동작을 계층을 거치며 소리 내어 풀어보세요: "내가 전송을 누르면(frontend) → 그게 그쪽 서버로 가고(backend) → 내가 권한이 있는지 확인하고 메시지를 저장한 뒤(데이터베이스) → 채팅이 업데이트된다(frontend)." 그런 다음 각 문제가 어느 계층에 사는지 추측해보세요: 버튼이 어긋나 보인다; 앱이 "로그인되어 있지 않습니다"라고 한다; 어제 온 메시지가 사라졌다. 이렇게 계층을 짚어내는 데 능숙해지는 것이 이 책의 나머지가 그 위에 쌓아 올리는 바로 그 기술입니다.
이 장의 프롬프트
나는 앱이 어떻게 맞물려 돌아가는지 배우고 있어. 내가 원하는 기능은 이거야:
<사용자가 무엇을 할 수 있어야 하는지 한 문장으로 설명>
코드를 쓰기 전에, 계층별로 나눠서 설명해줘:
- Frontend: 사용자가 보는 것, 그리고 무엇이 전송되는지
- Backend: 어떤 규칙/검사가 돌아야 하는지, 그리고 어디서
- Database: 어떤 데이터를 저장하거나 읽어야 하는지
- 관련된 env vars나 설정 (특히 비밀)
그런 다음 클릭부터 결과까지 요청 흐름을 번호 매긴 단계로 설명해줘.
쉬운 말로 해줘 — 코드 전에 전체 생김새를 이해하고 싶어.