안녕하세요! 개인 프로젝트에서 백엔드 먼저 개발 후 프론트를 Next로 개발하면서 강의를 통해 next-auth를 접했는데요. 저는프론트에서 로그인을 하면 해당 로그인 request가 서버로 전달되고, 서버에서 jwt access, refresh token을 발급해프론트에 전달하고 저장하는 기존의 서버 로그인 방식으로 설계를 하였습니다. 또한 서버의 protected request에 대해 위에서 발급한 access token을 활용하여 유효한지 검증 후 진행하도록 하고자 하는데요. next-auth부분을 보며 현재의 공식 문서와도 조금 다르고 제가 원하는 방식과 통합하여 구현이 가능한지 잘 이해가 안가더라구요ㅠ 혹시 이러한 방식으로도 서버에서 얻은 jwt토큰을 next-auth에 삽입이 가능할까요? 대략적인 흐름은 어떻게 진행될까요?
이제 promise.all을 사용해서 이미지 미리보기는 가짜 URL로 보여주고 게시글 등록 mutation을 날릴때 이미지 upload 요청을 보내고 응답받은 url을 mutation을 날리고 있는데 수정하기할때도 uploadImage을 하기 위해서 코드의 양이 길어지는데 코드는 길더라도 이게 더 효율적인 방식인건가요?? 그리고 이렇게하면 fetchBoards의 결과로 받아온 결과는 string 타입이고 uploadImage에 사용하는 이미지는 FIle 타입이라서 creacteBoard처럼 각각 다른 배열에 담아서 보내기는 어렵고 만약 upload하고 응답받은 url이면 skip하고 File타입의 데이터라면 imageUpload를 실행시켜 url을 받아오와 배열에 추가해서 updateBoardInput 객체에 추가해서 mutation 보내려고 하는데 이런식으로 접근하는게 맞는지 궁금합니다
안녕하세요. 실무에서 인터셉팅 라우팅 활용 빈도가 잦을까요? 클론코딩이라 x.com 에서 사용한 방식 그대로 만들기 위한 학습인지 아니면 실무에서도 사용빈도가 높은지 궁금합니다 강의는 들어서 인터셉팅 라우팅을 이해하긴 했지만 실무에서는 로그인, 회원가입 팝업 띄울때 인터셉팅 라우팅을 사용하지 않을것같은 생각이 들어서 질문드립니당 감사합니다
안녕하세요! Link 컴포넌트의 prefetching 기능에 대해 궁금한 점이 있어 질문 남깁니다. 뷰포트에 들어오는 Link 영역에 대해 미리 데이터를 끌어온다고 하셨는데, 어느 정도 범위까지 데이터를 끌어오는걸까요? 만약 그 링크로 연결된 페이지가 서버 사이드 렌더링을 이용하는 페이지라면 페이지를 미리 그려서 HTML 파일을 완성하는 수준까지 prefetching을 하는 걸까요?
안녕하세요. 강사님 😎 유저 프로필 페이지의 팔로우 버튼을 구현 중에 있었습니다. 예제를 따라하던 중 아래 캡처 이미지와 같이 API /api/users/{id} 의 응답 데이터에 Followers 객체가 없는걸 확인했습니다.. Followers 정보가 없어 세션과 비교하여 팔로잉 여부를 체크할 수가 없네요. 제가 API나 코드를 잘 못 구현하고 있는걸까요?ㅠㅠ (스웨거 및 query-devtool) 강의 영상에는 존재하고요. 추가질문 공부를 집에서는 데스크탑, 카페에서 노트북으로 하다보니 서버를 각각 피씨에 띄우는게 번거로워 하나의 서버를 바라보게 하려고 했습니다. 그래서 개인 서버에 docker형태로 BE서버를 동작시켜 사용하려고 했습니다. 서버는 정상적으로 구동했으나 API 중 인증(로그인)이 필요한 API는 모두 403으로 응답이 오네요ㅠㅠ 방식. 로컬next( localhost:3000 ) -> 외부.BE 서버(be-server:9090) 호출 nest를 알지 못해 깊게 분석은 못해봤고 소스의 logged-in-guard.ts 에 request를 로그로 찍으니 cookie부분이 가 비어 있습니다. import { CanActivate, ExecutionContext, Injectable } from '@nestjs/common'; import { Observable } from 'rxjs'; @Injectable() export class LoggedInGuard implements CanActivate { canActivate( context: ExecutionContext, ): boolean | Promise<boolean> | Observable<boolean> { const request = context.switchToHttp().getRequest(); console.log(request) return request.user?.id && request.isAuthenticated(); } } 간단하게 해결이 가능하면 조언부탁드리며 아니면 무시해주셔도 됩니다. 🙏
안녕하세요 제로초님! 강의 잘 듣고 있습니다. 화면이 mount 되었을 때는 최상단에 존재하는 page.tsx에 의해 localhost:3000 URL가 나오고 있는 상황입니다. 그런데 처음 mount 되었을 때 localhost:3000/login 형태의 URL을 가지려고 한다면 어떤 방법으로 해야할지 궁금합니다! 제가 생각한 방법은 아래와 같은데 좀 더 좋은 방법이 있을까요? 1. 최상단에 존재하는 page.tsx에서 useEffect 내부에 router.push('/login') 을 한다. next 에서 제공하는 redirect 기능을 사용한다.
onChangeContents 함수 부분에 넣었을때 처음엔 버튼이 노란색으로 변했습니다만 이후 onChangeWriter 와 onChangeTItle 부분까지 넣은 후 버튼의 색이 변하지 않습니다. if문을 다 지우고 setIsActive(true)만 넣었을때는 작동이 됩니다..
안녕하세요 우선 강의 열심히 잘 보고 있습니다. 다른게 아니라 리액트와 next.js 수업이 조금 헷갈리는데 섹션5부분만 리액트이고 그 뒤에는 next.js라고 보면 되나요? 강의를 보다가 어느순간 제가 알고있는 리액트의 폴더구조들이 조금 다르더라구요. 리액트에서는 폴더중에 App.js인데 _app.js 이런식으로 되어있고 또 마지막 포트폴리오 리뷰에서는 화면에 리액트 로고부분도 나와있어서 어디서부터 어디까지가 리액트이고 next.js 강의인지 알려주시면 너무 감사드리겠습니다 ^^ 마지막으로 포트폴리오 리뷰는 제가 어떠한걸 보고 만든 후 보는 영상인지 아니면 그냥 영상을 보고 같이 하는건지도 알고싶습니다.
포트폴리오를 만드는중에 refreshToken을 이용해서 로그인 데이터를 저장한 후에 생긴 문제입니다. 게시글 조회 페이지에서 새로고침을 하면 fetchBoards와 fetchBoardCount 요청이 2번씩 나가고 뒤에오는 요청은 canceled 되는데 이런 경우는 어떤거 때문에 생기는건지 궁금합니다. localStorage로 되돌리면 다시 오류없이 잘 동작합니다 refreshToken을 사용하고 저 오류가 생기면 게시글 등록후에 간헐적으로 새로고침을 해야 refetch되는거 같습니다.
지금 제로초님은 벡엔드와 프론트서버를 구분해두셨고 백엔드서버는 ec2에 올리지않아서 백엔드와 관련된 것들은 작동하지 않는 상태인데, 만약에 fetch할때 백엔드서버주소가 아닌 프론트쪽 경로로 해서 하면 본 강좌에서 한것과 같이 ec2로 배포를 해도 작동을 할까요? 아니면 이경우 배포방법이 달라지나요?
안녕하세요! 강의와 직접적으로 관련된 질문은 아니지만 도저히 해결책을 도저히 찾기가 어려워서 질문 글 올립니다.. 하나의 Next.js 프로젝트에서 백엔드 api를 구성할 때, node.js와 파이썬 서버리스 함수를 함께 사용할 수 있나요? 백엔드로 파이썬 서버리스 함수를 단독으로 사용하는 것은 가능한 것 같은데, 동일한 프로젝트에서 node.js 서버리스 함수와 함께 사용할 수 있는지가 궁금합니다..
안녕하세요! 강의와 직접적으로 관련된 질문은 아니지만 도저히 해결책을 도저히 찾기가 어려워서 질문 글 올립니다.. 하나의 Next.js 프로젝트에서 백엔드 api를 구성할 때, node.js와 파이썬 서버리스 함수를 함께 사용할 수 있나요? 백엔드로 파이썬 서버리스 함수를 단독으로 사용하는 것은 가능한 것 같은데, 동일한 프로젝트에서 node.js 서버리스 함수와 함께 사용할 수 있는지가 궁금합니다..
안녕하세요 강사님. 우선 강의 잘 듣고 있습니다! 강의 듣다보니 궁금한 점이 있는데 message를 post하는 경우나 reply를 post 하는 경우에,postData에 들어가는 uid를 userInfo에 있는 정보를 사용하시던데이 정보는 로그인한 유저(authUser)의 uid를 사용하는 것이 아니라 해당 홈페이지(e.g. https://blahx2.totu.dev/totuworld ) (totuwolrd의 uid)정보를 사용하는 것이 맞나요?댓글 등록시에도 마찬가지로 userInfo.uid를 uid로 사용하시더라고요.이렇게 되면 글,댓글 등록시 데이터베이스의 uid에는 로그인한 사용자의 uid가 아닌 사용자 홈페이지의 uid가 들어갈텐데 이게 맞는건지 궁금해서 여쭤봅니다! 혹시 이렇게 uid를 설정하신 이유가 로그인하지 않은 유저를 위한 것인가요?반대로 로그인을 한 유저만 익명 또는 실명으로 댓글을 남길 수 있도록 하려면 uid를 로그인한 유저의 uid로 설정해도 될까요? 아래는 강사님이 데이터를 post 하는 경우의 코드입니다.! <Button disabled={message.length === 0} //입력값이 없으면 비활성화 bgColor="#FFB86C" color="white" colorScheme="yellow" variant="solid" size="sm" onClick={async () => { const postData: { uid: string; message: string; author?: { displayName: string; photoURL?: string; }; } = { uid: userInfo.uid, message }; if (isAnonymous === false) { postData.author = { displayName: authUser?.displayName ?? 'anonymous', photoURL: authUser?.photoURL ?? '/user.png', }; } const messageResp = await postMessage(postData); if (messageResp.result === false) { toast({ title: messageResp.message, position: 'top-right' }); } setMessage(''); // 리프레쉬 글 작성하면 page를 1로 돌려 messageList를 다시 받아온다. setPage(1); setTimeout(() => { setMessageListFetchTrigger((prev) => !prev); }); }} >등록</Button>
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
5장까지 너무나도 좋은 강의 감사하며 잘듣고 있습니다. 질문이 있는데요 왜 useTodoController를 TodoList 컴포넌트에서 가져와서 직접쓰지 않고 TodoContainer에서 불러와서 props로 주는건가요?? TodoList로 바로 받으면 TodoContainer도 만들 필요 없지 않나요??
1번 질문 next9 버전을 다운받아서 실행 했더니 오류가 나서 찾아봤는데 node버전이 높아서 호환 관련 문제로 실행이 안되는 오류가 있었습니다. next14 버전으로 진행했는데 앞으로도 괜찮나요? 2번 질문 pages 폴더안에 index.js파일은 /이고 그 외에 이름은 /profile, /signup 구조인것 같은데 어떤 경우에 폴더구조를 사용하고 어떤 경우에 js파일의 이름을 변경해서 사용해야 하는지 궁금합니다.
