#1 시작

엽토군·2024년 5월 16일
vitevue
0

To Do Wild 개발기

목록 보기
1/3

시리즈 소개

오프라인 PWA를 목표로 하는 To Do 웹앱 프로젝트 To Do Wild 를 개발하며 배운 것들을 적는 시리즈입니다.

머리말

시작하게 된 계기

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도 깔지 않게 되었다.
이번 프로젝트는 다음 순서로 시작했다.

  1. 프로젝트 폴더를 만든다.
  2. VS Code로 그 폴더를 연다.
  3. 커맨드 실행한다. "개발 컨테이너 구성 파일 추가"
    • @command:remote-containers.createDevContainerFile
    • "작업 영역에 구성 추가"를 선택한다.
    • "Node.js & TypeScript" 선택한다.
    • "(기본)"이라고 된 버전 이미지 선택한다.
    • "설치할 추가 기능"은 Vue CLI 선택하지 않았음. 딱히 아직은?
  4. 커맨드 실행한다. "컨테이너에서 다시 열기"
    • @command:remote-containers.reopenInContainer
  5. 컨테이너 내부 터미널에서 Vite 프로젝트 새로 시작을 한다.
  6. 커맨드 실행한다. "원격 연결 닫기"
    • @command:workbench.action.remote.close
  7. 5에서 새로 만들어진 폴더의 모든 내용을 상위폴더로 옮긴다. 비워진 폴더는 지운다.
  8. 커맨드 실행한다. "컨테이너 다시 빌드하고 다시 열기"
    • @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 .
# 이후 개발컨테이너 설정파일 만들어서 열고 실행
profile
엽토군
5년차 PHP 개발자입니다.
다음 포스트

#2 퍼블리싱

0개의 댓글