[바이브코딩 기초] 프로젝트 구조 완전 정복💡

📌 이 글은 바이브코딩을 통해 코딩을 처음 접하게 되는 코딩 입문자들을 위해 코딩의 기초적인 개념을 설명해주는 콘텐츠로, 코드가 생성되는 프로젝트의 주요 폴더와 파일, 그리고 핵심 개념을 이해함으로써 '개발' 프로세스의 기초를 이해하고자 한다.

📌 Keywords: 바이브코딩, 코딩입문, 코딩 기초

 

코딩 기초1. 프로젝트 구조의 이해 썸네일

 

 

프로그래밍을 시작할 때 가장 먼저 마주하게 되는 것이 바로 프로젝트 구조다. 어떤 파일을 먼저 열어야 할지, 폴더마다 무슨 역할을 하는지 막막했던 경험이 있다면 이 글이 도움이 될 것이다.

 

바이브코딩인데 왜 왜 '코드'의 기초 개념, 개발 프로젝트의 구조들을 익혀야 하냐? 라고 묻는다면, AI가 짜주고 수정하고 하는 모든 작업들을 내가 이해하지 못하면 결과적으로 '개발'이라고 하는 프로젝트를 끝까지 끌고 갈 수 없고, 나의 크레딧만 낭비한다는 것을 비용을 지불하며 깨달았기 때문이다.

---

🚀 Step 1. 프로젝트를 훑어보자

프론트엔드 개발의 세계는 React, TypeScript, Tailwind 같은 다양한 기술로 구성되어 있다.
개발이라는 것을 하게 되면 VS Code 형태의 프로그램을 사용하게 되는데, 대부분의 파일 구조들이 이런 식으로 생성되게 된다. 

myPortfolio/ (전체 프로젝트 폴더)
├── public/ (이미지, 아이콘이 담긴 외부 공개 폴더)
├── src/ (실제 개발하는 코드의 중심) │
├── components/ (재사용 가능한 UI 요소들) │
├── pages/ (화면 단위의 페이지 구성) │
   └── App.tsx, main.tsx (앱의 시작점 파일)
   └── 기타 설정 파일들 (package.json, tsconfig.json 등)

 

 

이 구조는 마치 집을 짓는 설계도와 같다. 각 폴더와 파일은 명확한 역할을 가지고 있으며, 이를 이해하는 것이 개발의 첫 단추다.

---

📚 프로그래밍 용어, 이렇게 이해하자

처음 접하는 용어들이 많다면, 아래 정리를 참고해보자. 

용어	유형	의미	개념
⚛️ React	라이브러리	UI를 구성하는 도구	집 짓는 도구 상자
📋 TypeScript	언어	타입이 있는 JS	안전한 건축 설계도
📝 JSX	문법	HTML과 JS를 섞은 문법	요리와 장식을 동시에
🎨 Tailwind	스타일 도구	CSS 클래스 기반 스타일링	옷장이 정리된 패션템
🧩 Component	구조 요소	재사용 가능한 UI 블록	레고 블록
📦 Props	데이터 전달	컴포넌트 간 정보 전달	택배 소포
🧠 State	데이터 관리	내부 상태 저장소	메모장
🔌 Hook	기능 함수	기능을 추가하는 도구	만능 도구 상자
🎭 Event	상호작용	사용자 동작 반응	스위치 켜기

 

💡 코드를 읽거나 짤 때, 이 용어들의 의미를 알고 있으면 이해가 훨씬 쉬워진다.

 

---

📄 기본 파일 형식 이해하기

다양한 파일 확장자들이 프로젝트 내에 존재한다. 각 파일의 형식과 역할, 그리고 기초 개념, 예시로 감 잡아보자.

파일형식	역할	개념	예시
.tsx	화면 구성 + 기능	JS + HTML 레시피	App.tsx, Home.tsx
.css	스타일 정의	인테리어 디자인	index.css
.json	설정/데이터 저장	체크리스트	package.json
.js	순수 자바스크립트	조작 지시서	utils.js
.html	웹 기본 구조	건물의 뼈대	index.html
.env	비밀 정보 저장	금고 노트	.env.local

 

💡 특히 .tsx 파일은 TypeScript와 JSX가 결합된 강력한 도구로, 타입 안정성과 UI 설계를 동시에 책임진다.

 

 

🏠 폴더별 역할 제대로 알기

각 폴더와 파일은 아래와 같은 역할을 한다.

폴더/파일	개념	역할
🏠 myPortfolio/	전체 프로젝트	모든 파일이 들어있는 ‘집’
🖼️ public/	공개 리소스	이미지, 아이콘 등 외부 공개 파일
index.html	웹 진입점	앱이 처음 불러오는 HTML
🔧 src/	개발 핵심	모든 코드 작성 공간
components/	UI 부품	버튼, 카드 등 재사용 가능한 요소
pages/	화면 단위	로그인, 홈 등 각 페이지 구성
App.tsx	앱 구성도	전체 구조 정의
main.tsx	시작점	앱 실행 첫 코드
⚙️ package.json	설정 파일	설치된 패키지 목록
tsconfig.json	타입 규칙	TypeScript 설정
🔑 .env	민감 정보 저장소	API 키 저장 등

---

🔍 정리해보기

프로젝트 구조를 이해하는 것은 코딩의 반이다.구조를 알면 코드를 더 빠르게 이해하고, 더 잘 협업할 수 있다.
(나의 지갑과 시간도 지킬 수 있다.)