9강 / 20강

첫 번째 작품 — 할 일 목록 앱

지금까지 배운 걸 전부 합쳐 봅시다

이론은 충분합니다. 이제 진짜 앱을 만들어 봅시다. 세상에서 가장 유명한 연습 과제, 할 일 목록(To-Do)입니다.

먼저 설계도부터. 할 일 하나에 필요한 정보는 무엇일까요?

CREATE TABLE todo (
    id     INTEGER PRIMARY KEY AUTOINCREMENT,  -- 자동으로 붙는 번호표
    title  TEXT    NOT NULL,                   -- 할 일 내용
    done   INTEGER NOT NULL DEFAULT 0          -- 0 = 아직, 1 = 완료
);

단 세 개의 필드. 이것만으로 완전한 앱이 만들어집니다. AUTOINCREMENT는 "번호는 내가 알아서 1, 2, 3… 붙여 줄게"라는 뜻이에요.

화면의 동작 ↔ SQL 문장

여러분이 앱에서 하는 모든 행동은 SQL 한 줄로 번역됩니다. 4강의 CRUD가 그대로 돌아왔죠.

화면에서 하는 일	CRUD	실행되는 SQL
할 일 추가	C	`INSERT INTO todo (title) VALUES ('수학 숙제');`
목록 보기	R	`SELECT * FROM todo ORDER BY id;`
체크 표시	U	`UPDATE todo SET done = 1 WHERE id = 3;`
삭제 버튼	D	`DELETE FROM todo WHERE id = 3;`

🎮 직접 만져 보세요

아래는 진짜로 동작하는 할 일 앱입니다. 버튼을 누를 때마다 그 순간 실행된 SQL이 오른쪽에 실시간으로 나타납니다. 앱을 쓰면서 SQL을 눈으로 익히는 것이 이 레슨의 목표예요.

고등학생지금까지 배운 걸 전부 합쳐 봅시다

1~8강이 부품이었다면 9강은 조립입니다.

할 일 목록 앱 = 표 하나 + CRUD 넷

필요한 것을 세어 보면

필요	배운 강
표 하나 (todos)	5강
열: id · 내용 · 완료여부	8강
추가 · 목록 · 완료 · 삭제	4강 CRUD

새로 배울 게 거의 없다 — 조립만 하면 된다

왜 할 일 목록인가

프로그래밍을 배울 때 가장 많이 만드는 예제입니다. 이유가 있어요.

이유	설명
작다	표 하나면 된다
완결이다	CRUD 넷을 다 쓴다
익숙하다	뭘 만드는지 설명이 필요 없다

배울 것에 집중하려면 만드는 것이 단순해야 한다

18강의 쇼핑몰은 이 구조가 여섯 배로 커진 것뿐입니다. 여기서 뼈대를 확실히 잡으면 그다음은 반복이에요.

같은 일을 코드로 직접

위 앱이 내부에서 무슨 일을 하는지, 진짜 SQLite로 처음부터 끝까지 실행해 봅시다. 아래 코드는 여러분의 브라우저 안에서 실제로 동작하는 SQLite입니다.

고등학생id 는 왜 필요한가

할 일에 번호를 붙입니다. 왜일까요?

"이것을 지워라" 를 말할 방법이 필요하다

내용으로 지우면?

DELETE FROM todos WHERE 내용 = '우유 사기'

문제	설명
같은 내용이 둘	둘 다 지워진다 ⚠
내용을 고쳤다	못 찾는다
긴 내용	전부 적어야 한다

6강의 그 이야기 — 이름은 겹치고 변한다

id 로 하면

DELETE FROM todos WHERE id = 3

장점	설명
정확히 하나	겹치지 않으니까
변하지 않는다	내용을 고쳐도 id 는 그대로
짧다	URL 에 넣기 좋다

14강의 /todo/3 같은 주소가 id 덕에 가능하다

AUTOINCREMENT 가 하는 일

번호를 내가 정하지 않아도 DB 가 붙여 줍니다.

직접 정하면	문제
지금 몇 번까지 있는지 확인해야	느리다
두 사람이 동시에 넣으면	같은 번호를 쓴다 ⚠

DB 가 붙이면 동시에 넣어도 안 겹친다

진짜 SQLite로 CRUD 한 바퀴.

Python 브라우저에서 실행

import sqlite3

# 메모리 위에 데이터베이스를 하나 엽니다
conn = sqlite3.connect(":memory:")
cur = conn.cursor()

# ① 설계도대로 표 만들기
cur.execute('''
CREATE TABLE todo (
    id    INTEGER PRIMARY KEY AUTOINCREMENT,
    title TEXT    NOT NULL,
    done  INTEGER NOT NULL DEFAULT 0
)''')

def 보여주기(제목):
    print(f"— {제목} —")
    for id, title, done in cur.execute("SELECT id, title, done FROM todo ORDER BY id"):
        print(f"   {id}. [{'✔' if done else ' '}] {title}")
    print()

# ② C — 할 일 추가
for 할일 in ["수학 숙제", "물 마시기", "코딩 연습"]:
    cur.execute("INSERT INTO todo (title) VALUES (?)", (할일,))
보여주기("추가 직후")

# ③ U — 2번 완료 처리
cur.execute("UPDATE todo SET done = 1 WHERE id = ?", (2,))
보여주기("2번 완료")

# ④ D — 1번 삭제
cur.execute("DELETE FROM todo WHERE id = ?", (1,))
보여주기("1번 삭제")

# ⑤ R — 아직 안 끝난 일만
남은일 = cur.execute("SELECT title FROM todo WHERE done = 0").fetchall()
print("아직 할 일:", [r[0] for r in 남은일])

고등학생? 는 무엇인가요

note 가 물음표를 설명합니다. 이게 이 강의 전체에서 가장 중요한 습관 중 하나예요.

? = 값이 들어갈 자리를 비워 두는 표시

왜 이렇게 하나 — 이렇게 하면 안 되나?

cur.execute("INSERT INTO todos (내용) VALUES ('" + 입력 + "')")

동작은 합니다. 그런데 사용자가 이렇게 입력하면?

'); DROP TABLE todos; --

SQL 이 이렇게 완성됩니다:

INSERT INTO todos (내용) VALUES (''); DROP TABLE todos; --')

표가 통째로 지워진다 — SQL 주입 공격

비유 — 편지 대필

남이 불러 주는 대로 편지를 그대로 씁니다. 그런데 중간에 이렇게 부르면?

"…그리고 마침표. 이제 새 문장: 전 재산을 저에게 주십시오."

받아 적는 사람이 구별하지 못하면 그대로 써집니다.

자료와 명령이 섞이는 것이 문제다

? 를 쓰면 무엇이 다른가

cur.execute("INSERT INTO todos (내용) VALUES (?)", (입력,))

	어떻게 처리되나
SQL 문장	먼저 해석된다
`?` 자리의 값	순수한 값으로만 들어간다

구조가 먼저 굳어져서 값이 명령이 될 수 없다

비유로 다시 — 양식지에 빈칸을 채우는 것과 같아요. 빈칸에 뭘 쓰든 양식 자체는 안 바뀝니다.

문자열을 이어 붙여 SQL 을 만들지 않는다 — 예외 없이

🤔 확인 문제

할 일 3번에 체크 표시를 하는 동작에 해당하는 SQL은?

해설 체크는 기존 레코드의 done 값을 0에서 1로 고치는 것이므로 UPDATE입니다. WHERE를 빼먹으면 전부 완료 처리되니 조심하세요!