My part in OwlPost

frontEnd

 

1. 로그인 후 가장 처음 보이는 Home 화면 구현. 

 

Home 화면에서는 여러 곳으로 이동이 가능하고 , 그에 따라 기능이 다르게 작동하고 텍스트 등 몇가지 사항이 변경된다.

받은 편지함 , 마이페이지 , 매칭시작  으로 시작하는 이 버튼들이 fetch 로 받아오는 res 에 따라 state 를 변화시켜서 

state 의 상태에 따라 변화하게 만드는 작업이 제일 큰 작업이었다.

 

'매칭시작' 버튼은 한 번 클릭되면 post 요청으로 파트너를 찾는 요청을 반복적으로 보낸다. 그리고 상태는 '매칭 중' 으로 변경된다.

 

그리고 요청에 응답이 되어 파트너가 생긴다면 '편지쓰기' 상태로 변경되고 오늘 편지를 보냈다면 더 이상의 추가전송을 막기 위해

'전송완료' 로 변경된다. 그리고 전송완료 버튼은 다음 날이 지나면 다시 '편지쓰기'로 바뀐다.

 

state 에 상태에 따라서 , 그리고 didmount 외에 navigation 이동을 통해서도 계속 내 상태에 따라 변경해주어야했기 때문에

setInterval 을 사용했다. 위 기능에 대한 로직을 짤 때 실수도 많고 중간중간 디버깅이 많이 필요했다. 

외부 라이브러리 사용

 

2. 타이머 구현

 

상대방이 편지를 전송하면 db 에 원하는 도착시간을 적어놓으면 받는 입장에서 그 시간부터 현재까지 타이머를 띄워준다.

시계나 시간을 정해놓고 작동하는 타이머가 아닌 미래의 시간에서 부터 현재의 시간까지 계산하는 타이머를 생성했다.
이것 또한 state 로 관리하고 setInterval 로 카운팅하는 로직을 짜서 생성했다.

 

3. 받은 편지함

 

fetch 로 받아온 정보들은 조건에 따라 리스트로 뿌려주고 각 리스트를 클릭하면 컴포넌트로 이동해 상세한 내용을 볼 수 있게 구현.

 

4. 편지 보내기 / 전송 확정 (절반)

 

편지를 입력할 텍스트 창에 autofocus , 기본적인 템플릿  , 외부 라이브러리 사용

 

5. 토큰 관리

 

async Storage 를 사용

 

---

 

여러번 중복되는 코드에 대한 극복, 리팩토링할 시간이 너무 부족했다.

 

공유 컴포넌트로 관리할 수 있었던 부분과 컴포넌트 내부에도 겹치는 꽤 있었는데 고려하지 못하고 시작했고

나중에 리팩토링 하자는 맘이 강했던 것 같다. 일단 기능 구현에 최우선적인 목표를 두고 작업을 진행해서 신경이 미흡했던 부분이다.

 

---

 

중복된 코드

 

린트 설정 x  린트를 잘 모르는 나는... 켜져있는 줄 알고 진행했는데 아예 켜져있지 않았다..ㅋㅋ

 

무조건 실시간일 필요는 없다. 실시간처럼 보이게 할 수 있다.