WIL 10주차 (실전프로젝트 3주차)
📖 WIL 10주차 (실전프로젝트 3주차)
🌞 회고
이번주는 실전프로젝트의 딱 중간이 끝나는 시점으로 중간발표인 mvp 발표가 있었다. 발표는 부리더인 내가 진행하였다. 우리의 mvp는 소셜로그인,체크인체크아웃,캘린더와투두리스트(CRUD),웹소캣을 이용한 채팅 이였다. 다행히 일정에 맞춰 mvp 개발은 맞췄지만 한가지 문제가 있었다. 바로 디자인인데 디자이너가 디자인을 주지 않아 우리는 중간발표때 디자인없이 기능만 넣은채 발표를 했어야 했다. 벌써 3주라는 시간이 흘렀는데 디자이너는 회의할 때마다 계속 할수 있다는 말과 곧 주겠다는 말만 남기며 소통은 잘 이루워지나 결과물을 주지않는 상황이였다. 때문에 우리 프론트엔드팀이 꽤 힘든 상황이였다.
🌞 MVP 개발 중간발표
🌧 1.소셜로그인
구글,네이버,카카오 3사의 소셜로그인을 구현했다. 많은 서비스에서 사용중인 서비스라 자료가 많아 어렵지 않게 구현할 수 있었다. 이과정에서 백엔드와의 소통이 잘되었기 때문에 빠르게 끝낼 수 있었던 것 같다.
🌧 2.체크인 체크아웃
우리 웹의 가장 필수적인 시스템이다. 체크인을 하고 모은 시간을 바탕으로 물고기를 해제하여 모을수 있다. 구현하는데 꽤 오랜 시간이 걸렸는데 여러가지 조건이 있었다. 체크인을 한 상태라면 새로고침 되거나 탭을 닫았다 다시 들어와도 즉 토큰이 있는 상태라면 타이머가 계속 돌아야한다. 이 방법을 구현하기 위해 서버에선 타이머가 계속 도는 상황을 만들고 새로고침 또는 탭이 닫혔어도 다시 들어온다면 서버에서 시간을 받아와 그 시간부터 다시 타이머를 돌린다. 그렇게 유저에겐 타이머가 꺼지지 않은것 처럼 만들었다. 또 체크인체크아웃을 실행하는 버튼의 위치는 타이머가 존재하는 헤더에서 프롭스로 내려줄수 없는 형제컴포넌트 였기 때문에 리덕스를 이용하여 함수를 실행하였다.
🌧 3.캘린더와 투두리스트
캘린더를 눌러 날짜를 선택하고 해당날짜에 카테고리를 만들고 카테고리에 투두리스트를 작성할수있다. 기본적인 CRUD를 전부 구현하였으며 댓글의 대댓글과 같은 기능이다. 또한 투두리스트를 전부 완료한다면 달력에 스티커를 붙힐 수 있다. 캘린더와 투두리스트는 리덕스를 통해 서로의 데이터를 공유한다. 부모 자식으로 만들어 프롭스를 건내줄 수 있지만 홈 화면에 있는 사이드 바에도 캘린더와 투두리스트를 각각 배치해야 했기 때문에 재사용성을 위해 각각의 컴포넌트로 만들고 리덕스를 통해 상태관리를 하였다.
🌧 4.웹소캣
웹소캣은 구현했지만 채팅에 글자마다 혹은 send 등 이벤트가 일어날때마다 소켓이 실행되는 문제가 있다. 추후 개선할 생각이다.
🌧 5.asmr
무료 라이센스의 Audio api 를 이용했다. 하지만 Audio.pause() 가 정상적으로 작동하지 않아 소리들이 겹치고 정지되지 않는 문제가 존재한다. 추후 개선할 생각이다.
🌞 MVP 중간발표 피드백내용과 대답
🌧 Q. privete route 구현한 것이 너무 좋으나 token 체크 하는 방법이 너무 간단하다.
- 라우터
- 프라이빗라우터
A.로그인 과정시 쿠키에 유저데이터를 저장해 토큰외에 조건을 추가해야겠다.
🌧 Q.theme에 fontsize 에 대해서 사용을 안했는데 왜 만들어 놨는지 궁금하다.
A.사용을 하려 했으나 현재 디자인이 나오지 않아 폰트사이즈를 미리 정의하지 못했다. 추후에 디자인이 정해진다면 사용할 예정이다.
🌧 Q.캘린더 를 직접 구현하려고 시도해본 적이 있는가? 캘린더 라이브러리를 사용했을 때 불편한 점이 있는가?
A.마찬가지로 디자인이 존재하지 않아 빠르게 개발할 수 있는 캘린더 라이브러리를 사용했다. 데이터를 이용한 CSS 커스텀에 제한들이 많았다. 불편함을 많이 느꼈고 디자인이 나온다면 달력도 직접 만들 예정이다.
🌧 Q.asmr 기능 팝업을 띄우면 거기서 나오는 소리들이 겹친다.
A.인지하고 있으며 추후에 개선할 생각이다.
🌧 Q.체크인 시스템 어떻게 구현했는데 궁금하다.
A.체크인시 서버에 통신을 보내 타이머가 시작되도록한다. 그에 대한 리스폰 데이터에 타이머의 시간과 함께 불린데이터를 저장하여 체크인시 true, 체크아웃시 false를 리스폰 데이터로 내려준다. 즉 새로고침시 이 데이터를 바탕으로 true라면 함께 받아온 시간데이터에서 다시 타이머가 작동하게 하여 새로고침해도 끊기지 않아보이도록 설계했다.
🌧 Q.아이디어가 너무 좋다.하지만 setInterval 브라우저에서 테스트를 해봐야한다 유저의 환경이나 브라우저 방식때문에 정확히 1초마다 돌지 않기때문에 타이머가 틀어질 것 같다.
A. 맞다 나도 이런 경험을 했다. (문제는 해결하였으며 이것은 아래에 트러블 슈팅으로 기록한다.)
🌧 Q.쿠키 다루는 라이브러리를 별도로 사용하지 않은 이유
A.라이브러리보다 직접 함수를 작성하여 쿠키의 원리를 이해하고 싶었다.
🌧 Q.다른조와 마찬가지로 axios 를 당연하다는 듯이 사용했는데 이유가 있나? axois가 fetch 랑 다른 점은 무엇이있나?
🌧 Q.쿠키에서 토큰을 가져오는데 토큰이 중간에 갱신될 수도 있는데 리덕스에서는 그것을 알지 못한다 중간에 토큰이 갱신되면 어떻게 해야하나? 쿠키를 한 번 가져오고 끝난다 axios를 이용해서 하는 법이 있다.
A. axios에 대해 많은 질문을 받았다. 난 이질문들에 대해 대답을 하지 못했고 좋은 기회가 되었다 생각하여 따로 공부 후 포스팅하였다.
🌞 트러블 슈팅
🌧 체크인 시스템의 첫번째 문제와 해결
타이머는 헤더에 존재하고 타이머 버튼은 형제컴포넌트인 메인페이지에 존재한다. 타이머를 작동시키기 위해 리덕스에 isStudy란 state를 만들고 이 조건을 이용해 타이머를 작동시켰다. 또한 새로고침시에도 체크인 상태라면 서버에서 isStudy :true 값을 받아 타이머가 자동으로 시작해야하는 문제를 해결하였다.
🌧 체크인 시스템의 두번째 문제와 해결
타이머는 setInterval을 사용하였는데 처음엔 서버에서 받아오는 시,분,초를 각각 setInterval을 이용해 시간을 늘렸으나 시간이 흐를수록 각각 오차가 생겨 아예 다른 시간이 되는 문제가 생겼다. setInterval의 오차를 없애기 위해 시,분,초 중에 초만 setInterval을 이용하여 1초에 한번씩 +1 을 해주고 분은 초가 60씩 돌때마다(60의 배수가 될때마다) +1 을 시켜준다. 마찬가지로 시 또한 분이 60씩 돌때마다(60의 배수가 될때마다) +1 을 시켜주었다. 즉 setInterval은 초만 이용하여 오차를 없앨수 있었다.
🌳 이번주 나의 토양 Axios
https://velog.io/@leejpsd/Axios 중간발표 당시 받았던 axios에 대한 질문을 대답하기위해 공부하여 포스팅했다.
🌳 이번주 나의 토양2 setTimeout과setInterval
https://velog.io/@leejpsd/setTimeout과-setInterval setTimeout과 setInterval의 차이와 사용법에 대해 포스팅하였다.