간단한 메모장 앱 — 풀스택 흐름 익히기

브라우저(프론트엔드) → Express 서버(백엔드) → SQLite(데이터베이스)로 이어지는 데이터 흐름을 직접 따라가 보려고 만든 학습용 메모장 앱입니다. 웹 개발을 처음 배우는 사람도 따라 할 수 있게 단계별로 정리했습니다.

항목	내용
학습 목표	화면에서 누른 버튼이 fetch → REST API → DB까지 어떻게 이어지는지 한 바퀴 이해하기
학습 범위	정적 페이지 제공, JSON API 3개(조회·추가·삭제), SQLite 테이블 생성과 CRUD
형태	개인 학습
기술 스택	HTML · CSS · JavaScript(fetch) / Node.js · Express 5 / SQLite(sqlite3)
기간	2026-03 (커밋 기준)
상태	완료 (로컬 실행용)

주요 기능

• 메모 목록 보기 — 최신 메모가 위로 옵니다.
• 메모 추가 — 입력창에 쓰고 버튼을 누르면 바로 저장됩니다. 빈 내용은 저장되지 않습니다.
• 메모 삭제 — 각 메모의 삭제 버튼으로 지웁니다.

시작하기

1단계: Node.js 설치 확인

터미널(Windows는 명령 프롬프트)에서 버전이 나오면 준비된 것입니다. 안 나오면 nodejs.org에서 LTS 버전을 설치하세요.

node --version

2단계: 프로젝트 폴더로 이동

cd fullstack-flow-practice

3단계: 필요한 패키지 설치

package.json에 적힌 도구(Express 5, sqlite3)를 한 번에 설치합니다.

npm install

• express — 웹 서버 도구
• sqlite3 — 데이터베이스 도구

4단계: 서버 실행

npm start

npm start는 node server.js와 같습니다. 처음 실행하면 memo.db 파일이 자동으로 만들어집니다.

5단계: 브라우저에서 확인

브라우저 주소창에 http://localhost:3000 을 입력합니다.

막히면 에러 해결법을 보세요.

API

server.js에 정의된 엔드포인트입니다. 메모는 memos 테이블(id, content, created_at)에 저장됩니다.

메서드	경로	설명
GET	/api/memos	전체 메모를 최신순(created_at DESC)으로 조회
POST	/api/memos	새 메모 추가 (요청 본문 { "content": "..." }, 내용이 없으면 400)
DELETE	/api/memos/:id	해당 id의 메모 삭제

데이터 흐름 한눈에

[브라우저] index.html + app.js
     │  fetch('/api/memos')
     ▼
[서버] server.js (Express, :3000)
     │  SQL 실행
     ▼
[DB] memo.db (SQLite)

메모 추가 버튼을 누르면 app.js가 fetch로 서버에 보내고, server.js가 SQLite에 저장한 뒤 결과를 돌려주면 화면이 새 목록을 그립니다. 그림으로 자세히 본 흐름은 초보자 가이드에 있습니다.

프로젝트 구조

fullstack-flow-practice/
├── package.json        프로젝트 설정 (npm start → node server.js)
├── server.js           백엔드: 서버 실행, API 처리, 테이블 생성
├── frontend/
│   ├── index.html      화면 구조 (제목, 입력창, 목록)
│   ├── style.css       화면 디자인 (색상, 크기, 여백)
│   └── app.js          화면 동작 (버튼 클릭, 서버 요청)
├── docs/
│   └── 초보자_가이드.md  데이터 흐름 그림, 에러 해결법, 핵심 개념
└── memo.db             데이터베이스 (실행 시 자동 생성, .gitignore로 제외)

더 읽을거리

• docs/초보자_가이드.md — 전체 흐름도, 자주 나는 에러 4가지와 해결법, 프론트엔드·백엔드·DB·API 개념 정리