[👨‍👩‍👧‍👦 팀프로젝트] 2주차 회고

💁🏻‍♀️ 소개

지난 주는 로그인 기능의 백엔드 구현이 완료되어 API를 연동하고 로그인 기능을 완성시켰다.😊
처음에는 백엔드 팀원과의 소통에 대해 걱정이 있었지만, 백엔드 팀원이 프론트엔드 지식이 있어 설명을 잘해주셨다. 👍🏻
그러나 로그인 기능을 구현하는 중에 휴먼 에러가 발생하여 그 해결에 시간이 소요되었다.(자세한 사항은 아래에서.. 🥲)

✅ 2주차 개요

1주차에는 UI 레이아웃을 구성하는데 시간을 많이 쏟았다.💦
피그마로 와이어프레임을 미리 구성해둔 덕분에 이 작업은 순조롭게 진행되었다.
1주차 목표인 로그인 기능 구현을 완료하였고, 리덕스 사용 방법에 대해 공부하여 적용하였다.
UI 제작 과정에서는 와이어 프레임과 조금 다른 디자인이 나오기도 했다.

✅ 성과

API 연동 과정에서 깃허브 레포를 나눠서 테스트를 진행했지만, CORS 에러 등 여러 문제가 발생했다.
서버에서 보내는 데이터와 클라이언트에서 데이터를 파싱하는 과정에서도 문제가 발생하였다.
env를 통해 API를 불러오는 과정에서 API URL이 제대로 불러와지지 않는 문제도 있었다.🥲
이후에는 크롬 쿠키를 삭제하여 토큰을 받아오지 못하는 문제를 해결했고, 로그인 버튼 클릭 후 로그인이 성공적으로 완료되었음에도 메인페이지로 이동하는데 문제가 있어 이를 수정했다.

⛔️ CORS 에러
Reason - 깃헙 레포를 나누어서 연동 테스트할 방법 고민. (백엔드 임시 배포/Ngrok) → 백엔드 임시 배포시 코드가 수정될 때마다 build 해야하는 상황 발생 → Ngrok 사용. 하지만 CORS 에러 발생
✅ 해결
1. 포트 포워딩
2. GET 메서드 사용시 header에 아래 코드 추가

headers: new Headers({
            "ngrok-skip-browser-warning": "69420",
          }),

⛔️ response 에러
response 를 검증하는 과정에서 email 값이 undefined가 출력되었다.
이 부분에서는 서버에서 보내는 데이터 는 email : 값 으로 보내지만 client 부분에서 데이터를 파싱할때 Email 에대한 데이터를 파싱하려니 undefined 에러를 반환했다.
✅ 해결
form ID가 대문자 E로 되어 있어 소문자 e로 수정했다.

⛔️ env 에러
env를 통해 API를 불러오는 과정에서 API URL이 undefined로 불러와졌다.
✅ 해결
env파일의 위치가 올바르지 못해 생긴 이슈였다. env 파일 위치 수정

⛔️ 로그인 에러
나를 제외한 나머지 프론트엔드 분들이 로그인 시 토큰을 받아오지 못하는 문제가 생겼다.
✅ 해결
크롬 쿠키 삭제

⛔️ navigate 작동 에러
로그인 버튼 클릭 후 로그인이 성공적으로 완료 되었다면 navigate가 작동하여 메인페이지로 이동이 바로 되어야하지만, 로그인 상태값이 업데이트 되고 한번 더 눌러야 작동하는 버그를 발견했다.
✅ 해결
await 를 사용하여 로그인 데이터를 불러오는 과정이 완료 된 후, 함수가 실행되도록 수정했다.

📝 2주차에서 배운것

2주차에는 리덕스의 기본적인 기능과 액션, 툴킷 등 사용법을 익혔다.
또한, 페이지가 렌더링 될 때 서버에 너무 많은 요청을 보내면 부담이 된다는 것을 깨달아 렌더링 최적화에 대해 공부하고, 다음 주에 적용할 예정이다.
공통 함수를 따로 분리하여 관리하는 것이 효과적이라는 피드백을 받았고 이를 적용할 예정이다.
그리고 토큰이 만료되면 자동으로 로그인을 연장하는 기능을 추가할 계획이다.

👨‍👩‍👧‍👦 팀워크

2주차에는 백엔드와 프론트엔드의 타협점을 찾는 과정에서 팀 사이가 더 좋아졌다.
우리 팀원들은 문제가 있을 시, 화면 공유를 하여 프론트, 백 상관없이 해결을 돕기 위해 열띤 검색을 하며
해결 방안에 대해 함께 토론하며 해결하고 있다.👍🏻
이를 통해 서로를 이해하고, 타협점을 찾는 과정에서 팀워크가 더욱 돈독해진 것 같다.

📈 반성 및 개인적 성장

백엔드와 API 연동이 처음이라 휴먼 에러를 많이 발생시켰다.
하지만 이런 문제들을 해결하는 과정에서 트러블 슈팅 기록을 바탕으로 실수를 줄일 수 있었다.
앞으로 기술적 부채를 줄이기 위해 더욱 노력해야겠다.

⛳️ 3주차 목표

3주차에는 카카오와 구글 소셜 로그인 연동을 완료하고, 백엔드에서 알림 API 개발이 완료되면 이를 연동하는 것을 목표로 하고 있다.
배포 후 Performance insights로 성능 개선을 할 것이다.
그리고 시간이 난다면 스토리북도 작성할 예정이다.