묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
커리큘럼 관련 문의드립니다.
안녕하세요!먼저 좋은 강의 제공해주셔서 감사드립니다. 이번에 프로젝트로 FE는 React, BE는 Django로 진행하게 되었고, 제가 Django를 맡게 되어 해당 강의를 수강 중에 있습니다. 커리큘럼을 보다보니 아래 처럼 Django로 FE부분도 구현하는 섹션들이 있는데요!섹션 (8) 장고 Form을 활용한 생산성 높은 입력폼 처리섹션 (10) 장고 주도의 웹 프론트엔드 기술과 웹 컴포넌트섹션 (11) (포토로그 프로젝트) 장고 중심의 웹 서비스 개발하기 물론 나중에는 다 듣겠지만.. 아무래도 시간이 한정되어 있어, Django로 BE만 구현한다고 했을 때 이러한 섹션들도 필수적으로 들어야 하는 것인지 궁금합니다. 예를들면 이후 강의를 수강하려면 앞 강의가 필수적이여야 한다던지 등의 사유가 있을 것 같습니다. 만약에 프로젝트만을 위해서 일단 스킵 가능하다면, 이외에도 혹시 스킵 가능한 섹션이 있는지 문의드립니다!좋은 강의 만들어주셔서 감사합니다~!
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
커스텀 DateConverter
커스텀 DateConverter04-03 강의 링크가 잘못되어 있는 것 같습니다!!
-
미해결코드로 배우는 React with 스프링부트 API서버
서비스를 인터페이스로 구축하는 이유를 여쭙고싶습니다
서비스를 인터페이스로 구축하는 이유를 여쭙고싶습니다!
-
미해결Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
7.2 강 구글 로그인 1 강좌에서 redirectTo 로 설정해도 이동이 안되요.
강좌 잘 보고 있습니다. package.json 버전은 모두 같습니다.강좌에 있는데로 모두 supabase.com 에서 셋팅을 했습니다.구글 로그인 코드도 다 정상 작동이 되는데 http://localhost:3000 으로 이동을 하네요. Redirect URLs 에는 http://localhost:3000/auth 로 작성해 둔 상태입니다. ㅠㅠ; "use client"; import useHydrate from "@/hooks/useHydrate"; import { createSupabaseBrowserClient } from "@/lib/client/supabase"; import { Auth } from "@supabase/auth-ui-react"; import { ThemeSupa } from "@supabase/auth-ui-shared"; import { useEffect, useState } from "react"; export default function AuthUI() { const [user, setUser] = useState(); const supabase = createSupabaseBrowserClient(); const isMount = useHydrate(); const getUserInfo = async () => { const result = await supabase.auth.getUser(); console.log(result); }; useEffect(() => { getUserInfo(); }, []); if (!isMount) return null; return ( <section className="w-full"> <div className="mx-auto max-width-[500px]"> <Auth // redirectTo={process.env.NEXT_BUBLIC_AUTH_REDIRECT_TO} redirectTo="http://localhost:3000/auth" supabaseClient={supabase} appearance={{ theme: ThemeSupa, }} onlyThirdPartyProviders providers={["google", "github"]} /> </div> </section> ); }
-
미해결Next + React Query로 SNS 서비스 만들기
메인페이지 새로고침할때 hydration 오류
로그인하고 홈 메인페이지에서 새로고침하면 오류 뜹니다PostForm.tsx쪽 TextAreaAutosize 라이브러리 이 부분 주석하면 에러 안뜨는데 라이브러리 문제인지 제가 잘못한건지 모르겠습니다 key값 없다고 하는데 TrendSection.tsx에 {data?.map((trend) => ( <Trend trend={trend} key={trend.tagId} /> ))}여기 trend.tagId에서 tagId를 못찾는거 같은데 백엔드 문제인가요???타입스크립트 Hashtag에 tagId: number 있어요
-
미해결실무에 바로 적용하는 스토리북과 UI 테스트
tsconfig
meta 객체의 프로퍼티에서 tsconfig.json에 포함되어 있지 않습니다. 라고 에러가 뜨는데 어떤 설정을 해주어야할까요?tsconfig.json{ "files": [], "references": [ { "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" } ] }tsconfig.app.json{ "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, "lib": ["ES2020", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true, /* Bundler mode */ "moduleResolution": "bundler", "allowImportingTsExtensions": true, "isolatedModules": true, "moduleDetection": "force", "noEmit": true, "jsx": "react-jsx", /* Linting */ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, }, "include": ["src"] } tsconfig.node.json{ "compilerOptions": { "target": "ES2022", "lib": ["ES2023"], "module": "ESNext", "skipLibCheck": true, /* Bundler mode */ "moduleResolution": "bundler", "allowImportingTsExtensions": true, "isolatedModules": true, "moduleDetection": "force", "noEmit": true, /* Linting */ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, }, "include": ["vite.config.ts"] }
-
해결됨한 입 크기로 잘라먹는 Next.js(15+)
서버 성능 문의
안녕하세요. 강사님React 로 CSR 개발/배포된 시스템을 운영해본 적이 있는데요.nginx 가 단순히 정적 파일들만 클라이언트로 전달하니 서버 성능을 생각할 필요가 전혀 없었습니다.그런데 Next.js 강의를 들으면서 SSR/SSG 에 대한 설명을 듣고나니 이 경우에는 서버 성능이 중요할 것 같다는 생각이 드네요. SSR/SSG 는 사용자 요청량이 증가하는만큼 서버 스펙도 확장될 수 있는 고민들이 필요한가요?
-
미해결처음 만난 리덕스(Redux)
render 함수에 관해 질문있습니다.
state 변화에 따른 ui를 렌더링 할 때 render 함수 내부 코드가 매우 방대할 경우 보편적으로 어떤 로직 처리를 하는지 궁금합니다.(memo만 추가했지만, memo 렌더링 코드외의 다른 관련없는 렌더링 코드들이 방대할 경우입니다.) 강사님 좋은 강의 감사합니다!! 많이 배우고 있습니다 :)
-
해결됨코드로 배우는 React 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 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 with 스프링부트 API서버
7장 테스트 에러
똑같이 코딩해서 테스트를 했는데 에러가 발생합니다.이유가 무엇일까요?똑같이 코딩해도 에러가 발생하니 답답하네요.
-
미해결코드로 배우는 React 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(15+)
상호작용이 있어도 동적인 페이지라면 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+.