저번에 적은 에러 때문에 정말 포기하고 싶었다.
나랑 같은 오류가 뜨는 사람들이 있으면 모를까 왜 그런 질문은 하나도 없는건지..
하지만 다 해놓고 포기할 순 없었다.
역시나 그 문제는 useNavigate때문이었다. 주석처리 해도 오류가 떴던 이유는 모르겠음..
해결하기 위해서 Auth 컴포넌트가 BrowserRouter 컴포넌트 내부에 있게 해야 했음.
이를 위해서 App컴포넌트 내부에 Auth컴포넌트를 위치시켰음.
function App() {
return (
<BrowserRouter>
<div>
<Routes>
<Route path="/" element={<Auth><LandingPage /></Auth>} />
<Route path="/login" element={<Auth option={false}><LoginPage /></Auth>} />
<Route path="/register" element={<Auth option={false}><RegisterPage /></Auth>} />
</Routes>
</div>
</BrowserRouter>
);
}이렇게요...
Auth 컴포넌트 내부에 옵션들이 좀 있어서 그게 문제라고 생각했는데 이렇게 props로 보내준 다음..
Auth.js(HOC)에서 익명함수로 적혀 있던 부분에 Auth라는 이름을 붙여주고 SpecificComponent라고 이름붙여준 부분은 그냥 간단하게 children이라고 해 줌. 기존에는 auth함수에 각 component들을 인자로 보내주는 느낌이었다면 지금은 component들이 children이 된 것임! 위에서 보내준 option도 확실히 받아야 하기 때문에 결국은 이런 모양이 된다:
그리고 내보내는 부분은 return <>{children}</>이렇게 바꿔주고 각 컴포넌트들 export하는 부분에서 Auth뺐다. 그냥 export default LoginPage 이런 식으로. 왜냐하면 이제 컴포넌트들이 auth함수에 넘겨지는 게 아니니까!
그렇게 해서 수정된 코드를 보면
auth.js
적혀있듯이 response.payload.isAuth가 true가 아닌데(인증이 안 돼 있고) option이 true인 페이지(로그인을 해야만 출입가능)에 들어가려고 하면 로그인을 하라고 뜨고, 로그인을 했지만 admin이 아닌데 admin만 접속 가능한 페이지에 들어가려고 하면 메인 페이지로 보내버리고, 로그인한 사람은 들어갈 필요가 없는 페이지로 들어가려고 해도 메인 페이지로 보내버리는 것이다.
App.js
이렇게 해서 문제는 해결😭해결 못했음 정말 어쩔뻔..
그래서 저 위의 코드 결과로 뭐가 나오냐.
로그인을 한 상태에서 /login으로 들어가려고 하면 그냥 냅다 메인페이지로 보내버린다. register페이지로 들어가려고 해도 마찬가지.
이렇게 해서 basic은 끝이 났다.
감개무량.. 반복과 복습만이 살길
+schema.method와 schema.statics의 차이점이 궁금했는데 정리한 글이 있어서 인용
메소드는 객체의 인스턴스를 만들어야만 사용이 가능하지만
스태틱은 객체의 인스턴스를 만들지 않아도 사용이 가능합니다.
코드를 보시면
const temp = new User() 이런식으로 선언하고난 뒤
temp.(메소드) 이런식으로 호출해야만 쓸 수 있는 것이 메소드고요.
User.(스태틱) 이런식으로 호출할 수 있는 것이 스태틱입니다. 스태틱은 temp.(스태틱)을 형태로도 호출이 가능합니다.
그러면 무조건 스태틱으로 선언해야 하는 것 아니냐는 질문을 할 수 있겠는데,
제가 생각하기에는 그건 아니구 둘을 구분짓는 건 오용을 막기위함이 아닐까 싶네요
인스턴스가 존재해야만 기능이 원할하게 지원되는 함수인데 스태틱으로 만들어서 프로그래머의 실수로 호출을 해서 발생되는
에러를 미연에 방지하는 것이죠.
스태틱은 인스턴스와 무관하게 공용적으로 자주 쓰이는 함수가 필요할 때 쓰이는 것 같습니다.
이제 운동하러 갈거임..
