멍냥생활 프로젝트 : 1주차 회고

 

이번 주  내가 구현한 기능은 ?

이번주에 드디어 프로젝트주차가 시작되었다.

이번주에 해야할 일은 다음과 같다.

• 1주차
  • 환경 세팅 및 와이어 프레임, 유저 플로우 작업
  • 페이지 라우팅 설계
  • 로그인/회원가입/소셜 로그인 기능 구현
  • 컴포넌트 및 라우트의 지연 로딩 

약 2.5일정도간 와이어프레임과 유저플로우를 만들고, github commit, issue, PR 세팅 및 프로젝트 구조와 라우팅을 설계하는데 약 3일정도 걸린것 같다. 4일차부터 firebase를 이용한 이메일 회원가입, 로그인, 구글 로그인을 구현하였다. 일단 멘토님께 질문도 드리기 위해 기능을 먼저 구현하게 되었는데, 아직 익숙치 않기도 하고, firebase를 처음 사용하다보니 문서보면서 테스트해보면서 코드를 짜다보니 api들을 다 컴포넌트 안에서 작성했다가 앗 맞다 하고 다시 또 api들만 분리하고.. 리팩토링하는데 시간이 꽤나걸린것 같지만, 개인적으로 어렵다고 생각하는 auth부분이라 걱정을 했는데, 생각보다 큰 문제없이 구현할 수 있었던 것 같다!

 

 

 

해당 기능을 구현하기 위해, 어떤 기술적 의사결정을 거쳤는지?

이번주에 진행한 회원가입, 로그인을 하면 firebase에서 유저정보를 리턴해주는데, 이를 활용해 로그인 상태를 전역으로 관리해서 로그인상태에 따라 달라지는 작업들을 수행할 수 있다. 보통 이전 프로젝트에서는, 기계적으로 context를 사용해서 구현했었는데, 이번에 제대로 알고 넘어가고 싶어서 둘의 장단점을 비교하고 1:1 멘토링때 의견을 여쭤보았다.

 

context가 불필요한 리렌더링이 발생 할 수있다고 알고는 있지만, 완벽하게 말할수있을정도로 어디경우에 불필요한 렌더링이 일어나는지 일단 잘 숙지하지 못하고 있었다. context가 객체라면, 객체의 일부 프로퍼티만 변경되어도 해당 context를 가져다 사용하는 모든 consumer가 리렌더링이 발생한다는 것.

 

그래서 zustand를 사용하면 될까? 생각하고 있었다.

멘토님께 여쭤보니, zustand도 기본적으로는 똑같이 상태 객체의 일부만 변경되어도 그 상태를 구독하고 있는 모든 컴포넌트가 리렌더링된다는 것. 이를 위해, 대신 선택적구독으로 컴포넌트가 필요한 상태의 부분만 구독하도록 설정하면, 해당 부분이 변경될 때만 리렌더링이 발생하도록 할 수 있지만, 규모가 작아서 딱히 많은 컴포넌트가 리렌더링이 일어나지 않을것 같으니 굳이 그럴필요까지는 없을것 같다는 의견이였다. 그래서 일관성과 선호도를 통해 zustand로 결정하게 되었다.

 

 

이번 주 겪은 트러블 슈팅이 있다면?

로그인 상태를 전역상태로 담고 있는데, 새로고침을 하면 js가 초기화되면서 zustand 스토어가 초기화되면서 새로고침이 발생하는것 아닌가라는 생각에 zustand의 persist 미들웨어를 사용하여 localStorage에 담아 이 로그인 상태(유저 정보 존재 여부)를 새로고침이 발생해도 문제 없이 동작할 수 있도록 해야하나 했지만, firebase 인증 시스템이 사용자의 로그인 상태를 관리하기 위해, 인증 토큰을 사용하고 이 인증토큰의 시간이 약 1시간 정도이기 때문에, 이 토큰이 만료되거나 갱신에 실패하면 로컬스토리지에는 로그인상태이지만, 실질적으로 로그아웃 상태가 될 수 있다고 한다. 또한 기본적으로 firebase에서 자체적으로 인증 상태를 로컬스토리지에 저장한다고 굳이 또 persist를 사용해 로컬스토리지에 넣을 필요가 없고, onAuthStateChanged 메서드를 사용해 인증 상태 변화를 감지해서 로그인상태를 새로고침해도 문제없이 사용이 가능하다.

그런데 이렇게 구현해보니 또 하나의 문제가 있다. protectedRoute를 통해 로그인한 유저가 아니면 서비스 접근을 제한하고 있는데, protectRoute는 현재 스토어에 저장된 user정보를 기반으로 하다보니, 로그인한 유저가 URL로 직접 접근하려고 하면 스토어의 새로고침에 의해 user정보가 초기화 되면서 접근권한이 있지만 접근을 할수 없다.

onAuthStateChanged를 현재는 헤더에서만 사용하고 있었는데. 이를 protectedRoute에서도 해야하나? 생각을 하고있긴한데 아직 다른 작업을 하느라 해결하지 못했다. 

얼른 하나씩 해결해나가자!

 

 

이번 주 진행된 개인 프로젝트에서 얻은 인사이트는?

처음엔 이번주의 지연로딩 같은 추가 구현사항까지 모두 하고 싶은 욕심에 빨리 개발을 시작해야되는것 같은 압박감에 잠도 잘 못자고 머리도 너무 아팠다 😣

예전에 프로젝트 하면서도 느꼈던 점인데 시간에 쫓겨 기능구현에만 급급해서 점점 왜 이렇게 해야하는지 의사결정에 소홀해지고, 그냥 동작하는것에만 너무 신경쓰다보니 딱히 프로젝트에 대해 말할것도 트러블슈팅도 없었던것 같다. 이력서 쓰면서 정말 느꼈다 ....

이번 프로젝트 주차때는 규모가 작더라도 확실히 알고, 왜 이렇게 코드를 짰는지 물어보면 확실하게 대답할 수 있길 바랬고, 기술적 의사결정과 트러블슈팅이라고 할만한 것들을 많이 겪어보고 싶었다. 성능개선도! 

이를 위해선, 예전처럼 마음만 조급해서 그냥 넘어가고, 소홀해지고, 빨리빨리를 외쳐서는 안되겠다고 다짐하며 하루에도 몇번씩 지금 못해도 괜찮다고 된다고 마음다짐을 했더니 계획보다 조금 늦어져도 조급해하지 않고 불안해하지 않는것 같다.

이럴땐 항상 빨리빨리를 외치는 급한 내 성격이 싫기도하다😾

 

똑같은 실수를 반복하지 말고 , 이번 프로젝트를 통해 결과물도 결과물이지만, 마인드셋을 얻어가고 싶다.

잘 할수 있을것이라 믿는다 🍀

 

 

 

 

 

항해 개발자 취업 리부트 코스를 수강하고 작성한 콘텐츠 입니다.

 

https://hanghae99.spartacodingclub.kr/reboot

IT 커리어 성장 코스 항해99, 개발자 취업부터 현직자 코스까지