Practice) 개인프로젝트 - Today's Clothing

  🔗배포링크      🔗Github

 

# 회고

기획을 마친 후 4월 25일부터 개인프로젝트를 시작했다. 지난주 목요일(5/18)에 1차로 과제를 제출한 후, 이번주 월요일(5/22)일 부터 리팩토링하여 개인 프로젝트를 마무리했다. 주말은 개인적인 일이 있어, 주로 평일에 작업했다. 
이번 프로젝트를 통해 배운건, '상태 관리'와 'data flow'의 중요성이다. 5/22 ~ 5/24 동안 로컬 스트로지를 사용해 데이터를 다루며 페이지가 정상적으로 동작하게 리팩토링 하였다. 하지만, 리팩토링을 마치고 나서 로컬스토리지를 사용해 데이터를 다뤄야 하는 이유에 대해 고민하게 되었다. 결국, 내가 로컬스토리지에 데이터를 저장하여 사용할 필요는 없었다. 해당 문제가 새로고침 문제라면, App.tsx에서 refresh 될 때 마다 데이터를 다시 불러오면 되니까 말이다. 이 부분을 깨닫고 나서 내 코드를 살펴보니 상태관리가 엉망이었다. data flow는 생각하지 않고 대부분의 상태를 전역으로 관리하고 있어서 '나 지금까지 뭐했니?'라는 생각이 절로 들었다.  
대부분의 코드를 수정하니 약 3일이 걸렸다. 그리고 기획 후 또는 마크업 후에 data flow에 시간을 투자했더라면 하는 아쉬움이 들었다.
이후에 해당 웹에 데이터를 업데이트 하며 문제를 수정해나갈 예정이다. 
 

##  기능

- 로그인/회원가입 : Google social login 기능을 제공합니다.
- Today's Clothes
: 오늘의 의류정보를 사용자 위치의 날씨 정보와 함께 보여줍니다.
: 오늘 날짜에 등록된 정보가 없는 경우, 오늘 기온에 해당하는 기본 이미지를 보여줍니다.
- Closet
: 다음주에 입을 옷을 미리 계획할 수 있습니다. 
: 이미지 CRUD가 가능합니다.
- Record : 과거에 업로드한 데이터를 기온별로  필터링하여 확인할 수 있습니다.
- Talk
: 공유된 user 의류정보를 날짜, 날씨와 함께 확인할 수 있습니다. 
: 댓글을 통해 다른 user와 소통할 수 있습니다.
: 댓글 CRUD가 가능합니다.
 
 
 

## 기술적인 문제점 1 -  Recoil issue

“Can't perform a React state update on a component that hasn't mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls tries to update the component. Move this work to useEffect instead.
Uncaught Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.”
- Recoil을 사용해 상태관리를 하던 중 에러가 발생했다. DB에 데이터는 잘 저장되고 있지만, 새로고침 하지 않으면 UI가 업데이트 되지 않는다. 해당 문제는 마침 프론트엔드 멘토님과 약 15분 동안 미팅할 기회가 있어서 조언을 구했다. 해당 문제는 useRecoilValue를 사용하는 컴포넌트에서는 React.Suspense를 사용해야 한다고 하셨다. Recoil을 처음 다루다 보니 아직 모르고 부족한 점이 많다. 해당 부분을 문서를 읽고 직접 사용해 보면서 꾸준히 보완해나가야겠다.
 

## 기술적인 문제점 2 - textarea lose focusing issue

Talk 페이지에서 포스트를 클릭하면 나타나는 모달창에서 댓글을 수정하려 하면 textarea가 나타나야한다. 하지만 댓글을 수정하고자 글자를 입력하면 단 한 글자만 입력이 되고 포커스를 잃는 문제가 발생했다. 이 문제로 한참을 구글링했다. 해당 문제는 고유한 key 값을 생성하기 위해 사용한 라이브러리 때문이었다. 각 댓글을 map()을 이용해 렌더링하는 과정에서 key값으로 v4()를 사용했다. 그럼 v4()로 인해 virtual dom과 real dom 간에 차이가 생기고 따라서 페이지가 리렌더링되며 textarea는 포커스를 잃게 된다. 해당 문제는 v4()를 지워 문제를 해결했다.
reference) 

02.14 - input에서 한 글자 입력 후 focus를 잃는 현상 / string으로 js object 값에 접근하기

 
 

## 기술적인 문제점 3 - 상태관리

전역과 지역으로 관리할 데이터가 제대로 되어있지 않다고 판단했다. 데모데이가 끝난 후 각 컴포넌트에 필요한 데이터를 정리한 후 각 컴포넌트를 수정하였다.
아직 개발에 미숙하다보니, 초기 기획 단계에서 데이터를 어떻게 관리할지를 상세하게 계획하지 않고 개발에 들어갔기 때문에 데이터 관리가 엉망이었다. 예를들어 날씨 데이터의 경우,  오늘의 날씨와 의류정보를 보여주는 TodayClothes 컴포넌트에서만 사용하고 있는데 이를 전역으로 관리하고 있었다.  초기 계획은 16일간의 날씨정보를 받아와 TodayClothes와 Closet 컴포넌트에서 사용할 예정이었지만, 해당 api는 더이상 무료로 제공하지 않아 현재의 날씨를 받아오는 api를 TodayClothes에서만 사용하는 것으로 변경한 후 추가 처리를 하지 않아 발생한 문제였다.
해당 부분은 약 4일간 리팩토링했다.
로그인 여부에 따라 nav bar 메뉴가 달라지므로 새로고침 이슈가 있었다. 또한 새로고침시 매번 사용자의 위치 정보를 새로 받아오는 문제도 있었다. 이 부분은 로그인 여부와 현재 사용자의 위치정보를 localStorage에 저장하여 문제를 해결했다. 
상태관리는, 각 컴포넌트 별로 필요한 데이터가 무엇인지 정리했고 이를 기반으로 각 변수를 어떻게 관리할지 정리하여 코드를 수정했다. 

component	Necessary Data
Login/App	post, usePost
TodayClothes	userPost, defaultPost, weather
Talk	post, publicPost
Closet	userPost, nextWeekUserPost, usePost
Record	userPost
Logout

 
 

## 기술적인 문제점 4 - 무한스크롤

라이브러리를 사용하는 대신, 무한스크롤 코드를 직접 작성해보고 싶었다. 하지만, 2가지 문제가 있었다. 

•  화면의 너비에 따라 무한스크롤 동작 안함

: 해당 부분은 'if (window.innerHeight + window.scrollY >= document.body.offsetHeight && posts)' 부분에서 에러가 있었다. window.innerHeight + window.scrollY의 값이 document.body.offsetHeight && posts 보다 소수점 이하로 미세하게 작아 해당 조건문을 통과하지 못해 발생한 문제였다. 해당 문제는 Math.ceil()을 사용해 window.innerHeight + window.scrollY 의 값을 반올림 해주어 문제를 해결했다. 

•  최근에 등록된 게시물 순서대로 불러오기

: 데이터 호출 시, orderBy()에 내림차순 옵션을 사용했음에도 Talk 컴포넌트의 데이터가 중복해서 불러와지고 최신순으로 정렬되지 않는 문제가 있었다. 혹시 firebase의 getDocs()를 잘 못 사용하고 있는건 아닌지 몇 일 동안 구글링도 하고 공식 문서도 읽었지만, 답을 찾지 못했다. 하지만, 등잔밑이 어둡다고, 초기에 게시물 데이터는 createdAt의  내림차순으로 데이터를 불러왔지만, 이후에 무한스크롤이 동작할때는 해당 옵션을 넣어주지 않아 발생한 문제였다. 안된다고 말하기 전에 좀 더 꼼꼼히 보는 습관을 길러야겠다... 하하
 
 

## 새로 배운 stack

- Tailwindcss / DaisyUI
: 지난 React shop 프로젝트에서 멘토님이 추천해주셔서 처음 사용해보았다. Tailwindcss는 className을 사용해 스타일을 추가하는 형태인데, 따로 css 문서를 작성하지 않고 직관적인 단축어로 스타일을 추가할 수 있어 편리하다. DaisyUI는 UI 컴포넌트 라이브러리로 이미 만들어져 있는걸 가져와서 사용하면 되는 형태라 편리했다. Bootstrap만 사용해보았는데, Tailwindcss와 DaisyUI를 사용하니 개발이 훨씬 수월해져서 신세계이다. 
 
- Recoil
: 이 또한 지난 프로젝트에서 멘토님이 추천해주셔서 사용하게 되었다. Redux와 context.api는 이전에 사용해본 경험이 있지만, Recoil은 처음이라 사용해보았다. Recoil은 페이스북에서 만든 상태관리 라이브러리로 사용하기에 복잡하지 않고 react와 비슷해 이해하기 수월했다.(물론 처음 사용해보는지라 어려움도 있었고 에러도 발생했었다ㅠ)
하지만 Recoil을 사용하면서, '변수들을 상태를 관리한다는 이유로 전역으로 끌어올리는 것이 맞는가?' 라는 의문이 들었다. 그래서 프로젝트 중간에 가진 멘토님과의 15분간의 미팅중에 해당 부분에 대해 질문했고, '현업에서는 주로 context api를 사용하며 어쩔 수 없는 경우 전역으로 관리한다'라는 대답을 들었다. 역시, Recoil을 사용해 상태를 관리하며 느꼈던 이 찝찝함은 틀리지 않았다. 아직은 많이 부족하지만, 데이터를 다룰 때, 상태관리에 좀 더 신경써야겠다.