개인 프로젝트 - 카페 메모

vercel 배포

Cafe Counter

 

github.io 배포

POS_TEST

 

목표

카페에서 일할 때 카운터에서 손님들의 이용 정보를 메모장에 기록하기 싫다. 편하게 기록하고 텍스트 파일로 저장할 수 있는 보드판 만들기

설계

디자인

색상 https://mycolor.space/?hex=%23FAD200&sub=1

디자인 후보1

디자인 후보2

 

07.04

 

구현 계획

FE

• input type time 기본값 설정
  https://hianna.tistory.com/318
• 오프라인 온라인이 모두 가능하도록 최종적인 형태는 PWA로 전환.
  https://chatgpt.com/c/e1654a03-3afb-4c65-a6e3-9f4de6f41cad

 

BE

• 다른 날짜의 데이터를 저장하고 불러오기 기능.

 

구현 시작

https://create-react-app.dev/docs/getting-started

 

FE : 진행 중

GitHub - nulzi/CafeMemo_FE

 

GitHub - nulzi/test_cafememo

 

BE : 미구현

 

이슈

한글 입력 이슈

input과 textarea에 한글을 입력하는데 오류가 발생했다. 처음에는 한글을 입력하는 게 문제 일거라고 생각했는데 그 문제가 아니라 useState를 사용해 state를 업데이트하는 것과 store를 업데이트하는 타이밍에 문제가 생겨서 그런 것이었다. 따라서 onChange에서 state만 업데이트하고 store는 onBlur 즉, 포커스가 해제됐을 때 업데이트 시키는 방식으로 바꿨더니 문제가 해결되었다.

 

테이블 이름 변경 이슈

ref를 이용해 해결해보려고 했지만 flag를 이용해 더블클릭했을 때만 input 태그가 나오기 때문에 ref를 이용하는 것은 동작이 되지 않았다. 이를 해결하기 위해서 input 태그에 있는 autoFocus 속성을 사용해 해결했다.

 

텍스트 파일 다운로드 이슈

https://chatgpt.com/c/dfca0023-040e-479c-b1fb-f883122a23ef

챗 gpt를 이용해 문제 해결

 

textarea 태그 내부에 맞춤법 검사 이슈

태그 내부에 글을 쓰면 맞춤법 검사가 발생해 빨간 줄이 생겨서 글씨를 알아보기 힘들게 만듦. 이를 textarea의 spellcheck 속성을 false로 바꿔서 해결했다.

 

PWA 이슈

create react app에서 제공하는 템플릿을 사용해서 진행했다.

npx create-react-app 프로젝트명 --template cra-template-pwa-typescript

https://velog.io/@osohyun0224/React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90-PWA-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

 

PWA 설치 이슈

브라우저의 캐시를 지웠더니 해결되었다.

https://chatgpt.com/c/892b660c-2159-454f-9923-e28d3f11f373

 

배포

github pages 배포

https://velog.io/@leehy0782/GitHub-Pages-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0-with-React

 

vercel 배포

https://cafe-fe-phi.vercel.app/