묻고 답해요
137만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Next + React Query로 SNS 서비스 만들기
페러렐과 인터셉트 라우팅을 활용한 모달에 대한 질문입니다.
기존의 모달 방식(제 기준) 은 Context나 recoil과 같은 상태관리 모달로 Provider를 만들어서 isOpen setIsOpen과 같이 사용했는데이번에 배운 방식도 좋은 방법인 것 같지만, 폴더 구조가 엉망이 되서 가독성이 떨어지는 것 같다는 생각이 들어서 강사님 생각에는 어떤 방식이 어느 상황에서 더 좋을 것 같은지 궁금해서 질문 드려 봅니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
github에 올라와 있는 파일중에 module.css파일이 있나요?
저는 여기서 파일을 zip으로 다운받아서 복사하려고 했는데https://github.com/ZeroCho/next-app-router-zmodule.css파일을 찾을 수가 없어서 혹시 어디서 찾아야 할까요?
-
미해결Next + React Query로 SNS 서비스 만들기
타입스크립트 질문
useFormState initialState부분 타입스크립트 에러 질문입니다.message에 string이 와야한다고 에러가 뜨는데 이거를 string | null로 해주는 방법을 잘 모르겠습니다!const initialState: { message: string | null; } = { message: null, }; export default function SignupModal() { const [state, formAction] = useFormState(onSubmit, initialState); const { pending } = useFormStatus();일단 이런식으로 빼서 에러 없애긴하였는데 인라인으로는 못하나요?
-
해결됨Next + React Query로 SNS 서비스 만들기
프론트엔드 세션과 백엔드 세션 / queryClient.getQueryCache에 대한 질문이 있습니다!
안녕하세요! 제로초님!항상 강의를 감사히 잘 보고있습니다! 다름이 아니라, 세션에 대한 질문이 있어 글을 올립니다. 첫번째 질문입니다! 현재 클라이언트(브라우저)에서 로그인 요청 시, auth.js를 사용해서 프론트측 세션을 생성하고, 그것을 통해서 클라이언트의 로그인 상태에 대한 분기 기준으로 사용하고 있고, 백엔드에서도 API 허가를 위한 세션을 받아 connect.sid 라는 쿠키를 생성하여 총 2개의 쿠키를 이용하고 있습니다.제가 궁금한 것은 현재 2개로 나누어진 세션을 백엔드에서 주는 세션으로 생성한 쿠키 1개만 사용해도 되지 않을까? 라는 생각이 들었는데, 각각 따로따로 세션을 생성해서 처리하는 이유가 궁금합니다.혹시 프론트엔드 입장에서 next-auth (auth.js)가 제공해주는 기능(CSRF, useSession, signin 등의 메서드... )들이 편리해서, 이것을 사용하신것이고 강의에서 언급하신대로 백엔드 세션과 통합하는 과정이 아직 불완전하여 따로 둔 상태로 둔 것이며, 만약 next-auth가 주는 장점이 굳이 없었다면 처음부터 백엔드 세션 1개를 이용해서 로그인 과정을 구현했을 것 이다. 라고 제가 감히 예상을 해도 될까요.. ? 🤔 두번째 질문입니다.[재게시, 답글기능 zustand로 만들어보기] 강의 17분 40초 부근에서 queryClient.getQueryData 보다 getQueryCache를 사용하는게 더 정확하다라고 말씀하셨는데 그 이유가 궁금합니다!
-
해결됨Next + React Query로 SNS 서비스 만들기
패러랠 라우트 질문(로그인 모달 관련)
로그인모달을 패러랠 라우트 방식으로 구현하는 과정에서default.tsx 강의 타임라인 0:34에서app/(beforeLogin)/@modal 폴더에 있던 page.tsx와 login.module.css파일을 복사해서app/(beforeLogin)/i/flow/login로 디렉터리를 만들어서 거기에다가 page.tsx와 login.module.css파일로 넣으셨는데요.URL이 http://localhost:3000/i/flow/login이면@modal 하위에도 그 url 경로대로 폴더 구조를 맞춰서 넣어줘야 하는 것이죠? 패러랠방식에 대해서 아직 감이 안잡힙니다. (beforeLogin)폴더 자식으로 @modal폴더와 layout.tsx에 가 있고 laytout.tsx에서 modal을 props로 가져옵니다.그럼 그 modal이라고 이름지은 것은 같은 뎁스에 있는 "@자기이름"인 @modal을 탐색해서 가져오는건가요? import { ReactNode } from "react"; import styles from "@/app/page.module.css"; type Props = { children: ReactNode; modal: ReactNode; }; export default async function BeforeLoginLayout({ children, modal }: Props) { return ( <div> <div className={styles.container}> {children} {modal} </div> </div> ); }
-
미해결Next + React Query로 SNS 서비스 만들기
인터셉팅 라우트 버그?..
게시하기 버튼 클릭하면 인터셉팅 라우트가 되지 않네요 ㅜ회원가입, 로그인에서는 인터셉팅 라우트가 잘 됬었는데 왜이러는걸까요?.. 아직 넥스트가 불안정 한건지.. 검색해도 잘 안나오네요..
-
미해결Next + React Query로 SNS 서비스 만들기
google font fetchError 가 나는데요...
섹션1까지 들은 수강생입니다 🙂 프로젝트 실행시 아래와같은 에러가 나오는데요..어떻게 해결해야할지 ㅠㅠFetchError: request to https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2 failed, reason: self-signed certificate in certificate chain at ClientRequest.<anonymous> (C:\simjieun\study\next.js\twitter_clone_nextjs\node_modules\next\dist\compiled\node-fetch\index.js:1:65756) at ClientRequest.emit (node:events:514:28) at TLSSocket.socketErrorListener (node:_http_client:501:9) at TLSSocket.emit (node:events:514:28) at emitErrorNT (node:internal/streams/destroy:151:8) at emitErrorCloseNT (node:internal/streams/destroy:116:3) at process.processTicksAndRejections (node:internal/process/task_queues:82:21) { type: 'system', errno: 'SELF_SIGNED_CERT_IN_CHAIN', code: 'SELF_SIGNED_CERT_IN_CHAIN' } ⨯ Failed to download `Inter` from Google Fonts. Using fallback font instead. Failed to fetch `Inter` from Google Fonts.} FetchError: request to https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2 failed, reason: self-signed certificate in certificate chain at ClientRequest.<anonymous> (C:\simjieun\study\next.js\twitter_clone_nextjs\node_modules\next\dist\compiled\node-fetch\index.js:1:65756) at ClientRequest.emit (node:events:514:28) at TLSSocket.socketErrorListener (node:_http_client:501:9) at TLSSocket.emit (node:events:514:28) at emitErrorNT (node:internal/streams/destroy:151:8) at emitErrorCloseNT (node:internal/streams/destroy:116:3) at process.processTicksAndRejections (node:internal/process/task_queues:82:21) { type: 'system', errno: 'SELF_SIGNED_CERT_IN_CHAIN', code: 'SELF_SIGNED_CERT_IN_CHAIN' } ....
-
해결됨Next + React Query로 SNS 서비스 만들기
nextjs 버전
'Next프로젝트 시작하기' 6:50 초에 현재는 npx create-next-app@latest명령시 14버전이 설치되는데상관이 없는건가요?
-
해결됨Next + React Query로 SNS 서비스 만들기
vanila-extract window 문제
windows 에서 vanila-extract 의 문제점은 구체적으로 어떤 것일까요? https://github.com/vanilla-extract-css/vanilla-extract/issues/1086해당 이슈가 맞는지 궁금합니다!
-
해결됨풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
react-query 에러
3강 학습 중 react-query 버전 문제로 인한 에러가 생겨 질문합니다.최신 버전으로 설치해서 react-query의 가이드 문서대로 코드를 수정했는데도 계속 에러가 나며 data를 가져오지 못 하고 있습니다.어떻게 해결해야 할지 모르겠습니다ㅜ첨부된 사진 외에는 강의대로 코드를 작성했으며 타입스크립트가 아닌 자바스크립트로 진행하고 있습니다.
-
미해결Slack 클론 코딩[실시간 채팅 with React]
infiniteQuery 시 undefined 에러
안녕하세요, 강의는 swr로 보고 저는 제로초님 깃헙에 front-rq 레포 보면서 react-query로 진행 하고 있는데요, 강좌가 swr이라 가능하면 혼자 에러 해결하려 했는데 몇시간째 해결이 안되서 질문 남깁니다ㅜ 부탁드립니다. 에러 원인은 chatData가 undefined 여서 생기는 것 같습니다. pages/Channel/index.tsx에서 useInfiniteQuery 요청이 안가고 chatData가 undefined로 나옵니다. members, channels 정보 요청은 정상적 불러오는데 useInfiniteQuery로 불로온 요청은 응답하지 않는 이유를 모르겠습니다. 강의 보면서 하다가 isLoading, isFetching 도 넣어보고, 순서도 바꿔 보고 했는데 안되서 지금은 제로초님 git hub에 fornt-rq 폴더의 코드를 복붙했는데도 Can't not read properties undifined 에러 뜨네요 ㅠ 전체 코드 https://github.com/HomieKim/sleact/blob/master/pages/Channel/index.tsx
-
해결됨풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
2일차 강의중 에러 문의 QueryClient
1일차까지는 강의를 잘따라가고 있었는데요. 2일차 들어서 에러가 발생합니다. yarn run dev를 실행하면 아래와 같은 메시지가 나옵니다. > Local: http://localhost:3000/ > Network: use `--host` to expose ready in 725ms. X [ERROR] Expected ";" but found "client" src/queryClient.ts:20:15: 20 │ retrun client │ ~~~~~~ ╵ ; Build failed with 1 error: src/queryClient.ts:20:15: ERROR: Expected ";" but found "client" 참고로 아래는 강의 따라가고 있는 깃허브 주소입니다. https://github.com/ucoder-git/vowing-live/blob/main/shopping-mall/src/queryClient.ts import { QueryClient } from 'react-query' type AnyOBJ = { [key: string]: any } export const getClient = (() => { let client: QueryClient | null = null return () => { if (!client) client = new QueryClient({ defaultOptions: { queries: { cacheTime: 1000 * 60 * 60 * 24, staleTime: 1000 * 60, refetchOnMount: false, refetchOnReconnect: false, refetchOnWindowFocus: false, }, }, }) retrun client } })() const BASE_URL = "https://fakestoreapi.com"
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
리엑트 쿼리 버전 질문!
안녕하세요 제로초님 리엑트쿼리 버전을 보면서 궁금한것이 있어 질문드립니다. 1. _app.tsx의 코드에서 const queryClientRef = useRef<QueryClient>(); if (!queryClientRef.current) { queryClientRef.current = new QueryClient(); 리엑트쿼리 공식문서에선 useState를 사용하였고 제로초님 코드에서 Ref를 사용하였던데 ref 사용하신이유가 렌더링관련해서 더나은 이점이 있을거라 추측했는데 어떤건가요!?2. getServerSideProps에서 리엑트쿼리로 비동기 값을 로드하고서 같은 쿼리키로 사용한 데이터를 콘솔로그 찍었을때 맨첨에 undefined로 찍혀서 질문드립니다.제가 생각했을때는 서버에서 데이터를 로드하고서 쿼리키에 저장시키니까 코드를 사용하는 로직에서 같은 쿼리키의 데이터를 콘솔로그 찎으면 값이 채워져 있어야한다고 생각하는데 제가 코드를 잘못짠건지 아니면 이해를 잘못한건지 궁금합니다. 해당 데이터가 서버에서 로드됬는지 확인할수 있는 방법이 있을까요? 3. props: {dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), getServerSideProps의 로직에서 dehydrate(queryClient)를 JSON.parse(JSON.stringify)로 묶으신 이유가 무엇인지 궁금합니다 감사합니다
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
유저 정보 관리 방법
안녕하세요 강의 들으면서 제로초님 github(front-rq폴더) 보고 react-qeury로 진행하고 있는데요 로그인 페이지를 보면 fetcher로 유저정보 요청하고 로그인 mutation 요청 성공시 refetchQueries로 'user'라는 키값의 요청을 다시 보내는 것 같습니다. 이후 다른 컴포넌트나 페이지에서도 그냥 const { data: myData } = useQuery('user', () => fetcher({ queryKey: '/api/users' })); 이런식으로 유저정보를 가지고 오는 것 같은데 궁금한 것은 아직 강의 뒷부분을 다 안들어서 그런지 몰라도 staleTime이나 cacheTime을 설정하는 코드 또는 강의에서 말씀해주신 것 처럼 fetcher를 여러개 둬서 유저정보를 비동기 요청이 아니라 전역 데이터로 관리하는 로직도 없는 것 같습니다. 별도의 설정없이 /api/users 요청을 useQuery로 계속 받아온 다면 react-query 라이브러리를 사용하는 장점이 없는 것 같은데 제가 놓치고 있는 부분이 있는건 아닌지 혹시 react-query 사용했을 때 api/users 같은 유저정보를 받아오는 server state를 관리하는 좋은 방법은 무엇일지 궁금합니다. (cacheTime을 설정하거나 전역 데이터를 저장하는 fetcher를 두거나 아님 localStorage 같은 곳에 저장하거나 등등.. redux 강의 들을땐 그냥 리덕스 스토어에 저장해두고 useSelector로 가져온 거 같은데 react-query 나 SWR은 요부분이 감이 안잡히네요 ㅠ)
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
redux와 react-query 설정
다른 질문 들도 보다가 궁금한 점이 생겨 여쭤봅니다. 프로젝트에서 내에서 상태관리를 redux로 하고 server에서 데이터 패칭하는 부분을 (공부해 보니 server state라고 부르더군요) react-query(또는 swr)로 사용하려는 경우 설정을 어떻게 해야하나 궁금해서 검색해봤는데 마땅한 자료가 없어서 질문드려요 CRA기준으로 index.js에 import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; import reducer from "./reducer"; import { Provider } from "react-redux"; import { configureStore } from "@reduxjs/toolkit"; import { Global } from "@emotion/react"; import { GlobalStyle } from "./index.style"; import { QueryClientProvider, QueryClient } from "react-query"; const store = configureStore({ reducer }); const queryClient = new QueryClient(); ReactDOM.render( <Provider store={store}> <QueryClientProvider client={queryClient}> <App /> <Global styles={GlobalStyle} /> </QueryClientProvider> </Provider>, document.getElementById("root") ); 이런식으로 사용해서 reducer 함수 정의하고 각 컴포넌트에서 queryClient를 import해서 사용하는 건가요? 제로초님 강의 들으면서 react-query를 이제 막 공부하고 있는데 react-query가 내부적으로 contextAPI 사용한다고 알고있는데 redux랑 contextAPI를 같이 쓴다는게 정확히 감이 안잡히네요 제가 잘못알고 있는 부분이나 공부해야할 키워드를 알려주시면 감사하겠습니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
리액트쿼리로 변경 후 질문있습니다.
안녕하세요 매번 제로초님의 강의로 많은 도움과 영감을 얻어 사내에서 사용하는 시스템을 적용중에 있습니다. 감사드립니다. 다름이 아니라 타입스크립트 버전인 리액트쿼리를 깃허브에 올려주셔서 적용해봤는데요 새로고침 시 기존에는 깜박임 없이 바로 로그인 이후 페이지로 연결되었던게 지금은 일시적으로 로그인 페이지에 접근했다가 메인페이지로 가더라구요 그래서 임시로 Loading아이콘을 보여주는 식으로 했는데 제가 잘못사용해서 그런건가요? 소스코드 첨부합니다.ㅜㅜ import React, { useEffect, useState } from 'react'; import { dehydrate, QueryClient, useQuery } from 'react-query'; import User from '../interfaces/user'; import AppLayout from '../components/AppLayout'; import { loadMyInfoAPI } from '../apis/login'; import LoginLayout from '../components/login'; import { GetServerSidePropsContext } from 'next'; import axios, { AxiosError } from 'axios'; import Router from 'next/router'; import { Spin } from 'antd'; const Home = () => { //const [ref, inView] = useInView(); const [loading, setLoading] = useState(true); const { data: me } = useQuery<User>('user', loadMyInfoAPI); useEffect(() => { console.log('1111'); if (me) { setLoading(false); } }, [me]); return ( <div> {loading == true ? ( <div className="loadingBar"> <Spin /> </div> ) : me ? ( <AppLayout /> ) : ( <LoginLayout /> )} </div> ); }; export const getStaticProps = async () => { const queryClient = new QueryClient(); await queryClient.prefetchInfiniteQuery('user', () => loadMyInfoAPI()); return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; };