카카오 로그인을 next-auth로 구현해보고자 강의에서 말씀하신것 처럼 KakaoProvider 추가하고, LoginModal.tsx에서 'credentials' 대신 'kakao'로 바꿔 진행해보았는데 우선 등록하지 않은 Redirect URI를 사용해 인가 코드를 요청했습니다 사용한 Redirect URI: h ttp://localhost:9090/api/auth/callback/kakao. 라는 에러가 발생하였습니다. (참고로 현재 카카오 developers에 저장해둔 Redirect URI는 http://localhost:3001/api/auth/callback/kakao 입니다) 이후 혹시나 해서 Redirect URI의 설정을 9090으로 바꾸고 다시 진행해보았더니 이처럼 진행이 되었고, 계속하기 눌렀더니 Cannot GET /api/auth/callback/kakao 이러한 에러가 발생하였습니다. 어떤부분이 잘못되었는지 잘 모르겠어서 질문글 올립니다ㅠ
안녕하세요 제로초님! AWS에 배포하기 및 카카오톡 공유하기 강의까지 끝마친 수강생 입니다! 저는 윈도우 10, 크롬 브라우저, VSCode, MySQL 8버전을 사용하고 있습니다. 로그인 후 새로 고침을 하면 로그인이 유지되지 않고 풀려 버리는 버그가 발생 하여 질문을 올리게 되었습니다! 이 문제는 쿠키가 있음에도 발생 합니다! 이 버그로 인해 총 2가지 상태에 이릅니다. 1. 완전히 로그인을 한 상태에서 새로 고침을 하면 쿠키는 남아있으나 로그인이 유지되지 않습니다. 2. 완전히 로그인이 된 상태에서 프로필 페이지로 이동하면 로그인이 풀리며 홈페이지로 돌아옵니다. 새로 고침 후 로그인이 풀리는 문제가 발생한 시점에서 다시 로그인을 하려고 하면 로그인 유무 검사(로그인하지 않은 사용자만 접근 가능) 메시지가 뜹니다. 로그인 후 로그아웃을 하면 해당 문제가 발생하지 않습니다. 해당 에러를 임시로 해결하는 방법을 찾았습니다. 프론트 페이지와 백엔드 페이지 애플리케이션 탭에서 쿠키를 지우면 다시 로그인을 진행할 수 있습니다. 하지만 말 그대로 임시로 해결하는 것 뿐이라 로그인 후 새로 고침을 하면 아까와 똑같이 로그인이 풀려버립니다. 문제를 해결하기 위해 페이지에서 콘솔 탭과 네트워크 탭, 애플리케이션 탭의 쿠키 쪽을 확인하였습니다. 프론트 콘솔 탭 확인 해당 에러 주소로 들어가 보았지만 외계어로 적혀있어 다른 곳을 먼저 확인해보기로 했습니다. 프론트 네트워크 탭 확인 401 Unauthorized 에러를 네트워크 탭에서 확인 했습니다. Headers 탭에 적힌 쿠키와 Cookies 탭에 적힌 쿠키는 똑같았습니다! 프론트 쿠키 존재 확인 로그인 후 로그아웃을 진행하면 쿠키가 남아있습니다. 백엔드 쿠키 존재 확인 백엔드 페이지도 프론트 쪽과 똑같이 쿠키가 잘 들어가 있음을 확인하였습니다. 페이지 쪽을 전부 확인한 뒤, 우분투 백엔드 pm2 monit을 확인해보니 사용자 로그인 쪽에서 401 에러가 나고 있었습니다. sudo npx pm2 logs --err --lines 200 명령어로 에러 로그를 확인하였으나 관련 에러는 찾지 못하였습니다. 문제를 해결하기 위해 잘못 적은 코드가 있는지 검사하였습니다. 아래는 가장 의심되는 코드들 입니다! 리듀서, 사가, 라우터, 로그인 검사, 서버사이드 렌더링 순으로 작성하였습니다. front/reducers/user.js 나의 사용자 정보 불러오기 리듀서 const reducer = (state = initialState, action) => { return produce(state, (draft) => { switch (action.type) { /* 나의 사용자 정보 불러오기 요청 리듀서 */ case LOAD_MY_INFO_REQUEST: draft.loadMyInfoLoading = true; draft.loadMyInfoError = null; draft.loadMyInfoDone = false; break; /* 나의 사용자 정보 불러오기 성공 리듀서 */ case LOAD_MY_INFO_SUCCESS: draft.loadMyInfoLoading = false; draft.me = action.data; draft.loadMyInfoDone = true; break; /* 나의 사용자 정보 불러오기 실패 리듀서 */ case LOAD_MY_INFO_FAILURE: draft.loadMyInfoLoading = false; draft.loadMyInfoError = action.error; break; 로그인 리듀서 . . . /* 로그인 요청 리듀서 */ case LOG_IN_REQUEST: draft.logInLoading = true; draft.logInError = null; draft.logInDone = false; break; /* 로그인 성공 리듀서 */ case LOG_IN_SUCCESS: draft.logInLoading = false; draft.me = action.data; // 로그인 성공 시 실제 사용자 데이터 draft.logInDone = true; break; /* 로그인 실패 리듀서 */ case LOG_IN_FAILURE: draft.logInLoading = false; draft.logInError = action.error; break; front/sagas/user.js 나의 사용자 정보 불러오기 사가 // loadMyInfo 실행 시 서버에 loadMyInfoAPI 요청 function loadMyInfoAPI() { return axios.get('/user'); } // LOAD_MY_INFO 액션이 실행되면 loadMyInfo 함수 실행 function* loadMyInfo(action) { /* 요청 성공 시 LOAD_MY_INFO_SUCCESS 액션 디스패치 */ try { const result = yield call(loadMyInfoAPI, action.data); yield put({ type: LOAD_MY_INFO_SUCCESS, data: result.data, }); /* 요청 실패 시 LOAD_MY_INFO_FAILURE 액션 디스패치 */ } catch (err) { console.error(err); yield put({ type: LOAD_MY_INFO_FAILURE, error: err.response.data, // 실패 결과 }); } } 로그인 사가 // logIn 실행 시 서버에 logInAPI 요청 function logInAPI(data) { return axios.post('/user/login', data); } // LOG_IN_REQUEST 액션이 실행되면 logIn 함수 실행 function* logIn(action) { /* 요청 성공 시 LOG_IN_SUCCESS 액션 디스패치 */ try { const result = yield call(logInAPI, action.data); yield put({ type: LOG_IN_SUCCESS, data: result.data, // 성공 결과 : 서버로부터 사용자 정보를 받아옴 }); /* 요청 실패 시 LOG_IN_FAILURE 액션 디스패치 */ } catch (err) { console.error(err); yield put({ type: LOG_IN_FAILURE, error: err.response.data, // 실패 결과 }); } } back/routes/user.js 브라우저 새로 고침 시 나의 사용자 정보를 복구하는 라우터 나의 사용자 정보를 복구하는 라우터는 user 라우터들 중에서 제일 위에 위치합니다! // 브라우저 새로고침 시 나의 사용자 정보를 복구하는 라우터 router.get('/', async (req, res, next) => { // GET /user // req.headers 안에 쿠키가 들어있다. console.log(req.headers, "req.headers 안에는 쿠키가 들어있다."); try { /* (로그인해서) 사용자 정보가 있다면 */ if (req.user) { /* (비밀번호를 제외한) 모든 사용자 정보를 가져오는 함수 */ const fullUserWithoutPassword = await User.findOne({ where: { id: req.user.id }, attributes: { exclude: ['password'] }, // 모델 가져오기 include: [{ /* 나의 게시글 */ model: Post, attributes: ['id'], // id 데이터만 가져오기 }, { /* 나의 팔로잉 */ model: User, as: 'Followings', attributes: ['id'], }, { /* 나의 팔로워 */ model: User, as: 'Followers', attributes: ['id'], }] }); // 200번대 에러 출력 res.status(200).json(fullUserWithoutPassword); /* (로그아웃해서) 사용자 정보가 없다면 */ } else { // 아무것도 보내지 않기 res.status(200).json(null); } /* 에러 캐치 */ } catch (error) { console.error(error); next(error); } }); 로그인 라우터 // 로그인 라우터 : 사용자 로그인 전략 실행 router.post('/login', isNotLoggedIn, (req, res, next) => { /* '로컬', (서버 에러, 성공 객체, 클라이언트 에러)가 전달 */ passport.authenticate('local', (err, user, info) => { // done에서 넣은 값들이 순서대로 전달되는 곳 /* 서버 에러 */ if (err) { console.error(err); // 콘솔 창을 통한 에러 메시지 출력 return next(err); // 에러 처리 미들웨어로 이동 } /* 클라이언트 에러 : 로그인하다 에러가 나면 클라이언트로 응답 보내기 */ if (info) { return res.status(401).send(info.reason); } /* 로그인 성공 객체 */ return req.login(user, async (loginErr) => { // 서비스 로그인이 끝난 후 패스포트 로그인 할 때 에러발생 시 처리 if (loginErr) { console.error(loginErr); return next(loginErr); } /* (비밀번호를 제외한) 모든 사용자 정보를 가져오는 함수 */ const fullUserWithoutPassword = await User.findOne({ where: { id: user.id }, attributes: { exclude: ['password'] }, // 전체 데이터에서 비밀번호만 제외 // 모델 가져오기 include: [{ /* 나의 게시글 */ model: Post, attributes: ['id'], // id 데이터만 가져오기 }, { /* 나의 팔로잉 */ model: User, as: 'Followings', attributes: ['id'], }, { /* 나의 팔로워 */ model: User, as: 'Followers', attributes: ['id'], }] }); /* (비밀번호를 제외한) 모든 사용자 정보를 프론트로 넘기기 */ return res.status(200).json(fullUserWithoutPassword); }); })(req, res, next); // 미들웨어 커스터마이징 }); back/routes/middlewares.js 로그인 검사 // (로그인 안했을 때) 로그인 유무 검사 exports.isNotLoggedIn = (req, res, next) => { if (!req.isAuthenticated()) { next(); } else { res.status(401).send('로그인하지 않은 사용자만 접근 가능합니다.'); } }; 문제 해결을 위해 노드버드 커뮤니티에서 저와 비슷한 에러가 발생한 수강생 분이 계셨습니다! https://www.inflearn.com/questions/368573/%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%A7%88%EB%AC%B8-%EB%A1%9C%EA%B7%B8%EC%9D%B8%ED%95%98%EC%A7%80-%EC%95%8A%EC%9D%80-%EC%82%AC%EC%9A%A9%EC%9E%90%EB%A7%8C-%EC%A0%91%EA%B7%BC%EC%9D%B4-%EA%B0%80%EB%8A%A5%ED%95%A9%EB%8B%88%EB%8B%A4 해당 글에서 제로초님은 쿠키가 있는 걸로 봐서 이미 로그인이 된 상태인데 프론트에서 자신이 로그인 되었다는 것을 인식하지 못하고 있으며, 해당 getServerSideProps 쪽에 문제가 있다고 힌트를 주셨습니다! 제로초님의 노드버드Ch7 user/[id].js https://github.com/ZeroCho/react-nodebird/blob/master/ch7/front/pages/user/[id].js front/pages/user/[id].js 강의를 진행하며 깃허브와 약간은 다른 코드가 있습니다. // 서버사이드 렌더링(SSR) : getServerSideProps 사용 /* 사용자 컴포넌트보다 먼저 실행, 매개변수 context 안에 store가 들어있다. */ export const getServerSideProps = wrapper.getServerSideProps(async (context) => { /* 변수 cookie에 모든 cookie 정보 저장 */ const cookie = context.req ? context.req.headers.cookie : ''; /* 쿠키를 안 써서 요청 보낼 때는 서버에서 공유하고 있는 쿠키를 제거하기 */ axios.defaults.headers.Cookie = ''; /* 서버일 때, 그리고 쿠키가 있을 때만 서버로 쿠키 전달하기 */ if (context.req && cookie) { // 실제로 쿠키를 써서 요청을 보낼 때만 잠깐 쿠키를 넣어 놓는다. axios.defaults.headers.Cookie = cookie; } /* 처음에 화면을 로딩하면 특정 사용자의 게시글 불러오기 요청 액션 객체 디스패치 */ context.store.dispatch({ type: LOAD_USER_POSTS_REQUEST, data: context.params.id, // 또는 context.query.id로 useRouter에 접근 가능 }); /* 처음에 화면을 로딩하면 나의 사용자 정보 불러오기 요청 액션 객체 디스패치 */ context.store.dispatch({ type: LOAD_MY_INFO_REQUEST, }); /* 처음에 화면을 로딩하면 다른 사용자 정보 불러오기 요청 액션 객체 디스패치 */ context.store.dispatch({ type: LOAD_USER_REQUEST, data: context.params.id, // 또는 context.query.id로 useRouter에 접근 가능 }); /* 나의 사용자 정보, 다른 사용자 정보 불러오기, 여러 게시글 불러오기 요청(REQUEST)이 성공(SUCCESS)으로 바뀔 때까지 기다리기 */ context.store.dispatch(END); await context.store.sagaTask.toPromise(); console.log('getState', context.store.getState().post.mainPosts); return { props: {} }; }); 리듀서, 사가, 그리고 해당 서버사이드 렌더링 쪽을 점검해보았으나 잘못된 점을 찾지 못하여 질문 남깁니다.. 어떻게 하면 사용자(나)의 로그인이 유지되게 할 수 있을까요? 혹시 힌트 키워드라도 주실 수 있을까요? 긴 질문 글 읽어주셔서 감사합니다 제로초님 항상 강의 잘 보고 있습니다!
안녕하세요. 디렉토리 구조를 afterlogin과 beforelogin구조로 나누어서 로그인을 분기치고 있고 auth.ts에서 서버로 부터 전달받은 토근값을 넣고 미들웨어에서 세션을 유무를 확인하여 login페이지로 리다이렉트 시키고 있습니다. afterlogin과 beforelogin으로 디렉토리가 어떤방식으로 나뉘는지 로직이 궁금합니다. 관련된 훅이 있는것인지?? 2. 실제 상용화된 서비스라고하면 로그인이 풀리는것을 방지하기 위해 BE로 토근값을 요청할텐데, 관련 로직은 어떤방식으로 구현하는게 좋은방법인지 요청드립니다.
안녕하세요! [Next.js 필수 개발 가이드 3시간 완성!] 강의를 너무 만족하여 수강하였고, 이후 풀스택 강의를 수강하게 된 수강생입니다. 위에 강의에서 커뮤니티에 올려주신 깃허브를 참고하여 오류&막히는 부분은 소스를 확인하여 수강하였습니다. 혹시 노션 풀스택강의에서도 깃허브 소스가 제공될 수 있을까요? 부탁드립니다. 감사합니다 :-D
App router를 사용해서 상용화를.목표로 하는 서비스를 만들기에는 아직 무리일까요? 라이브러리가 호환이 안되는것들이 많다고 들어서 page router를 쓸지 고민이되네요 예전보다는 많이 안정화되었다고 듣기는 했는데 page router에 비해 리스크가 크지않을지 궁금합니다
안녕하세요 제로초님! AWS에 배포하기 및 카카오톡 공유하기 강의까지 끝마친 수강생 입니다! 사전에 back 폴더 이미지 모델에서 이미지 문자열 길이를 수정하였습니다. 백엔드 루트 MySQL에서 react-nodebird DB 삭제 후 react-nodebird DB를 다시 만들어도 table이 재생성 되지 않아 질문 드립니다! DB를 삭제한 이유는 에러 로그 확인 시 아래 문제가 발생했기 때문입니다. 이상하게도 두 에러 메시지 모두 DB와 Table이 존재하는 상태일 때 발생하였습니다. Error: Unknown database 'react-nodebird' DatabaseError [SequelizeDatabaseError]: Table 'react-nodebird.테이블명' 문제를 해결하기 위해 제로초님의 섹션6 프론트 서버 배포하기 강의 14:00 와 똑같은 방법으로 해결하려 하였습니다. 그러나 해결되지 않았습니다. react-nodebird DB를 지우기 전 테이블 상태 DROP DATABASE 후 CREATE DATABASE react-nodebird DB 생성. 백엔드 루트 경로에 npx sequelize db:create 명령어 입력 및 성공 똑같이 테이블이 생성되지 않는 문제가 발생한 다른 수강생 분의 질문 글 https://www.inflearn.com/course/lecture?courseSlug=%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89%B4%EC%96%BC&unitId=49016&category=questionDetail&tab=community&q=685995 문제를 해결하기 위해 다른 방법을 찾던 중 같은 문제가 발생한 분을 찾았습니다! 위 글에서 제로초 님께서는 테이블만 따로 재생성 하라고 하셨습니다. 구글링 해보니 table을 만들기 위해서는 각 컬럼을 정의하는 스키마를 작성하여 table을 만드는 방법이 많았습니다. 강의에서는 나오지 않은 방법이라 함부로 시도하진 않았습니다... 어떻게 하면 다시 table만 따로 생성할 수 있을까요? 질문 글 읽어주셔서 감사합니다!
강의 05 에서 npx prisma format npx migrate 를 하는데, 디비명 에러가나는데요... cmd로 mysql 에서 디비를 생성하려니 하이픈 오류로 나옵니다... .env 설정 DATABASE_URL = "mysql://root:12341234@ @localhost:3306/issue-managemen t" 윈도우 mysql에 디비를 만들지않은 상태에서도 마이그레이션이 되는건가요?
