WEB-BE-03 · 저장과 API 실습
1. 실습 목표
화면에 입력한 메모가 새로고침 뒤에도 남는지 확인합니다. 먼저 내 브라우저에 저장하고, 다음에는 로컬 서버에 저장합니다. 두 결과가 어디에 남는지 구분하면 API와 데이터베이스의 역할을 이해할 수 있습니다.
2. 브라우저에 저장하기
새 작업 폴더 save-practice에서 시작합니다.
index.html 한 파일에 "검토 메모" 입력 칸, 저장 버튼, 저장된 메모 목록을 만들어 주세요. 브라우저의 localStorage에 메모를 저장하고 새로고침해도 같은 브라우저에서 목록이 보이게 해 주세요. 빈 메모는 저장하지 말고 안내 문구를 보여 주세요. 파일을 더블클릭해 열 수 있게 해 주세요.메모 한 건을 저장하고 새로고침합니다. 남아 있다면 성공입니다. localStorage는 현재 브라우저가 보관하는 작은 저장 공간입니다. 다른 사람의 컴퓨터와 내용을 공유하는 저장소는 아닙니다.
3. 서버에 저장하기
이번에는 새 폴더 server-practice에서 시작합니다. 방금 만든 파일을 덮어쓰지 않습니다.
검토 메모를 서버에 저장하는 작은 로컬 웹앱을 만들어 주세요. 화면에는 메모 입력·저장 버튼·저장된 목록을 두고, Python 표준 라이브러리의 HTTP 서버와 SQLite를 사용해 주세요. 새 패키지는 설치하지 마세요. 빈 메모는 서버에서도 거부하고, 저장 실패 시 화면에 오류와 다시 시도 방법을 보여 주세요. 코드를 만든 뒤 서버를 실행하고 브라우저 주소와 직접 확인할 순서를 알려 주세요.앱이 알려 준 http://127.0.0.1:... 주소로 엽니다. 메모를 저장하고 새로고침해 목록에 남는지 확인합니다. 서버를 잠시 종료했다 다시 실행한 뒤에도 남으면 SQLite 파일에 저장된 것입니다. 서버가 꺼져 있으면 저장 요청은 실패해야 합니다.
API는 화면이 서버에 “이 메모를 저장해 줘”라고 보내고, 서버가 “저장됨” 또는 “실패”를 돌려주는 약속입니다. SQLite는 서버가 메모를 기록하는 파일형 데이터베이스입니다.
4. 실패를 관찰하기
서버를 종료한 뒤 저장 버튼을 눌러 봅니다. 성공했다고 표시되면 잘못된 화면입니다. 다음과 같이 수정 요청을 보냅니다.
서버를 종료하고 저장 버튼을 눌렀는데 화면에 [실제로 보인 문구]가 나왔습니다. 서버에 저장되지 않았을 때 성공으로 보이지 않게 고쳐 주세요. 다시 서버를 실행한 뒤에는 같은 메모를 저장할 수 있는지도 확인해 주세요.5. 직접 확인할 결과
- 브라우저 저장 실습은 파일을 더블클릭해 사용할 수 있다.
- 서버 저장 실습은 앱이 알려 준 로컬 주소에서 열린다.
- 서버를 껐을 때 저장 성공으로 표시되지 않는다.
- 서버를 다시 켜고 조회하면 이전에 저장한 메모가 남아 있다.
GitHub Pages에는 이 서버와 SQLite가 실행되지 않습니다. 배포 실습에서는 서버 없이 열리는 단일 HTML 대시보드를 사용합니다.