이번 주에는?
- 데이터 로딩 중 🌀
원래는 무한 스크롤을 적용해 보고 싶었지만 정말 사용자 입장에서만 알고 개발자 입장에서는 처음 공부해 본 거라 😅 (페이지네이션 / 무한 스크롤이 별도의 개념이라는 것도 처음 알았다) 이걸 하려면 프론트엔드뿐 아니라 백엔드 측에서도 구현을 해 줘야 한다는 점을 확인하고 일단은 해당 사실 회의에서 공유한 뒤 보류.
당장은 페칭하는 동안 스피너 애니메이션이 돌아가도록 해 두었다! gif 사용하는 방법도 봤는데, html으로 모양 만든 뒤 CSS 애니메이션으로 회전시키는 방법 선택.
- JS Date 객체 사용하기:
new Date()
날짜를 사용해야 하는 기능(랭킹 집계 기간 표시, 플래너 날짜 선택)이 좀 있는데, 일단은 라이브러리 없이 Date 객체로 구현해 뒀다.
→ 기간 표시하기: 현재 날짜 정보를 가져오고, 사용자가 선택한 기간(월간, 주간, 전체)에 따라 표시해야 할 값을 계산하기로 했다.
월간은 getMonth() 쓰면 간단하지만 주간을 어떻게 월요일 날짜 ~ 일요일 날짜로 표시해야 하나 싶었는데, getDay()를 쓰면 요일 값을 숫자로 받아올 수 있고 현재 날짜와 요일 값을 기반으로 setDate()를 사용해 월요일 날짜와 일요일 날짜를 구할 수 있었음! 심지어 계산할 때 지난 달 / 다음 달로 넘어가면 자동으로 넘겨 준다...!!! 👍
→ 날짜 선택 옵션(다음 날 / 전날 선택하기): 이건 현재 시점의 날짜가 아니라 현재 선택된 날짜에서 전날, 다음 날을 골라야 하는 거라 날짜 정보를 useState 사용해서 state로 관리했다.
위의 방식을 참고해서 setState 써 주면 될 줄 알았는데... 예상 밖의 복병이 있었음. 일단 날짜 객체를 그대로 state에 넣어 두니 setDate() 메소드를 사용해도 state 변경을 인식하지 못하는 것 같았다. (리렌더링 안 됨) 다른 자료를 참고해 {date: <Date 객체>]} 같은 식으로... 객체로 한 번 더 감싸 주어서 이 부분은 해결.
그런데 setState에서 prev 값을 가져와 +1 / -1 로 setDate를 해 줬더니... 왜인지 두 번째로 setState가 일어날 때부터 날짜가 2일씩 움직이는 현상 발생 🥺 이건 아직 해결을 못했다. 방법 찾는 중.
→ 날짜 선택 옵션(자유 선택): 캘린더 모달을 사용해 원하는 날짜로 바로 이동하는 기능도 넣으려고 하는데, 이 부분은 라이브러리를 사용할 예정.
- 리액트 네이티브 적응기
stack navigator 공부해서 여차저차 집어 넣... 은 줄 알았는데 화면이 안 보이는 문제가 생겼다. 기존에 되어 있는 구조가 탭 > 폼 작성 버튼 누르면 모달 on > 모달에서 옵션 선택해서 폼 작성 탭으로 이동 이런 형태였고, 지금 폼 작성을 단계별 화면으로 쪼개는 게 내가 담당한 파트였음. 그렇다 보니 여기서 스택을 넣으면 탭 > 모달 > 탭 > 스택... 이런 식이 되는 거라 ㅠㅠㅋㅋ 결국 스택을 빼고, 단계별 화면을 모두 각각의 탭으로 작성해서 사용하기로 했음.
화면 하나씩 퍼블리싱하다가 보니 <View> 태그를 제대로 안 써서 위의 문제가 생겼던 건가 싶기도 하고....
- Postman
프론트 측에서 api를 테스트 해 볼 때 사용 가능.
셀프 피드백
→ 리액트 네이티브는 완전 초반 적응기는 넘긴 듯! 리액트랑 다른 개념이 은근히 있는 듯해서 앞으로도 이게 왜 안 돼?! 하면서 열심히 찾아봐야 할 것 같긴 하다... ㅋㅋㅋ
다음 주 목표 💡
~ 수요일
두 번째 form 화면 구현
업데이트 내역 pull 받고 나도 pull request 보내기~ 주말
플래너 기능 완성 (+ 오류 수정 포함)
회원가입 추가 필드 정리
홈 화면, 위치 인증 파트 넘겨받아 진행
