Ch.3 컴퓨터가 코드를 실행하는 법

파일과 폴더 — 프로젝트 구조 읽는 법

프로젝트 폴더의 기본 구조를 설명할 수 있다파일 확장자별 용도를 구별할 수 있다node_modules와 .env 파일의 주의사항을 안다

AI에게 '이 프로젝트 봐줘'라고 했더니 파일 100개를 읽기 시작합니다

프로젝트를 열어보니 파일이 수십 개, 폴더도 여러 겹입니다. 어디에 뭐가 있는지 모르면 AI에게 올바른 지시를 할 수 없습니다.

이 많은 파일과 폴더는 대체 어떻게 정리돼 있는 걸까?

프로젝트 폴더는 서류 캐비닛과 같습니다. 각 서랍(폴더)에 용도별 서류(파일)가 정리돼 있습니다.

article

핵심 내용

프로젝트란 폴더 하나에 담긴 파일들의 모음입니다

비유: 프로젝트 폴더는 서류 캐비닛입니다. 각 서랍(폴더)에 용도별 서류(파일)가 정리돼 있어요. 서랍 이름만 보면 어떤 서류가 들어있는지 짐작할 수 있습니다.

파일 이름 뒤의 점(.) 뒤가 확장자입니다 확장자만 보면 파일의 용도를 알 수 있어요

실제 코드가 들어있는 핵심 폴더는?

node_modules 폴더는 직접 수정해도 된다

파일과 폴더 구조 완료

key

핵심 용어

📂

src/

실제 코드가 사는 곳 — 여기가 핵심

🖼️

public/

이미지·아이콘 등 정적 파일

📦

node_modules/

남이 만든 라이브러리 (절대 직접 수정 금지!)

🕐

.git/

Git이 관리하는 히스토리 (보이지 않는 폴더)

🔷

.ts / .tsx

TypeScript — 이 코스의 주력 언어

🟨

.js

JavaScript — 웹의 기본 언어

🐍

.py

Python — AI/데이터 분야에서 많이 사용

⚙️

.json

설정 파일 — 기계가 읽는 데이터

📝

.md

마크다운 — 사람이 읽는 문서

🔒

.env

비밀 정보(API 키 등) — 절대 공유 금지!

check_circle

핵심 정리

  • 1프로젝트 = 폴더 하나에 담긴 파일 모음
  • 2src/(코드), public/(정적), node_modules/(라이브러리, 수정 금지)
  • 3확장자로 파일 용도 구별: .ts, .json, .env 등

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작