troubleshooting
Error 1
저번에 메인페이지에서 아무것도 안 뜬다고 했는데, auth.js에서 console에 response를 띄우기로 요청을 보냈기에 어떻게 뜨는지 궁금해서 console을 열었더니 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it. 오류가 나타나고 있었다.
그래서 auth.js파일을 좀 손봤다.
props를 넘겨주는 부분도 의구심이 들었기 때문에 그 부분을 없애고, AuthenticationCheck함수가 component를 반환하도록 하고, 이걸 마지막줄에서 호출하도록 만들었다.
그래서 결과는
export default function (SpecificComponent, option, adminRoute = null) {
const dispatch = useDispatch();
function AuthenticationCheck() {
React.useEffect(() => {
dispatch(auth()).then((response) => {
console.log(response);
});
//Axios.get("/api/users/auth");
}, []);
return <SpecificComponent />;
}
return AuthenticationCheck();
}이러함
이 전에는
export default function (SpecificComponent, option, adminRoute = null) {
const dispatch = useDispatch();
function AuthenticationCheck(props) {
React.useEffect(() => {
dispatch(auth()).then((response) => {
console.log(response);
});
//Axios.get("/api/users/auth");
}, []);
}
return AuthenticationCheck;
}이랬다.
이게 맞는진 모르겠지만 어쨌든 페이지랑 console창은 잘 뜬다.
그러고 나서 강의를 보기 시작했는데.
Error 2
강의에서도 똑같은 오류가 떴고(ㅋㅋ) 를 리턴해줌
로그인 페이지로 와서 콘솔창을 보면
이러하다. 당연함. 인증이 안된 사용자임.
로그인을 하면 ? 로그인이 됐다
그런데 강의에서는 로그인에 오류가 발생해서 LoginPage랑 RegisterPage, LandingPage에 withRouter를 쓰시던데 나는 일단 되니까 안 썼다. 아마 강의에서는 useNavigate를 쓰는게 아니라 history.push를 쓰고 있어서 차이가 발생하는 듯. history는 react-router-dom을 통해 사용하는 거라고 한다.
다만..
1. 강의에서는 로그인과 로그아웃을 반복할 때마다 console창에 userData가 뜨는데 나는 안 뜬다. 왜지? App.js에서 Auth를 import중이고 모든 페이지를 Auth랑 연결시켰는데 왜 Auth에서 찍어주고 있는 console이 수시로 뜨지 않는건지 정말 모르겠다🤔
2. 그리고 전부터 있었던 문젠데 직접 주소창에 쳐서 들어가거나 새로고침하면 괜찮은데 서버를 켜거나 해서 페이지가 알아서 구동될 때 504에러가 뜬다.
첫번째 에러를 해결하려고 하다 보니 chatGPT는 HOC파일을 이렇게 고치라고 했다:
export default function Auth(SpecificComponent, option, adminRoute = null) {
const dispatch = useDispatch();
function AuthenticationCheck(props) {
React.useEffect(() => {
dispatch(auth()).then((response) => {
console.log(response);
});
//Axios.get("/api/users/auth");
}, []);
return <SpecificComponent {...props} />;
}
return <AuthenticationCheck />;
}난 여기서 내가 지운 props를 다시 써줘야 하는 이유와 AuthenticationCheck를 컴포넌트 형태로 반환해야하는 이유가 잘 이해가 가지 않았음.
먼저 props를 써주는 이유는 HOC이 라우트 컴포넌트와 함께 사용될 때 해당 라우트 컴포넌트에 전달된 속성을 유지하기 위해서라고 한다. 현재 Auth를 랜딩페이지, 로그인페이지, 등록페이지랑 같이 쓰고 있으니 그 페이지들의 속성을 말하는 거겠지?
HOC은 기존 컴포넌트를 감싸는 역할을 하므로 HOC을 사용하여 렌더링하는 컴포넌트는 원래의 속성을 전달받아 사용해야 한다.
지금 페이지에서 props를 사용하고 있지는 않지만 혹시 나중에 추가하고 싶을 수도 있으니까 그냥 써주기로 했다.
그리고 컴포넌트로 반환해야 하는 이유는, 해당 함수를 컴포넌트로 취급함으로써 useEffect나 다른 이점을 이용하기 위해서라고..
강의 댓글에 보면 return AuthenticationCheck로 쓴 사람들도 있는데 난 그렇게 하면 작동이 안 된다. 흠..
HOC작성시 기명 함수로 적어야 한다고 하는 사람도 있었는데 나는 현재 익명함수인데도 어쨌든 작동함.
504에러는 서버 응답이 지연되었을 때 발생한다고 하고, 클라이언트와 서버 사이에 네트워크 프록시가 있는 경우에도 발생 가능하다고 하는데 .. 모르겠음..
Authentification
Auth에서 애초에 의도했던 인증상태에 따라 페이지 접근을 막고 허용하는 기능을 구현해보도록 하자.
근데 이 이후부터가 헬이었다..
로그인을 하지 않은 경우, 로그인을 한 경우, 로그인을 했지만 어드민계정이 아닌데 어드민페이지에 접근하려고 하는 경우 이 세가지로 나눠서 조건 만족이 안되면 navigate로 다른 페이지로 보내버릴 건데 여기서 오류가 발생하는 것이다. 별짓을 다 하다가 ctrl+z신공으로 다시 돌아옴.
App.js의 Route부분, 각 컴포넌트에서 export하는 부분, auth에서 useNavigate사용하는 부분이 에러의 관건인 것 같아서 일단 그 부분들 되돌린 다음 commit해둠.
auth에서 useNavigate import하고 let navigate하면: useNavigate() may be used only in the context of a <Router> component. 오류 발생. 이 오류는 전에도 봤던 오류이지만 해결하기 녹록치 않음.
react-router-dom v6에서는 route의 element안에 오로지 컴포넌트만 넣을 수 있다고 해서 element에 컴포넌트를 넣어준 다음 각 컴포넌트의 export부분에 Auth(Landingpage, null)이런 식으로 해줬더니 이젠 Cannot read properties of null (reading 'useContext') 에러가 뜬다. HOC에서 useNavigate 주석처리해도 똑같음..
진 짜 돌 아 버 릴 것 같 다
