Talking to Machines
KO
8

8장

만들기의
언어

만들기의 어휘 —
코드가 아니라 명사와 동사.

이제 코딩 에이전트 앞에 앉아서 뭔가를 만들 거야. 에이전트가 "deploy", "endpoint", "component", "schema" 같은 단어를 쓸 거야. 이 단어들이 불투명하면 길을 잃을 거야 — 만들 수 없어서가 아니라 디렉팅할 수 없어서. 이 챕터가 해독기를 줘. 코딩하는 법이 아니라. 만들기의 언어를 말하는 법.

자동차 운전이라고 생각해. 연소 엔진, 변속비, 브레이크 액 압력을 이해할 필요 없어. 알아야 하는 건: 가속 페달, 브레이크, 핸들, 거울. 방향 지시의 어휘지, 구현의 어휘가 아니야.

스택: 해독기

모든 앱은 — Instagram부터 간단한 할 일 목록까지 — 네 개의 레이어로 만들어져. 개발자들은 이걸 "스택"이라고 불러. 전부 해독해줄게:

프론트엔드

사람들이 보고 만지는 부분. 버튼, 텍스트, 이미지, 애니메이션. 레스토랑의 다이닝 룸.

백엔드

뒤에서 돌아가는 로직. 요청을 처리하고, 비밀번호를 확인하고, 이메일을 보내. 주방.

데이터베이스

앱이 것들을 기억하는 곳. 사용자 계정, 게시물, 설정. 식료품 저장실과 레시피 북.

배포

인터넷에 올리는 방법. 호스팅, 도메인, 라이브 전환. 레스토랑 문을 여는 것.

이게 전부야. 네가 써본 모든 앱은 이 네 레이어의 조합이야. 코딩 에이전트가 "백엔드를 설정할게요"라고 하면 "뒤에서 돌아가는 로직을 쓸게요"란 뜻이야. "배포하죠"라고 하면 "인터넷에 올리죠"란 뜻이야. 이 레이어들이 어떻게 작동하는지 알 필요 없어. 존재한다는 것과 각각 뭘 위한 건지만 알면 돼.

에이전트가 튜터야

아무도 안 알려주는 부분이 있어: 코딩 에이전트는 네 선생님이기도 해. "npm"이 뭔지 모르겠어? 물어봐. 에러 메시지에 혼란스러워? 붙여넣고 "개발자가 아닌 사람처럼 설명해줘"라고 해. 에이전트가 왜 다른 것 대신 React를 골랐는지 알고 싶어? 물어봐. 쉬운 말로, 단계별로, 네가 필요한 만큼 설명해줘.

첫 5분

코딩 도구를 열어. 프로젝트를 쉬운 말로 설명해: "운동을 기록하고 시간에 따른 진행 상황을 볼 수 있는 운동 트래커를 만들고 싶어." 에이전트가 확인 질문을 하고, 스택을 제안하고, 만들기 시작해. 네 첫 번째 할 일은 질문에 답하고 만들어지는 걸 지켜보는 거야.

웹 앱의 네 레이어를 탐험해봐. 클릭해서 어휘를 배우고 — 테스트해봐.

The Stack Decoder

Click a layer to explore its vocabulary

The frontend is everything a user interacts with — buttons, text, images, forms, animations. It runs in the browser on the user's device.

Think of a restaurant. The frontend is the dining room — the menu, the tables, the decor. It's what customers experience.

Nouns (the things)
Component

A reusable piece of the interface, like a button or a card.

ReactVueSvelte
Page

A single screen or view in your app.

Home pageSettings pageProfile page
Style

How things look — colors, fonts, spacing, layout.

CSSTailwindSass
State

Data that can change — like whether a menu is open or a form field is filled.

Dark mode on/offItem count in cartCurrent tab
Verbs (the actions)
RenderDisplay something on screen. When a page renders, it becomes visible.
NavigateMove from one page to another.
Handle eventsReact to user actions like clicks, typing, or scrolling.

The backend is the server-side code that processes requests, applies business logic, and communicates with the database. Users never see it directly.

The backend is the kitchen. Orders come in, the kitchen prepares them, and sends out the finished dish. Customers don't see the kitchen, but nothing works without it.

Nouns (the things)
Server

A computer that listens for requests and sends back responses.

Node.jsPython/FlaskGo
API

A set of rules for how the frontend talks to the backend. Like a waiter taking orders.

REST APIGraphQLtRPC
Endpoint

A specific URL the frontend can call to get or send data.

/api/users/api/login/api/posts
Authentication

Verifying who a user is — login systems, passwords, sessions.

JWT tokensOAuthCookies
Verbs (the actions)
FetchRequest data from the backend. "The app fetches your profile from the server."
ProcessApply logic to data — calculate, validate, transform.
AuthorizeCheck if a user has permission to do something.

The database stores all the persistent data — user accounts, posts, settings, anything that needs to survive a page refresh or server restart.

The database is the pantry and the recipe book. It stores all the ingredients (data) and keeps them organized so the kitchen (backend) can find them fast.

Nouns (the things)
Table

A structured collection of data, like a spreadsheet. Each row is a record.

Users tablePosts tableOrders table
Schema

The blueprint for your data — what fields exist and what type of data each holds.

name: textage: numbercreated_at: date
Query

A request to find, add, update, or delete data in the database.

SELECT * FROM usersINSERT INTO postsDELETE FROM comments
Migration

A change to your database structure — like adding a new column to a table.

Add email fieldCreate orders tableRemove old column
Verbs (the actions)
StoreSave data so it persists. "Store the user's preferences in the database."
QueryAsk the database for specific data. "Query all users who signed up today."
MigrateUpdate the database structure without losing existing data.

Deployment is the process of taking your app from your computer and putting it on the internet where anyone can use it. It includes hosting, domains, and keeping things running.

Deployment is opening the restaurant. You've built the dining room, hired the kitchen staff, stocked the pantry — now you unlock the front door and put up a sign.

Nouns (the things)
Hosting

A service that runs your app on the internet 24/7.

VercelNetlifyRailwayFly.io
Domain

Your app's address on the internet — the URL people type to find you.

myapp.comcool-project.vercel.app
Environment Variables

Secret settings (like API keys) stored outside your code so they stay private.

API_KEY=abc123DATABASE_URL=...
Build

The process of converting your source code into optimized files ready to serve.

npm run buildProduction buildStatic export
Verbs (the actions)
DeployPush your app to the internet. "Deploy to Vercel" means put it live.
BuildPrepare your code for production — optimize, bundle, compress.
MonitorWatch your app for errors, slowdowns, or crashes after it's live.
Share this course
엔진이 어떻게 작동하는지 알 필요 없어. 운전하는 법만 알면 돼.

단어를 알게 됐어. 아이디어도 있어. 이제 코딩 에이전트 앞에 앉아서 실제로 만들 시간이야. 다음: 빌드 루프의 기술 — 반복, 평가, 그리고 뭔가 깨졌을 때 어떻게 하는지.

Complexity Score

New tool unlocked!