개별적으로 서버를 만들어서 진행중입니다.// 로그인시 서버에서 발급하는 코드 response.cookie('connect.sid', accessToken, { httpOnly: true, sameSite: 'none', secure: false, }); // 프론트에서 아래와 같이 저장 if (res.ok && res.status === 204) { let setCookie = res.headers.get("set-cookie"); if (setCookie) { const parsed = cookie.parse(setCookie); cookies().set("connect.sid", parsed["connect.sid"]); const user = jwtDecode(parsed["connect.sid"]); return { ...user, }; } } // 서버에서 삭제하는 코드 logout(request: any, response: Response) { const { user } = request; response.clearCookie('connect.sid', { httpOnly: true, sameSite: 'none', secure: false, }); ... }로그인 하면 서버에서 쿠키 설정 -> 프론트에서 저장을 진행한 후, 로그아웃시 위 코드처럼 삭제하도록 하고있습니다.강의 하단부에 작성해주신것 처럼 아래와 같이 events부분에 작성하였는데 쿠키 삭제가 되지 않습니다 ㅠㅠ events에 넣지 않고 강의 그대로 했을 때는 s%3..으로 바뀌어서 삭제되지 않습니다. events에 넣었을때는 아예 값도 바뀌지 않고 삭제되지 않습니다. 어떤 작업이 필요할까요 ㅠㅠ //auth.ts events: { signOut: async (data) => { const token = cookies().get("connect.sid"); if (!token) return; const res = await logout(token.value); console.log("signOut"); }, }, // logout fetch export const logout = async (token: string) => { const res = await fetch(`${BASE_URL}/logout`, { method: "POST", headers: { Authorization: `Bearer ${token}`, }, credentials: "include", }); return res; };

맛집 파일 업로드 하려고 하면 unable to import file 이라고 뜨네요.

안녕하세요~직접 만들어보고 비교하려고하는데 의문점이 하나 생겨서요!서버컴포넌트로 Link를 생성하고useSelectedLayoutSegment로 active클래스 처리해주려고 합니다!export default function SideBar() { const links = [ { path: "/home", pathName: "Home" }, { path: "/", pathName: "탐색하기" }, { path: "/", pathName: "쪽지" }, { path: "/", pathName: "프로필" }, ]; return ( <div className={classes.nav}> <div>logo</div> <nav> <ul> {links.map((link, idx) => { return ( <li key={`${link}-${idx}`}> <SideLink href={link.path}>{link.pathName}</SideLink> </li> ); })} </ul> </nav> <button className={classes.btn}>게시하기</button> </div> ); } interface SideLinkProps { children: ReactNode; href: string; } export default function SideLink({ children, href }: SideLinkProps) { const segment = useSelectedLayoutSegment(); const isSegment = href.slice(1); return ( <Link href={href} className={segment === isSegment ? classes.active : undefined} > {children} </Link> ); }근데 랜더링이Sidebar가 서버에서 초기 랜더링 하고client에서 class 반영한다 라고 이해하고 있는데용브라우저에서 "페이지 소스보기"를 했더니이미 class에 active가 반영된 상태로 랜더링 되어있어요캐시도 지우고 빌드해서 npm start 해봐도 "/home" path에서 소스보기 했더니 class가 반영된 상태로 서버에서 랜더링 되어옵니다.hook에 의한 할당될 class는 비워진 상태로 html를 생성하고 이후 client에서 hook을 이용한 클래스 부여가 된다고 알고 있었는데왜 서버에서 세그먼트 훅에 의한 class 처리가 되서 오는건지 궁금합니다!검색해도 명확한 답이 없어서 질문드려요!

양질의 강의 잘 듣고있습니다.queryKey: [queryKeys.POST, queryKeys.GET_POSTS],쿼리키에 다음과 같이 굳이 POST를 넣어주는 이유가 그룹화 하기위함인가요? 나중에 서비스가 커질 경우 어떤 항목의 get_posts인지 구분이 힘들어질수 있어서 그런것인지 궁금합니다.만일 그렇다면 useMutateDeletePost()에서 queryClient.invalidateQueries({queryKey: [queryKeys.POST]});로 처리하면 POST관련 모든 캐시가 지워지는건가요?

안녕하세요. map 에서 marker 가 깜빡거리는 문제가 있어서 질문드립니다. (map home 에서 아무 동작도 하지 않고 있는 상태, marker 가 지속적으로 깜빡거림)동영상을 업로드할 수 없어서 동영상 촬영후 깜빡거리기 전후를 캡쳐했습니다. 안드로이드에서만 발생하고, virtual device 와 실제 기기에서 모두 발생하고 있습니다. 혹시 계속해서 마커를 새로 조회해오거나, 제 실수로 리렌더링이 무한히 되는게 아닌가 싶어서, CustomMarker 컴포넌트랑, marker 조회하는 api 에 로그 추가해봤지만 한번 호출되고 그 후에는 함수가 실행되지 않는것으로 확인했습니다. 추가로 이 문제가 아이폰 simulator 에서는 발생하지 않고 있습니다. 혹시 제가 더 확인해 볼만한 포인트가 있을까요,,,? 같은 문제를 겪으신 분이 혹시 계실까요,,

안녕하세요 로펀입니다.강의를 수강하시면서 공지사항과 질문을 편하게 관리하기 위해 슬랙 채널을 개설했습니다 🙂강의와 관련된 질문이 있으실 경우 슬랙의 #supabase-nextjs-클론-강의 채널에서 질문 부탁드립니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기제 강의를 수강하시는 모든 분들은 슬랙 채널에 들어오실 수 있습니다. 슬랙에 들어오시면 더 빠르게 질문에 답변을 받아보실 수 있어요! 😉

안녕하세요.강의 내용에 대한 질문은 아니고, 코드 스타일에 대한 질문입니다.함수 정의하실 때 어쩔 때는 function 키워드 사용하시고 어쩔때는 arrow function 사용하시는데 특별한 기준이 있으신가요?아니면 그냥 그때그때 생각나는거로 쓰시는건가요?아니면 this scope 고려해서 상황에 따라 선택하시는건가요?특별한 기준이 혹시 있는건지 궁금합니다.

안녕하세요.[5-3] 장소 등록하기(4) - 주소 조회 with Google API 강의에서 질문이 있습니다.useGetAddress() hook 에서 get 요청 API 에 API Key 를 그대로 넣는데, 혹시 API key 가 노출될 위험이 없는 걸까요?보통 웹 환경이었으면 클라이언트가 서버로 LatLng 를 넘겨서 요청하면, 서버에서 API Key 로 address 얻어서 클라이언트 사이드로 넘겨주었을것 같은데, 모바일은 이렇게 프리(?)하게 사용해도 보안상 큰 문제가 없는지 궁금합니다! (특히 Production 환경에 배포하는 코드에서도 문제가 없을지 궁금합니다.)모바일 환경에서의 개발은 이 강의로 처음 하는거라 프로덕션 레벨까지 올렸을 때 어떻게 대응하는지에 대해 궁금한 점이 종종 생기는것같습니다.

model 폴더에서 PostImage는 interface를 사용하시고 Post컴포넌트에서는 type을 사용하셨는데 두 개를 다르게 사용하는 강사님만의 기준이 있나요 ? 제가 공부한 바로는 간단한 객체 타입일 경우 둘다 사용해도 상관없다. type은 복잡한 유니언 타입을 지정할때 사용한다 interface는 확장이 필요할 경우 사용한다고

❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요!안녕하세요 강사님!현재 15분 38초를 진행하고 있는데 카카오를 로그인하면 무한로딩되면서 홈화면에는 안넘어가고 있습니다. 일단 access_token은 잘넘어오는데 백엔드에서 [Nest] 77076 - 2024. 07. 09. 오후 2:32:09 ERROR [ExceptionsHandler] ENOENT: no such file or directory, stat '/uploads/index.html'Error: ENOENT: no such file or directory, stat '/uploads/index.html' 라고 오류가 나옵니다. kakakoLoginMuattion부분 코드는 깃헙보면서 오타는 없는지 확인했습니다

안녕하세요, 강사님, 개발 하는 도중에, test2계정으로 -> test1계정에 메시지를 걸 떄 원래는 test1계정이 나와야하는데, 현재 로그인한 유저의 정보를 불러오는 상황이 생겼습니다.이유가 무엇인지 궁금합니다!!import { HydrationBoundary, QueryClient, dehydrate, } from '@tanstack/react-query'; import style from './profile.module.css'; import UserPosts from './_component/UserPosts'; import { getUserPosts } from './_lib/getUserPosts'; import UserInfo from './_component/UserInfo'; import { auth } from '@/auth'; import { getUserServer } from './_lib/getUserServer'; import { User } from '@/model/User'; export async function generateMetadata({ params }: Props) { const user: User = await getUserServer({ queryKey: ['users', params.username], }); return { title: `${user.nickname} (${user.id})`, description: `${user.nickname} (${user.id})`, openGraph: { title: `${user.nickname} (${user.id}) / Z`, description: `${user.nickname} (${user.id})`, // 프로필 images: [ { url: `https://z.nodebirde.com${user.image}`, // upload width: 800, height: 600, }, ], }, }; } type Props = { params: { username: string }; }; export default async function Profile({ params }: Props) { const { username } = params; const queryClient = new QueryClient(); const session = await auth(); // 사용자 정보 쿼리로 가져옴 await queryClient.prefetchQuery({ queryKey: ['users', username], queryFn: getUserServer, }); // 해당 유저의 게시글 await queryClient.prefetchQuery({ queryKey: ['posts', 'users', username], queryFn: getUserPosts, }); const dehydratedState = dehydrate(queryClient); // 서버쪽에서 쿼리를 해온 것을 나중에 dehydratedState로 받으면 됨. // const user = { // id: 'zerohch0', // nickname: '제로초', // image: '/5Udwvqim.jpg', // }; return ( <main className={style.main}> <HydrationBoundary state={dehydratedState}> <UserInfo username={username} session={session} /> <div> <UserPosts username={username} /> </div> </HydrationBoundary> </main> ); }

안녕하세요! 강의 잘듣고있습니다.login 폴더가 불필요한 루트 인 것 같아서 바로 인터셉터 라우터를 이용해 @modal로 연결했습니다.<Link href="/i/flow/login" className={styles.login}>로그인</Link>또 추가로 새로고침 해도 Modal을 유지하고 싶어서i/flow/login폴더에서 아래와 같이 마운트시에 인터셉터 하도록 유도하였습니다."use client"; import { useRouter } from "next/navigation"; import { useEffect } from "react"; export default function Login() { const router = useRouter(); useEffect(() => { router.replace("/i/flow/login"); }, [router]); return null; } 기존 유입방식으로 SSR Page에서 i/flow/login으로 이동 시, 인터셉터 라우팅하여 병렬 라우팅 하던것과 달리,바로유입 -> i/flow/login -> (replace) -> (.)i/flow/login/page.tsx 순으로 @modal이 출력될줄 알았는데모달이 출력되질 않네요..이유가 i/flow/login으로 바로 접속했기에 상위 폴더 영역에서 {modal}을 선언한 layout을 찾지 못하기 때문에 아무것도 뜨지 않는건가요?제가 이해한 것이 맞을지 검색해도 잘 안나와서 질문드립니다!

강사님 좋은 강의 잘 듣고 있습니다!포스트맨으로 요청을 보내도 정상적으로 응답이오고, psql로 연결이 되었다고 나오고 테이블도 조회가 되는데 pm2 log를 보면 Unable to connect to the database. 라고 에러 메시지가 나옵니다.열심히 해결해보려고 했는데 이유를 모르겠어서 질문합니다..

getFollowingPosts 호출 시 내 게시글들이 불러와집니다.credentials: 'include' 제대로 넣어줬는데 원인을 모르겠습니다.무한스크롤은 적용했고 팔로잉은 아직 없는 상태입니다.getFollowingPoststype Props = { pageParam?: number; }; export async function getFollowingPosts({ pageParam }: Props) { const response = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/posts/followings?cursor=${pageParam}`, { next: { tags: ['posts', 'followings'], }, credentials: 'include', cache: 'no-store', }, ); if (!response.ok) { throw new Error('Failed to fetch data'); } return response.json(); } FollowingPosts'use client'; import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query'; import { getFollowingPosts } from '../_lib/getFollowingPosts'; import Post from '../../_components/post'; import type { Post as IPost } from '@/model/post'; import { useInView } from 'react-intersection-observer'; import { Fragment, useEffect } from 'react'; export default function FollowingPosts() { const { data, fetchNextPage, hasNextPage, isFetching } = useInfiniteQuery< IPost[], Object, InfiniteData<IPost[]>, [_1: string, _2: string], number >({ queryKey: ['posts', 'followings'], queryFn: getFollowingPosts, initialPageParam: 0, // required getNextPageParam: (lastPage) => lastPage.at(-1)?.postId, // required staleTime: 60 * 1000, gcTime: 300 * 1000, }); const { ref, inView } = useInView({ threshold: 0, delay: 0, }); useEffect(() => { //. inView: ref가 화면에 보일 때 //. !isFetching: 패칭상태 아닐때 (중복 패칭 방지) //. hasNextPage: 다음 페이지가 있을 때 console.log('useEffect', { inView, isFetching, hasNextPage }); if (inView && !isFetching && hasNextPage) { fetchNextPage(); } }, [inView, isFetching, hasNextPage, fetchNextPage]); return data?.pages.map((page, index) => ( <Fragment key={`posts-followings-page-${index}`}> {page.map((post) => ( <Post key={post.postId} post={post} /> ))} {!isFetching && <div ref={ref} style={{ height: 50 }}></div>} {isFetching && <div style={{ height: 50 }}></div>} </Fragment> )); } response에는 내 게시글들이 담겨옵니다서버쪽 PostsService findAll 콘솔 찍어보면 유저정보 제대로 받아옵니다{ cursor: 0, type: 'followings', user: { id: 'asdf', nickname: '슈퍼맨', image: '/upload/dummy1719568724038.png' } }

안녕하세요 선생님선생님강의 따라서 로그인을 구현했습니다.auth에서 관리해주는 세션으로는 프론트용,로그인 후 내려주는 connect.id 세션으로는 백엔드용,으로 사용했습니다.그런데 궁금한게로그인을 하고 기간이 지나거나 그런 경우를 대비해서엑세스토큰, 리프레시 토큰을 많이 사용하는 것을 보았는데선생님은 넥스트에서 어떤 방식을 사용하시는지,어떤방식을 추천하시는지 궁금합니다.검색해보니까 엑세스토큰이 아닌 쿠키세션으로 사용할때에는 일정시간 inter시켜주고 특정시간지나면 쿠키시간을 업데이트해주기도 하더라구요.선생님 조언이 궁금합니다.감사합니다.

안녕하세요 선생님강의를 보고 참고해서 채팅 기능을 만들었습니다.그런데 a,b가 채팅화면에 들어왔을때 소켓 연결이 안되거나, 늦게 되거나 하는 경우가 있어서 제가 로직을 잘못짠건지 어딜 확인해야하는건지 조언을 들을수 있을까해서 문의 남깁니다.먼저 서버에서 이렇게 socket.io를 설정해주고/app.jsconst app = express(); const httpServer = new createServer(app); const io = new Server(httpServer, { cors: { origin: 'https://zzimzzim.com', credentials: true, }, });/utils/io.jsmodule.exports = function (io, db) { const userSockets = {}; const nsp = io.of('/messages'); nsp.on('connection', (socket) => { console.log('soket connected'); socket.on('disconnect', () => { console.log('-----------------user disconnected'); }); socket.on('login', (user) => { userSockets[user.id] = socket.id; console.log(userSockets, '-------------------------------userSockets'); console.log(`User ${user.id} connected with socket id ${socket.id} --------- 유저입장`); }) socket.on('sendMessage', async (data) => { try { const roomId = data.room.split('-').sort().join('-'); console.log(roomId, '---------------------------------roomId'); console.log(data, '---------------------------------data'); console.log(userSockets, '---------------------------------userSockets'); let room = await db.Room.findOne({ where: { room: roomId }, include: [ { model: db.User, as: 'RoomSender', attributes: ['id', 'email', 'gender', 'mbti'], include: [{model: db.Image}], }, { model: db.User, as: 'RoomReceiver', attributes: ['id', 'email', 'gender', 'mbti'], include: [{model: db.Image}] }, ] }); if (room) { room = await room.update({ content: data.content }); } else { const roomCreated = await db.Room.create({ SenderId: data.senderId, ReceiverId: data.receiverId, content: data.content, room: roomId, }) console.log(roomCreated, '------------------------------roomCreated') room = await db.Room.findOne({ where: { room: roomId }, include: [ { model: db.User, as: 'RoomSender', attributes: ['id', 'email', 'gender', 'mbti'], include: [{model: db.Image}], }, { model: db.User, as: 'RoomReceiver', attributes: ['id', 'email', 'gender', 'mbti'], include: [{model: db.Image}] }, ] }) } const savedMessage = await db.Message.create({ SenderId: data.senderId, ReceiverId: data.receiverId, content: data.content, room: roomId, }); // console.log(savedMessage, '------------------------Message saved'); console.log(room, '------------------------room saved'); const receiverSocketId = userSockets[data.receiverId]; if (receiverSocketId) { socket.to(receiverSocketId).emit('receiveMessage', savedMessage); socket.to(receiverSocketId).emit('receiveRoom', room); } else { console.log(`User ${data.receiverId} is not connected`); } } catch (error) { console.error('Error saving message:', error); } }); }) }클라이언트에서는선생님이 useSocket만든것과는 다르게useContext를 이용해서/src/app/(afterLogin)/messages/_component/SocketProvider.tsx'use client'; import { useSession } from 'next-auth/react'; import { ReactNode, createContext, useCallback, useEffect, useMemo, useState } from 'react'; import { io, Socket } from 'socket.io-client'; type Props = { children: ReactNode }; type SocketContextType = { socket: Socket | null; isConnected: boolean; disconnect: Function; goDown: boolean; setGoDown: Function; } export const SocketContext = createContext<SocketContextType>({ socket: null, isConnected: false, disconnect: () => { }, goDown: false, setGoDown: () => {}, }) export default function SocketProvider({ children }: Props) { const { data: session } = useSession(); const [socket, setSocket] = useState<any | null>(null); const [isConnected, setIsConnected] = useState(false); const [goDown, setGoDown] = useState(false); const disconnect = useCallback(() => { socket?.disconnect(); setSocket(null); }, [socket]); const value = useMemo(() => { return { socket, isConnected, disconnect, goDown, setGoDown } }, [socket, isConnected, disconnect, goDown]); useEffect(() => { console.log(socket, '-----------------------------------------socket???'); if (!socket) { const socketInstance = io(`${process.env.NEXT_PUBLIC_BASE_URL}/messages`, { withCredentials: true, }); socketInstance.on('connect', async () => { setIsConnected(true); console.log("소켓연결 성공!!!", socketInstance.id); // console.log(socketInstance, '--------------------socketInstance'); }) setSocket(socketInstance); } }, [socket]); useEffect(() => { if (socket?.connected && session?.user?.id) { console.log('--------------------------------------------socket emit login') socket?.emit('login', { id: session?.user?.id }); } }, [session, socket]); return ( <SocketContext.Provider value={value}> {children} </SocketContext.Provider> ) }이런식으로 만들고/src/app/(afterLogin)/messages/layout.tsximport { ReactNode } from 'react'; import SocketProvider from './_component/SocketProvider'; type Props = { children: ReactNode }; export default function Layout({ children }: Props) { return ( <SocketProvider> {children} </SocketProvider> ) }레이에다가 적용해주었습니다.이런식으로 해주면 소켓연결을 한번만 하고 원할때 메세지를 주고 받을 수 있을거라고 생각해서 적용한건데혹시 소켓 연결 관련해서 더 확인해야하거나 수정할 부분이 있을지 궁금합니다.감사합니다!

Q질문 로그인 버튼 클릭시 주소변경없이 모달창을 보이게 하려면 결국 라우팅만 이용해서는 할 수 없고, 기존에 리액트에서 사용하던 모달 state를 관리해주는 방식으로 해야한다. 라고 생각되어집니다. 이 부분에 대해서 강사님의 생각을 여쭤봅니다. 이렇게 생각한 이유는 로그인 버튼 클릭시 주소변경없이 모달창을 띄우려면 우선, 패러렐 라우팅과 인터셉트 라우팅 둘다 사용해야 하며 '/' 주소가 아닌 '/login' 주소로 바뀌어야만 한다. (이때 인터셉트 라우팅을 사용해야 하는 이유는 새로고침이 뒤에있는 모달창을 안보여도, 뒤에있던 화면은 보여야하기 때문이다. )주소가 바뀌어야 하는 이유를 설명하자면 패러렐 라우팅을 '/' 주소로 하게 되면 처음 브라우저에 방문하게 되면 모달창이 보이게 되기 때문이다. 그러므로 로그인 버튼 클릭시 '/login' 의 주소에서 홈화면과 모달창이 보이게 해야한다.

❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요!안녕하세요 npx react-native doctor을 했을 때 이런 에러가 뜨는데 어떻게 해결할 수 있을까요?ㅠTypeError: Cannot read properties of undefined (reading 'X_OK') at Object.getDiagnostics (/Users/name/Desktop/Test/TestProject/node_modules/@react-native-community/cli-doctor/build/tools/healthchecks/gradle.js:42:57) at /Users/name/Desktop/Test/TestProject/node_modules/@react-native-community/cli-doctor/build/commands/doctor.js:116:29 at Array.map (<anonymous>) at iterateOverHealthChecks (/Users/name/Desktop/Test/TestProject/node_modules/@react-native-community/cli-doctor/build/commands/doctor.js:106:51) at Array.map (<anonymous>) at iterateOverCategories (/Users/name/Desktop/Test/TestProject/node_modules/@react-native-community/cli-doctor/build/commands/doctor.js:139:70) at Object.doctorCommand [as func] (/Users/name/Desktop/Test/TestProject/node_modules/@react-native-community/cli-doctor/build/commands/doctor.js:140:41) at async Command.handleAction (/Users/name/Desktop/Test/TestProject/node_modules/@react-native-community/cli/build/index.js:116:9)

❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요!안녕하세요 강사님!! 강의에서 type을 정의할 때 type과 interface 키워드 모드 사용하는걸 볼 수 있는데,어떨때 type을 사용하고 interface를 사용하는지 알 수 있을까요?느낌상 확장성(extends), 재사용성(제네릭) 등 타입이 확정적이지 않은곳에서 interface를 사용하고 그 이외에는 type을 사용하는것같은데 맞을까요?

안녕하세요. 강의 진행 중 애플 로그인 구현하기 까지 진행하고 있습니다.강의에서는 별다른 설명 없이 등록이 진행 되는걸로 보여지는데저는 멤버십을 구매하라고 나오네요..제가 혹시 가입 중 뭔가 잘못 한건가요? 아니면 원래 애플 개발자에 등록을 하려면 개인도 13만원 가량 하는 금액을 지불해야 하는건가요?제가 혹시 잘못 가입 한거라면 비용을 지불하지 않고 개발자를 등록하는 방법을 한번만 자세히 알려주시면 감사드리겠습니다!