파일 읽기와 저장

Lots of apps deal with files: a user uploads a photo, exports a spreadsheet, or downloads a report. Reading and saving files is a core part of building real tools.

As a vibe coder, you don't need to memorize file APIs. You describe the behavior — 'let the user upload an image and show a preview' — and AI writes the wiring.

There are two main places files live, and it helps to tell AI which you mean:

• User files — things a person picks from their device, like a photo or a PDF, usually through an upload button in the browser.
• Local files — files your code or tool reads from a folder on your computer, common when using Cursor or Claude Code on a project.

Naming which kind keeps the AI from guessing wrong.

In a web app, users pick files with an upload input. Here's a prompt that creates a simple, friendly uploader. Notice it names what to do with the file after it's chosen.

Paste this into v0, Bolt or Lovable and you'll get a working upload screen in seconds.

When a user uploads a text or CSV file, the browser can read its contents into a string your app can use. AI usually uses a FileReader for this.

This example simulates reading text and counting its lines — the same logic AI would run on real file contents.

Apps also create files for users to download — an exported list, a generated report, a saved drawing. In the browser, AI typically builds the content as text and triggers a download.

You just describe it: tell AI what the file should contain and what to name it.

Two formats show up constantly: CSV (rows and columns, like a spreadsheet) and JSON (labeled data). Apps often import one and export the other.

You don't parse these by hand — you tell AI the format and let it convert. Below, this snippet turns simple data into CSV text, the kind of thing AI generates for an export feature.

Agentic tools like Claude Code and Cursor can read files in your project directly. You can point them at a file and ask questions or request changes.

This is huge: instead of copying code around, you just reference the file by name and let the tool open it.

Real files are messy — extra blank lines, missing values, weird characters. Tell AI to expect this so your app doesn't crash on imperfect input.

Adding 'handle empty rows and missing fields gracefully' to your prompt saves you many bug-fixing rounds later.

A polished file feature lets users preview what they're about to import or export before committing. It prevents mistakes and feels professional.

You can layer this on with a follow-up prompt once the basic version works — vibe coding rewards small, steady steps.

Whether it's an upload, a download, or reading a project file, the pattern is the same: describe the file, describe what to do with it, describe the edge cases.

You don't need to know FileReader, blobs, or encoding details. You stay focused on the user experience and let AI handle the plumbing.

Files from strangers can be risky — a wrong file type, a giant file that freezes the app, or even something malicious. A polished app sets limits.

Tell AI to validate uploads: allowed types, a maximum size, and a clear message when a file is rejected. This small habit keeps your app stable and friendly.

You're building a web app and you want users to pick a photo from their own device and see a preview. When prompting AI, which detail makes the result most reliable?

You learned that apps handle two kinds of files — user uploads and local project files — and that AI can wire up uploads, previews, downloads, and CSV/JSON conversions for you.

You saw how agentic tools read project files directly, and why naming edge cases (empty rows, missing fields) prevents crashes. Next, you'll learn how to store data so it sticks around — from simple local storage to a real database.