Chapter 0: Pre-Coding Basics

Learning Objectives

Understand how computers manage files
Know what a terminal is and use basic commands
Get the big picture of how the web works
Get a sense of what AI coding tools are

This chapter is for people who have never coded before. If you can turn on a computer and browse the internet, that's enough. If you already know how to use a terminal, feel free to skip ahead to Chapter 1.

0.1 Files and Folders: Your Computer's Filing Cabinet

Everything inside a computer is a file. Photos, documents, music, and even programs. Folders (directories) are what organize these files.

My Computer/
├── Documents/
│   ├── resume.docx
│   └── Projects/
│       └── my-app/         ← Example project folder
│           ├── index.html
│           └── style.css
├── Photos/
└── Downloads/

A few key concepts in programming:

Term	Meaning	Analogy
File	A unit containing data	A sheet of paper
Folder (Directory)	A space that holds files	A drawer
Path	A file's location	An address
Extension	Indicates file type (.txt, .js)	A name tag for files

How to Read Paths

A path is an address that tells you where a file is located.

/Users/me/Documents/Projects/my-app/index.html

Folders are separated by forward slashes (/).

💡

Absolute Path vs Relative Path

Absolute path: The full address from the root — /Users/me/Documents/my-app
Relative path: Based on your current location — ./my-app (my-app inside the current folder)

A dot (.) means "current folder", and two dots (..) mean "parent folder."

0.2 Terminal: Talking to Your Computer with Text

Normally, you use a computer by clicking with a mouse. This is called a GUI (Graphical User Interface). A terminal, on the other hand, is a way of giving commands through text. This is called a CLI (Command Line Interface).

	GUI (Mouse)	CLI (Terminal)
Open folder	Double-click	`cd foldername`
View file list	Open file explorer	`ls`
Create new folder	Right-click → New Folder	`mkdir foldername`
Delete file	Drag to trash	`rm filename`

How to Open a Terminal

Open Spotlight with Cmd + Space
Type "Terminal" and press Enter

7 Essential Commands

There are hundreds of terminal commands, but these are all you need for vibe coding.

Command	What It Does	Example
`pwd`	Show where you are right now	`pwd` → `/Users/me/Documents`
`ls`	List files in current folder	`ls`
`cd`	Move to another folder	`cd Projects`
`cd ..`	Move to parent folder	`cd ..`
`mkdir`	Create a new folder	`mkdir my-app`
`clear`	Clear the screen	`clear`
`code .`	Open VS Code	`code .` (opens current folder in VS Code)

⚠️

Windows Users

Default Windows commands are slightly different. dir instead of ls, cls instead of clear. However, if you use PowerShell or Git Bash, the commands above will work as-is. Git Bash is automatically installed when you install Git.

Hands-On: Creating a Folder with the Terminal

Let's try it ourselves. Open your terminal and follow along:

Step 1: Check your current location

pwd

You'll see a path like /Users/me. This shows where you currently are.

Step 2: Create a project folder

mkdir my-first-project

Step 3: Navigate into the folder

cd my-first-project

Step 4: Verify

pwd

If it now shows /Users/me/my-first-project, you've succeeded!

Scared of the terminal?

Don't worry. Typing something wrong won't break your computer. Just be careful with the rm (delete) command. And in vibe coding, the AI will tell you most of the commands you need anyway.

0.3 How the Web Works

What we'll be building going forward is a web service. Let's learn the basics of how the web works.

What Happens When You Type a URL

[Your Browser] ──Request──▶ [Server] ──Response──▶ [Your Browser]
   "Give me this page"              "Here you go" (HTML, CSS, JS)

Term	Meaning	Analogy
Client	The requester (browser)	A customer
Server	The responder (computer)	A restaurant kitchen
URL	Web page address	Restaurant address
HTTP	Rules for requests/responses	Ordering system

The 3 Languages That Build Web Pages

Language	Role	Analogy
HTML	Structure (skeleton)	A building's frame
CSS	Design (styling)	Interior decoration
JavaScript	Behavior (functionality)	Electricity/plumbing

In vibe coding, you don't need to learn these three directly. You can just tell the AI "make a page like this." But keep in mind that these three exist. You'll see these files in code the AI generates.

What is localhost:3000?

During development, you use your own computer as a temporary server.

localhost = your own computer
:3000 = the port number (think of it as a door number)

When you run npm run dev, a temporary server starts on your computer, and you can view your page by navigating to http://localhost:3000.

💡

"Development Server" vs "Production Server"

Development server (localhost) — Only visible on your computer. Others can't access it.
Production server (deployed) — Public on the internet. Anyone can access it. We'll cover this in Chapter 6.

0.4 Installing Development Tools

You need 4 tools to start vibe coding. Let's install them one by one.

Step 1: VS Code (Code Editor)

Think of it as a programmer's version of Notepad. It highlights your code with colors and provides auto-completion.

Go to https://code.visualstudio.com (opens in a new tab)
Download the version for your OS
Install and launch

Step 2: Node.js (Runtime Environment)

A tool that lets you run JavaScript on your computer. The web app we're building runs on this.

Go to https://nodejs.org (opens in a new tab)
Download the LTS version (the stable one)
After installing, verify in your terminal:

node --version
# If you see something like v20.x.x, you're good

Step 3: Git (Version Control)

A tool that tracks the history of your code changes. Think of it as a pro version of the "Save" button.

Go to https://git-scm.com (opens in a new tab) and download
After installing, verify:

git --version
# If you see something like git version 2.x.x, you're good

Why do I need Git?

You can revert to a previous state if you break your code
You need it to push code to GitHub and deploy
You can track changes made by AI

Step 4: Claude Code (AI Coding Tool)

This is our core tool. You chat with AI in the terminal to create code.

npm install -g @anthropic-ai/claude-code

After installing, verify:

claude --version

Installation Checklist

If you've installed everything, verify it all at once in the terminal:

node --version && git --version && claude --version

If all three lines show version numbers, you're ready to go!

0.5 What Are AI Coding Tools?

How Is This Different from ChatGPT?

You can create code with ChatGPT too. But there's a big difference:

	ChatGPT (Web)	Claude Code (Terminal)
Running code	Copy → Paste → Run manually	Runs automatically
Editing files	Only shows you the code	Reads and edits files directly
Project understanding	You have to explain every time	Automatically understands folder structure
Error handling	You have to copy-paste errors	Sees errors and fixes them right away

In short, ChatGPT is an advisor and Claude Code is an executor.

Basic Claude Code Usage

Start from your project folder

cd my-first-project
claude

Make requests in natural language

Make me a simple web page that displays "Hello, World!"

Check the result

Claude creates the files and even starts the server if needed.

💡

The Core Principle of AI Coding

AI is a tool. Just as a hammer doesn't build a house, AI doesn't build your service. You set the direction, and AI executes. What to build and in what order is your decision.

0.6 How to Follow This Book

Learning Flow

Chapter 0 (you are here)     → Building foundational knowledge
Chapter 1                     → Starting vibe coding, building a landing page
Chapter 2-5                   → Adding features one by one (DB, Auth, Real-time, Security)
Chapter 6                     → Going live (Deployment)
Chapter 7                     → Making money (Monetization)

When You're Stuck

Show the error message to Claude as-is — Most things get resolved this way
Check the troubleshooting appendix — Common problems are all documented there
Don't try to do too much at once — Break things into small steps

Chapter Summary

Understood the structure of files and folders
Can open a terminal and use basic commands
Got the big picture of how the web works
Installed VS Code, Node.js, Git, and Claude Code
Learned how AI coding tools differ from existing tools

In the next chapter, we'll start vibe coding for real.

Chapter 1: Getting Started with Vibe Coding →

시작하기 1. 바이브코딩 입문