#next

Next.js SSR + react-query 조합에서의 serializing 에러

안녕하세요! Next.js SSR + react-query 조합을 사용하려고 하는데요, page 컴포넌트 내 getServerSideProps 함수에서 prefetching을 받아온 후에 serializing 에러가 발생합니다. (Next.js는 13버젼입니다.) 에러 내용은 다음과 같습니다. Error: Error serializing `.dehydratedState.queries[0].state.data.headers` returned from `getServerSideProps` in "/top". Reason: `object` ("[object AxiosHeaders]") cannot be serialized as JSON. Please only return JSON serializable data types. 해당 에러 내용으로 구글링을 해보니, 대부분 getServerSideProps 함수 반환 코드에서 return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; 와 같이 dehydrate(queryClient)값을 JSON화 -> Object화를 하라고 하는데요, 이와 같이 사용해도 또 다시 아래와 같은 에러가 납니다. TypeError: Converting circular structure to JSON --> starting at object with constructor 'ClientRequest' | property 'socket' -> object with constructor 'Socket' --- property '_httpMessage' closes the circle Backend API는 Express.js를 사용하고 있으며, res.status(200).json({ data: ~ })와 같은 방식으로 응답을 주고 있습니다. 어떻게 해결할 수 있을까요? 코드 첨부가 안되네요, 아래는 page 컴포넌트가 위치한 파일의 전체 코드입니다. import type { ReactElement } from 'react'; import { dehydrate, QueryClient, useQuery } from '@tanstack/react-query'; import { format } from 'date-fns'; import TopMusicContainer from '~containers/TopMusicContainer'; import Layout from '~layouts/Layout'; import type { NextPageWithLayout } from '~pages/_app'; import TopMusicService from '~services/topMusicService'; import * as MusicType from '~types/musicType'; export async function getServerSideProps() { const queryClient = new QueryClient(); await queryClient.prefetchQuery(['fetchTopMusic'], () => { const params: MusicType.ListRequestType = { filter: 'title', keyword: '', page: 1, limit: 25, time: format(new Date(), 'yyyyMMddHH'), }; return TopMusicService.list(params); }); return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; } const Top: NextPageWithLayout = (): JSX.Element => { const { data, isLoading } = useQuery({ queryKey: ['fetchTopMusic'], queryFn: () => { const params: MusicType.ListRequestType = { filter: 'title', keyword: '', page: 1, limit: 25, time: format(new Date(), 'yyyyMMddHH'), }; return TopMusicService.list(params); }, }); return ( <section> <TopMusicContainer /> </section> ); }; Top.getLayout = function getLayout(page: ReactElement) { return <Layout>{page}</Layout>; }; export default Top;

Next.js 에서 fluent-ffmpeg 사용 시 에러 해결 가능할까요?

Next.js 에서 puppeteer를 사용해서 특정 url에 접속하여 애니메이션을 png로 100장 정도 캡처하여 생성하고, fluent-ffmpeg를 사용해서 해당 png 이미지들을 mp4 영상으로 만들려고 하는데요. yarn add puppeteer fluent-ffmpeg @ffmpeg-installer/ffmpeg yarn add --dev @types/fluent-ffmpeg 위와 같이 라이브러리들을 설치했구요. 아래 page.tsx 파일에서 코드를 구현했는데요. dev로 실행해서 해당 페이지에 접속을 하면 아래와 같은 에러가 발생하는데요. 해결이 가능할까요?? 다른 라이브러리를 써야할지 구현한 코드가 문제가 있는지 모르겠네요. 도움 부탁드립니다!! # 에러 코드 # 1 of 1 error Next.js (14.2.3) Server Error Error: Cannot find module '/Users/.../animation-capture/node_modules/@ffmpeg-installer/darwin-arm64/package.json' This error happened while generating the page. Any console logs will be displayed in the terminal window. Call Stack webpackEmptyContext file:///Users/.../animation-capture/.next/server/app/capture/page.js (22:10) eval node_modules/@ffmpeg-installer/ffmpeg/index.js (40:27) (rsc)/./node_modules/@ffmpeg-installer/ffmpeg/index.js file:///Users/.../animation-capture/.next/server/vendor-chunks/@ffmpeg-installer.js (20:1) Next.js eval /./src/app/capture/page.tsx (rsc)/./src/app/capture/page.tsx file:///Users/.../animation-capture/.next/server/app/capture/page.js (286:1) Next.js # 코드 구현부 # import { NextApiRequest, NextApiResponse } from 'next'; import puppeteer from 'puppeteer'; import fs from 'fs'; import path from 'path'; import ffmpeg from 'fluent-ffmpeg'; import ffmpegInstaller from '@ffmpeg-installer/ffmpeg'; ffmpeg.setFfmpegPath(ffmpegInstaller.path); .... 중략.... const outputFilePath = path.resolve("./screenshots/video.mp4"); ffmpeg() .addInput(`${folderPath}/screenshot-%d.png`) .inputFPS(10) .output(outputFilePath) .on("end", () => { res.status(200).send(`Video created successfully at ${outputFilePath}`); }) .on("error", (err) => { console.error("Error generating video:", err); res.status(500).send("Failed to generate video"); }) .run(); } catch (error) { console.error("Error capturing screenshots:", error); res.status(500).send("Failed to capture screenshots"); }

안드로이드 스튜디오에서 빌드가 안되요

plugins { id("com.android.application") kotlin("android") } android { namespace = "com.example.next" compileSdk = 33 defaultConfig { applicationId = "com.example.next" minSdk = 24 targetSdk = 33 versionCode = 1 versionName = "1.0" testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner" } buildTypes { release { isMinifyEnabled = false proguardFiles(getDefaultProguardFile("proguard-android-optimize.txt"), "proguard-rules.pro") } } compileOptions { sourceCompatibility = JavaVersion.VERSION_1_8 targetCompatibility = JavaVersion.VERSION_1_8 } } dependencies { implementation("androidx.appcompat:appcompat:1.6.1") implementation("com.google.android.material:material:1.9.0") testImplementation("junit:junit:4.13.2") androidTestImplementation("androidx.test.ext:junit:1.1.5") androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1") } 여기서 에러가 뜨는데 뭘까요 Unresolved reference: id Unresolved reference: kotlin Unresolved reference: android Unresolved reference: namespace Unresolved reference: compileSdk Unresolved reference: defaultConfig Unresolved reference: applicationId Unresolved reference: minSdk Unresolved reference: targetSdk Unresolved reference: versionCode Unresolved reference: versionName Unresolved reference: testInstrumentationRunner Unresolved reference: buildTypes Unresolved reference: release Unresolved reference: isMinifyEnabled Unresolved reference: proguardFiles Unresolved reference: getDefaultProguardFile

(SSR 새로고침 문제)NextJS page에서 redux persist gate 설정하면 Client컴포넌트로 인식되는 문제

NextJS Pages Router에서 유저 데이터를 상태관리하기위해 redux를 사용했으나, 새로고침 시 데이터가 날라가는 문제를 해결하기 위해 persist gate를 사용했습니다. 하지만 redux persist gate를 사용하면 클라이언트 컴포넌트로 인지되는 문제가 있습니다. 궁금한 것 1) persist gate를 잘못써서 생긴 문제일까요? 아님 persist gate를 쓰면 안될까요? 2) 해결 방법으로 생각 해본 것은, "persist gate를 사용하지 않고 매 새로고침 시 저장되어있는 local storage에서 데이터를 새로 가져온다." 입니다. 3) ssr시 상태관리 새로고침 다른 방법으로 해결해본 경험 있으시면 아무렇게나 대답해주시면 감사하겠습니다!!! ----------------------------------------------- 문제의 코드 위치: https://github.com/bbookng/zippyziggy-v2/blob/main/frontend/zippy-ziggy/src/pages/_app.tsx 문제의 코드: import GlobalStyle from '@/styles/Global.style'; import useDarkMode from '@/hooks/useDarkMode'; import { media } from '@/styles/media'; import { darkTheme, lightTheme } from '@/styles/theme'; import type { AppProps } from 'next/app'; import { ThemeProvider, createGlobalStyle } from 'styled-components'; import normalize from 'styled-normalize'; import '@/styles/index.css'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import AppLayout from '@/layout/AppLayout'; import store, { persistor } from '@/core/store'; import { PersistGate } from 'redux-persist/integration/react'; import { Provider } from 'react-redux'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import 'toastify-js/src/toastify.css'; import { ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import DefaultHead from '@/components/Head/DefaultHead'; import Construction from './construction'; const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, // default: true }, }, }); function App({ Component, pageProps }: AppProps) { const { colorTheme, toggleTheme } = useDarkMode(); return ( <Provider store={store}> <PersistGate persistor={persistor}> <QueryClientProvider client={queryClient}> <ThemeProvider theme={colorTheme === 'dark' ? darkTheme : lightTheme}> <AppLayout toggleTheme={toggleTheme}> <Component {...pageProps} /> ... </AppLayout> </ThemeProvider> <ReactQueryDevtools initialIsOpen={false} /> </QueryClientProvider> </PersistGate> </Provider> ); } export default App;

ESLINT 어떤 것을 수정해야 내용처럼 fix 되는 현상을 막을 수 있을까요?

안녕하세요~ eslint, prettier에서 제가 무엇을 잘못했는지 계속 아래처럼 코드가 수정되고 있습니다. const res = (await request) < User > (context, `/users/${id}`); 어떻게 하면 고칠 수 있을까요? 1. (await request) 소괄호 제거 2. < User > 제너릭 사이 공백 제거 결론: const res = await request<User>(context, `/users/${id}`) 로 만들고 싶습니다.. 아래는 eslint 적용한 내용 입니다. ``` //eslint.config.js module.exports = { env: { browser: true, es2021: true, }, extends: [ 'plugin:react/recommended', 'airbnb', 'plugin:storybook/recommended', ], parser: '@typescript-eslint/parser', parserOptions: { project: ['./tsconfig.json'], ecmaVersion: 2018, sourceType: 'module', createDefaultProgram: true, }, plugins: ['react', '@typescript-eslint', 'prettier', 'import'], rules: { 'react/react-in-jsx-scope': 'off', 'react/jsx-props-no-spreading': 'off', 'import/prefer-default-export': 'off', 'implicit-arrow-linebreak': 'off', 'react/jsx-filename-extension': [ 2, { extensions: ['.js', '.jsx', '.ts', '.tsx'], }, ], 'object-curly-newline': [ 'error', { ObjectPattern: { multiline: true, minProperties: 2, }, ImportDeclaration: 'never', ExportDeclaration: { multiline: true, minProperties: 3, }, }, ], 'import/extensions': [ 'error', 'ignorePackages', { js: 'never', mjs: 'never', jsx: 'never', ts: 'never', tsx: 'never', }, ], 'import/order': [ 'error', { alphabetize: { order: 'asc', }, groups: [ 'builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object', 'type', ], }, ], 'import/no-unresolved': 'off', }, settings: { 'import/resolver': { typescript: { alwaysTryTypes: true, }, node: { paths: ['src'], }, }, }, }; ```

리액트 컴포넌트 설계에 대해 질문이 있습니다.

현재 Dropdown 컴포넌트를 compound pattern을 접목하여 구현을 해보고있습니다. ChatRoomHeader 라는곳에있는 DotsIcon을 클릭하면 Dropdown이 랜더링되게끔 구현을 하였는데요. 각 메뉴 리스트들을 배열로 해서 map을 사용하여 렌더링해주고있습니다. 제가 생각하는 문제점은 Dropdown안에 있는 로직들이 뭔가 전혀 상관없는곳에서 정의하고 props로 내려주는것에대해서 약간 문제점이 있어보이는것같습니다.. 혹시 다른방법이 있을까요? 아니면 참고할만한 블로그 알려주시면 감사하겠습니다 (__) 'use client'; import Link from 'next/link'; import ArrowLeftIcon from '@/public/arrow-left.svg'; import FlexBox from '@/components/ui/FlexBox'; import DotsIcon from '@/public/tabler_dots.svg'; import Dropdown from '@/components/ui/Dropdown/Dropdown'; import Divider from '@/components/ui/Divider'; export default function ChatRoomHeader({ title }: { title: string }) { const copyToClipboard = async () => { try { await navigator.clipboard.writeText(window.location.href); alert('복사 성공'); } catch { alert('복사 실패'); } }; const CHAT_ROOM_OPTIONS = [ { name: '공지', }, { name: '사진', }, { name: '링크' }, { name: '공유하기', event: copyToClipboard }, { name: '채팅방 나가기' }, ]; return ( <FlexBox as="header" justify="between" align="center" className=" p-8 h-14 tablet:h-24 w-full gap-4 bg-white border-b-[1px]" > <FlexBox className="gap-1"> <Link href="/community"> <ArrowLeftIcon className="w-7 h-7" /> </Link> <p className="text-xl font-bold">{title}</p> </FlexBox> <Dropdown> <Dropdown.Trigger> <DotsIcon className="w-6 h-6 tablet:w-7 tablet:h-7" /> </Dropdown.Trigger> <Dropdown.Menu> <li className="block tablet:hidden"> <Dropdown.Item>인원</Dropdown.Item> <Dropdown.Item>스케줄</Dropdown.Item> <Divider type="horizontal" /> </li> {CHAT_ROOM_OPTIONS.map((option) => ( <Dropdown.Item key={option.name} event={option.event}> {option.name} </Dropdown.Item> ))} </Dropdown.Menu> </Dropdown> </FlexBox> ); }

Nginx, Express 연결 후 프론트에서 이미지 파일 전송시 408 Error

안녕하세요. 혼자 해보던 도중 도저히 해결이 되지 않아 문의드립니다. - 서버 설계 - 현재 저는 Express앱을 AWS EC2 인스턴스에 NGINX를 설치한 후 proxy_pass에 express앱이 구동중인 port를 연결하여 사용하고 있습니다. 이 과정에서 ALB를 통해 ACM을 연동하여 HTTPS 프로토콜이 사용가능하게 설정까지 하였습니다. 이미지 파일업로드는 multer-s3를 이용해 s3버킷과 연결하여 업로드 되는 방식입니다. - 문제상황 - 로그인과 기본적인 CRUD는 문제없이 되는데, 프론트에서 이미지 파일(multipart/form-data)을 서버로 전송하면 504 오류가 출력됩니다. 1. nginx의 access.log에는 해당 uri의 상태코드가 408이라 출력됩니다. 2. nginx의 error.log에는 readv() failed (104: Connection reset by peer) while reading upstream가 출력됩니다. 3. 개발자도구의 console창에 'server의 이미지 업로드 uri' from origin '프론트 도메인'이 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 이라 출력됩니다. 위 오류를 해결해보기 위해 시도해본 것은 아래와 같습니다 1. NGINX의 proxy_connect_timeout, proxy_send_timeout, proxy_read_timeout, send_timeout을 600으로 설정, client_max_body_size를 500M으로 설정 2. ALB의 유휴제한시간 600 설정 3. Express 앱에 app.set('trust proxy', true); 추가 4. Express-session에 app.use(session({proxy:true})) 추가 5. body-parser에 app.use(bodyParser.json({limit: '1000mb'})); 추가 및 app.use(bodyParser.urlencoded({limit: '1000mb', extended: true})); 추가 6. 업로드되는 uri의 미들웨어에 (req, res, next) => { req.setTimeout(1000000); next(); } 추가 7. upload.single()미들웨어를 주석처리 후 req.file 출력 시도 아직도 해결을 하지 못하였습니다 ㅜㅜ 연휴임에도 도와주시면 너무 감사하겠습니다..

DRF를 자세히 공부해보고싶은데 독학으로 하려니 자꾸 턱턱걸립니다... django 백엔드에서 프론트엔드로 보낸 data가 안불러와져요

django rest framework로 웹을 개발하는 것을 공부하는 중인데 막히는부분이 많아서 점점 괴로워지네요. 이거를 보면서 독학하고 있는데요. https://wikidocs.net/book/9596 django views.py에서 response(data)를 발신하는 것까지는 되는데 next.js를 이용한 프론트에서 data를 받아오지 못하고 있어요... 왜 그럴까요? 디버그 메시지가 안뜨니 더 알기가 어렵네요. # backend/views.py """ from django.shortcuts import render from django.http import HttpResponse from rest_framework.decorators import api_view, permission_classes from rest_framework.permissions import AllowAny from rest_framework.response import Response # Create your views here. @api_view(['GET']) @permission_classes([AllowAny]) def hello_world(request): return Response('Hello, World!') # frontend/index.js """ import React, { useState, useEffect } from "react"; // config.js export const BACKEND_URL = "http://127.0.0.1:8000/"; const Home = () => { // State to store the data fetched from the backend const [data, setData] = useState(""); // useEffect hook to fetch data from the backend when the component mounts useEffect(() => { // Fetch data from the backend API using the '/api/hello' endpoint fetch("${BACKEND_URL}api/hello") .then((response) => response.json()) .then((data) => setData(data)); }, []); // Render the component JSX return ( <div> <h1>Welcome to Fine-Tuning Chatbot!</h1> <p>{data}</p> </div> ); }; export default Home; """ pure django-template를 이용해서 홈페이지 만들고 그 원리를 이해하는 것까지는 되는데 DRF는 정말 다른 세상이라고 느껴지네요...ㅎㅎ 좋은 강의나 책이 있으면 추천부탁드립니다. ㅠㅠ 위에 언급한 강의로 RESTful 배워보려는데, 기술스택이 많아서 그런건지 정보량도 많고 어렵네요 ㅠ

Next.js 14 서버액션을 사용한 폼 데이터 처리 중 질문입니다.

next.js 14의 서버액션을 사용해서 사용자로부터 form으로 데이터를 입력받아 DB에 저장하고 첨부파일을 서버에 업로드하는 모듈을 개발중입니다. 문제점은, 첨부파일을 input으로 입력받아 서버액션 함수로 formData로 넘겨주는데, 서버액션 함수에서 첨부파일의 파일명에 한글이 포함됐을 경우 파일명의 한글이 유니코드로 보이는 문자열로 찍히고 있습니다. // Form.jsx "use client"; // [other code] export default function Form() { const [formState, formAction] = useFormState(inquiryAction, { success: undefined, message: "", }); const { register, handleSubmit, reset, formState: { errors }, } = useForm(); const onSubmit = (data) => { const formData = new FormData(); const jsonData = JSON.stringify(data); formData.append("jsonData", jsonData); data.attachment[0] && formData.append("attachment", data.attachment[0]); formAction(formData); }; return ( <form action={handleSubmit(onSubmit)}> // [other code] <FileInput label="첨부파일" {...register("attachment")} error={errors} resetTrigger={resetTrigger} /> // [other code] </form> ); } // inquiryAction.js "use server"; import { connectDB } from "./connectDB"; export async function inquiryAction(prevState, formData) { const fields = JSON.parse(formData.get("jsonData")); const attachment = formData.get("attachment"); console.log(attachment); } Form 컴포넌트는 클라이언트 컴포넌트이고, react-hook-form과 next14의 서버액션을 사용하기 위해, form의 action에는 react-hook-form의 handleSubmit함수에 onSubmit 함수를 인자로 전달합니다. onSumbit 함수에서 서버액션 함수를 가져와 처리를 하고 있습니다. 그런데 여기서 서버함수쪽에서 첨부파일을 받을 때 한글 파일명이 다 깨지고 있네요... 기존에 api route와 fetch api를 사용했을 땐 문제가 없었는데.. 제가 놓치고 있는 부분이 있을까요?

마이크로 프론트 구현(Nextjs, React)

요구사항 마이크로 프론트엔드로 A라는 프로젝트에서 B라는 프로젝트의 컴포넌트를 사용하고 싶다 프로젝트 설명 ModuleFederationPlugin 사용해서 expose remote 설정 A 프로젝트 (remote) : react, styled-component 사용 B 프로젝트 (expose) : nextjs, scss 사용 첫번째 오류 styled 이 달라서 nextjs 에서 노드가 불러와지지 않는 것 해결 : <noscript id="**next_css__DO_NOT_USE**"></noscript> → 두번째 오류 발생 오류 내용 Cannot read properties of null (reading 'parentNode') TypeError: Cannot read properties of null (reading 'parentNode') at options.insert (webpack- 두번째 오류 Nextjs 에서 expose 할 때 Page 컴포넌트에 있는 useState를 사용 못한다고함 해결 : peerDependencies 로 nextjs 추가 → 오류동일 오류 내용 TypeError: Cannot read properties of null (reading 'useState') at useState (react.development.js:1623:21) at Page (index.js:8:40) react-dom.development.js:18704 The above error occurred in the <Page> component: 참고 : https://dev.to/omher/building-react-app-with-module-federation-and-nextjsreact-1pkh 두번째 오류를 해결해야 되는데 가능한 방법인지 모르겠습니다. 아시는 분은 댁글 남겨주세요~(코드상에 보안상 문제되는 부분은 a b 로 바꿨습니다.

next js middleware redirect 질문 있습니다.

안녕하세요, next js middleware를 사용해 로그인 사용별 화면을 분기하고 있습니다. 다름이 아니라 사용하면서 문제가 있어 이리저리 검색하다가 해결방법을 찾지 못해 글 남깁니다. 문제1. 브라우저 뒤로가기시 redirect대상 페이지면 title 미변경 문제. redirect된 페이지의 title이 아닌, redirect대상의 title이 적용되었습니다. redirect가 서버에서 브라우저에 요청하는 것이고 브라우저는 이를 실행은 하나 title은 변경되지 않았습니다. 2. 로그인후 뒤로가기를 계속 진행한후 브라우저 첫 페이지(구글)도달후 앞으로 가기를 하면 무한 리디렉션 문제가 발생. 해당 문제는 로그인후 메인 화면으로 넘어간 후 다시 뒤로가기를 반복하고 첫 페이지 도달시, 다시 앞으로 가기해서(예를 들어 로그인 페이지)면 미들웨어가 화면전환 도중에 리디렉션 요청이 많다고 에러를 발생 시킵니다. 아래는 제가 사용하는 코드를 첨부하겠습니다. 요약하자면 redirect하면 title 변경이 안됨. 뒤로가기후 다시 앞으로 가기하면 리디렉션 에러가 발생함. 만약 다른 방법이 있다면, 현업에선 어떻게 처리하는지 궁금합니다. export const verifyUser = (request: NextRequest, moveUrl: string) => { // const includesPage = ['/', '/auth/login', '/dashboard/customdashboard']; const accessToken = request.cookies.get('accessToken')?.value; const url = request.nextUrl.clone(); if (accessToken && isTokenExpired(accessToken)) { // 로그인 페이지 요청시 사용자 검증이 완료된 상태면 / 페이지로 강제 리다이렉트시킴. if (moveUrl === '/auth/login' || moveUrl.startsWith('/signup')) { url.pathname = '/'; return NextResponse.redirect(url); } return NextResponse.next(); } else { // 일반 페이지 요청시 사용자 검증이 미완료된 상태라면 로그인 페이지로 강제 리다이렉트시킴. if (moveUrl === '/auth/login' || moveUrl.startsWith('/signup')) { return NextResponse.next(); } removeLoginCookie(); url.pathname = '/auth/login'; return NextResponse.redirect(url); } };

Nextjs App router 동작 방식이 이해가 안됩니다.

https://nextjs.org/docs/app/building-your-application/rendering/client-components // 문서내용 Defining multiple use client entry points: You can define multiple "use client" entry points in your React Component tree. This allows you to split your application into multiple client bundles (or branches). However, "use client" doesn't need to be defined in every component that needs to be rendered on the client. Once you define the boundary, all child components and modules imported into it are considered part of the client bundle. => 클라이언트 컴포넌트의 하위 컴포넌트들은 자동으로 전부 클라이언트 컴포넌트가 됨(use-client 명시할 필요X) 으로 이해했습니다. 그런데 첨부한 코드의 동작방식이 이해가 안됩니다. 예상 1. TestComponent가 클라이언트 컴포넌트(CSR)이므로 내부에 있는 HotEventList도 클라이언트 단에서동작할 것이다. 2. TestComponent를 ‘use client’로 클라이언트 컴포넌트로 만들었다. HotEventList에서는 useState등 CSR에 필요한 요소를 추가하더라도 ‘use client’를 추가할필요가 없다. TestComponent하위에 있어서 자동으로 클라이언트 컴포넌트가 되기 때문이다. 실제 1. HotEventList는 여전히 SSR로 동작한다. 2. HotEventList에 state를 추가하면 ‘use client’를 명시하라는 에러가 발생한다. 제가 어떤 부분을 잘못 이해하고 있는걸까요?

nextjs 초보 fetch & DELETE 동작이 안되요.

app/api/list/[id]/route.js export async function DELETE(request, {params}) { const id = params.id; const {searchParams} = request.nextUrl; const sort = searchParams.get('sort'); return NextResponse.json({message: 'test', id, sort}); } 위처럼 되어있고, app/list/ListItem.js <button className="blue"> <span onClick={() => { fetch('/api/list/' + post._id, { method: 'DELETE' }).then(() => { console.log('call delete'); }); }}>삭제</span> </button> 위 처럼 코드를 작성했는데, DELETE route가 실행이 되지 않습니다. 어떻게 해야 하나요?... POST의 경우에는 아래와 같은데 동작이 잘 되서요.. app/write/route.js export async function POST(request) { const data = await request.formData(); let body = Object.fromEntries(data); const db = (await connectDB).db('exam'); await db.collection('post').insertOne(body); return new Response('POST'); } app/write/page.js <form action="/api/write" method="POST"> <input type="text" name="title" placeholder="제목"/> <br/> <input type="text" name="content" placeholder="내용"/> <button type="submit">NEW</button> </form>

for문을 이용한 중복체크 방법

public MemberDTO doRegist() { sc.nextLine(); System.out.println("*****************************************************"); System.out.print("아이디를 입력하세요 : "); String id = sc.nextLine(); System.out.print("비밀번호를 입력하세요 : "); String pwd = sc.nextLine(); System.out.print("이름을 입력하세요 : "); String name = sc.nextLine(); System.out.print("나이를 입력하세요 : "); int age = sc.nextInt(); System.out.print("성별을 입력하세요 : "); char gender = sc.next().charAt(0); sc.nextLine(); System.out.print("핸드폰 번호를 입력하세요 : "); String phone = sc.nextLine(); System.out.print("이메일을 입력하세요 : "); String email = sc.nextLine(); System.out.println("*****************************************************"); MemberDTO user = null; if(answer == 'Y') { user = new MemberDTO(id, pwd, name, age, gender, phone, email); }else { System.out.println("로그인 페이지로 돌아갑니다."); mainLogin(); } return user; } 여기에 for 문으로 아이디 중복체크를 넣고 싶은데 어떻게 넣어야 할까요...ㅠㅠ...

nextauth 를 이용해 springboot 의 jwt를 받아와서 로그인을 구현중입니다.

안녕하세요. nextauth 를 이용해 로그인 구현중입니다. 흔히 생각하는 소셜 로그인이 아닌 username 과 password를 통해 springboot security 에서 jwt를 반환 받아오려고 합니다. // app/api/auth/[...nextauth]/route.ts CredentialsProvider({ name: 'Credentials', credentials: { username: { label: 'Username', type: 'text', placeholder: '아이디' }, password: { label: 'Password', type: 'password' }, }, async authorize(credentials, req) { const res = await fetch(`${process.env.NEXTAUTH_URL}/auth/login`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ username: credentials?.username, password: credentials?.password, }), }); const user = await res.json(); console.log(user); if (user) { return user; } else { return null; } }, }), 그런데 위의 코드처럼 코드를 구성했을때 .env.local 파일의 NEXTAUTH_URL 이 등록이 되면 authorize 가 작동하지 않습니다 . 에러 log라도 있으면 어떻게라도 해보겠는데.. 그것도 없습니다. 그래서 NEXTAUTH_URL 를 등록하지 않고 const res = await fetch(`http://localhost:8080/auth`, 바꾸면 이것역시 에러 log 없이 브라우저상에서 Error 라는 문구만 보여줍니다. 이렇게 생각했을때 authorize는 값을 내부에서만 가져올수 있는거 같은데요. 실제로 가상의 const user = {....} 를 만들어서 반환하면 로그인이 아주 잘 됩니다. 하지만 제가 원하는 방법은 아니죠..ㅍ 검색해보면 prisma 가 많이 나오는데.. 그것 또한 시스템상 제가 원하는 방식이 아닙니다. springboot security 에서 jwt를 받아와서 nextauth에 로그인을 할수 있는 방법은 없을까요? custom login 페이지를 만들어서 해야 할거 같은데 방법을 잘 모르겠습니다. 현재 springboot 서버에 cors 설정이 정상적으로 허용된 상태입니다.

크롤링 관련 질문드립니다.

js로 크롤링을 하려고 axios, cheerio 모듈을 이용했습니다. 단순하게 특정 부분 클래스를 따서 로그를 찍어보면 LoadedCheerio { length: 0, options: { xml: false, decodeEntities: true }, _root: <ref *1> LoadedCheerio { '0': Document { parent: null, prev: null, next: null, startIndex: null, endIndex: null, children: [Array], type: 'root', 'x-mode': 'no-quirks' }, length: 1, options: { xml: false, decodeEntities: true }, _root: [Circular *1] }, prevObject: <ref *2> LoadedCheerio { '0': Document { parent: null, prev: null, next: null, startIndex: null, endIndex: null, children: [Array], type: 'root', 'x-mode': 'no-quirks' }, length: 1, options: { xml: false, decodeEntities: true }, _root: [Circular *2] } } 다음과 같이 나옵니다. 질문은 1. 크롤링이 안되는 사이트가 있다면 어떻게 확인할 수 있나요 ? 2. https://m.kinolights.com/title/98065 이 사이트에 크롤링을 연습해보고 싶은데 html 요청시에 추가해줘야 할 헤더값같은게 있을까요 ?

next.js 12version setting (npx create-next-app@12 my-next-app) 12버전이 설치되지 않는 이유

현재 회사에서 사용하는 next.js 12버전으로 기술 학습을 하려합니다. 그러나 아래와 같은 에러가 계속 발생하는데요, error next@14.0.4: The engine "node" is incompatible with this module. Expected version ">=18.17.0". Got "16.14.2" error Found incompatible module. info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command. 12버전으로 설치하려는데 자꾸 14버전이 설치가 되면서 node version 에러가 뜨고 있습니다.. 저는 node 16.14.2를 사용중이며, 사측도 동일하게 해당 버전을 사용중입니다. 초기 세팅과정에서 next.js 12버전으로 세팅이 안된다고 판단하고, next.js 12로 다운그레이드 하려면 14버전으로 설치 후에, 다운그레이드를 시도해보았으나 "Detected next.config.js, no exported configuration found" 터미널에 해당 에러가 발생되었습니다. 제가 너무 답답한 부분을 요약하겠습니다. 1. next.js 12버전 초기 세팅이 안된다고 판단. 이후 next.js 최신 14버전 설치 ➡️ 실행하면 잘 작동함. 2. 최신 14버전에서 12버전으로 버전을 낮추고 실행하면 next.config.js에서 문제가 발생함 혹시 최근에 next.js 12버전으로 초기세팅 되신 분이 계실까요..😢

react next js 환경에서 뒤로가기 핸들링 이슈 (여러가지 시도함)

안녕하세요, react next js 환경에서 프로젝트를 구축하고 있습니다. 하지만 한 가지 문제가 발생했는데요, 제가 대시보드를 개발하면서 각각의 대시보드 메뉴를 구성했습니다(동적페이지). 그래서 각각의 페이지에서 대시보드 수정이 일어나면 뒤로가기 컨펌을 띄우고 취소를 하면 해당 페이지에 남게하려는 로직을 구상했습니다. 여기서 제가 직면한 문제점은 1. 동적 페이지는 브라우저 히스토리에 남지않아 뒤로가기 확인을 누르면 이전 대시보드(동적페이지)화면이 아닌, 일반 화면으로 넘어간다는점. 2. 뒤로가기 취소를 반복하면 url이 변경되지만 강제로 현재 페이지 url로 변경하여도, 다른 대시보드 동적페이지로 이동후 정상적인 뒤로가기를 시도했을경우 완전 엉뚱한 페이지를 가거나 url이 변경되어도 페이지 전환이 되지 않고 현재 페이지에 남는 문제점. 제가 원하는 기능 1. 각각의 동적페이지에서 뒤로가기를 하면 경고창을 알리고 정상적인 이전 동적페이지로 핸들링 되는것 2. 뒤로가기 취소를 반복하여도 브라우저 히스토리에 계속 이전 url이 쌓이지 않은것 만약에 방법이 없다면 차선책은 무엇일까요? 시도해본 코드 1. useEffect(() => { const handleBeforePopState = (state: any) => { window.history.replaceState(null, '', router.asPath); const isConfirmed = confirm('뒤로가시겠습니까?'); if (isConfirmed) { router.beforePopState(() => true); router.back(); } return false; }; router.beforePopState(handleBeforePopState); return () => { router.beforePopState(() => true); }; }, [router.asPath]); 2. useEffect(() => { const handleReload = (e: BeforeUnloadEvent) => { e.preventDefault(); e.returnValue = ''; }; window.addEventListener('beforeunload', handleReload); // window.addEventListener('popstate', handlePopstate); return () => { window.removeEventListener('beforeunload', handleReload); // window.removeEventListener('popstate', handlePopstate); }; }, [router.asPath]);

java에서 입력받은 string을 file경로로 인식하게 하는 방법이 있을까요?

import java.io.*; import java.nio.file.Files; import java.nio.file.Path; import java.nio.file.Paths; import java.util.Scanner; import java.util.regex.Matcher; public class Keyword { public static void main(String[] args) throws IOException { String str,str1; Scanner sc = new Scanner(System.in); System.out.printf("파일에서 찾을 키워드를 입력하세요:"); str = sc.nextLine(); System.out.printf("키워드를 찾을 파일경로를 입력하세요:"); str1 = sc.nextLine(); String testPath = str1; //이 부분 때문에 골치가 아픕니다!!! String OsFilePath = testPath.replaceAll("/", Matcher.quoteReplacement(File.separator)); String path1 = OsFilePath.replaceAll(Matcher.quoteReplacement(File.separator), "/"); Path path2 = Paths.get(path1); String content = Files.readString(path2); String[] result = content.split("\n"); for(int i=0; i<result.length; i++) { if (result[i].contains(str)) { System.out.printf((i+1)+"번째 줄에서\"%s\"이라는 키워드가 감지되었습니다.: \n", str); System.out.println((i+1)+"번째 줄 ->"+result[i]); } } sc.close(); } } 사진대로 나오게 하고 싶습니다.

java에서 입력받은 string을 file경로로 인식하게 하는 방법이 있을까요?

import java.io.*; import java.nio.file.Files; import java.nio.file.Path; import java.nio.file.Paths; import java.util.Scanner; import java.util.regex.Matcher; public class Keyword { public static void main(String[] args) throws IOException { String str,str1; Scanner sc = new Scanner(System.in); System.out.printf("파일에서 찾을 키워드를 입력하세요:"); str = sc.nextLine(); System.out.printf("키워드를 찾을 파일경로를 입력하세요:"); str1 = sc.nextLine(); String testPath = str1; //이 부분 때문에 골치가 아픕니다!!! String OsFilePath = testPath.replaceAll("/", Matcher.quoteReplacement(File.separator)); String path1 = OsFilePath.replaceAll(Matcher.quoteReplacement(File.separator), "/"); Path path2 = Paths.get(path1); String content = Files.readString(path2); String[] result = content.split("\n"); for(int i=0; i<result.length; i++) { if (result[i].contains(str)) { System.out.printf((i+1)+"번째 줄에서\"%s\"이라는 키워드가 감지되었습니다.: \n", str); System.out.println((i+1)+"번째 줄 ->"+result[i]); } } sc.close(); } } 사진대로 나오게 하고 싶습니다.

next.js의 캐시와 react query 캐시 질문

next.js와 react query를 사용해 프로젝트를 진행하다가 이해가 안되는 현상이 있어서 질문드립니다. 어떤 A 라는 페이지에 들어오면 포스트와 포스트의 댓글들이 보이는 상황입니다. 첨부한 코드는 A 페이지를 담당하는 page.tsx 코드와 page 에서 사용중인 컴포넌트중 댓글 컴포넌트인 Comments 컴포넌트, 그리고 Comments 에서 useQuery의 queryFn으로 지정한 getComments 함수의 코드입니다. Comments 컴포넌트의 useQuery의 staleTime은 10초로 해두었고, queryFn인 getComments 함수의 fetch는 revalidate를 60초로 해둔 상황입니다. useQuery의 staleTime보다 fetch의 revalidate 시간을 길게 한건 react query로 인한 클라이언트측의 캐시와, next.js의 fetch에 의한 서버 측의 캐시의 차이점을 확인해보려고 그런것입니다. A 페이지에 처음 들어와 page 컴포넌트가 실행되면 ['posts', id, 'comments'] 쿼리로 인해 받아온 댓글(comments) 데이터가 화면에 보입니다. 이 댓글에는 랜덤으로 생성된 이미지가 있습니다. 우선 10초가 지나기 전에는 새로고침에도 기존의 데이터 그대로 보이고, fetch 요청을 받는 백엔드 api에도 요청이 들어오지 않습니다. react query로 인해 쿼리가 실행되지 않아서 그런 것이겠죠? 그러고 10초가 지나 ['posts', id, 'comments'] 쿼리가 stale 상태가 된 후에 A 페이지를 새로고침하면 ['posts', id, 'comments'] 쿼리는 다시 fresh 해지는데 백엔드 api에는 요청이 들어오지 않았더라구요. 화면상의 댓글의 이미지들도 이전과 동일하게 나옵니다. 저는 이게 "A 페이지에 들어와 page 컴포넌트가 실행되면 ['posts', id, 'comments'] 쿼리가 실행되어 fetch 요청이 실행되는데 이 ['posts', id, 'comments'] 쿼리는 서버 컴포넌트에서 프리패치 되는 거니까, 즉 fetch가 서버쪽에서 실행되는 거니까 react query의 캐시가 아닌 fetch의 캐시 설정을 따른다. 그렇기 때문에 ['posts', id, 'comments'] 쿼리가 실행되어 fetch가 실행되지만 fetch의 캐시는 남아있으니까 캐싱된 값을 사용해서 백엔드 api에는 요청이 안들어온것이다." 라고 생각했고 이걸 확인하기위해 새로고침을 해본것이었기 때문에 이 결과에 대해 납득하긴 했는데요.. 이 생각이 맞는건지가 일단 궁금합니다. 그리고 진짜 이해가 안되는건 이겁니다. A 페이지에 들어오고 10초가 지나 ['posts', id, 'comments'] 쿼리가 stale해지면 이번에는 다른 페이지로 이동했다가 A 페이지로 다시 돌아옵니다. A 페이지에서 새로고침을 하지 않고 사이트 내에서 페이지 이동으로 A 페이지에 다시 들어오는거죠. 이러면 백엔드 api에 요청이 들어오더라구요. 이게 왜 그런건지 모르겠습니다. 10초가 지나 ['posts', id, 'comments'] 쿼리는 stale 해졌지만 60초는 안지나서 fetch의 캐시는 유효한... 위의 새로고침 경우와 동일한 상황인데 새로고침 시에는 api로 요청이 안들어오고, 다른 페이지로 이동했다가 다시 돌아온 경우는 api로 요청이 들어오네요. A 페이지에서 새로고침을 하나, 다른 페이지에서 A 페이지로 페이지 이동을 하나, 둘 다 page 컴포넌트가 실행되고 ['posts', id, 'comments'] 쿼리가 서버에서 프리패치되니까 fetch가 서버에서 실행되는거 아닌가요? 근데 왜 새로고침하면 fetch의 캐싱이 적용되는것처럼 백엔드 api로 요청이 안들어오고 페이지 이동 시에는 들어올까요... 이걸 아무리 생각해도 모르겠습니다. 60초가 지난 후에는 새로고침 시에도 백엔드 api로 요청이 들어오더라구요. 이것으로보아 60초 전에는 새로고침 시 요청이 안들어오는게 fetch의 캐시 때문인것도 맞는 거 같은데, 왜 페이지 이동 시에는 60초 전에도 캐싱값을 안쓰고 api로 요청을 보내는지 모르겠습니다. 어떤 메커니즘으로 이렇게 되는것일까요? 아직 Next.js의 캐싱과 react query에 대해 잘 알지 못해서 이해가 안됩니다.. ㅠ 도와주십쇼..!

Next.js 코드 가독성..

안녕하세요 프론트앤드 1년차에 다가가고 있는 신입 개발자입니다. 현재 Next14를 사용하고 있으며 코드의 가독성, 효율성을 많이 고려하면서 코드를 짜려고하는데 너무 고민이 되네요 저보다 앞서서 달려가고 있는 개발자 선배님의 생각을 듣고싶습니다 ㅠㅠ... 2가지가 궁금합니다. 먼저 첫번째 이미지처럼 Version에 관련된 파일을 저렇게 분리했을 때 저는 Version의 최상위 Layout.tsx에서 모든 것을 선언하기가.. 너무 오히려 가독성이 안좋다고 생각을 하고 있습니다 즉, 변수나 함수를 모두 최상위 Layout.tsx에서 선언 및 정의를 해두고 props로 내려주는게 이상하다고 생각을 합니다. 변수, 함수, useEffect 모두 직접 해당 변수나 함수를 컨트롤하는 부분에서 선언 및 가공을 하는게 맞다고 생각을 합니다. 최상위 Layout.tsx가 너무 무거우면 오히려 나는 VersionDataTable에 관련된 변수나 함수만 보려고 하였으나 최상위 Layout.tsx를 보고 아 이게 VersionDataTable에 필요하구나 뭐가 필요없구나, useEffect의 의존성 배열까지 고려하는것이 불필요하다고 생각을 하고 있습니다.. 근데 같이 프론트 앤드 개발하시는 분께서는 '단기적으로 절대 코드가 변하지 않는다고 생각하면 그 말씀이 맞는데 그건 아니잖아요? 우리는 계속 유지보수를 할거고 그러면 결과적으로 A에서만 사용하던 변수나 함수들을 A,B,C에서 같이 사용할 수 있게 변경하게 되면 그때 변경하면 유지보수 측면에서 너무 안좋습니다. 최상위에 모두 선언이나 정의를 해두고 props로 내려주는게 맞다 이런 형식으로 코드를 작성하면 몇개월 뒤에 코드를 수정할 때 A가서 수정했다가 C가서 수정했다가 D가서 수정하실 거에요? 바로 알아보실 수 있겠어요?' 라고 말씀을 하시더라구요.. 물론 몇개월 뒤에 코드를 보거나 하면 제가 작성한 코드인데도 저는 헷갈리는 경우가 많습니다. 그러나 최상위에 모두 선언 및 정의해둬도 마찬가지 아닌가..? 유지보수 측면에서 뭐가 안좋은거지..? 라고 생각되게 됩니다.. 선배님의 말씀을 따라가고는 싶은데 이해가 안돼서요 제가 아직 기본기가 많이 부족한 상황이라 이 상황에서 말씀드리면 이론부터 말하며 설득시키기가 부족하다고 생각하기 때문에 말씀드리면 오히려 '저는 이렇게 생각해요 틀렸는데요?' 라고 말하는 것 같아 말다툼이 될 것 같습니다. 2. 밑 사진을 보면 modalTemplate라는 폴더, ConfirmTemplate이라는 폴더가 존재하는데요 이것에 대해서 저는 사용하는 용도에 따라서 Create면 Create Create와 Update를 동시에 할 수 있는거면 BundleCreateAndUpdate 이런 형식으로 각각의 파일을 생성을 하고 문법상 공유되는 부분은 중복이 되어서 실제로 보여주는 부분을 영역으로 나눠서 BasicOptions, SelectList, VersionDetail, VersionOptions로 나누고 각각의 파일에서 사용하는 부분만 불러와서 쓰는 형식으로 코드를 작성했습니다. 그러나 이렇게 용도에 따라 구분하지 않고 최상위 Layout.tsx파일 하나만 만들고 ModalType이라는 props를 받아서 ModalType이 create, update, create&update, delete ... 등 JSX에서 삼항 연산자를 써서 처리를 할수도 있습니다. 저는 ModalType으로 처음에 구분하다보니 나는 'create' 속성일 때 어떤 형식으로 되는지 코드로 보고싶은데.. 그러면 너무 뜯어서 봐야하더라구요 그래서 용도에 맞게 파일을 만들고 거기서 form을 불러오기만해서 중복 코드를 줄이는 방식을 택했습니다.. (더 나은 코드라고 생각했습니다.) 그랬지만 선배님께서 'ModalType으로 나누는게 더 좋아요 저렇게 지으면 가독성이 너무 떨어지고 파일의 이름이 너무 길어지잖아요 이상하지 않나요?' 라고 말씀을 하시더라구요... 물론 가독성은 사람마다 다른거 알고있습니다. 그러나 ModalType으로 나누기 시작하면 한도 끝도없이 나누고 ModalType이 delete일 때만 사용하는 함수, create일 때만 사용하는 함수 등 필요없는 함수도 너무 많아져서 용도에 맞게 파일을 구분하고 거기서 중복 코드만 최대한 줄이자! 라고 생각하여 코드를 작성했는데 이 내용도 말씀드려 봤지만 '가독성' 이라는 이유 하나만으로 너무 안좋다고 합니다.. 진짜 안좋은건가요..? Next 도 그렇고 프론트 앤드 너무 어렵습니다..

Next.js v13 React Essentials부분 질문입니다.

[카테고리]App Router->React Essentials https://nextjs.org/docs/getting-started/react-essentials 1번문장 Client Components에서 "Once "use client" is defined in a file, all other modules imported into it, including child components, are considered part of the client bundle."라는 문장과 2번문장 Composing Client and Server Components에서 "On the server, React renders all Server Components before sending the result to the client. This includes." 1번문장과 2번문장이 모순된것처럼 느껴집니다. 1번문장을 "use client"를 명시한 file에 import된 하위 자식컴포넌트 역시 Client Components로 간주된다고 이해했는데, 그럼 2번문장과 같이 클라이언트 컴포넌트하위에 있는 "Server Components nested inside Client Components" 역시 클라이언트 컴포넌트로 간주되어서 클라이언트 컴포넌트의 렌더링방식을 따라야하는 것 아닌가요??

NextJS에서 Component 호출 할 때 getServerSideProps 호출 방법이 있나요?

JSTL 이나 Thymeleaf 하다가 NextJS 하려니 많이 해메고 있네요. @,@;;; 우선 시나리오는 ProductList.html 페이지에서 서버로부터 상품 목록 주욱 받아 화면 출력 하는 것 까지는 했어요. 이때 서버 목록은 getServerSideProps 함수에서 받아 처리 했구요. 이제 상품 이름 클릭 했을 때 상세 정보를 Layer 화면으로 띄우려는데 그게 잘 안되네요. Thymeleaf에선 해당 페이지만 빌드 돼 html 형태로 받아 올 수 있었는데 nextjs는 어떻게 해야 하는지 모르겠어요. // 상품 상세 내용 export default function ProductModalLayer({ product }:IProduct) { return (<div> {product.name}</div>); } export async function getServerSideProps(context: any) { // 서버 통신으로 product 상세 정보 전달 const data = ... 생략... return { props: { product: data, }, }; } ------ ProductList 부분에서 상품 이름을 클릭 했을 때 const ModalView = dynamic(() => import("../ProductModal.layer")); // 선언 ... // 화면 그리기 <ModalView seq={prod.productSeq}></ModalView> 이런 형식으로 호출 하니까 getServerSideProps를 호출 하지 않네요. 다른 방법으로 fetch를 이용해 호출 해 봤는데 const res = await fetch("/ProductModal.layer?seq=" + seq); const content = await res.text(); 이렇게 하면 getServerSideProps를 호출 하지만 html Tag가 엄청 붙어 나오고 return 의 결과가 아닙니다. getServerSideProps를 고집 하는 이유는 서버 호출 인터페이스는 꼭 서버에서 이뤄지게 하고 싶어서에요. 브라우져 디버거로 노출 안되게 하고 싶어서. 힌트나 방법좀 부탁 드려요~ 다시 JSTL 이나 Thymeleaf로 돌아 갈 수 없어~~~~

next.js 특정 페이지에 컴포넌트 미출력 기능 구현 이슈(use client 사용)

로그인페이지(/user-page)에서 footer컴포넌트를 안띄우는 기능을 구현하고 싶어 footer 컴포넌트를 csr 방식으로 사용하도록 'use client' 줬습니다. 근데 error ReferenceError: window is not defined 라는 에러가 뜨면서 적용이 안되네요ㅠㅠ nextjs는 ssr이니까 window에 접근하기 위해선 'use client'를 주면 된다고 들었는데 왜 안되는걸까요?? 찾아보니까 useEffect 쓰라해서 useEffect도 써봤는데 에러가 뜨진않지만 여전히 적용안되더라구요. 문제점 알려주시면 감사하겠습니다ㅠㅠㅠ <footer.tsx 파일> 'use client' import React, { useEffect } from 'react' import style from '../styles/footer.module.scss' const Footer = () => {     if (window.location.pathname === '/user-page') return null return ( -생략- ) } <루트 layout.tsx 파일> 'use client' export default function RootLayout({     children, }: {     children: React.ReactNode }) {   return (         <html lang="ko">             <body className={inter.className}>                 <div className="wrap bg-white">                     <Header />                     {children}                     <Footer />               </div>             </body>         </html>     ) }

next auth 소셜로그인으로 일반적인 jwt 인증방식 구현하기

안녕하세요 next auth로 소셜로그인을 구현중입니다. 따로 spring boot 서버가 있는 상태이구여. 궁금한점이 있습니다. 1. 소셜로그인 완료 시 account에 들어있는 accessToken과 refreshToken을 아래와 같은 코드로 빼낸 뒤 서버에 보내서 일반적인 jwt방식으로 구현을 하려고 합니다. 하지만 token들이 jwt형식이 아니라 ' . ' 구분없이 하나의 문자열로 나옵니다. jwt토큰 형태로 바꾸는 방법이 따로 있나요? 아니면 이와 같은 방식은 잘못된 방식인건가요?? ``` session: { jwt: true, }, callbacks: { async jwt({ token, account, profile, user }: any) { if (account && user) { token.accessToken = account.access_token; token.refreshToken = account.refresh_token; token.id = profile.id; } return token; }, async session({ session, token, user }: any) { if (session) { session.accessToken = token.accessToken; session.refreshToken = token.refreshToken; session.user.id = token.id; } return session; }, }, ``` 2. 만약 소셜로그인 시 생성된 토큰들을 spring boot 서버에 보내는 방법이 불가능하다면 따로 토큰을 생성해야 하는건가요? 그렇다면 next-auth를 사용하는 이점이 사라지는게 아닐까요??

Nextjs async 서버컴포넌트 질문있습니다.

// page.tsx import WeatherList from "@/components/containers/main/WeatherList"; export default function Home({ searchParams, }: { searchParams: { country: string }; }) { const country = searchParams.country ? searchParams.country : "kr"; return ( <> <WeatherList country={country} /> </> ); } // server component export default async function WeatherList({ country }: { country: string }) { const res = await fetch( `http://localhost:3000/api/cityList?country=${country}` ); const cityList = await res.json(); return ( ... ); } 'WeatherList' cannot be used as a JSX component. page.tsx 에서 WeatherList 컴포넌트부분에 위와같은 에러가 뜹니다.. @types/react 를 18.2.8 버전으로 바꿔줘도 해결이안되는데 저와 같은분 계실까요?

NextJS 폴더 구조 (pages 폴더 아래에 components)

안녕하세요, 회사 프로젝트 폴더 구조를 잡아야 하는데 궁금한 게 있습니다. (NextJS 버전은 12 사용 중) next.config.js에서 아래의 설정 후 pages 폴더 아래 components를 두는 구조를 사용하시는 분 계실까요? pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'] https://nextjs.org/docs/pages/api-reference/next-config-js/pageExtensions 아래와 같은 구조가 괜찮다고 판단되어 사용하려고 하는데 어떨지 의견 좀 여쭤보고 싶습니다. - apps/ --- pages/ ----- Main/ ------- page.ts ------- component.ts ------- hook.ts ------- test.ts --- shared-components/ ------- Button.ts ------- Input.ts 기존에는 pages 폴더에는 index.js만 두고 components 폴더 아래에 모든 컴포넌트들을 두는 구조로 사용 중인데, 프로젝트의 페이지가 많아지면서 특정 페이지에서만 사용하는 독립적인 컴포넌트들이 많아지다 보니 components 폴더에 있는 파일들이 구분이 잘 안됩니다. 어떤 페이지에서 사용하는 컴포넌트인지, 재사용 가능한 컴포넌트인지 명확한 구분이 어려워서 위와 같은 구조를 고민해보았는데 혹시 실제 비슷하게라도 사용 중인 곳이 있는지 궁금합니다. components 폴더 아래 page 별로 구분할 수도 있지만, 독립적인 컴포넌트는 page.ts와 같이 있는 게 조금 더 유지보수면에서 편할 것 같아 고민해보았습니다. 더 좋은 의견이 있다면 환영입니다. 어떤 폴더 구조를 사용하고 계시는지, 추천할만한 구조가 있다면 꼭 의견 부탁드리겠습니다!

nextjs styled-component ssr 에러

모든 분들이 격어보셨을 에러에 대해 해결이 되지 않아 질문 드려봅니다. 아래 참고를 통해 nextjs ssr에서 styled-component가 적용되게 시도했습니다 (현재 app router 방식을 사용하고 있습니다) 하지만 동일하게 했을 때 여전히 아래와 같은 오류가 떴습니다. babel, swc 둘 다 시도 했을 때 동일 했고 혹시 제가 놓지고 있는 부분이 있을까요? 4번까지 진행했습니다. nextjs styled-component typescript 오류 : Error: 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-component 참고 : https://dev.to/rashidshamloo/using-styled-components-with-nextjs-v13-typescript-2l6m#5

Next 13과 react 18 서버 컴포넌트 관련 질문 (질문이 좀 길어요)

안녕하세요, 요즘 next 13과 react 18 서버 컴포넌트에 대해서 본격적으로 파고 있는데 궁금한 점들이 여러가지 떠올라서 글 올립니다. 1. data fetching 방식의 변경 우선 기존에는 동적인 data fetching의 경우, getServersideProps를 통해서 페이지의 root에 전달해주고는 방식이 일반적이었는데 서버에서만 돌아가는 서버 컴포넌트가 나오면서 data fetching을 컴포넌트 단위로 할 수 있게되면, 기존에 사용하던 getServersideProps 같은 유틸 함수들은 사라지는건가요? 기존에는 정적 데이터면 getStaticProps, 동적 데이터면 getServersideProps, 유저 상호작용이 필요한 데이터면 client side useEffect를 많이 사용했는데 next 13부터는 이게 뭔가 뒤섞이는 것 같아서 혼란스럽네요. next 13을 위한 data fetching 패턴이나 방법론이 있나요? 2. 기존에 사용하던 상태 관리 프레임워크의 변화 위와 어느정도 연결되는 이야기입니다. 기존에 react-query를 많이 사용했는데 next 13부터 컴포넌트 레벨로 데이터를 요청할 수 있고 또 next 차원에서 요청 중복 제거를 지원하게되면 react-query 처럼 서버 상태관리와 캐싱을 강점으로 내세우는 프레임워크의 역할을 어떻게 되는건가요? 서버 상태를 컴포넌트 레벨에서 가져올 수 있다고 해도, 여전히 전역 상태 관리가 필요할 것 같은데 recoil, redux, zustand 같은 상태 관리 프레임워크도 계속 쓰게되는 것일까요? 계속 쓰게 된다고 하면 서버 컴포넌트와의 호환성은 어떻게 되는건가요? 만약 전역 상태 관리를 써야하는 컴포넌트라면 서버 컴포넌트가 될 수 없는 것인가요? 3. 서버 구성의 변경 다른 곳은 모르겠지만, 저는 next 백엔드를 단순히 요청을 전달하는 용도로만 쓰고 실제로 중요한 로직은 다른 백엔드 서버에서 처리하는 구조를 가지고 있었습니다. 하지만, next 13을 보니 서버 컴포넌트에서 DB 연결을 직접해서 데이터를 가져오는 예시들도 있더군요. 사이드 프로젝트라면 모르겠지만, 실 서비스에서도 서버 컴포넌트 - DB 직접 연결 이라는 구조가 성립할 수 있는건가요? 기존에 데이터를 취합하고 내려주던 백엔드 서버의 역할이 생략되는거라고 생각해도 되는건가요? 4. 왜 다시 20년 전으로 돌아가는거죠 제가 20년 동안 개발한 것은 아니지만, 예전에는 웹페이지를 서버에서 완전히 로드해서 내려주는 형태를 가지고 있었다고 배웠습니다. 그러다가 개개인의 기기가 스펙이 좋아지면서 서버 부하를 줄이고 클라이언트 쪽에서 역할을 분담하는 방식이 떴다고 들었어요. react도 처음에는 이런 프레임워크로 나왔다고 알고 있습니다. 그러다가 next, remix 같은 프레임워크들이 서버사이드 렌더링을 적극적으로 장려하면서 다시 회귀하고 있다고 들었습니다. 최근에는 react 마저 서버 컴포넌트를 발표했잖아요. 왜 이제와서 다시 서버 쪽에서 페이지를 로드하는 방식을 추진하고 있는건가요? 질문을 적고보니 좀 길어졌는데, 서핑을 좀 해봐도 마땅히 도움이되는 글이 별로 없어서 현직자들은 어떻게 생각하시는지 의견을 얻고자 질문 올립니다!