미루고 미뤄왔던 회고글이다
계속 피드백이 들어오고 전부 수정해야겠다고 마음을 먹으니 언제 v1.0.0을 마무리 해야할 지 모르겠다....
우리집 식단표 서비스는 그동안 많은 것들이 추가되고 수정됐다. 🍽
- UI 대공사
- 이메일/비밀번호로 로그인 + 회원가입
- 달력의 날짜 칸 클릭 시 모달창이 나타난다! (+ 메뉴 부분/전체삭제, 메뉴 드래그)
- 메뉴 검색 기능
- 메뉴 레시피 검색페이지로 이동시키기
UI 대공사
그동안 고민을 굉장히 많이 했던 달력 UI가 확 바뀌었다!
 |  |
|---|---|
| BEFORE | AFTER |
1. 달력 header button -> icon으로 변경, 년도와 월 가운데 정렬
일반 버튼으로 기능을 알리는 것도 좋지만, 아이콘을 활용하면 가독성이 더욱 높아진다고 생각이 들어 변경하게 됐다.
기능을 좀 더 명확하게 전달하기 위해 아이콘을 hover 했을 때 말풍선으로 어떤 기능인지 표시될 수 있도록 했다 (인스타그램의 아이콘 애니메이션을 활용했다!).
년도와 월 텍스트를 가운데로 정렬시켰다. 훨씬 보기가 좋은 느낌이다.
2. 해당 월이 아닌 칸은 배경색이 다르게, hover 중인 칸을 구분지어 표기
검정색 펜으로 체크되어있는 부분
예시로 6월이 아닌 날짜칸의 배경색을 다르게 해 현재 달의 날짜와 확실하게 구분이 될 수 있도록 했다.
그리고, 현재 hover중인 칸이 어떤 칸인지 알 수 있도록 테두리 색을 구분시켰다.
지금보니 서비스에 여러가지 색을 사용해서 조금 정신없다는 느낌이 든다. 테마색을 정하지 않고 만들다 보니 이 사달이 난 것 같다,,
이메일/비밀번호로 로그인 + 회원가입
 |  |
|---|---|
| 로그인 | 회원가입 |
다른 분들이 서비스를 이용하게 될 때(혹은 테스트용으로) 구글 로그인만으로는 매우 제한적으로 이용하게 될 것 같았다. 빠른 시일내에 추가하고 싶었던 기능이었는데 이제서야 추가하게 됐다... 😂
현재는 회원가입 시에 서비스 이용에 문제되지 않는 정도의 정보만 받고 있다. 추후에 아이디/비밀번호 찾기 기능을 추가하면서 회원가입 시 받는 정보도 조금 추가해야 할 것 같다.
회원가입 시에는 firebase의 createUserWithEmailAndPassword, 로그인 시에는 signInWithEmailAndPassword 를 이용해 기능을 구현했다.
에러코드를 받아올 때 400 401 이런식이 아니고 문자열 형식으로 보내와서 에러처리를 고민 중이다.
달력의 날짜 칸 클릭 시 모달창 구현 (+ 메뉴 부분/전체삭제, 메뉴 드래그)
날짜 칸 클릭 시 상세정보를 볼 수 있는 모달창을 만들었다.
사실 달력 전체 화면에서도 등록한 메뉴들을 확인할 수 있지만 추후에 등록할 수 있는 메뉴 갯수 제한을 더 늘리게 되면 달력 전체 화면에서 등록한 모든 메뉴들을 확인할 수 없어서 미리 모달창을 제작했다.
모달창에서 부분삭제와 해당 일의 전체메뉴 삭제가 가능하다
메뉴 부분/일별 전체 메뉴삭제의 경우에는 모달창 내에서만 가능하게 구현했다.
달력 내 각각의 날짜칸에 작게 일별 전체 삭제버튼을 만들까 했는데 달력에서는 등록한 메뉴들를 확인하는 용도로만 사용하는 것이 좀 더 역할을 명확하게 할 수 있을 것 같았다.
메뉴를 모달 안으로 드래그 해도 메뉴 등록이 된다!
이전엔 달력으로만 드래그가 가능했다. 모달로 메뉴를 드래그하더라도 등록은 되지 않았지만 모달에도 드래그 기능이 추가됐으면 좋겠다는 의견을 받아 적극 반영하게 됐다.
메뉴 검색 기능
많고 많은 메뉴들 중 원하는 메뉴를 검색할 수 있게 만들었다
따로 검색 api를 제작한 것은 아니다. 새로고침 시 혹은 로그인 직후 식단표를 불러올 때 메뉴들을 같이 불러온다. 그 때 불러오는 메뉴리스트를 이용해 검색어가 포함되어 있는 메뉴들을 필터링해서 보여주는 형식으로 구현했다.
이 때 불필요하게 리렌더링 되는 것을 방지하고자 디바운스 개념을 적용했다. 사용자의 입력이 끝난 후 300ms 후에 필터링(적용한 함수)이 진행될 수 있도록 했다.
메뉴 레시피 검색페이지로 이동시키기
등록된 메뉴를 클릭하면 레시피 검색페이지로~
큰 기능은 아니지만... 주 사용자인 동생이 아이디어를 내줬다. 등록된 메뉴 텍스트를 클릭하면 레시피 검색 리스트를 볼 수 있게 링크 연결만 해줬다.
이 때 event.stopPropagation() 메서드 개념을 처음 알게됐다.
달력 칸의 이벤트를 보자.
달력 칸 전체(부모)를 클릭하면 모달이 열리고, 달력 내 메뉴 텍스트(자식)를 클릭했을 때는 레시피 페이지가 열리게 계획했다.
하지만 자식에게 레시피 페이지 open 이벤트를 아무리 줘도 모달이 함께 열렸다(부모 이벤트가 함께 실행).
이것이 바로 자바스크립트의 이벤트 버블링(이벤트 전파)이다.
자식 엘리먼트에서 이벤트가 발생되면, 부모 엘리먼트로 이벤트가 전파되어 의도치 않게 부모 이벤트가 함께 실행되는 것이다.
그걸 막아주는 메서드가 event.stopPropagation() 이다!!!!!@!!!!!
event.preventDefault() 메서드만큼 자주 사용하는 메서드라고 하는데, 난 이번 프로젝트로 처음 알게됐다. 이벤트 버블링의 개념도 새로 알게돼서... 너무 뿌듯했다.
삽질
모달 내 부분삭제를 구현하다가....
분명히 이렇게 하면 빈 문자열로 할당이 되어야 하는데 왜 안될까? 원래 안되는걸까? 했는데 정말 어이없게..... ㅠ 할당연산자(=) 대신 비교연산자(===)를 사용하는 실수가 있었다
ㅎㅎ;;;;; 정말 억울했다
Uncaught TypeError: Cannot read property 의 늪
모달이랑 여러가지 css 적용하고나서 배포 한 번 해봤는데 5월 6일에서만 에러가 나타났다
왜 하필 5월 6일에서만????????????
서버에 등록되는 키 이름을 좀 더 명확하게 하려고 변수명을 바꾼 후에 이것저것 그 변수명에 맞춰 수정사항이 있었다.
5월 6일에는 수정된 변수명이 반영되지 않아 '정의되지 않은 객체의 property를 읽어'왔을 것이다...
서버에 반영되는 변수명이 수정되면 기존 데이터도 확인해볼 것 ^^
JavaScript 개발자라면 생각보다 이 에러를 많이 봤을텐데요. 이 에러는 크롬에서 정의되지 않은 객체의 property를 읽어내거나 method를 호출했을 때 발생합니다. 간단하게 크롬 검사창의 console에서도 쉽게 확인할 수 있어요.
출처
1.0.0 버전은 언제쯤 완성이 될까...?
더 열심히 꾸준히 발전하는 서비스를 만들자.
🥰
