시리즈 소개
오프라인 PWA를 목표로 하는 To Do 웹앱 프로젝트 To Do Wild 를 개발하며 배운 것들을 적는 시리즈입니다.
- beta service (일단은 오프라인이 될겁니다.)
- github
머리말
시작하게 된 계기
1인 개발해 운영 중인 메모 웹앱이 있다. memmo.cc
Laravel + Livewire 스택이고 사실상 거의 PHP라고 보면 된다.
그런데 아무래도 메모 앱이라는 건 오프라인 기능 제공을 해야 하지 않나... 싶은 것이다.
그리고 앞으로의 커리어를 생각해서 Typescript 풀스택을 좀 노려보고 싶어졌다.
그래서 Laravel + Vue 스택으로 전환을 시도하고 있다.
그런데 아무래도 Laravel 웹앱은 오프라인 모드에서 잘 돌 것 같지가 않다.
그리고 '로그인 안 한 상태에서는 + 세션/로컬스토리지 단위 저장' 같은 걸 제공하자면, Laravel 기반에서는 애매하고, 클라이언트 부분이 좀더 강화될 필요가 있다.
애초에 나... 웹앱을 오프라인으로 제공하는 방법을 모르잖아...??
그래서 그냥 '뭔가를 오프라인으로 쌔울 수 있음을 증명하는' 웹앱을 만들어보기로 했다.
요건/사양
욕심 낼 것 없이 To Do 앱으로 만들기로 했다. 가뜩이나 클라이언트 개발은 신입급이고 하니 조바심 내지 말고...
- 투두앱의 기본기능까지만 구현한다.
- 목록, 목록에 추가, 수정, 삭제, 체크/언체크 처리, "아카이브"까지 구현한다.
- 검색, 정렬, 리마인더, "폴더" 등등의 고급기능 구현하지 않는다.
- UX는 오프라인 사용성 충분히 고려한다.
- 연습용 앱이긴 하지만 실제로 비행기 안에서 쓸 수 있는 앱을 만들기로 한다.
- 오프라인 앱으로만 만든다.
- 온라인 전환간 싱크 구현하지 않는다. 오프라인을 다룰 수 있게 되면 싱크 자체는 그렇게 어려운 과제가 아닐 거라고 생각된다.
목표
- 자신감 + 학습의욕 고취
- 할수있다 풀스택! 느낌으로
- 사실 5월 16일 현시점 기준으로 회사 경영난에 의한 권고사직 상태이다. (...) Hire me!
- memmo를 오프라인 구동하기 위해 무엇을 해내야 하는지 확인하기
- 지금의 느낌상으로는 Inertia인데, 구체적인 내용을 아직 모른다. 그래서, 오프라인 웹앱의 맛을 보기 위해 이 프로젝트를 시작한다.
새 Vue 앱 만들기
Vite
이건 개인적으로 잊어버릴까봐 메모하는 것.
Vue 프로젝트는 vue cli로 시작할 거 없고, Vite로 시작하면 된다.
npm create vite@latest todo-wild -- --template vue앱 아이콘
정말 너무너무 귀찮아서 그냥 구글에다 대고 "app icon generator"라고 찾아봤고 아이콘 키친이라는 게 있길래 이걸 썼다.
머 그럴듯하니까 됐다.
manifest.json
MDN 문서 백번 읽고 겨우 구성한 게 이거다.
{
"short_name": "To Do Wild",
"name": "To Do Wild: offline todo app",
"description": "An offline PWA exercise by yuptogun.",
"icons": [
{ "src": "/favicon.ico", "type": "image/x-icon", "sizes": "32x32" },
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
{ "src": "/icon-192-maskable.png", "type": "image/png", "sizes": "192x192", "purpose": "maskable" },
{ "src": "/icon-512-maskable.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
],
"id": "/?source=pwa",
"start_url": "/?source=pwa",
"background_color": "#ffffff",
"theme_color": "#9e9e9e",
"display": "standalone",
"scope": "/",
"orientation": "portrait-primary"
}이것저것 모자란데 일단 '설치'를 띄우는 데는 성공했다.
VS Code 개발컨테이너
기본 Node.js + Typescript 이미지로 시작하기
Docker 기초를 뗀 이후로 나는 내 컴퓨터에 PHP를 깔지 않는다.
개발컨테이너에 익숙해진 이후로는 node도 깔지 않게 되었다.
이번 프로젝트는 다음 순서로 시작했다.
- 프로젝트 폴더를 만든다.
- VS Code로 그 폴더를 연다.
- 커맨드 실행한다. "개발 컨테이너 구성 파일 추가"
@command:remote-containers.createDevContainerFile- "작업 영역에 구성 추가"를 선택한다.
- "Node.js & TypeScript" 선택한다.
- "(기본)"이라고 된 버전 이미지 선택한다.
- "설치할 추가 기능"은 Vue CLI 선택하지 않았음. 딱히 아직은?
- 커맨드 실행한다. "컨테이너에서 다시 열기"
@command:remote-containers.reopenInContainer
- 컨테이너 내부 터미널에서 Vite 프로젝트 새로 시작을 한다.
- 커맨드 실행한다. "원격 연결 닫기"
@command:workbench.action.remote.close
- 5에서 새로 만들어진 폴더의 모든 내용을 상위폴더로 옮긴다. 비워진 폴더는 지운다.
- 커맨드 실행한다. "컨테이너 다시 빌드하고 다시 열기"
@command:remote-containers.rebuildAndReopenInContainer
요컨대 프로젝트의 설치와 구성을 모두 개발컨테이너로 해버린다는 발상이다.
사실, 퍼미션 문제만 잘 회피할 수 있다면, 다음 순서대로 하는 게 제일 깔끔하다.
cd my-projects/
docker run --rm -it -v "$(pwd):/app" -w /app node:alpine npm create vite@latest todo-wild -- --template vue
cd todo-wild/
git init
code .
# 이후 개발컨테이너 설정파일 만들어서 열고 실행