[1월 3주차] 실전 프로젝트 3주차 후기 (feat. 항해99 10주차 실전 프로젝트)

게더로 이사한 이후 자동차를 타고 다니는 취미가 생겼다!

이번주차는 캘린더 페이지의 기술적인 부분을 완료하고, 지금껏 미뤄온 css작업을 완성하는데 심혈을 기울였다. 그 과정에서 input창이나 모달창 그리고 커뮤니티 디자인이 대폭 수정되었다.

메인 페이지 주요 기능

메인페이지는 위와 같이 수정되었다. 사실상 거의 90% 이상 완성되었다고 해도 무방하다. 메인의 상단에 있는 월급날 D-day는 근무지가 두 개 이상인 경우 슬라이더로 넘겨서 볼 수 있도록 하였다. 근무지 추가를 통해 근무지 카드를 만들고 근무지 카드의 오른쪽 상단의 점3개 버튼을 눌러 수정 및 삭제 드롭다운이 나타나면 수정을 할 수 있는 수정페이지로 넘어가거나 근무지를 삭제할 수 있도록 하였다. 수정 부분에서 근무지 이름이나 월급일처럼 현재 카드의 색상 역시 어떤 색상인지 알 수 있도록 하는 부분을 추가하면 좋을 것 같다.

달력 페이지와 근무 등록 페이지

달력 페이지는 주휴수당 기능과 일별 급여 총합 기능을 완료하였다. 주휴수당의 경우 월별로 get요청이 필요하지만, 유저가 일별로 클릭했을 때 나타나는 일별 모달창 데이터를 위해 일별 get요청 역시 필요하였다. 그래서 일별 주휴수당을 일별 모달창 get요청 시 함께 get요청을 하여 기능을 구현하였다. 일별 급여 총합 기능의 경우 원래는 월별 요청을 하면서 개별 근무 일정에 dayTotalWage라는 변수로 넘겨주기로 하였는데, 이 부분이 백엔드쪽에서 일별 요청에서는 구현하기 쉽지만 월별 요청으로 구현해야될 시 데이터 구조가 꼬여서 바로 넘겨주기가 어려운 부분이 있었다. 그래서 프론트에서 받은 데이터의 임금 부분을 따로 합산하여 나타내도록 하였다. 주휴수당이 있는 경우에는 주휴수당까지 포함하여 그날의 총합 임금을 구하였고, 프론트에서 해당 알고리즘을 구현하면서 약간의 시간이 걸리긴 했지만 무리 없이 구현할 수 있었다.

 

그리고 달력페이지와 메인페이지 모두에서 진행할 수 있는 근무 등록 기능 역시 완료하였다. 이 기능에서 가장 어려웠던 부분은 바로 날짜를 선택할 수 있는 달력 모달창을 구현하는 것이었다. 이미 복잡한 달력 페이지의 달력도 만들어봤던 터라 처음에는 어렵지 않게 만들 수 있을 것이라 생각했는데 생각보다 시간이 걸렸었다. 달력에서 날짜 하나하나를 만드는 부분이 for문으로 이뤄졌고, 이 부분을 일주일 별로 관리하는 배열에 push하는 로직이었다. 이 로직 때문이었는지 모르지만, 각각의 날짜를 만드는 컴포넌트(Cell)에서 useState를 사용하여 유저가 해당 날짜를 선택하면 true / false를 바꿔 해당 Cell의 색상과 선택한 날짜의 배열에 push하도록 로직을 짜고 싶었는데, useState가 도통 제대로 작동하지 않았다. 그래서 Cell 자체를 건드리지 않고 따로 컴포넌트를 만들어 기존의 Cell의 위를 덮는 식으로 진행을 하였고, 기능 자체는 성공적으로 완료하였다.

 

그런데 지금 생각해보니 useState자체의 문제였지 않았을까 싶다. 이번 프로젝트를 진행하면서 알게 된 부분과 도 상통하는 부분인데, 바로 useState가 비동기적으로 처리된다는 것이다. 리액트를 처음 배울 때 이 부분을 간단한 예시로 배운 적이 있었는데, 이 비동기적인 특성 때문에 기능 구현에 문제가 생겨본적이 한번도 없어서 제대로 알지 못했었다. 그런데 이번 프로젝트를 겪으면서 확실히 알게 되었다. 그래서 마이페이지 구현 부분에서도 useState를 사용하니 바로바로 반영되지 않아 useEffect를 사용하여 컴포넌트가 마운트 되거나 해당 변수가 바뀌었을 때, 바로 반영되도록 하였다. 이 뿐 아니라 게시물 좋아요의 경우에도 좋아요 개수를 useState로 관리하니 쿼리를 통해 바로 refetch가 되어도 좋아요 개수가 바로 반영이 안되는 기현상이 발생했었다. 저번주에는 이게 쿼리 때문이라고 생각했었는데, 그냥 useState의 문제였다.... 참 기술이 좋아져도 무조건 좋은 것은 아닌것 같다.... 아무튼 이부분은 현재는 useEffect를 통해 해결해서 하는 중이다. 그치만 최선은 동기적 처리가 되도록 setState안에 인자로 함수를 집어넣는 방식인 것 같은데, 이 부분 역시 무슨 이유인지 작동을 잘 하지 않았다. 좀 더 공부해봐야할 문제 같다.

useState는 동기 비동기? (동기적 처리)

커뮤니티 페이지와 검색 페이지

커뮤니티 페이지의 경우 위와 같이 css를 수정하였다. 기존의 디자인이 시각적으로 예뻐보인 것은 있었으나, 인스타그램 느낌보다는 네이버 카페 같은 형식이 보다 알맞을 것이라는 판단하에 이와 같이 수정하였다. 검색 페이지 역시 검색하는 input 부분을 수정하였고, 검색하면 나오는 게시물 목록 부분은 약간의 수정이 더 필요하다. 한편 같은 팀원이 게시판 무한 스크롤 기능을 맡았고, 현재는 전체 게시판에만 적용된 상태인데, 카테고리 페이지와 검색페이지에도 추가적으로 진행할 예정이다.

마이페이지는 위와 같이 수정되었다. 내활동에서 내가 쓴 게시물을 따로 모아 볼 수 있다. 현재는 내가 쓴 게시물만 볼 수 있지만, 좋아요를 누른 글을 볼 수 있는 탭과 작성한 댓글을 볼 수 있는 탭을 만들어볼 계획이다. 마이페이지 수정의 경우 커뮤니티 프로필을 수정할 수 있는데, 해당 페이지에서 프로필 사진을 클릭하면 원하는 이미지를 선택해 프로필 이미지를 바꿀 수 있고, 닉네임 역시 원하는 닉네임으로 바꿀 수 있다. 이 부분에서 신경 쓴 부분은 유저가 닉네임만 바꾸거나 프로필 이미지만 바꾸는 경우를 고려한 것이었다. 맨 처음에는 무조건 둘 다 바꿔야만 넘어가 수 있도록 하였는데, 백엔드와 상의하면서 둘 중 하나만 바꿀 시 바꾸지 않은 것은 이전의 것을 그대로 유지하도록 기능을 구현하였다.

 

막바지를 향해가면서 점점 피로가 누적되고 무기력함이 생기는 것 같다. 설연휴에 그래도 푹 쉰 만큼 남은 3주도 힘을 내서 달려봐야겠다!!!