묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
docker compose up 오류
postgres 강의 중 docker compose up을 실행하면 아래와 같이 오류가 뜹니다.version: "3" services: db: image: postgres: latest container_name: postgres restart: always ports: - "5432:5432" environment: POSTGRES_USER: "${DB_USER_ID}" POSTGRES_PASSWORD: "${DB_USER_PASSWORD}" volumes: - ./data:/var/lib/postgresql/datayml 파일은 수업 그대로 위/아래와 같이 작성했는데 4번쨰 줄 postgres 부분이 인식이 안되는것 같아서 이것 때문인지... 구글링을 해봐도 해결 방법을 모르겠습니다!
-
미해결Next + React Query로 SNS 서비스 만들기
error.js 와 loading.js 에 대한 질문이 있습니다.
Next에서 자체적으로 제공하는 에러 바운더리인 error.js 와 서스펜스인 loading.js는 '서버 컴포넌트'의 에러와 로딩만 처리하는 것인가요? 예를 들어 서버 컴포넌트인 page.tsx의 하위 클라이언트 컴포넌트에서 에러가 발생했을 때는 error.js에서 캐치가 안 되는 것인가요...?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
7강중에서
혹시 뭐가 문제 일까요..?const express = require('express'); // 내가 설치한 express 모듈을 가져온다. const app = express() // 새로운 express 앱을 만든다. const port = 5000 // 포트 const bodyParser = require('body-parser'); const {User} = require("./models/User"); // User 가져옴 //application/x-www-form-urlencoded app.use(bodyParser.urlencoded({extended:true})) // 바디 파서가 클라이언트에서 오는정보를 서버에서 분석해서 가져올수있게 하는것 //application/josn app.use(bodyParser.json()); // 애는 json타입을 분석해서 가져옴 const mongoose = require('mongoose'); mongoose.connect('mongodb+srv://jin:0000@jin.p3agn.mongodb.net/?retryWrites=true&w=majority&appName=jin',{ useNewUrlParser: true, useUnifiedTopology: true }).then(()=> console.log('MongoDB Connected...')) .catch(err => console.log(err)) app.get('/', (req, res) => { // 앱을 넣은 후에 루트디렉토리에 오면 헬로월드 실행? res.send('Hello World!') }) app.post('/register',(req,res) => { //회원 가입 할때 필요한 정보들을 클라이언트에서 가져오면 // 그것들을 데이터 베이스에 넣어준다. const user = new User(req.body) // user 정보들을 데이터베이스에 넣기위해 req.body로 작성하면됨 // req.body 에는 정보들 있음 user.save((err,userInfo)=>{ // 만약 저장을 할때 err가 있을때 클라이언트한테 json형식으로 알려줌 if(err) return res.json({success:false, err}) // err 메세지 전달 return res.status(200).json({ // status200은 성공했다는 의미 success:true }) }) // save는 몽고디비에서 오는 메서드 // req.body 정보들이 user모델에 저장이됨 }) app.post('/register', async (req, res) => { try { const user = new User(req.body); // user 정보들을 데이터베이스에 넣기위해 req.body로 작성하면됨 // req.body 에는 정보들 있음 const userInfo = await user.save(); // 만약 저장을 할때 err가 있을때 클라이언트한테 json형식으로 알려줌 res.status(200).json({ success: true, userInfo }); } catch (err) { // err 메세지 전달 res.json({ success: false, err }); } }); app.listen(port, () => { console.log(`Example app listening on port ${port}`) //앱을 포트 5000번에서 실행 })
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
캐시를 기다리는 중. 질문드립니다
공통 컴포넌트 만들기 과정에서 Header left right버튼을 넣어서 수정하고 랜더링하는 과정에서 무한 대기로 빠집니다.Header를 삭제하면 랜더링이 잘 되는데, 동일하게 코드를 따라했음에도 Header를 넣으면 "캐시를 기다리는 중"이라는 문구와 함께 대기 상태로 접어듭니다원인을 잘 모르겠습니다
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
부록) remark 강의 중 parmas 오류
부록 따라가고 있는데 그대로 소스 코드를 작성해서 실행하면 localhost에 아래와 같이 오류가 뜹니다.오류 메시지가 [id].tsx 파일에 아래와 같이 뜨긴 하는데 강의 중 강사님 화면에도 그렇고 강의 자료에도 똑같이 오류 메시지(빨간 줄)가 있더라구요. next13부터 라우팅 방식이 달라졌다고 하던데 버전 문제인건지...아래 params 오류 제외하고는 모두 동일한 소스 코드를 작성했고 오류도 없습니다.해결 방법이 궁금합니다. **혹시 몰라서 [id].tsx 랑 post.ts 코드 전체 첨부합니다.<id.tsx>import React from 'react' import Head from 'next/head' import { GetStaticPaths, GetStaticProps } from 'next' import { getAllPostIds, getPostData, getSortedPostsData } from '../../lib/post' const Post = ({postData}: { postData: { title: string date: string contentHtml: string } }) => { return ( <div> <Head> <title>{postData.title}</title> </Head> <article> <h1>{postData.title}</h1> <div> {postData.date} </div> <div dangerouslySetInnerHTML={{__html: postData.contentHtml}} /> </article> </div> ) } export default Post export const getStaticPath: GetStaticPaths =async () => { const paths = getAllPostIds(); return{ paths, fallback: false } } export const getStaticProps: GetStaticProps =async ({params}) => { const postData = await getPostData(params.id as string) return { props: { postData } } }<post.ts>import fs from 'fs' import path from 'path' import matter from 'gray-matter' import { remark } from 'remark'; import remarkHtml from 'remark-html/lib'; const postsDirectory = path.join(process.cwd(), 'posts') console.log('process.cwd()', process.cwd()); console.log('postsDirectory.cwd()', postsDirectory); export function getSortedPostsData(){ //Get file names under /posts const fileNames = fs.readdirSync(postsDirectory) console.log('fileNames', fileNames); //fileNames ['pre-rendering.md', 'ssg-ssr.md'] const allPostsData = fileNames.map(fileName => { //Remove ".md" from file name to get id const id = fileName.replace(/\.md$/, '') //Read markdown file as string const fullPath = path.join(postsDirectory, fileName) const fileContents = fs.readFileSync(fullPath, 'utf8') //Use gray-matter to parse the post metadata section const matterResult = matter(fileContents) //Combine the data with the id return{ id, ...(matterResult.data as {date: string; title: string}) } }) //Sort posts by date return allPostsData.sort((a,b) => { if(a.date<b.date){ return 1 } else{ return -1 } }) } export function getAllPostIds(){ const fileNames = fs.readdirSync(postsDirectory); return fileNames.map(fileName => { return { params: { id: fileName.replace(/\.md$/, '') } } }) } export async function getPostData(id: string){ const fullPath = path.join(postsDirectory, `${id}.md`) const fileContents = fs.readFileSync(fullPath, 'utf-8') const matterResult = matter(fileContents); const processedContent = await remark().use(remarkHtml).process(matterResult.content); const contentHtml = processedContent.toString(); return { id, contentHtml, ...(matterResult.data as {date: string; title: string}) } }
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
외래키 관계라는게 무슨 의미인지 잘 모르겠습니다.
안녕하세요 강사님.post 모델과 코멘트, 즉, post 테이블과 코멘트는 외래키 관계라고 설명해주셨는데, 제가 db용어를 잘 모르고, 찾아봐도 와닿지 않아서 이해가 잘 되지 않았습니다. 감사합니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
route handlers 에 대한 질문이 있습니다
안녕하세요, app router에 대해 계속 공부하다가 route handlers 에 대한 궁금증이 해결되지 않아 질문하게 됐습니다. Next app router에서 정확히 route handlers를 사용해야 하는 이유가 무엇인가요?제가 생각했을 땐 서버 데이터 캐싱이나 API 엔드포인트를 숨길 수 있다는 장점이 있는데 이건 서버 컴포넌트에서 fetch하는 것으로도 대체가 되는데 route handlers를 사용해야 하는 특별한 이유가 따로 있는 것인가요? 모든 API를 route handlers로 하면 Next서버에 부하가 걸릴텐데 어떻게 해결할 수 있을까요? 이 부분은 공식문서에서 제가 못 찾은 것 같은데, 만약 외부 백엔드 API가 있고 여기에 데이터 요청을 할 때클라이언트 컴포넌트에서의 모든 API 요청을 1차로 route handler에 하고 여기서 외부 백엔드 API로 요청하게되면 route handlers에 요청이 몰리게 되는데 이때 Next 서버에 걸리는 부하를 어떻게 해소할 수 있을까요?
-
해결됨한 입 크기로 잘라먹는 Next.js(15+)
[id].tsx 서버사이트 호출시 2회씩 되는데요 ㅠㅠ
안녕하세요.[id].tsx 소스인데요 .. fetch를 2씩 호출되는 걸까요? ㅠ2번째 호출될때는 id 값에 undefinded 로 되어서 페이지 오류가 발생됩니다 ㅠㅠ뭐가 잘못 된것일까요?캡쳐 보내드립니다.
-
미해결손에 익는 Next.js - 공식 문서 훑어보기
안녕하세요 generateStaticParams 관해서 질문
// [country]/layout.tsx const SUPPORTED_LANGS = ['kr', 'us']; interface LangMap { [key: string]: string; } const LANG_MAP: LangMap = { kr: 'ko', us: 'en' }; export function generateStaticParams() { return SUPPORTED_LANGS.map(country => ({country})); } export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, params, }: { children: React.ReactNode; params: { country: string }; }) { return ( <html lang={LANG_MAP[params.country]}> <body> <TanstackQueryProvider> <div className='container'> <BannerWrap/> <Header/> <main>{children}</main> <Footer/> </div> </TanstackQueryProvider> </body> </html> ); }import Banner from "@/component/Banner"; import { getQueryClient } from "@/component/TanstackQueryOption"; import { fetchBanner } from "@/fetch/getReviews"; import { dehydrate, HydrationBoundary } from "@tanstack/react-query"; export default function BannerWrap () { const queryClient = getQueryClient(); queryClient.prefetchQuery({ queryKey:['banners'], queryFn: fetchBanner, }) return ( <HydrationBoundary state={dehydrate(queryClient)}> <Banner /> </HydrationBoundary> ) } 빌드 후 next start로 테스트 중 의문점이 들어서 질문드립니다!generateStaticParams 와 fetch의 revalidate 10초, tanstackQuery staleTime 10초 로 설정후RootLayout 에서 BannerWrap에 prefetchQuery와 HydrationBoundary 를 통하여 data를 prefetch하고있는데 이게 layout이 전역에서 실행되서 그런지 생성된 페이지 개수만큼 요청을 날리는데 next에서는 같은 요청이 중복되지 않도록 요청을 캐시하고 중복 요청을 제거 한다고 배웠는데이렇게 중복으로 요청하는 이유는 뭘까요?
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
spread 연산자는 연산자가 맞을까요
연산자는 계산을 한 후에 그 값을 알 수 있어야 한다고 알고 있었는데 spread 연산자는 결과값이라는게 존재하지 않는 것 같습니다. typeof 연산자를 통해서 데이터 타입을 확인하는것도 불가능하고let arr1 = [1, 2, 3];let obj1 = {a:1, b:2, c:3};라 했을 때 console.log(...arr1); 는 출력이 되지만 console.log(...obj1);는 에러가 뜨는 것을 봐서는 연산을 통한 결과값을 적용하는 것이 아니라 그냥 코드 내의 글자 자체가 ...arr1 이 1, 2, 3 또는 arr1[0], arr1[1], arr1[2] 로 치환되는것 같습니다. 코딩을 할 때 중요할 것 같진 않지만 작동 방식이 궁금해서 질문 드립니다.
-
해결됨한 입 크기로 잘라먹는 Next.js(15+)
[실습용 백엔드 서버 세팅하기] npx prisma db push 명령어 입력시 에러
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. npx prisma db push 명령어를 입력했을 때 위와 같은 에러가 나고있습니다. 같은 에러 발생하신경우 있나요?
-
미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
Heroku 데이터로드 문제.
heroku에 deploy하고나서 openApp하면 데이터가 로드 돼야 하는데 안돼는 이유가 먼지 그리고 axios 통신을 localhost:5000해서 문제인지 궁금합니다.
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
TodoList에서 checkBox 업데이트를 위한 onUpdate의 props전달?
TodoList에서 checkBox 업데이트를 위한 onUpdate의 props전달?에 대해서 질문이 있습니다 첫 번째, 부모 컴포넌트에서 자식 컴포넌트로 값(변수, 리스트, 함수 등)을 전달하는 것이 props인건지 햇갈립니다 두 번째, onUpdate의 구동방식은 이해되었습니다. 다만 app.jsx가 아니라 List.jsx에서 만들어도 되지 않나? 라는 의문점이 있습니다. 리렌더링 때문일까요? 아님 다른 이유가 있는건지 궁금합니다.
-
해결됨한 입 크기로 잘라먹는 Next.js(15+)
Next JS 14.2 public 폴더 미생성
15버전이 아닌 14.2버전으로 create-next-app을 진행했는데 public 폴더가 자동으로 생기지않습니다.15버전은 자동으로 생성이 되는데 14.2버전에는 생성되지 않는 이유가 있나요??
-
미해결Next + React Query로 SNS 서비스 만들기
hydration 에러
제로초님 하신대로 그대로 프로젝트를 생성하고 실행했더니 화면은 그대로 뜨는데 에러가 1개 있어서 봤더니 hydration 에러라고 뜨네요 ㅠㅠ 지금 z-com 프로젝트를 수업용 / 연습용으로 총 2개 진행중인데 수업용 프로젝트는 이런 에러가 없었는데 연습용에서 에러가 발생하네요. 아래는 에러 코드입니다 ! Console ErrorHydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used- A server/client branch if (typeof window !== 'undefined'). - Variable input such as Date.now() or Math.random() which changes each time it's called. - Date formatting in a user's locale which doesn't match the server. - External changing data without sending a snapshot of it along with the HTML. - Invalid HTML tag nesting. It can also happen if the client has a browser extension installed which messes with the HTML before React loaded
-
미해결코드로 배우는 React with 스프링부트 API서버
카카오연동이후 product 사진 깨지는현상
왜그런지 궁금해서 post맨으로 product read할때header에 accessToken넣고 요청보내봤는데 정상호출이됩니다근데.리액트에서 만든 인터셉터에서 에러 메시지를 받으면 원래요청에 새로운 엑세스 토큰 넣어서해주는 기능이있는걸 봤어요 어> 근데 이러면 사진이 안깨져야 말이맞지않나요?어디서 잘못된건지 잘 모르겠어서 질문드립니다
-
해결됨Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
7.2 구글 로그인 1 - AuthUI 구현 구글 로그인 관련 질문드립니다.
'use client'; import React, { useEffect, useState } from 'react'; import { Auth } from '@supabase/auth-ui-react'; import { ThemeSupa } from '@supabase/auth-ui-shared'; import { createSupabaseBrowserClient } from '@/lib/client/supabase'; import useHydrate from '@/app/hooks/useHydrate'; const AuthUI = () => { const supabase = createSupabaseBrowserClient(); const isMount = useHydrate(); const [user, setUser] = useState(); const getUserInfo = async () => { const result = await supabase.auth.getUser(); console.log(result); if (result?.data?.user) setUser(result?.data?.user); }; const handleLogout = async () => { supabase.auth.signOut(); window.location.reload(); }; useEffect(() => { getUserInfo(); }, []); if (!isMount) return null; return ( <section className="w-full"> <div>{user ? `로그인 됨${user?.email}` : '로그아웃'}</div> <> {user && ( <button onClick={handleLogout} className="border-2 border-black"> 로그아웃 </button> )} </> <div className="mx-auto max-w-[500px]"> <Auth redirectTo={process.env.NEXT_PUBLIC_AUTH_REDIRECT_TO} supabaseClient={supabase} appearance={{ theme: ThemeSupa }} onlyThirdPartyProviders providers={['google']} /> </div> </section> ); }; export default AuthUI; {"code":400,"error_code":"validation_failed","msg":"Unsupported provider: provider is not enabled"}구글 로그인 시 해당 에러가 발생합니다 설정 같은 부분은 강의에 맞게 설정하였습니다
-
미해결코드로 배우는 React with 스프링부트 API서버
색션 4 - 조회기능 구현에 makeDiv관련 질문 있습니다.
makeDiv를 써서 화면 구성을 했는데 컴포넌트를 쓰는것과 저렇게 불러오는것의 차이가 있을까요?
-
해결됨한 입 크기로 잘라먹는 Next.js(15+)
익스텐션이름
강의 중간에 요런식으로 설명나오는거 어떤 익스텐션 깔아야하나요?
-
해결됨한 입 크기로 잘라먹는 Next.js(15+)
Next.js 페이지 별 레이아웃 적용 방법에 대한 궁금증입니다!
안녕하세요!!페이지 별 적용을 원하는 레이아웃이 있는 경우 getLayout 함수를 컴포넌트의 메서드로 추가하여 적용하는 강의를 들었습니다. 그런 식으로 레이아웃을 설정하는 방법은 처음 봐서 매우 새롭고 신기하고 즐거운 강좌였습니다. 감사합니다! 궁금한 점이 있는데요, 그렇게 했을 때 페이지별로 최상단에 SearchableLayout 컴포넌트를 적용하는 것과 무슨 차이가 있는지 궁금했습니다. (혹은 강의에서 그렇게 설명해주신 이유가 궁금합니다!)
