새로운 프레임워크를 위해 프로젝트 하나를 기획했다.
Vue3, Vuex, Vue-Router, EsLint(standard) 정도를 적용했다.
백엔드는 NestJs로 할지 단순 Firebase로 할지 정하지 못했다.
TodoList나 만드는 것이 좋았을지도 모르겠다.
i
가 두개?하나는 글쓴이 하나는 웹 도우미 서비스이다. 일단 방향성은 그렇다.
이야기 작성시 기존의 정보들을 제공하는 멍청한 비서이다.
사이드 프로젝트를 준비하며 처음 접하는 vue 문서를 차근차근 읽어보았다.
손에 익은 React와 다른 점이 정말 많았다.
보다 편해보이는 것도 물론 많았으나 자기들만의 세상을 구축한 듯한 느낌을 받았다.
리포지토리를 열어 ReadMe를 작성했다.
MVP 계획과 와이어프레임이자 디자인 완성본을 첨부했다.
📌inline-block에 의해 발생하는 4px의 늪에서 환각에 빠졌던 나
리엑트로 20분이면 끝날 것을 처음쓰는 Vue로 6시간에 걸쳐 틀을 만들었다.
아직 상태관리는 시작도 안했다. 사실 라우팅에서 2시간은 날린 것 같다.
백엔드를 어떻게 할 지 못정했으니..레이아웃부터 잡아줬다.
사용자가 보기에 너무 난잡하지 않은 최소한의 움직임이고 싶다.
🐱👤 Note
내년의 나는 이걸 보고 한마디 해주길.
캐릭터 생성, 작품 생성, 이야기 작성의 레이아웃이 동일하다.
같은 컴포넌트를 사용해 URL에 따라 분기를 나누는 것과 서로 다른 컴포넌트로 짜는 것.
이건 재사용이 아니라 분기 나누는게 코드가 더러워질 것 같아서 후자로 작성했다.
가장 작은 사각형, 우측 상단의 로그인 창부터 만들었다.
프로젝트 안하고 로그인만 해도 비동기통신에 상태관리에 레이아웃에 페이지 전환까지 연습 다 되겠다는 생각이 크게 들었다.
인풋 인풋 버튼 로그인 뷰 오케이.
그 다음, 회원가입을 같은 칸에서 해결하고 싶었다. 하지만 너무 뚱뚱했다
페이지를 만들 계획이 없었던 고로 회원가입에 필요한 인풋 갯수를 줄였다.
ID, Email, PW, PWCheck -> Email, PW (파이어베이스 딱 대십쇼)
인풋 갯수가 서로 동일하니 사용자 입장에서 바뀐건지 헷갈릴 것 같다.
색 팔렛트가 다양했으면 어느정도 변동을 줄텐데..
🐱👤 Note
하나를 버렸으면 하나는 챙기기
로그인과 회원가입간 화면 전환이 눈에 잘 들어오지 않는다.
유효성 검사도 현재는 required와 type에 의존하고 있다.
📌커스텀 알림창이라도 만들어서 적용해보자.
출근 당해서 이어가지 못했다.... 언젠가 하자.