묻고 답해요
137만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Next + React Query로 SNS 서비스 만들기
LogoutButton 컴포넌트의 img 태그
Nextjs에서는 <Image /> 컴포넌트로 서버에서 이미지를 최적화 해주는 기능이 있는데,LogoutButton 컴포넌트에서는 기존의 <img> 태그를 사용하신 이유가 있는지 궁금합니다!사이즈가 작기 때문에 서버에 최적화를 맡기는 부담을 줄이기 위함일까요??
-
해결됨Next + React Query로 SNS 서비스 만들기
<Image> 태그에 priority 적용건
브라우저 콘솔에 Image with src "/_next/static/media/zlogo.f72788b6.png" was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.Read more: https://nextjs.org/docs/api-reference/next/image#priority 와 같은 warning이 뜨길래 공식문서와 블로그 글을 참고해 봤는데 이미지 로딩의 우선권을 주는 기능인 것 같던데요 그냥 유저가 이미지가 들어가 있는 페이지에 접속했을때, 빠른 로딩 우선권을 주는 거라고 생각하면 되는 걸까요?
-
미해결Next + React Query로 SNS 서비스 만들기
npm run start:dev 명령어 실행시 Error: connect ECONNREFUSED ::1:6379 에러 발생
해당 강의에서 postgresql 설치와 노드버전 18.17.0 환경에서nest-prisma의 폴더를 다운 받은 후 npm i -> npx prisma migrate dev 까지는 순조롭게 진행되었으나 npm run start:dev에서 Error: connect ECONNREFUSED ::1:6379 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1495:16) { errno: -61, code: 'ECONNREFUSED', syscall: 'connect', address: '::1', port: 6379 }에러가 발생했습니다 구글링을 해보니 레디스 서버가 구동이 안된 것 같다고 나오기도하고 서버쪽을 잘 몰라 질문 드립니다.env 파일 입니다DATABASE_URL="postgresql://postgres:비번@localhost:5432/zcom?schema=public" REDIS_URL=redis://localhost:6379 COOKIE_SECRET=cookienyamnyam
-
해결됨Next + React Query로 SNS 서비스 만들기
API 요청 시, cookie 보내는 것에 대한 질문
안녕하세요! 제로초님! 보너스 강의까지 잘 챙겨보고 있습니다. 매번 감사합니다! 제 질문은..!server action 함수쪽에서 fetch config 객체에 credentials 을 include로 해줘야 쿠키(세션)를 API 요청 시 같이 태워서 보낼 수 있다고 설명해주셨는데, 혹시 이것이 next-auth 로부터 도움을 받는 것일까요?강의 수강 후, next 14로 프로젝트를 구현하고 있는데, fetch 할 때, credentials 를 include 해주었음에도 불구하고, 브라우저 application 탭에서 확인 할 수 있는 쿠키가 태워지지 않아서요. 해당 쿠키는 서버에서 로그인 시에 set-cookie 해준 쿠키이고, 프론트엔드는 localhost, 서버는 ec2에 배포된 서버입니다. 그래서 현재는 server action 함수내에서 next.js에서 지원해주는 cookie() 를 이용해서 fetch config 객체 내 headers 에 직접 쿠키를 넣어주고 있는데, 강의에서는 credentials 만으로 API 요청시 쿠키(세션)을 잘 태워서 보내주고 있는 것 같아 질문을 남기게 되었습니다.
-
미해결Next + React Query로 SNS 서비스 만들기
_component 폴더구조에 관한 질문입니다.
제로초님은 항상 _component 폴더를 만드시는데 이런 폴더를 만들지 않고 그냥 컴포넌트를 만드는건 어떻게 생각하시나요??어차피 폴더내에서는 page라는 파일만 페이지로 라우팅이 되기 때문에 별 상관없을 것 같습니다. 단순히 취향차이로 보면 될까요?? ex) as is src/app/search/_component/Tab.tsxto be src/app/search/Tab.tsx
-
해결됨Next + React Query로 SNS 서비스 만들기
백엔드 서버 세팅 중 발생한 에러 및 해결 방법
안녕하세요!mac에서 백엔드 서버 세팅 중 에러가 발생해 해결했던 방법을 남깁니다. 강의 수강 중 섹션 4 [백엔드 서버 세팅하기] 강의에 맞춰 아래와 같이 진행하였습니다.postgresql 설치pgAdimin 세팅github nest-prisma repository 클론nest-prisma 디렉토리에서 npm i && npm run migrate:devnpm run start:dev 실행 시 아래 에러 발생Error: connect ECONNREFUSED 127.0.0.1:6379구글링을 해보니 redis 설치 및 redis-server 명령어를 실행하라고 해 따라했더니 에러가 사라졌습니다.제가 중간에 세팅 과정을 잘못 했거나 위 해결 방법이 틀린건지도 모르겠지만 혹시 도움이 될까 해서 남깁니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
로그인 클릭시, Failed to construct URL: Invalid base URL 에러로 인해서 리다이렉트가 되지 않습니다
‘next-auth로 로그인하기’ 강의를 다 듣고 나서로그인 버튼을 클릭했더니 아래의 에러가 발생하고'/home'으로 리다이렉트가 되지 않습니다.TypeError: Failed to construct 'URL': Invalid base URL at signIn (react.js:172:19) at async onSubmit (VM5774 LoginModal.tsx:29:13) 에러 로그를 보고 처음에는 URL 설정이 문제인가 싶었는데URL은 문제가 없었습니다#.env AUTH_URL=http://localhost:9090 AUTH_SECRET=mustkeepinsecret // auth.ts CredentialsProvider({ async authorize(credentials) { console.log(credentials); const authResponse = await fetch(`${process.env.AUTH_URL}/api/login`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ // credentials id: credentials.username, password: credentials.password, }), }); console.log(authResponse); // 로그인 실패 if (!authResponse.ok) { return null; } // 로그인 성공 const user = await authResponse.json(); return user; }, }), // src\\mocks\\handlers.ts http.post('/api/login', () => { console.log('로그인'); return HttpResponse.json( { userId: 1, nickname: '제로초', id: 'zerocho', image: '/5Udwvqim.jpg', }, { headers: { 'Set-Cookie': 'connect.sid=msw-cookie;HttpOnly;Path=/', }, }, ); }), 실제로 로그인 버튼을 클릭하면 터미널에 handlers.ts 에 작성한 console.log('로그인'); 가 제대로 출력이 되고CredentialsProvide의 authorize에 작성한 console.log(credentials); 역시 제대로 출력이 됩니다 에러 메세지를 보면 signIn 관련 문제인 것 같은데 이 역시 강사님이 작성해주신 내용 그대로 작성했는데 뭐가 문제인지 모르겠네요ㅠconst onSubmit: FormEventHandler<HTMLFormElement> = async (e: FormEvent<HTMLFormElement>) => { e.preventDefault(); setMessage(''); try { await signIn('credentials', { username: id, password, redirect: false, }); // 로그인 성공하면 리다이렉션 router.replace('/home'); } catch (e) { console.error(e); setMessage('아이디와 비밀번호가 일치하지 않습니다'); } };
-
미해결Next + React Query로 SNS 서비스 만들기
2:56 src/app/page.tsx 파일을 이동해도 메인페이지가 잘 나오는 이유가 궁금합니다.
[제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c페러렐 라우트용 @modal 페이지를 메인 page.tsx ( src/app/page.tsx ) 에서 사용하기위해 (beforeLogin) 경로로 이동시켰는데, Next.js 가 어떻게 메인페이지를 인식하고 표시하는지가 궁금합니다.Next.js 프로젝트 폴더구조에서 가장 app 폴더와 근접해있는 page.tsx 파일이 메인으로 인식되는건가요.. ㅠㅠ?현재 app 폴더에 layout.tsx(RootLayout) 밖에 없는데 그 파일에서 children 으로 받아지는 page.tsx 가 어떻게 결정되는지가 궁금합니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
/compose/tweet 새로고침 시 TweetModal 모달 안 뜨는..
https://github.com/ZeroCho/next-app-router-z/blob/master/ch3-1/src/app/(afterLogin)/compose/tweet/page.tsx3-1 보면서 학습 중입니다./compose/tweet 새로고침 시에도 모달이 보여야하는데 안 되길래.. /compose/tweet/page.tsx에 <TweetModal /> 이 빠져있어서 안 됐어요 혹시나 저같은 초보자들은 헤매실까봐.. 글 남겨둡니다~
-
해결됨Next + React Query로 SNS 서비스 만들기
gcTime 관련 궁금한 점이 있습니다.
안녕하세요, 제로초님이전 노드버드 강의부터 z.com까지 강의 유익하게 잘 보고 있습니다.섹션3 [react-query를 쓰는 이유와 fresh, stale, inactive] 강의 수강 중 궁금한 부분이 있어서 문의드립니다.강의에서 react-query의 데이터가 inactive 상태가 아니더라도 gcTime이 경과되면 gc가 이뤄진다고 말씀해주셨습니다. 그래서 staleTime을 gcTime보다 길게 설정하더라도 실제론 gcTime을 넘을 수 없다고도 연이어 설명해주시는 내용이 나옵니다. 제가 이전에 react query 블로그에서 본 gcTime 관련 설명에는 'The duration until inactive queries will be removed from the cache.' 라고 적혀있었는데요, 이 내용을 보고선 inactive된 데이터만 gc가 이뤄지는 걸로 알고 있었는데... 혼란스러워 문의드립니다. ㅠㅠ gcTime 관련 내용은 아래 링크에서 읽어봤습니다.https://tkdodo.eu/blog/practical-react-query 미리 답변 감사드립니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
login 페이지와 리다이렉트 관련 질문입니다.
<Link href="/login"> 클릭을 통해서(beforeLogin)/login/page.tsx로 이동 여기서는 replace('i/flow/login')으로 리다이렉트 어쨋거나 <Link>를 통해 이동 -> 리다이렉트 됐으니 인터셉팅 라우팅한 (.i)/flow/login/page.tsx로 이동i/flow/login/page.tsx는 새로고침 시 이동 할 때 보여줌이 맞나요?.?넥스트 처음이라 너무 어렵네요.. 눈물이 앞을 가립니다.. 제대로 이해한건지 모르겠어서 확인하고자 질문 드려봅니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
안녕하세요 아직 수강중이긴한데 실무에서 작업중 궁금한게 있어서 질문드립니다!
안녕하세요, 강의는 수강중이기도하고 아래에 비슷한 맥락의 질문이 있는데 제가 이해한게 맞나 궁금해서질문 올립니다!현재 next14 버전과 styled-component를 사용중이며 공식문서https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components내용 과 검색등을 통하여 적용하였습니다.// libs/styledCompnents/Registry.tsx 'use client'; import { useServerInsertedHTML } from 'next/navigation'; import { ReactNode, useState } from 'react'; import { ServerStyleSheet, StyleSheetManager } from 'styled-components'; const Registry = ({ children }: { children: ReactNode }) => { const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet()); useServerInsertedHTML(() => { const styles = styledComponentsStyleSheet.getStyleElement(); styledComponentsStyleSheet.instance.clearTag(); return <>{styles}</>; }); if (typeof document !== 'undefined') { return <>{children}</>; } return ( <StyleSheetManager sheet={styledComponentsStyleSheet.instance}> {children} </StyleSheetManager> ); }; export default Registry; //libs/styledComponets/Provider.tsx 'use client'; import { ThemeProvider } from 'styled-components'; import GlobalStyles from '@/styles/GlobalStyles'; import theme from '@/styles/theme'; import { PropsWithRequiredChildren } from '@/types/common'; import { StyledComponentsRegistry } from '.'; const Providers = (props: PropsWithRequiredChildren) => { return ( <StyledComponentsRegistry> <ThemeProvider theme={theme}> <GlobalStyles /> {props.children} </ThemeProvider> </StyledComponentsRegistry> ); }; export default Providers; // layout.tsx import type { Metadata } from 'next'; import { Inter } from 'next/font/google'; import AdminLayout from '@/layouts/AdminLayout/AdminLayout'; import { StyledComponentsProvider } from '@/libs/styledComponents'; import { MSWComponent } from '@/mocks/MSWComponent'; const inter = Inter({ subsets: ['latin'] }); export const metadata: Metadata = { title: 'Create Next App', description: 'Generated by create next app', }; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en"> <body className={inter.className}> <MSWComponent> <StyledComponentsProvider> <AdminLayout>{children}</AdminLayout> </StyledComponentsProvider> </MSWComponent> </body> </html> ); } 현재 이렇게 사용중인데 AdminLayout에 'use client'를 사용하지않으면, 아래와 같은 에러가 나오고'use client' 를 사용하면 에러 없이 렌더링이 정상적으로 됩니다.```Server ErrorError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-componentThis error happened while generating the page. Any console logs will be displayed in the terminal window.Call Stackonode_modules/styled-components/dist/styled-components.esm.js (1:15911)(rsc)/./node_modules/styled-components/dist/styled-components.esm.jsnext/server/vendor-chunks/styled-components.js (30:1)__webpack_require__next/server/webpack-runtime.js (33:42)evalwebpack-internal:///(rsc)/./src/components/atoms/Text/Text.style.ts (5:75)(rsc)/./src/components/atoms/Text/Text.style.tsnext/server/app/page.js (569:1)__webpack_require__next/server/webpack-runtime.js (33:42)evalwebpack-internal:///(rsc)/./src/components/atoms/Text/Text.tsx (7:69)(rsc)/./src/components/atoms/Text/Text.tsxnext/server/app/page.js (580:1)__webpack_require__next/server/webpack-runtime.js (33:42)evalwebpack-internal:///(rsc)/./src/components/atoms/Text/index.ts (5:63)(rsc)/./src/components/atoms/Text/index.tsnext/server/app/page.js (591:1)__webpack_require__next/server/webpack-runtime.js (33:42)evalwebpack-internal:///(rsc)/./src/layouts/AdminLayout/AdminLayout.tsx (10:80)(rsc)/./src/layouts/AdminLayout/AdminLayout.tsxnext/server/app/page.js (745:1)__webpack_require__next/server/webpack-runtime.js (33:42)evalwebpack-internal:///(rsc)/./src/app/layout.tsx (10:90)(rsc)/./src/app/layout.tsxnext/server/app/page.js (503:1)Function.__webpack_require__next/server/webpack-runtime.js (33:42)async eq/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:401280)async tr/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:405046)async tn/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:405596)async tu/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:409938)async/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:410457)```궁금한 점이 3가지가 있는데 검색만으로는 이해가 잘안되서 질문드립니다ㅠ1. AdminLayout이 'use client'를 선언하지 않고 서버 컴포넌트로 사용을 하여도 StyledComponentsProvider 가 'use client' 이기 때문에 클라이언트 컴포넌트의 자식으로 AdminLayout을 사용하면 AdminLayout도 자동으로 클라이언트 컴포넌트로 변경되는걸까요? 아니면 자식 요소로 사용하는것은 상관없이 import 해오는 경우만 클라이언트 컴포넌트에서 서버 컴포넌트를 불러오면 서버 컴포넌트가 클라이언트 컴포넌트가 되는걸까요?2. 컴포넌트의 자식이 부모의 컴포넌트의 상태를 따라간다면, 만약 최상위 부모 (Layout)가 클라이언트 컴포넌트라면 어차피 AdminLayout 이나 불러오는 NavMenu 들을 서버 컴포넌트로 사용 못하는게 맞나요?3. 강의상 진행할때는 문제 없었습니다. 현재 위에 질문드린 에러는 styled-components 때문에 createContext 는 use client에서만 사용할수있다라는 에러인거같은데 AdminLayOut이나 다른 페이지에서도 useContext를 사용하려하면 'use client'를 작성하여도 같은 에러가 나옵니다. 현재 말씀드린 정보로만으로는 에러의 문제점을 찾을순 없을까요?
-
미해결Next + React Query로 SNS 서비스 만들기
2:34 RQProvider에 "use client"; 로 csr 선언?을 해주신 것 같은데 이런 형식의 구조라면 SSR이나 SSG 적용에는 문제가 없을까요?
안녕하세요 제로초님.리액트 쿼리를 도입해보려고 할 때 마침제로초님 강좌가 올라와서 참고하고 있습니다!근데 제 Nextjs 프로젝트의 데이터가 대부분 ssr이나 ssg로데이터를 가져오게끔 하려고 하고 있거든요강의에서 ssr로 데이터를 가져오는데그전에 RQProvider로 리액트 쿼리를 쓸 범위를 지정해주셨잖아요? 근데 useState를 사용하고 있고, "use client";가 선언되어있는데 그 밑으로 담기는 페이지나 컴포넌트들에 ssr, ssg 적용이 잘 되는지에 대해 궁금해져서 질문을 남기게 되었습니다!!(제로초님 강의와 비슷하게 ssr로 데이터 가져오게 작업해봤을때 csr이 아니라 ssr로 잘 가져오는 거 같기는 한데 어떻게 되는거지?! 계속 궁금하네요..!)
-
해결됨Next + React Query로 SNS 서비스 만들기
클라이언트 컴포넌트로 전환하기 1:07초 파일
안녕하세요 제로초님!현재 강좌를 따라하면서 진행중인데 깃허브에 들어가보니 @modal 밑에 파일들을 못 찾겠어서요,login.module.css은 https://github.com/ZeroCho/next-app-router-z/blob/master/ch1/src/app/(beforeLogin)/_component/login.module.css여기있는거 같은데, page.tsx는 어떤 파일에서 보면 될까요?
-
해결됨Next + React Query로 SNS 서비스 만들기
leftSectionWrapper와 rightSectionWrapper 중앙 정렬
leftSectionWrapper와 rightSectionWrapper를 중앙 정렬시키기 위해 각각에 flex-grow: 1 을 주셨는데container에 margin: 0 auto 주는 것과 동일한건지 궁금합니다!
-
해결됨Next + React Query로 SNS 서비스 만들기
MSW오류 및 서버 액션에 대한 질문입니다!
안녕하세요!‘서버 컴포넌트에서 Server Actions 사용하기’ 섹션을 듣고 질문 2개가 생겼습니다. 강의를 다 듣고 실제로 진행해보니 저의 경우는 redirect('/home') 으로리다이렉션이 진행되지 않습니다network탭을 보니 애초에 서버로 데이터 전송이 안 된 것 같습니다 (payload에는 제대로 데이터가 전송이 됐고 Headers를 보면 status가 200이 뜨긴 하네요) 그래서 MSW문제인가 싶어서 http://localhost:9090/ 에 접속해보니 에러가 발생하네요 MSW설정 자체가 문제인것 같은데 강의내용을 보고 그대로 따라했는데 어느 부분에서 문제가 발생한지 도저히 모르겠습니다.. 제 코드들을 첨부하겠습니다 // browser.ts import { setupWorker } from 'msw/browser'; import { handlers } from './handlers'; // This configures a Service Worker with the given request handlers. const worker = setupWorker(...handlers); export default worker; // handlers.ts import { http, HttpResponse } from 'msw'; export const handlers = [ http.post(`/api/login`, () => { console.log('로그인'); return HttpResponse.json( { userId: 1, nickname: '제로초', id: 'zerocho', image: '/5Udwvqim.jpg', }, { headers: { 'Set-Cookie': 'connect.sid=msw-cookie;HttpOnly;Path=/', }, }, ); }), http.post(`/api/logout`, () => { console.log('로그아웃'); return new HttpResponse(null, { headers: { 'Set-Cookie': 'connect.sid=;HttpOnly;Path=/;Max-Age=0', }, }); }), http.post('/api/users', async ({ request }) => { console.log('회원가입'); // 403에러 전용 // return HttpResponse.text(JSON.stringify('user_exists'), { // status: 403, // }); // 성공 전용 return HttpResponse.text(JSON.stringify('ok'), { headers: { 'Set-Cookie': 'connect.sid=msw-cookie;HttpOnly;Path=/;Max-Age=0', }, }); }), ]; // http.ts import { createMiddleware } from '@mswjs/http-middleware'; import express from 'express'; import cors from 'cors'; import { handlers } from './handlers'; const app = express(); const port = 9090; // 서버 포트 번호 // 현재 돌아가고 있는 로컬호스트 주소 app.use(cors({ origin: 'http://localhost:3000', optionsSuccessStatus: 200, credentials: true })); app.use(express.json()); app.use(createMiddleware(...handlers)); app.listen(port, () => console.log(`Mock server is running on port: ${port}`)); 정확히 서버액션 이라는 개념이 이해가 가질 않습니다 기존 리액트에서 클릭 이벤트 또는 서브밋 이벤트로 폼을 제출하는 방식이 아니라, 폼의 action을 사용해 서버로 폼의 데이터를 제출하는 것같은데, 이것만 보면 그냥 폼데이터 값으로 백엔드 api를 이용하는거같은데.. .정확한 서버 액션 이라는 그 의미를 잘 모르겠네요… 구글링 해보면 따로 api를 생성할 필요 없이 API를 바로 만들어서사용하는거라고 하는데 여기서는 백엔드 API를 사용하고 있고…혹시 다음 강의에 자세한 설명이 나오는것인가요?너무 헷갈리네요
-
해결됨Next + React Query로 SNS 서비스 만들기
5:35초 부분에 깃헙 소스 폴드1에서 page.module.css 파일 복사
깃허브 소스코드 폴더 ch1에서 page.module.css파일 아무리 찾아도 없는데 어디있는거죠??
-
미해결Next + React Query로 SNS 서비스 만들기
로그인 문제
로그인 테스트 해보려는데 try, catch 부분 둘 다 실행되네요?. 리다이렉트가 안되는거 같아요새로 고침하면 로그인 상태는 됩니다. 리다이렉트 안되는 이유가 무엇일까요?'use client'; import style from '@/app/(beforeLogin)/_component/login.module.css'; import { ChangeEventHandler, FormEventHandler, useState } from 'react'; import { useRouter } from 'next/navigation'; import { signIn } from 'next-auth/react'; // 클라이언트에서는 next-auth/react에서 임포트 export default function Page() { const [id, setId] = useState(''); const [password, setPassword] = useState(''); const [message, setMessage] = useState(''); const router = useRouter(); const onSubmit: FormEventHandler<HTMLFormElement> = async (e) => { e.preventDefault(); setMessage(''); try { await signIn('credentials', { username: id, password, redirect: false, }); router.replace('/home'); } catch (error) { console.error(error); setMessage('아이디와 비밀번호가 일치하지 않습니다.'); } }; const onClickClose = () => { router.back(); }; const onChangeId: ChangeEventHandler<HTMLInputElement> = (e) => { setId(e.target.value); }; const onChangePassword: ChangeEventHandler<HTMLInputElement> = (e) => { setPassword(e.target.value); }; return ( <div className={style.modalBackground}> <div className={style.modal}> <div className={style.modalHeader}> <button className={style.closeButton} onClick={onClickClose}> <svg width={24} viewBox='0 0 24 24' aria-hidden='true' className='r-18jsvk2 r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03' > <g> <path d='M10.59 12L4.54 5.96l1.42-1.42L12 10.59l6.04-6.05 1.42 1.42L13.41 12l6.05 6.04-1.42 1.42L12 13.41l-6.04 6.05-1.42-1.42L10.59 12z'></path> </g> </svg> </button> <div>로그인하세요.</div> </div> <form onSubmit={onSubmit}> <div className={style.modalBody}> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor='id'> 아이디 </label> <input id='id' className={style.input} value={id} onChange={onChangeId} type='text' placeholder='' /> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor='password'> 비밀번호 </label> <input id='password' className={style.input} value={password} onChange={onChangePassword} type='password' placeholder='' /> </div> </div> <div className={style.message}>{message}</div> <div className={style.modalFooter}> <button className={style.actionButton} disabled={!id && !password}> 로그인하기 </button> </div> </form> </div> </div> ); } 핸들러 부분도 수정했습니다.const User = [ { id: 'elonmusk', nickname: 'Elon Musk', image: '/yRsRRjGO.jpg' }, { id: 'zerohch0', nickname: '제로초', image: '/5Udwvqim.jpg' }, { id: 'dongwook98', nickname: '신동마', password: '1234', image: '/me.jpeg' }, { id: 'leoturtle', nickname: '레오', image: faker.image.avatar() }, ]; const Posts = []; export const handlers = [ http.post('/api/login', () => { console.log('로그인'); return HttpResponse.json(User[2], { headers: { 'Set-Cookie': 'connect.sid=msw-cookie;HttpOnly;Path=/', }, }); }), 추가로 콘솔 에러 메시지 입니다.이걸 보고 AUTH_URL 도 확인해보았는데 다 잘 적어줬습니다. 또 로그인 하기 전 메인 페이지에서 로그인 버튼 눌러서 로그인 모달이 뜨는 순간콘솔 탭에 이러한 에러 메시지가 생깁니다.위 에러 메시지는 검색해서 useEffect(() => { router.replace('/i/flow/login'); }, []);useEffect로 감싸주어서 해결하였습니다.
-
해결됨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파일을 찾을 수가 없어서 혹시 어디서 찾아야 할까요?