Part 1. 웹의 뿌리와 근본 원리: "변하지 않는 3요소"
1. 웹의 짧은 역사: 문서에서 애플리케이션으로
- Web 1.0 (1990년대): "읽기 전용 문서"
- 당시 웹은 단순히 '글자와 그림이 있는 문서'였습니다. 링크를 누르면 새로운 종이(페이지)를 받아오는 수준이었죠.
- Web 2.0 (2000년대~현재): "읽고 쓰는 앱"
- 사용자가 댓글을 달고, 좋아요를 누르고, 실시간으로 소통하기 시작했습니다. 웹은 이제 문서를 넘어 하나의 소프트웨어가 되었습니다.
- 이때부터 '어떻게 보여줄 것인가(Frontend)'와 '어떻게 처리할 것인가(Backend)'의 분리가 중요해졌습니다.
2. 프론트엔드의 근본: 웹의 3요소
- HTML (HyperText Markup Language): 건축의 골조
- "여기는 제목이다", "여기는 버튼이다"라고 정의하는 뼈대입니다. 내용(Content)을 담당합니다.
- CSS (Cascading Style Sheets): 인테리어와 디자인
- 뼈대에 색을 입히고, 간격을 맞추고, 예쁘게 꾸밉니다. 시각적 경험(Presentation)을 담당합니다.
- JavaScript (JS): 전기 설비와 동작
- 버튼을 누르면 팝업이 뜨고, 데이터를 서버에 보냅니다. 동적인 움직임(Behavior)을 담당합니다.
Tip: "리액트(React)는 이 자바스크립트를 '부품화'해서 조립하기 쉽게 만든 레고 세트와 같습니다."
3. 백엔드의 근본: 보이지 않는 세계의 질서
화면 뒤에서 일어나는 일은 크게 두 가지 역할로 나뉩니다.
- 서버 (Server): "요청을 처리하는 두뇌"
- 사용자가 로그인을 시도하면 비밀번호가 맞는지 계산하고, 결과를 프론트엔드에 알려줍니다.
- 데이터베이스 (Database/DB): "기록을 저장하는 창고"
- 사용자의 이름, 게시물 내용, 구매 기록 등을 잊어버리지 않게 안전하게 저장합니다.
4. 브라우저와 서버의 대화: HTTP Request & Response
웹이 작동하는 가장 근본적인 메커니즘입니다.
- 요청(Request): 우리가 브라우저 주소창에 엔터를 치거나 버튼을 누르는 행위는 서버에 "이것 좀 해줘!"라고 편지를 보내는 것입니다.
- 응답(Response): 서버는 편지를 읽고 요청한 데이터(HTML이나 JSON 등)를 브라우저에게 다시 보내줍니다.
Part 2. 현대 웹의 설계와 공정: Lovable이 돌아가는 원리
우리가 Lovable에서 코드를 짜고 실행하는 과정은 크게 '재료를 준비하고 조립하는 과정(Coding)'과 '그 재료를 실제 앱으로 구워내는 과정(Build)'으로 나뉩니다.
1. 코딩 파트: 웹을 구성하는 스마트한 재료들
비개발자들이 가장 먼저 마주하게 될 '코드 그 자체'에 대한 이야기입니다.
① React: "레고처럼 조립하는 웹"
- 개념: 웹 화면을 통째로 만드는 게 아니라, '버튼', '메뉴', '카드' 같은 작은 부품(Component) 단위로 나누어 만드는 기술입니다.
- 왜 쓰는가: 한 번 잘 만든 버튼 부품을 여기저기 재사용할 수 있고, 데이터가 바뀔 때 화면 전체가 아닌 '바뀐 부품'만 쏙 골라 업데이트하기 때문에 매우 빠르고 효율적입니다.
② TypeScript: "실수를 미리 잡아주는 안전벨트"
- 개념: 자바스크립트에 '타입(성격)'이라는 규칙을 더한 것입니다. (예: "여기는 이름(문자)만 들어와야 해, 숫자는 안 돼!")
- 왜 쓰는가: 타입스크립트는 실행하기 전 단계에서 버그를 잡아주는 역할을 함.
③ Lovable 프로젝트 폴더 구조 예시
src/components/: 우리 앱에서 반복해서 쓰는 작은 레고 조각들(버튼, 입력창).src/pages/: 실제 주소를 가진 화면들(Home, Login, Profile).src/App.tsx: 어떤 화면을 보여줄지 결정하는 '관제탑'.src/main.tsx: 앱이 처음 시작되는 '엔진 스타트 버튼'.
2. 빌드 및 환경
- Node.js : 자바스크립트 실행 환경
- npm : 라이브러리 설치
- package.json: 설치할 라이브러리 목록
- Vite: 빌드 도구