172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
안녕하세요 ! 강의따라서 zustand 라는 상태관리 지금 사용해보고있는데요 강사님은 현업에서 백엔드와 같이 작업하시면서 zustand 사용하고 계시나요 ?? 만약 사용하고 계신다면 제한사항이나 불편한것들이 있었나요 ??
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
예시 코드 따라하는데 재생버튼이 계속 안 나오고 로딩바만 돌아가서 state를 찍어보니까 buffer랑 time 값이 저렇게 빈 값으로 나옵니다. 그런데 isLoading으로 로딩스피너 구현하는 걸 제거하고 바로 play, pause버튼 나오게 하면 노래 자체는 재생이 됩니다만 여전히 buffered와 time 부분 값은 빈 값으로 찍힙니다ㅜㅜ 무엇이 문제일까 모르겠습니다... 코드는 몇번이고 똑같은 걸 검토했는데...
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
현재 18강까지 강의를 들었습니다. 수업 방식이 굉장히 효율적이고 짜임새가 있어 독학하기 굉장히 좋다는 느낌을 많이 받았습니다. 근데 저의 공부 방식이 효율적인지 비효율적인지 이 글을 보고 코드캠프 측의 견해를 알려주시면 좋겠다는 생각을 들어 글을 남겨봅니다. 현재 저의 방식은 이렇습니다. ex) 섹션 17, 18강을 듣는다 -> 개념을 노션에 정리하고 이해한다 -> 퀴즈와 포트폴리오를 될 수 있으면 하루에 한개씩 푼다 -> 다 풀기 전에 다음 섹션의 강의를 듣는다 .입니다. 그런데 한 차례의 섹션을 듣고 퀴즈와 포트폴리오를 모두 클리어하고 다음 강의를 듣는게 맞는지, 아님 저처럼 미리미리 들어놓고 다시 한번 재복습 느낌으로 그날그날 해당 섹션의 퀴즈와 포트폴리오를 풀면서찾아보는게 맞는건지 의문이 들어 글을 남겨봅니다.
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
제목과 같이 componets 들에 Sidebar , Header 등은 tsx 로 하지않고 jsx 로 하신 이유가 있나요 ?? ㅎ
해결됨
Next + React Query로 SNS 서비스 만들기
getFollowingPosts 호출 시 내 게시글들이 불러와집니다. credentials: 'include' 제대로 넣어줬는데 원인을 모르겠습니다. 무한스크롤은 적용했고 팔로잉은 아직 없는 상태입니다. getFollowingPosts type 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' } }
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 선생님 선생님강의 따라서 로그인을 구현했습니다. auth에서 관리해주는 세션으로는 프론트용, 로그인 후 내려주는 connect.id 세션으로는 백엔드용, 으로 사용했습니다. 그런데 궁금한게 로그인을 하고 기간이 지나거나 그런 경우를 대비해서 엑세스토큰, 리프레시 토큰을 많이 사용하는 것을 보았는데 선생님은 넥스트에서 어떤 방식을 사용하시는지, 어떤방식을 추천하시는지 궁금합니다. 검색해보니까 엑세스토큰이 아닌 쿠키세션으로 사용할때에는 일정시간 inter시켜주고 특정시간지나면 쿠키시간을 업데이트해주기도 하더라구요. 선생님 조언이 궁금합니다. 감사합니다.
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
위와 같이 작성하여 요청하였을 때 이러한 에러가 나타납니다 무엇이 문제일까요?
해결됨
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
플러그인이나 단축키가 따로 있는지 기존에 작성하신 코드 복사 붙여넣기인지 궁금합니다.
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요 선생님 강의를 보고 참고해서 채팅 기능을 만들었습니다. 그런데 a,b가 채팅화면에 들어왔을때 소켓 연결이 안되거나, 늦게 되거나 하는 경우가 있어서 제가 로직을 잘못짠건지 어딜 확인해야하는건지 조언을 들을수 있을까해서 문의 남깁니다. 먼저 서버에서 이렇게 socket.io 를 설정해주고 /app.js const app = express(); const httpServer = new createServer(app); const io = new Server(httpServer, { cors: { origin: 'https://zzimzzim.com', credentials: true, }, }); /utils/io.js module.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.tsx import { ReactNode } from 'react'; import SocketProvider from './_component/SocketProvider'; type Props = { children: ReactNode }; export default function Layout({ children }: Props) { return ( <SocketProvider> {children} </SocketProvider> ) } 레이에다가 적용해주었습니다. 이런식으로 해주면 소켓연결을 한번만 하고 원할때 메세지를 주고 받을 수 있을거라고 생각해서 적용한건데 혹시 소켓 연결 관련해서 더 확인해야하거나 수정할 부분이 있을지 궁금합니다. 감사합니다!
해결됨
코딩은 실전이다! - Git알못을 위한 깃린이코스(Git, Github 실습위주)
kwk000530@naver.com 입니다. 강의 잘 듣고 있습니다.
해결됨
모두의 깃 & 깃허브
왜 풀 리퀘스트 일까요...? 원격 저장소에 넣어달라고에 요청하는거니까 푸쉬 리퀘스트가 맞지 않을까요?
미해결
Next + React Query로 SNS 서비스 만들기
Q질문 로그인 버튼 클릭시 주소변경없이 모달창을 보이게 하려면 결국 라우팅만 이용해서는 할 수 없고 , 기존에 리액트에서 사용하던 모달 state를 관리해주는 방식 으로 해야한다. 라고 생각되어집니다. 이 부분에 대해서 강사님의 생각을 여쭤봅니다. 이렇게 생각한 이유는 로그인 버튼 클릭시 주소변경없이 모달창을 띄우려면 우선, 패러렐 라우팅과 인터셉트 라우팅 둘다 사용해야 하며 '/' 주소가 아닌 '/login' 주소로 바뀌어야만 한다. (이때 인터셉트 라우팅을 사용해야 하는 이유는 새로고침이 뒤에있는 모달창을 안보여도, 뒤에있던 화면은 보여야하기 때문이다. ) 주소가 바뀌어야 하는 이유를 설명하자면 패러렐 라우팅을 '/' 주소로 하게 되면 처음 브라우저에 방문하게 되면 모달창이 보이게 되기 때문이다. 그러므로 로그인 버튼 클릭시 '/login' 의 주소에서 홈화면과 모달창이 보이게 해야한다.
해결됨
팀 개발을 위한 Git, GitHub 입문
좋은 강의 감사합니다. 강의 자료 부탁드립니다. jaeyun1114@gmail.com
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
안녕하세요 ㅎㅎ 강의 너무 잘 듣고있습니다. use client 사용하는 이유에 대해서 잘 모르겠어서 질문을 드립니다 .ㅎㅎ 설명을 들었을때 server slide rendering 이지만 server side 기능을 하는것이 아니라 client side 로 넘어온다? 로 이해를 했는데 , 그렇다면 굳이 저 위의 지시어 use client 를 사용해야할때가 있을까 ?? 생각을 했습니다 ㅎㅎ
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
tailwind.config.ts 를 변경하려고 하는데 변경이 되지 않습니다. 다른 파일들도 수정하려고 보니까 수정이 안되네요ㅠㅠㅠ 이렇게해서 생성을 진행했구요. 잘은 모르겠지만 npx create-next-app . 로 설치를 진행했는데 권한 에러가 발생하더라구요 npm error code EACCES 그래서 sudo 를 앞에 붙여서 진행을 했습니다. 혹시 이 문제일까요 ?
해결됨
Next.js 시작하기
const response = await axios.get(`http://localhost:4000/products/${id}`); 로 호출할때 클라이언트에서는 별다른 에러 메시지가 나오지 않으나 npm run dev로 실행한 서버 터미널에서는 GET /products/backendManager.js.map 500 in 9ms ⨯ AxiosError: Request failed with status code 404 GET /products/react_devtools_backend_compact.js.map 500 in 16ms 이라는 에러가 나옵니다. 이 파일들을 호출하는 이유가 무엇인가요..?
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
안녕하세요 . drawer.tsx에 있는 DrawerClose를 사용하면 useState를 통해 상태관리를 안해줘도 되지않나 싶어서 여쭤봅니다. Header쪽에 <DrawerClose> <Logo/> </DrawerClose> 이렇게 감싸주면 drawer가 열렸을때 x버튼을 누르면 똑같이 동작하더라고요. 혹시 useState를 사용하신 이유가 있을까요?
해결됨
Next.js 시작하기
Aborting installation. Unexpected error. Please report it as a bug: Error: EACCES: permission denied, open '/Users/jeonginn/Library/Preferences/create-next-app-nodejs/config.json.tmp-982595282012e022' at openSync (node:fs:581:18) at attempt (/Users/jeonginn/.npm/_npx/efeac22998af9bf2/node_modules/create-next-app/dist/index.js:8:43165) at Object.writeFileSync (/Users/jeonginn/.npm/_npx/efeac22998af9bf2/node_modules/create-next-app/dist/index.js:8:38664) at Conf._write (/Users/jeonginn/.npm/_npx/efeac22998af9bf2/node_modules/create-next-app/dist/index.js:8:74912) at set store [as store] (/Users/jeonginn/.npm/_npx/efeac22998af9bf2/node_modules/create-next-app/dist/index.js:8:73358) at Conf.set (/Users/jeonginn/.npm/_npx/efeac22998af9bf2/node_modules/create-next-app/dist/index.js:8:71962) at run (/Users/jeonginn/.npm/_npx/efeac22998af9bf2/node_modules/create-next-app/dist/index.js:74:51291) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) { errno: -13, code: 'EACCES', syscall: 'open', path: '/Users/jeonginn/Library/Preferences/create-next-app-nodejs/config.json.tmp-982595282012e022' } 설치할 때 터미널에서 이런 메세지가 나오네요 ㅠㅠ 권한 문제인거 같아서 구글링 계속 해보면서 해봤는데 안되서 글 남깁니다 ㅠㅠ
해결됨
Next + React Query로 SNS 서비스 만들기
https://github.com/ZeroCho/next-app-router-z/blob/master/lecture/src/app/(afterLogin)/layout.tsx 제로초님 강의를 다 듣고 코드를 살펴보던 중 의문이 있어 질문 드립니다. 해당 코드를 보면 lecture/src/app/(afterLogin)/layout.tsx 파일에서 거의 최고 부모컴포넌트인 <RQProvider>가 "use client"를 사용하여 클라이언트 컴포넌트가 되는것으로 알고있는데 이렇게 한다면 그 하위 컴포넌트들은 전부 클라이언트 컴포넌트가되는게 아닌가요? 어떻게 서버컴포넌트를 사용할 수 있는건지 궁금합니다.
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 선생님 완강하고 채팅을 구현해보려고 합니다. 그런데 강의와 깃헙을 보면 soket으로 보내는 내용, 쿼리에 데이터 추가하는 내용은 있는데 소켓으로 보낸 내용이 백엔드에 저장되는 부분이 보이질 않더라구요, 클라이언트에서 소켓으로 데이터를 보내면 그걸 받고 백엔드에서 저장해주는 로직이 따로 있는걸까요?
