Branch - 프로젝트 회고록

Moolbum·2021년 12월 11일

WeCode branch 프로젝트

위코드

목록 보기

4/8

Branch 프로젝트 회고록

2주 라는 시간이 정말 빨리 지나갔다. 이번 프로젝트로 나의 미숙했던 점을 바라 보고 성장 할 수 있는 좋은 계기가 될 수 있는 것 같다.

Sprint 일정

1주차에는 필수 구현 페이지를 만들었다.
내가 맡은 로그인과, 회원가입 페이지는 90퍼센트 정도 완료했다.
이메일과 전화번호 중 하나로 로그인을 할 수 있도록 하고 싶었지만
2주차 스프린트 예정을 위해 로그인 ID는 이메일로만 하기로 플래닝미팅에서 이야기했다.

2주차에는 추가구현과 백엔드와 데이터 바인딩이 주를 이루었고
추가구현으로는 마이페이지와 유저페이지를 맡았다!
최종적으로 프론트의 데이터를 전체 취합 후 데이터 바인딩을 확인하는것!

프로젝트

개인전이 아닌 프로젝트!

이번 프로젝트에서 느낀점 중에 큰 것이 프로젝트 라는 팀 과제의 특징이다.
내가 생각한 프로젝트는 각자가 1인분을 맡아 완성하는 것이였다.
6명이라면 6인분의 결과물이 나와야 성공적인 프로젝트라고 생각했지만

나의 생각은 틀렸다.

6명이서 하나의 목표를 가지고 만들어 가는 것이 프로젝트였다.
한 명의 팀원이 어려움을 겪으면 서로 도와 해결하는 것

이슈 발생🚨

팀원 중 한 분의 쉐어하우스에서 코로나 확진자가 나와 부득이하게 검사후 하루정도 자가격리를 하게되었다....
데이터 바인딩이 많은 상세페이지와 리스트를 맡은 혜리님이 가장 속상해하셨다.

백엔드,프론트 모두 오늘 상세페이지 데이터 바인딩을 하는것이 스탠드업 미팅에 나온지라 다들 고민을 한참 하다가
추가구현 사항을 잠시 미루고 데이터 바인딩을 해봐야 되는것이 맞는것 같다고 생각해
혜리님에게 merge 요청을 했고 오늘은 내가 데이터 바인딩을 해보는것으로 하루목표를 수정했다.

다른사람의 코드를 만지고 수정해보는 것은 내 생각보다 어려웠다.

데이터는 정상적으로 연결이 되었지만... 코드오류가 있어 새로고침을 하게되면 데이터가 깨지는 현상이 일어나 결국 나는 끝내지 못했다😢
다음날 혜리님이 정상적으로 위코드에 나오고 나서 멘토님과 같이 오류를 해결했다.
내가 더 코드를 읽을 줄 알았으면 해결을 할 수 있을텐대 아쉬웠다.
팀원과 나를 위해 더 공부를 해야겠다 다짐이 들었다.

나의 작업

로그인 페이지

아이디,비밀번호 state값 저장
유효성 검사 (정규식 이용)
유효성 검사가 맞아야 버튼 활성화
fetch함수로 백엔드에게 데이터 전달
로그인이 된다면 '토큰' 저장
~~이메일, 전화번호 두 가지중 하나만으로도 아이디 대체~~

이메일과 전화번호 두 가지 중 하나로 로그인 기능을 찾기 위해 하루정도 소비를했다... 결국 끝내지 못해 이메일로만 로그인하는 것으로 목표가 수정되어 추가구현 사항인 마이페이지로 진행을 하게되었다.
기간이 정해진 프로젝트라 시간을 너무 지체해서는 안되었다.

회원가입 페이지

데이터 입력값 state값 저장
유효성 검사 (정규식 이용)
필수입력란의 유효성검사가 맞다면 버튼활성화
정상적으로 회원가입이 되면 로그인 페이지로 이동

백엔드와 성공적으로 통신이 되었다. 이제 우리 팀원들의 정보를 입력해 회원가입을 진행했고 방금만들어진 계정으로 로그인도 성공적으로 되었다!

내가 만든 페이지에서 데이터를 주고받아 회원가입에 로그인까지 되는것을 보고
너무 신기하고 기뻤다😄

마이페이지

토큰이 있어야 마이페이지 이동가능
토큰이 없다면 로그인페이지로 이동

주 기능은 2가지 이지만 이 기능을 구현해보기까지 사흘이 걸렸다...
로그인이 성공적으로 이루어 지면 Localstorage에 토큰을 저장하게 설정했다.
하지만 만들어진 토큰을 사용하기 위해선 어떻게 사용하는지 정말 어려웠다.
localStorage.getItem('TOKEN') getItem 이라는 메서드를 찾고
어떻게 활용해야 하는지 이해가 안갔다.

Router.js 에서 삼항조건을 걸어보자

{localStorage.getItem('TOKEN') ? (
  <Route path="/mypage/:name" element={<MyPage />} />
        ) : (
  <Route path="/login" element={<Login />} />
        )}

하지만 토큰이 있으면 어떤사람의 마이페이지든 이동 할 수 있게 되버렸다...
시간을 지체 할 순 없어 멘토님과 상의를 했다.

Router는 이동하는 경로를 입력하는 곳이지 조건을 주면은 안된다고했다
그리고 mypage는 자신만 들어가면 되는것이니 useParams는 사용하지 않아도 될 것 같다 라고 조언을 해주었다.

다시 원점으로 돌아온 Route.js
<Route path="/mypage" element={<MyPage />} />

mypage에서 토큰을 확인하고 싶은것이니 fetch함수로 데이터를 받아올 때 header 사용하면 될 것이라며 조언을 해주어 이것을 바로 검색해보았다.

fetch(`${API.MYPAGE}`, {
      method: 'GET',
      headers: { Authorization: localStorage.getItem('TOKEN') },
    })

HTML header만 알았지... fetch에서도 header가 있었다.
눈에 보이지 않는 정보를 header를 통해 전달하면 된다는 것을 배웠다.
마이페이지 작업을 추가적으로 이어가기에는 시간이 부족했다.
토큰의 여부를 확인하는 것 까지로 마이페이지는 마무리 되었다.

fetch(`${API.MYPAGE}`, {
      method: 'GET',
      headers: { Authorization: localStorage.getItem('TOKEN') },
    })
      .then(res => res.json())
      .then(data => {
        if (data.message === 'SUCCESS') {
          setMyPageData(data.result);
        } else {
          alert('로그인 후 이용 가능합니다.');
          navigate('/login');
        }
      });