173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
Next + React Query로 SNS 서비스 만들기
loginForm 컴포넌트에서 로그인시 '/' path로 보내려고 하는데 위와같은 오류가 뜨면서 진행대지 않습니다. baseUrl 찾아보니 default 값이 localhost:3000 으로 설정된걸 확인했습니다. 진짜 이리저리 찾아봤는데도 해결방법을 찾아볼수없어서 문의드립니다. 구글링한 방법중에 await 말고 then catch로 하면 댄다는글도 봐서 해봤는데도 오류가 그대로 나왔습니다. 서버랑 문제없이 잘됩니다.
미해결
Next + React Query로 SNS 서비스 만들기
page.module.css 가 깃허브에 없어요 제가 설치한 page.module.css와 다소 달라서 복붙할려고 했떠니 제로초님 깃허브에는 layout.module.css 가 있네요 일단 css적용이 안되지만 진행해보겠습니다!
미해결
Next + React Query로 SNS 서비스 만들기
zLogo 가 변수 명으로 보이는데 변수 링크 없이 어떻게 단독 사용한건가요? <Image src={zLogo} > 이부분이 잘 이해가 안가는데 const zLogo = 'path/zLogo.png' 이런식으로 변수명도 없이 어떻게 저렇게 쓰인건지 찾아봐도 특별히 확인이 안되는데 궁금합니다! zLogo / 이것이 public 폴더 안에 있는 zLogo.png 파일 맞을까요?
해결됨
Next + React Query로 SNS 서비스 만들기
기존에는 UseQueries 를 이런식으로 사용하였는데, const results = useQueries({ queries: [ { queryKey: ['users', id], queryFn: fetchUsers }, { queryKey: ['teams', id], queryFn: fetchTeams }, { queryKey: ['projects', id], queryFn: fetchProjects }, ], }); 현재 공식문서 v5에서는 이런식으로 사용하는걸 봤는데 이러면 queryKey 값이 ['post', id], 로 고정되는거같은데 Key값을 다 다르게 넣을수가 있는건가요? 그리고 보면 하나의 fetchPost 함수로 요청이 들어가는데 api를 병렬요청으로 3개를 가져와야하는데 저런식으로 맵으로 돌아가면 어떻게 각각의 key값을 설정하고 쿼리요청 함수 fetchUsers,fetchTeams,fetchProjects 를 모두 전달할수있는지 이해가 안가서 질문드립니다. const ids = [1,2,3] const results = useQueries({ queries: ids.map(id => ( { queryKey: ['post', id], queryFn: () => fetchPost(id), staleTime: Infinity }, )), }) 현재도 아래 방식으로 사용 가능하다면 useQueries의 타입들은 제네릭으로 설정되는걸까요? 키의 개수가 서로다르다면 또 [_1: string] 이런부분이 달라질텐데 기준을 어떻게 잡고 가야하는지 아직 이해를 못한것같습니다. const results = useQueries({ queries: [ { queryKey: ['users', id], queryFn: fetchUsers }, { queryKey: ['teams', id], queryFn: fetchTeams }, { queryKey: ['projects', id], queryFn: fetchProjects }, ], }); const { data, error } = useQuery<IPost[], Object,IPost[], [_1: string, 2: string, 3: string] > const results = useQueries<T[], Object, T[],[?] ({ queries: [ { queryKey: ['users', id], queryFn: fetchUsers }, { queryKey: ['teams', id], queryFn: fetchTeams }, { queryKey: ['projects', id, searchParams], queryFn: fetchProjects }, ], });
미해결
Next + React Query로 SNS 서비스 만들기
SignupModal 작성 부분인데요, submit 코드 내에 if (!formData.get('name')) { return { message: 'no_name' } } 과 같이 폼데이터에 대한 유효성 검증을 해주라고 하셨는데, 이미 input내에 required를 선언해주었으니 따로 처리할 필요가 없는게 아닌가요?
해결됨
Next + React Query로 SNS 서비스 만들기
영상 제목 : SSR 적용 여부 판단 기준 해당 영상에서 각 페이지마다 새로고침해서 SSR적용 여부를 확인하는 방법을 알려주셨습니다. 페이지 이동이 아닌 새로고침을 해야하는 이유가 어떤 원리 때문인지 궁금합니다 😊
미해결
Next + React Query로 SNS 서비스 만들기
NextJS의 공식 문서에 따라 styled-components를 설치하고 적용하는거에는 성공했습니다. 다만 styled-components를 사용하기 위해서는 page.tsx에서도 "use client"로 사용해야지만 오류가 나지 않았는데요! 스타일링을 위해서 page를 client로 고정해야만 하는거면 서버사이드의 장점이 없어지다보니 고민이 됩니다. nextJS 14와 styled-components를 같이 사용할 때 이러한 고민을 어떻게 해결하면 좋을까요?
해결됨
Next + React Query로 SNS 서비스 만들기
현재 java 로 서버 만들어둔게 있어서 next14 연습할 겸 백엔드는 기존 서버 유지한 상태에서 next project 진행중입니다. 문제사항은 제목과 같습니다 1. server action 로그인 후 쿠키 세팅 없음 2. 로그인 후 '/' 경로에서 어떠한 action 3. 세팅된 middleware 로 인해 '/login'으로 라우팅 처리 프론트 코드 server: LoginForm.ts - LoginForm 컴포넌트는 서버 컴포넌트인 '/login' 페이지에서 렌더링 됩니다. - 당연히 signIn 함수는 '@/auth' 에서 가지고 왔습니다 import { signIn } from '@/auth'; auth.ts - response는 임의로 설정할 수 없어, 토큰을 email과 image 에 넣어보았습니다 '/' server: page.tsx server 콘솔에는 session 출력 되고 있는데, if 문 만나면 바로 redirect 됩니다. 의심스러운 부분 첫 로그인페이지 렌더링 할 때 호출되는 network 탭입니다 session을 호출하는 곳은 middleware, dashboard (위 페이지) 딱 2곳입니다 그런데 session 호출이 많기도 하고 전부 응답이 null 입니다 middleware 에서도 session 출력 잘 되구요.. 애플리케이션 -> 쿠키 이것 저것 시도해 보다가, 오늘 하루가 다가서 이렇게 질문 드립니다 환경 package.json 하드웨어: 모델명: MacBook Pro 모델 식별자: Mac14,9 모델 번호: Z17G0005KKH/A 칩: Apple M2 Pro 총 코어 개수: 10(6 성능 및 4 효율) 메모리: 32 GB 시스템 펌웨어 버전: 10151.61.4 OS 로더 버전: 10151.61.4
미해결
Next + React Query로 SNS 서비스 만들기
인터셉팅 라우트 시 app/(beforeLogin)/i 이 폴더 부분을 app/(beforeLogin)/@modal/(.)i 얘가 대체하는 것까진 알겠는데 그거랑 그때 app/layout.tsx에서 children이 기존의 app/(beforeLogin)/page.tsx 로 유지되는 것과 뭔 상관인지 모르겠습니다. 그냥 @modal쪽은 modal로 들어가기 때문에 새로 넣을 children이 없어 기존의 children 데이터를 유지하기 때문인가요? 로그인 창을 띄우고 새로고침 하면 i/flow/login/page.tsx가 실행되잖아요. 이때 i/flow/login/page.tsx는 레이아웃에서 { modal }이 아닌 { chlidren }으로 들어가는 것이 맞나요?
미해결
Next + React Query로 SNS 서비스 만들기
app-index.js:32 ClientFetchError: Unexpected token '<', "<!doctype "... is not valid JSON .Read more at https://errors.authjs.dev#autherror at fetchData (client.js:39:1) at async getSession (react.js:87:1) at async __NEXTAUTH._getSession (react.js:245:1) 이런 에러가 뜨고 있습니다... 이전까지는 잘 동작했는데, 어느순간부터 이런 에러가 발생합니다. Next-Auth 라이브러리 문제인 것 같아서 Github Issues까지 확인해서 적용해봤는데 에러가 해결되지 않는 것 같습니다... auth.ts , middleware.ts , app/api/auth/[...nextauth]/route.ts 혹시나해서 모두 선생님 코드 복사, 붙여넣기 했고, 로그인 관련 코드도 모두 복사 붙여넣기 했는데 에러가 발생하는 것 같습니다. 로그인 시 로그인 session이 cookie에 담기긴 하나, 이것을 useSession()을 통해 값을 불러오진 못하고 있고, auth.ts에서 로그인할 때 console.log한 경우에 user 값이 제대로 찍히는 것 까진 확인했습니다.
미해결
Next + React Query로 SNS 서비스 만들기
서버 컴포넌트 강의의 경우, Home 페이지 컴포넌트에서의 prefetchQuery를 통해서 pre-rendering할 데이터를 미리 가져와서 JS-disabled되었을 때에도 사용자에게 보여줄 페이지를 만들고, PostRecommends의 useQuery를 통해서 실제 서버에서 데이터를 가져오는 것이 맞는 건가요?? 그게 아니라면 강의 마지막에 선생님께서 보여주신 pre-rendering 페이지에서 텍스트는 잘 받아오는데 이미지가 나오지 않는 이유가 궁금합니다!
미해결
Next + React Query로 SNS 서비스 만들기
모달창을 띄울 때 배경이 회색빛으로 바뀌는 것은 뭐로인해 적용되는 것인가요? 그냥 하나하나 css를 적용시킨 것인가요?
미해결
Next + React Query로 SNS 서비스 만들기
보너스: 배포 맛보기(과금주의) port를 80으로 다시 바꿔주셨는데, 궁금합니다! 최근에 AWS에 관심이 상당히 많이 생겨서 리눅스도 공부하고, 가상머신에 우분투 설치하여 돌려봤습니다. 많이 부족함을 느끼고 있는데, 혹시 aws, docker등 설명해주시는 부분이 있으실까요? node bird에서는 aws section이 있는 것을 봤는데 살짝 아쉽습니다 ㅜㅜ
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요 강의중에는 fetch를 사용하는데 기존에 프로젝트를 진행할때, baseUrl 설정이나 기본 헤더 설정, 인터셉터 및 json 직렬화 등 의 불편함으로 axios를 사용하였었는데 next에서 캐싱관련해서 fetch를 확장해서 제공해주기때문에 axios를 사용하지않고 fetch로 사용하는걸까요?
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요. 제로초 강사님. 수업 그대로 따라가고 있었는데 궁금한 점이 생겨서 질문 드립니다. 영상과 동일하게 따라하고 있었고, 질문이 있는 파일 경로는 다음과 같습니다. src\app\(beforeLogin)\@modal\(.)i\flow\login\page.tsx 이 때, 파일명을 page.tsx --> qwer.tsx로 변경하면 404 에러를 띄웁니다. 혹시나 해서, src\app\(beforeLogin)\i\flow\login\page.tsx 의 파일 또한 qwer.tsx로 바뀐 뒤 해당 경로로 들어가려고 하면 똑같이 404 에러를 띄웁니다. src\app\(beforeLogin)\page.tsx 파일의 import Image from "next/image"; import styles from '@/app/page.module.css' import Link from "next/link"; import zlogo from '../../../public/zlogo.png' export default function Home() { return ( <> <div className={styles.left}> <Image src={zlogo} alt="logo"/> </div> <div className={styles.right}> <h1> 지금 일어나고 있는 일 </h1> <h2> 지금 가입하세요 </h2> <Link href="/i/flow/signup" className={styles.signup}> 계정 만들기</Link> <h3> 이미 트위터에 가입하셨나요? </h3> <Link href="/i/flow/login" className={styles.login}> 로그인 </Link> </div> </> ); } 에서 <Link href="/i/flow/login" className={styles.login}> 로그인 </Link> 컴포넌트를 클릭시 제가 원하는 해당 경로의 특정파일명과 매핑할 수 있는 방법이 있나요?? 아니면 하나의 폴더에는 하나의 page.tsx만 존재해야하고, 그 파일 명은 page.tsx가 되야하는 규칙인건가요??
해결됨
Next + React Query로 SNS 서비스 만들기
useSelectedLayoutSegment 를 DetailPage 안의 infoData 라는 컴포넌트에서 사용하려하였고, 클라이언트 컴포넌트입니다. useSelectedLayoutSegment은 layout.tsx 에서 infoData 를 부를때만 사용할수있는건가요? layout.tsx 에서 infoData 를 불러오면 segment를 잘 가져오고 DetailPage 라는 곳에서 infoData를 사용하면 segment 가 null로만 반환되고있습니다. Layout의 children으로 DetailPage가 들어가고 DetailPage의 children으로 infoData가 들어가는데 layout.tsx 에서 직접 컴포넌트를 불러올때만 값을 받아오고 layout의 자식의 자식으로 사용될때에는 왜 값을 가져오지 못하는건지 이해가 안되서 질문드립니다.
미해결
Next + React Query로 SNS 서비스 만들기
강의 17분 50초 정도에 말씀하신 얇은 복사중에서 왜 이런식으로 복사해야하는지 이해가 잘 되지 않습니다. const shallow = { ...value }; value.pages = { ...value.pages }; value.pages[pageIndex] = [...value.pages[pageIndex]]; 제가 강의를 보기전 테스트할때는 해당 코드로 작성하였는데 해당 코드는 정상적으로 작동하지 않았습니다 const shallow = { ...value }; shallow.pages = { ...value.pages }; shallow.pages[pageIndex] = [...value.pages[pageIndex]]; 혹시 왜 첫번째 코드블록처럼 코드를 작성해야하는지 간단하게 설명해주시면 감사하겠습니다
미해결
Next + React Query로 SNS 서비스 만들기
예를들어, 이런 소셜 네트워크 서비스같은 경우에는 useSWR보다, react-query가 다양한 기능을 제공해주어, 적합하다고 생각이 되어집니다. 1 . 단순 데이터만 갖고오는 사이트가 아니라면, 대부분 react-query가 더 좋다고 생각하는데, useSWR은 어떤 서비스에서 주로 채택하면 좋은지에 대해 알고싶습니다. react-query와 useSWR을 혼용해서 사용했을때 더 좋아지는 경우가 있을까요? 어떠한 서비스를 만들때, useSWR, react-query를 선택해야한다면, 어떤 기준으로 판별하는 것이 좋은지에 대해서도 알고 싶습니다.
미해결
Next + React Query로 SNS 서비스 만들기
CredentialsSignin 에러가 발생합니다. 아래의 CredentialsSignin 질문과 같이 redis 재시작, 백엔드 서버 재시작, next, node_modules 삭제 후 다시 npm install 후 확인해도 계속 같은 에러가 나옵니다. next [auth][error] CredentialsSignin: Read more at https://errors.authjs.dev#credentialssignin at Module.callback (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/actions/callback/index.js:256:30) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async AuthInternal (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/index.js:65:24) at async Auth (webpack-internal:///(rsc)/./node_modules/@auth/core/index.js:123:29) at async /Users/mac/Documents/next14/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:63251 백엔드 [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [WebSocketsController] EventsGateway subscribed to the "test" message +22ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [WebSocketsController] EventsGateway subscribed to the "sendMessage" message +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [WebSocketsController] EventsGateway subscribed to the "login" message +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RoutesResolver] AppController {/}: +2ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/, GET} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RoutesResolver] ApiController {/api}: +1ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/login, POST} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/logIn, POST} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/logout, POST} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/logOut, POST} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/user, GET} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/decode, POST} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RoutesResolver] HashtagsController {/api/hashtags}: +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/hashtags, POST} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/hashtags, GET} route +1ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/hashtags/trends, GET} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/hashtags/:id, GET} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/hashtags/:id, PATCH} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/hashtags/:id, DELETE} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RoutesResolver] UsersController {/api/users}: +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/users, POST} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/users/followRecommends, GET} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/users, GET} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/users/:id, GET} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/users/:id/posts, GET} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/users/:id, PATCH} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/users/:id, DELETE} route +1ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/users/:id/follow, POST} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/users/:id/follow, DELETE} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/users/:id/rooms, GET} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/users/:id/rooms/:roomId, GET} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RoutesResolver] PostsController {/api/posts}: +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/posts, POST} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/posts/recommends, GET} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/posts/followings, GET} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/posts, GET} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/posts/:id, GET} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/posts/:id/heart, DELETE} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/posts/:id/heart, POST} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/posts/:id, DELETE} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/posts/:id/reposts, POST} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/posts/:id/reposts, DELETE} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/posts/:id/comments, GET} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/posts/:id/comments, POST} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/posts/:id/photos/:imageId, GET} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RoutesResolver] MessagesController {/api/messages}: +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/messages, POST} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/messages, GET} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/messages/:id, GET} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/messages/:id, PATCH} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [RouterExplorer] Mapped {/api/messages/:id, DELETE} route +0ms [Nest] 6106 - 01/01/2024, 3:07:18 PM LOG [NestApplication] Nest application successfully started +2ms redis connected test 12345 test 123125 test sadfasf test zcxv
미해결
Next + React Query로 SNS 서비스 만들기
command + p (or ctrl+p) 누르면 나오는 서치창에 내가 만든 파일명을 입력하면 해당 파일을 찾을 수 있습니다. 어느 소통창구로 알려드려야 할지 몰라서 여기다 적어요
