이제 조금씩 알아가는 과정중에 강의가 딱 끊겨서...저도 배움이 딱 끊기는 기분이 드네요 ㅠㅠ페이지 내 라우터라든가...실전에서 백엔드 api 연결해서 데이터 가져오는 부분이라든가 강의 볼려면 어디로 가서 이후 버전을 배워야 할지 걱정이네요 ㅠㅠ실전 코드들을 보고싶습니다.

안녕하세요 ! 강의를 따라하고있다가문득 생각이 들었는데요.channel / [id] 이렇게 동적 페이지가 나오게 되면 정적 배포를 하게 될땐 어떤 방식으로 하시게 되나요 ?

web api인 IntersectionObserver을 활용한 훅이 있는데요, 훅은 독립적으로 동작되기 때문에 단위 테스트 대상이라고 말씀하셨는데, 궁금한점은 web api를 활용한 훅은 단위테스트 대상일까요?테스트 환경이 다르고 web api는 이미 검증된 api이기 때문에 단위테스트 대상에서 제외 했거든요만약 단위 테스트 대상이라면 web api를 모킹해서 훅을 통해 반환한 값들을 확인 하면될까요?단위테스트 대상이 아니라면 통합테스트에서 해당 훅을 제대로 호출해서 사용하는지만 확인하면 될까요?

이렇게 다 사라졌습니다. 다른 학습 자료들은 잘 보이는데 갑자기 왜 frontend학습 자료만 안보이는 걸까요?

안녕하세요 ! 강의따라서 zustand 라는 상태관리 지금 사용해보고있는데요 강사님은 현업에서 백엔드와 같이 작업하시면서 zustand 사용하고 계시나요 ?? 만약 사용하고 계신다면 제한사항이나 불편한것들이 있었나요 ??

https://github.com/heeyoung123/OneBite안녕하세요 감정일기장 부분에서 문제가 2가지 생겨서 질문 남깁니다. 일기 작성 후 리스트에 렌더링이 되지않습니다.임시일기데이터에서 정렬을 최신순,오래된순을 바꿔도 적용이 안됩니다.무엇이 문제일까요..

예시 코드 따라하는데 재생버튼이 계속 안 나오고 로딩바만 돌아가서 state를 찍어보니까 buffer랑 time 값이 저렇게 빈 값으로 나옵니다. 그런데 isLoading으로 로딩스피너 구현하는 걸 제거하고 바로 play, pause버튼 나오게 하면 노래 자체는 재생이 됩니다만 여전히 buffered와 time 부분 값은 빈 값으로 찍힙니다ㅜㅜ 무엇이 문제일까 모르겠습니다... 코드는 몇번이고 똑같은 걸 검토했는데...

현재 18강까지 강의를 들었습니다. 수업 방식이 굉장히 효율적이고 짜임새가 있어 독학하기 굉장히 좋다는 느낌을 많이 받았습니다. 근데 저의 공부 방식이 효율적인지 비효율적인지 이 글을 보고 코드캠프 측의 견해를 알려주시면 좋겠다는 생각을 들어 글을 남겨봅니다.현재 저의 방식은 이렇습니다. ex) 섹션 17, 18강을 듣는다 -> 개념을 노션에 정리하고 이해한다 -> 퀴즈와 포트폴리오를 될 수 있으면 하루에 한개씩 푼다 -> 다 풀기 전에 다음 섹션의 강의를 듣는다.입니다.그런데 한 차례의 섹션을 듣고 퀴즈와 포트폴리오를 모두 클리어하고 다음 강의를 듣는게 맞는지,아님 저처럼 미리미리 들어놓고 다시 한번 재복습 느낌으로 그날그날 해당 섹션의 퀴즈와 포트폴리오를 풀면서찾아보는게 맞는건지 의문이 들어 글을 남겨봅니다.

제목과 같이 componets 들에 Sidebar , Header 등은 tsx 로 하지않고 jsx 로 하신 이유가 있나요 ?? ㅎ

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시켜주고 특정시간지나면 쿠키시간을 업데이트해주기도 하더라구요.선생님 조언이 궁금합니다.감사합니다.

부트 프로젝트 생성 시에 jdk 버전을 17로 해도 따라서 학습하는데에 지장 없나요??

위와 같이 작성하여 요청하였을 때이러한 에러가 나타납니다무엇이 문제일까요?

플러그인이나 단축키가 따로 있는지 기존에 작성하신 코드 복사 붙여넣기인지 궁금합니다.

안녕하세요 배포를 마쳐서 이런식으로 떠서 Production 링크를 누르면 저는 잘 들어가지는데 이 링크를 공유를 하면 다른사람들은 Vercel에 로그인을 하라는 창이 뜨더라고요,,, 어떤 해결방안이 있을까요,,,

7-37번강의에 관련 커밋으로 아래 처럼되어 있는데 delete 예시 url이 잘못연결되어 있는것같습니다.pre_save 예시 : slugify 자동 호출post_save 예시 : User 생성 시에 Profile 자동 생성post_delete 예시 : Profile 삭제 시에 관련 이미지 파일 자동 삭제django-lifecycle 예시 : blog.Post의 content/status 변경 탐지연결되야할 페이지: https://github.com/pyhub-kr/course-django-complete-guide-v3/commit/563749a5be33f10ec46a166faf29bbaa0e1d7144현재 연결된 페이지: https://github.com/pyhub-kr/course-django-complete-guide-v3/commit/714c274e0d6f26b68aa5bc75a9bf2a78c924633c인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

안녕하세요 선생님강의를 보고 참고해서 채팅 기능을 만들었습니다.그런데 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' 의 주소에서 홈화면과 모달창이 보이게 해야한다.

안녕하세요.vercel를 통한 배포를 위해 설정을 하던 중 In which directory is your code located? ./이 부분에서 엔터를 눌러서 넘어가려 했는데 엔터를 누르자Error: Your Team encountered an unknown problem. Please reach out to our support team for details.이런 에러가 뜨면서 진행이 막히고 있습니다.혹시 해결 방법을 알려 주실 수 있으신가요?