first_project DAY+3

KEEP 오늘의 좋았던 경험

• 유저들이 회원가입을 할 수 있도록 SignUp 작업을 완료했고, 회원임을 인증해주는 LogIn 페이지 작업 완료했다.
• git merge하고 pull할때 어떻게 해야 충돌이 안일어나는지 아직 잘 이해가 안된다. 막상 잘 해줬다고 생각했는데도 pull을 받을 때 충돌이 일어났고, 제대로 저장이 안되는일이 발생했다. 여러번 하다보면 어떤 부분에서 충돌이 일어나고 어떻게 해줘야할지가 명확해질 것 같다.

PROBLEM 고쳐나갈 경험

• git pull error

에러 메시지

• pull을 받아오려고 하는데 충돌이 발생해서 생기는 오류였다.

error: Your local changes to the following files would be overwritten by merge:
	client/src/App.js

에러 핸들링 방법

1. 현재 디렉토리의 파일을 임시로 백업하고 깨끗한 상태로 돌린다.

git stash

1. upstream dev에서 pull 받아온다.

git pull upstream dev

1. 변경 사항을 적용하고, 스택에서 제거한다.

git stash pop

에러 핸들링을 위해 참고한 링크

링크

• react-router version error

에러 메시지

• v5에 익숙해있다가 v6에서 기존에 사용하던 방법대로 코드를 작성하니 에러가 났다.

npm start를 해줬을 때 처음 마주한 에러

Attempted import error: 'Redirect' is not exported from 'react-router-dom'.

• Redirect를 없애준 뒤 난 에러. 아래의 에러 메시지를 보면 Routes 안에 Route가 있어야 한다고 한다.

Error:[Main] is not a <Route> component. All component children of <Routes> 
must be a <Route> or <React.Fragment>

• 위에서 Routes라고 하는 것이 Switch를 말하는 것이고 기존에 작성 했던 Switch를 Routes로 바꾸어 주었지만 같은 에러 메시지가 나왔다.

에러 핸들링 방법

• Route컴포넌트 element 속성에 렌더링할 컴포넌트를 넣어주어야 제대로 렌더링이 된다.

//리다이렉트 해주기 위한 함수형 컴포넌트
const Redirect = () => {
    return isLogin ? <MyPage myBooks={myBooks} /> : <Navigate to="/" />;
};
<Routes>
  <Route path="/" element={<Main />} />
  <Route path="/mypage" element={<Redirect />} />
  <Route path="/search" element={<Search />} />
  <Route path="/login" element={<LogIn />} />
  <Route path="/signup" element={<SignUp />} />
  <Route path="/edit-password" element={<EditPassword />} />
</Routes>

• v6이 되면서 exact 옵션이 없어졌다.
• useHistory가 useNavigate로 바뀌었다.

에러 핸들링을 위해 참고한 링크

링크

• 회의시간에는 용건만 간단히 말하기. 이것저것 보이는 것 마다 신경쓰다보니 시간이 길어지는 경향이 있었다. 다같이 해결해 보고 싶은 부분이 생기면 정해진 시간 외에 다같이 해결해보자고 도움 요청하자.

TRY 시도해볼 일

• 로그인 성공 후 선택적으로 페이지 라우팅 해주기. Advanced ex) 보고있던 페이지에서 로그인 페이지로 이동후 로그인에 성공하면 다시 보고있던 페이지로 이동. 만약 회원가입 페이지에서 로그인 페이지로 이동했을 경우에는 그냥 로그인 성공 후 메인페이지로 이동.
• Components-part2 작업.