이상하게도 저번 주 보다 따뜻해진 10월의 넷째 주는 올해 중 제일 바빴던 주 였다.. 처음해보는 백엔드분들과의 협업에 어려움을 겪어서 생각했던것보다 작업은 더뎌지고 잘 진행되지 못했다. 일주일동안 미니 프로젝트를 완성해보는것이 목표였기에 밤잠을 줄여가면서 프로젝트에 임했다. 결과적으로는 목표했던 분량만큼 완성해서 뿌듯했지만, 프로젝트 초반에 계획을 세우며 시간부족과 낮은 중요도로 인해 후순위로 밀려버린 기능들은 대부분은 구현하지 않아서 아쉬움도 많이 남았다.

Trouble Shooting

1. JWT 로그인

이번 프로젝트에서 JWT로그인 방식을 채택했고 로그인 유지 기능을 위해 유효시간이 긴 Refresh 토큰과 유효시간이 짧은 Access 토큰 총 토큰 두개를 다루기로 했다. 프론트엔드에선 유효시간이 긴 Refresh 토큰은 쿠키에 저장을 하지만 Access 토큰은 그 짧은 유효시간과 보안적 중요도 때문에 자바스크립트 변수에 저장하기로했다. 그 후 Refresh 토큰은 아직 유효하지만 Access 토큰이 유효하지 않은경우 다시 토큰을 발급받기 위한 토큰 재발급 기능을 만들고자했다. 재발급을 위한 API 요청을 보냈지만 가끔식 500번대 status code를 돌려받았고 시간을 들여 천천히 Request와 Response를 살펴보니 프론트엔드에서 Redux-persist와 같은 기능을 사용하지 않아 Access 토큰이 null 값이 되는 경우가 있어 parameter로 null이 넘어가서 생기는 문제였다. 해당 문제는 서버에서 받는 Access 토큰이 null값인 경우를 예외처리하여 해결하였다.

2. Input 포커스 잃는 현상

이번 미니 프로젝트를 진행하면서 아마 가장 난감했던 문제였다고 생각한다. 컴포넌트안에 실컷 input form을 완성했더니 input에 한글자를 치는 매순간마다 input에 focus lose 현상이 발생해서 정상적으로 input을 입력해 줄 수가 없었다. React Dev Tool을 활용해서 알아보니 의도하지 않은 쓸데없는 렌더링이 잃어나고 있었고, 원인을 찾아보니 컴포넌트의 렌더링을 야기하는 변경되는 state의 영향범위를 제대로 파악하지 못했었다. 결국 완성했던 컴포넌트를 다시 세분화해서 쪼개는 작업을 했고 해당 작업만 2시간이 넘게 걸렸다.. 흑흑. 배운 점은 항상 컴포넌트 렌더링 되는 조건을 명심하고 있어야하며 컴포넌트는 처음부터 잘 나눠야한다는 것이다.