묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨코드로 배우는 React 19 with 스프링부트 API서버
spring boot 3.3.2도 호환되나요?
spring boot 3.3.2도 호환되나요?
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
3-4 질문합니당!
오류코드:(venv) PS C:\workspace\melon_clone> python manage.py migrate musicnot found: C:\workspace\melon_clone\.envOperations to perform: Apply all migrations: musicRunning migrations: No migrations to apply.(venv) PS C:\workspace\melon_clone> 이렇게 조회하면 sql문장 다 나오는데이제 migrate가 적용이 안됩니당..인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
미해결Next + React Query로 SNS 서비스 만들기
tanstack-query prefetchQuery 질문
안녕하세요 강의를 듣는중 추가적으로 tanstack-query를 공부하다가 혼자서 도저히 이해를 할수 없는 부분이 있어서 이 부분에 대해 혹시 조언을 받을수 있을까 싶어 문의드립니다. prefetchQuery가 개인적으로 잘 이해가 안되어서 별도로 프로젝트를 생성하여 기본적인 것부터 다시 공부하고 있었습니다만, tanstack-query 공식사이트에서 권장하던 방법대로 임의적으로 코드를 생성하였더니 router.push()로 다른 페이지에 갔다가(->홈으로[/]) 다시 돌아오는것(->Post페이지(/post))을 반복하다보면 가끔 서버 컴포넌트에 있는 prefetchQuery안의 fetch와 클라이언트 컴포넌트에 있는 useQuery의 fetch가 동시에 실행이 되는 일이 가끔 발생을 해서요. fetch가 이중으로 실행이 되고 있는것 같은데 아무리 코드를 살펴봐도 제가 잘못한 부분을 찾을수가 없어서 조언을 구합니다ㅠ page.tsximport { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query'; import Post from './_component/Post'; import getPostRecommends from './_hook/fetch'; export default async function tanstackQuery() { const queryClient = new QueryClient(); await queryClient.prefetchQuery({ queryKey: ['movies'], queryFn: getPostRecommends, }); const dehydratedState = dehydrate(queryClient); return ( <HydrationBoundary state={dehydratedState}> <Post /> </HydrationBoundary> ); } post.tsx'use client'; import { useQuery } from '@tanstack/react-query'; import getPostRecommends from '../_hook/fetch'; import { useRouter } from 'next/navigation'; export default function TanstackQuery() { const { data } = useQuery({ queryKey: ['movies'], queryFn: getPostRecommends, }); const router = useRouter(); type PostItem = { id: number; title: string; }; return ( <div> <button onClick={() => router.push('/')}>홈으로</button> {data?.map((item: PostItem) => { return ( <div key={item.id}> <h2>{item.title}</h2> </div> ); })} {data?.message} </div> ); } getPostRecommendsexport default async function getPostRecommends() { if (typeof window === 'undefined') { console.log('서버에서 fetch 실행' + new Date()); } else { console.log('클라이언트에서 fetch 실행' + new Date()); } const response = await fetch('https://jsonplaceholder.typicode.com/posts?_page=1&_limit=10', { cache: 'no-store', }); if (!response.ok) { throw new Error('Failed to fetch data'); } const res = await response.json(); return res; } 기본 provider 설정'use client'; import { isServer, QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactNode } from 'react'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; function makeQueryClient() { return new QueryClient({ defaultOptions: { queries: { staleTime: 6 * 1000, }, }, }); } type Props = { children: ReactNode }; let browserQueryClient: QueryClient | undefined = undefined; function getQueryClient() { if (isServer) { return makeQueryClient(); } else { if (!browserQueryClient) browserQueryClient = makeQueryClient(); return browserQueryClient; } } export default function Providers({ children }: Props) { const queryClient = getQueryClient(); return ( <QueryClientProvider client={queryClient}> {children} <ReactQueryDevtools /> </QueryClientProvider> ); } 서버 콘솔 브라우저 콘솔 위에 캡쳐화면 같이 fetch가 거의 동시간에 발생을 하고 있는 모습입니다. next.js router cache 때문에 30초마다 서버 컴포넌트쪽이 리랜더링 되어서 페이지를 새로고침을 하지 않고 router.push로 다시 페이지에 들어가도 서버 컴포넌트쪽이 다시 실행된다는건 이해를 했는데, 그렇다면 초기 랜더링할때와 똑같이 데이터가 prefetch되어서 클라이언트쪽 useQuery가 실행이 되지 않아야하지 않나요? 왜 두번이나 fetch가 도는건지 아무리 자료를 찾아봐도 잘 모르겠어서 결국 문의드리게 되었습니다ㅠ
-
미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
몽고DB
몽고db질문입니다. 코드를 따라해보는중 몽고DB에서 데이터부분이 안들어 왔습니다. 어떤부분이 문제인지 궁금합니다.
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
aws react 배포
리액트를 배포하려고 하는데 502error -nginx- 가 뜹니다. 환경 개요의 상태는 'Degraded'가 발생합니다. 이벤트의 로고에는 'Environment health has transitioned from Info to Degraded. Application update completed 28 seconds ago and took 73 seconds. Impaired services on all instances.' 와 같은 문구가 발생합니다.
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
템플릿 엔진 - 텍스트 파일 사용
안녕하세요.02-03 장고 핵심 기능 리뷰 #02 - 폼, 템플릿 강의 수강하다가 템플릿 부분에서 궁금한 점이 있어 문의드립니다.마지막에 별도의 txt 파일로 나누어 관리를 하면 더 좋다고 말씀해주셨는데, txt 파일을 사용하면 I/O 바운드로 성능 많이 저하될 거 같습니다.아니면 템플릿 엔진을 사용하면 별도로 메모리로 관련 txt 파일을 들고 있나요?
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
7장 테스트 에러
똑같이 코딩해서 테스트를 했는데 에러가 발생합니다.이유가 무엇일까요?똑같이 코딩해도 에러가 발생하니 답답하네요.
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
섹션4 목록처리를 보고있어요
리스폰스로 json값이 오는건 이해가가는데 ], "pageNumList": [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], "pageRequestDTO": { "page": 5, "size": 10 }, "prev": false, "next": true, "totalCount": 105, "prevPage": 0, "nextPage": 11, "totalPage": 0, "current": 0} 이값들은 api어느부분에서 전송하는건지 알수있을까요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
logout할 때, server로 요청을 보내서 authUser middleware를 통과하도록 하는 이유?
logout할 때, server로 요청을 보내서 authUser middleware를 통과하도록 하는 이유?handleLogout function에서 local storage의 accessToken을 삭제시키고, store의 user 정보만 initial state, 그리고 isAuth 등을 false로 바꾸면 그만일텐데, 왜 server에 요청을 보내는 과정이 필요할까요!?
-
미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
No routes matched location Error Component Stack error 질문입니다.
질문 있어서 남깁니다.메인페이지에서 Link를 타고 upload, list 들어가서 화면이 로드 돼야하는데 돼지 않고 하얀바탕으로 돼면서 Error표시 없이 No routes matched location "/list" Error Component Stack가 표시 됍니다. 어떤문제이고 해결 방법이 무엇인지 궁금합니다.Ps. 질문이 이해 안가실것 같아서 스샷 올려놨습니다.
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
상호작용이 있어도 동적인 페이지라면 RSC만 보내나요?
3.6 네비게이팅 18분 10초 관련해서 질문있습니다. 이전 서버 컴포넌트 강의에서는 상호작용이 없는 페이지는 JS가 없기 때문에 RSC로 HTML을 만들어 보내고, JS 번들은 보내지 않는다고 이해했습니다.그래서 프로젝트상 /book1/1 페이지는 상호작용이 없는 페이지라 프리페칭 받아도 RSC Payload만 받는게 맞지 않나?라 생각했습니다. 그런데 /book/1 페이지가 동적인 페이지라서 JS 번들을 안 받는다고 말씀하셔서 좀 헷갈립니다.즉, 말씀하시는 부분이 상호작용이 있는 페이지라도 동적인 페이지라면 RSC만 보내주신다는 말씀인가요??
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
webkit-text-size-adjust 오류
왜 이러는지 알 수 있을까요? 찾아봐도 모르겠습니다... '-webkit-text-size-adjust' is not supported by Chrome, Chrome Android, Edge 79+, Firefox, Safari. Add 'text-size-adjust' to support Chrome 54+, Chrome Android 54+, Edge 79+.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
학습 자료 rest-api도 사용 가능한가요?
Swagger 사용 가능한 건지 문의드립니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Viewer.css관련 질문
강의에서 보여주시는 코드와 같이 작성하면 모양이 사진과 같이 나와요 emotion_img_wrapper영역 background-color영역에 emotionName이 안들어가는거 같아요. height를 300으로 늘리면 포함이 되긴해요. width도 같이 300으로 늘리면 다시 안들어가고요
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
deleteReviewAction 에서 _: 타입 질문
안녕하세요! 강의를 듣다가 deleteReviewAction 에서 _: any 타입에 질문이 있습니다. 타입스크립트를 배울 때 되도록이면 any 는 쓰지 말아야 한다고 알고 있는데 만약 팀원끼리 any 를 쓰지 말자고 약속을 한다면 any 말고 unknown, never 라는 타입을 써야 하는지 궁금합니다.
-
미해결Next + React Query로 SNS 서비스 만들기
useFormState, useFormStatus 관련 질문
[섹션4-4 클라이언트 컴포넌트에서 ServerActions 사용하기]제가 사용하고있는 라이브러리 버전입니다. "next": "^15.0.0-canary.181", "next-auth": "^5.0.0-beta.22", "react": "^18", "react-dom": "^18" useFormState현재 공식문서에선 useFormState from 'react-dom'이 아닌 useActionState from 'react` 로 사용하도록 되어있더라구요. 그래서 해당 변경사항대로 사용해도 문제가 없을지 궁금합니다. useFormStatus공식문서를 읽어보는데 "useFormStatus는 동일한 컴포넌트에서 렌더링한 <form>에 대한 상태 정보를 반환하지 않습니다."라고 명시가 되어있더라구요. 그런데 현재 제로초님의 코드는 동일한 컴포넌트의 form에 대해서 pending 값을 받고 있는데, 문제가 발생하지 않는 이유에 대해서 궁금합니다.
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
settings.py에 대해
저기 부분만 자꾸 빨간줄로 뜨는데 왜이러는지 모르겠습니다.. 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
미해결
import 문제 사용하지않은 요소 오류
사진처럼 보시면 text 태그를사용하지 않아서 import 문에서 빨간줄이 생기고 오류가 뜹니다. 원래같은 경우에는 어두워지기만하고 에러가 뜨지 않는 걸로 알고 있습니다.혹시 어떤 패키지를 깔아야 저 오류가 해결될까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
css 파일 작성시 > 표시 여부
안녕하세요. 투두리스트 ui 구현 중 질문이 생겨 댓글 남깁니다"Header.css" 파일은 h1 태그에 접근 시 ".Header > h1" 과 같이 > 표시를 사용하는데"Editor.css" 파일은 > 표시 없이 그냥 ".Editor input" 로 작성하시더라구요이 둘의 차이가 뭔가요?좋은 강의와 친절한 답변 항상 감사드립니다 :) 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
로컬스토리지
import { Route, Routes } from "react-router-dom"; import { useReducer, useRef, createContext, useEffect, useState } from "react"; import Home from "./pages/Home"; import New from "./pages/New"; import Diary from "./pages/Diary"; import Notfound from "./pages/Notfound"; import Edit from "./pages/Edit"; const mockData = [ { id: 1, createdDate: new Date("2024-10-01").getTime(), emotionId: 1, content: "1번일기 내용", }, { id: 2, createdDate: new Date("2024-10-10").getTime(), emotionId: 2, content: "2번일기 내용", }, { id: 3, createdDate: new Date("2024-09-09").getTime(), emotionId: 3, content: "3번일기 내용", }, { id: 4, createdDate: new Date("2024-10-04").getTime(), emotionId: 3, content: "3번일기 내용", }, ]; function reducer(state, action) { let nextState; switch (action.type) { case "INIT": { return action.data; } case "CREATE": { nextState = [...state, action.data]; break; } case "UPDATE": { nextState = state.map((item) => item.id === action.data.id ? action.data : item ); break; } case "DELETE": nextState = state.filter((item) => item.id !== action.id); break; default: return state; } localStorage.setItem("diary", JSON.stringify(nextState)); return nextState; } export const DiaryStateContext = createContext(); export const DiaryDispatchContext = createContext(); function App() { const [isLoading, setIsLoading] = useState(true); const [data, dispatch] = useReducer(reducer, []); const idRef = useRef(0); useEffect(() => { const storedData = localStorage.getItem("diary"); if (!storedData) { setIsLoading(false); return; } const persedData = JSON.parse(storedData); if (!Array.isArray(persedData)) { setIsLoading(false); return; } let maxId = 0; persedData.forEach((item) => { if (Number(item.id) > maxId) { maxId = Number(item.id); } }); idRef.current = maxId + 1; dispatch({ type: "INIT", data: persedData, }); setIsLoading(false); }, []); const onCreate = (createdDate, emotionId, content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, createdDate, emotionId, content, }, }); }; if (isLoading) { return <div>데이터 로딩중입니다...</div>; } const onUpdate = (id, createdDate, emotionId, content) => { dispatch({ type: "UPDATE", data: { id, createdDate, emotionId, content, }, }); }; const onDelete = (id) => { dispatch({ type: "DELETE", id, }); }; return ( <> <DiaryStateContext.Provider value={data}> <DiaryDispatchContext.Provider value={{ onCreate, onUpdate, onDelete }}> <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/diary/:id" element={<Diary />} /> <Route path="/edit/:id" element={<Edit />} /> <Route path="*" element={<Notfound />} /> </Routes> </DiaryDispatchContext.Provider> </DiaryStateContext.Provider> </> ); } export default App; 질문폭탄 죄송합니다ㅠㅠㅠ 왜 저는 새로고침하면 빈배열로 화면에 나타날까요? 로컬스토리지에 저장은 되더라구요그리고 let nextState; 이렇게 저장하면 state값이 바뀔 때 nexState도 초기화 되지 않나요? 초기화 되고 나서 값을 저장한 후 사용해서 상관이 없는건가요?