173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요! 이번에 새롭게 강의를 듣기 시작하게 된 sunny라고 합니다! 학습용 DB를 설정하고 있는 상황인데됴! 말씀주신대로 code를 다운로드 받고, 사용 폴더로 이동시킨 후 npm i , Supabase 설정하여 .env 파일에 DATABASE_URL 변수까지 잘 설정해주었습니다. 이후 과정인 npx prisma db push 과정에서 소요시간이 너무 오래 걸려서.. 혹시 제가 확인해볼 수 있는 방법 혹은 예측되는 상황이 있으실까 하여 질문드리게 되었습니다!! ㅠㅠ 혹시 몰라 node_modules 폴더 삭제 후 재실행 했는데도 동일한 현상이 발생하고 있는데.. 제가 확인해볼 수 있는 부분들이 있을까요?? 감사합니다!
Sunny Sideup
2024-10-22T00:22:02.759Z
댓글 2
좋아요 0
조회수 164
미해결
[코드팩토리] [입문] 9시간만에 끝내는 코드팩토리의 Javascript 무료 풀코스
처음 접하는건데 이해를 계속 못해서 두려움에 떨고 있었거든요. ㅠㅠ 강의 중간중간 용기를 주시네요. 저같이 무지한 사람들은 그런 말이 정말 실낱같은 희망입니다. 정말 감사드려요.
모짜르트
2024-10-21T23:58:18.421Z
댓글 2
좋아요 0
조회수 259
미해결
따라하며 배우는 리액트 네이티브 기초
안녕하세요. 진도가 100% 완료가 안됩니다. 첨부드린 것처럼 마지막 강의가 . 으로 되어 있고 눌러봐도 영상 나오는 것도 없고 강의가 진행되는게 없습니다. 마지막 강의 완료가 안되서 진도율이 98%에서 멈춰있고 100%가 안되는거 같은데 확인 부탁드립니다. 다른 강의는 모두 수강했습니다.
2024-10-21T23:51:06.791Z
댓글 1
좋아요 0
조회수 236
해결됨
따라하며 배우는 리액트 네이티브 기초
안녕하세요. 모두 수강했는데 진행도가 100% 안찍히는데 원인을 알수있을까요? 혹시 마지막 강의 "." 제목으로 된것 떄문인가요? 이거 어떻게 수강 체크하는지 알수있을까요??
김정우
2024-10-21T04:49:23.579Z
댓글 1
좋아요 0
조회수 252
해결됨
Next + React Query로 SNS 서비스 만들기
// src/components/TanstackQueryOption.ts import { isServer, QueryClient, defaultShouldDehydrateQuery, } from '@tanstack/react-query' function makeQueryClient() { return new QueryClient({ defaultOptions: { queries: { staleTime: 15 * 1000, }, dehydrate: { shouldDehydrateQuery: (query) => defaultShouldDehydrateQuery(query) || query.state.status === 'pending', }, }, }) } let browserQueryClient: QueryClient | undefined = undefined export function getQueryClient() { if (isServer) { return makeQueryClient() } else { if (!browserQueryClient) browserQueryClient = makeQueryClient() return browserQueryClient } } // src/components/TanstackQueryProvider.tsx 'use client' import { getQueryClient } from '@/component/TanstackQueryOption'; import { QueryClientProvider, } from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { ReactNode } from 'react' export default function TanstackQueryProvider({ children }: { children: ReactNode }) { const queryClient = getQueryClient() return ( <QueryClientProvider client={queryClient}> {children} <ReactQueryDevtools initialIsOpen={process.env.NEXT_PUBLIC_MODE === 'local'} /> </QueryClientProvider> ) } // src/app/layout.tsx import Banner from "@/component/Banner"; import Footer from "@/component/Footer"; import Header from "@/component/Header"; import TanstackQueryProvider from "@/component/TanstackQueryProvider"; import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "@/app/global.css"; const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en"> <body> <TanstackQueryProvider> <div className='container'> <Banner/> <Header/> <main>{children}</main> <Footer/> </div> </TanstackQueryProvider> </body> </html> ); } // src/app/page.tsx import ProductList from "@/component/ProductList"; import { getQueryClient } from "@/component/TanstackQueryOption"; import { getProducts } from "@/fetch/getProducts"; import { dehydrate, HydrationBoundary, QueryClient } from "@tanstack/react-query"; import Image from "next/image"; export default function Page () { const newQueryClient = getQueryClient(); newQueryClient.prefetchQuery({ queryKey:['products'], queryFn: getProducts, }) return ( <> <section className='visual-sec'> <Image src="/visual.png" alt="visual" width={1920} height={300}/> </section> <section className="product-sec"> <h2>상품 리스트</h2> <HydrationBoundary state={dehydrate(newQueryClient)}> <ProductList /> </HydrationBoundary> </section> </> ) }; 'use client' // src/components/ProductList.tsx import Product from "@/component/Product"; import { getProducts } from "@/fetch/getProducts"; import { useQuery, useSuspenseQuery } from "@tanstack/react-query"; import styles from "@/component/ProductList.module.css"; export const ProductList = () => { const {data, isLoading, isFetching} = useSuspenseQuery({queryKey: ['products'], queryFn: getProducts}); console.log(`isLoading: ${isLoading}, isFetching: ${isFetching}`) return ( <div className={styles.productList}> {data?.map((product: any) => ( <Product key={product.item_no} product={product} /> ))} </div> ) }; export default ProductList; // src/components/Product.tsx import Link from "next/link"; import Image from "next/image"; export const Product = ({product} : any) => { return ( <Link href={`/product/${product.item_no}`} prefetch> <Image src={product.detail_image_url} alt={product.item_name} width={500} height={300} /> <h3>{product.item_name}</h3> <span>{product.price}</span> </Link> ) } export default Product; // src/app/product/[id]/page.tsx export default function ProductDetailPage() { return ( <> 상품 상세페에지 </> ) } // src/fetch/getProducts.ts export const getProducts = async () => { const res = await fetch(`http://localhost:9090/api/products`, { method: "GET", headers: { "Content-Type": "application/json", }, next: { revalidate: 10, } }); const currentTime = new Date().toLocaleTimeString(); const data = await res.json(); if (typeof window === "undefined") { console.log('fetch products', 'server', currentTime); console.table(data); } else { console.log('fetch products', 'client', currentTime); console.table(data); } if(!res.ok) { throw new Error("Failed to fetch products"); } return data; } // src/server/server.js import express from "express"; import cors from "cors"; const app = express(); const port = 9090; app.use(cors()); app.use(express.json()); app.get("/api/products", (req, res) => { const currentTime = new Date().toLocaleTimeString(); console.log(`Received request at ${currentTime}`); const products = [ { item_no: 122997, item_name: '상품 1', detail_image_url: 'https://picsum.photos/id/237/500/500', price: 75000, }, { item_no: 768848, item_name: '상품 2', detail_image_url: 'https://picsum.photos/id/238/500/500', price: 42000, }, { item_no: 552913, item_name: '상품 3', detail_image_url: 'https://picsum.photos/id/239/500/500', price: 240000, }, // { // item_no: 1045738, // item_name: '상품 4', // detail_image_url: // 'https://picsum.photos/id/240/500/500', // price: 65000, // }, ]; res.json(products); }); app.listen(port, () => console.log('Server is running')); 안녕하세요, fetch와 tanstackQuery를 사용해서 ISR 동작을 테스트하고있었습니다. 테스트 마다 .next 파일은 지우고 새로 build 하여 run start를 통하여 확인하였습니다. staleTime과 revalidate 의 시간이 서로 상이한데, 동일하게 설정했을때, 시간의 간격을 두었을때의 차이점을 직접 확인하려고 하였는데 어떤점에서 차이가 나는지 보고도 이해가 안가서 질문드립니다. 궁금점 1. staleTime과 revalidate 는 gcTime 처럼 staleTime이 revalidate보다 적은 시간으로 설정을 해야하는지? 그렇다면 그 이유는 gcTime보다 작게 설정하는 이유와 같은지? 가 궁금합니다. 2. server.js에 주석처리해놓은 item을 다시 주석을 해지하면 처음 revaildate의 10초 설정으로 인해 새로고침을해도 아이템은 계속 페이지에서 3개만 노출되고있고, 상품을 클릭해서 이동을 하면서 staleTime의 설정인 15초가 되었을때는 client 요청이 발생하여 아이템이 4개로 잘 노출되고있습니다. 하지만 이 때 새로고침을 하게되면 처음 fetch revalidate로 cache되어있던 데이터인 아이템 3개까지만 노출이 되고 새로고침을 한번 더 진행해야 그때서야 4개로 노출이되는데 클라이언트와 서버 쪽이 서로 싱크가 안맞는거같은데 이러한 문제점이 왜 일어나는지 이해가 잘안됩니다! 3. 확장된 fetch와 tanstackQuery를 어떻게 분리해서 사용해야할까도 많이 고민이 되는데.. queryFn 에 이미 fetch로 만들어둔 함수를 가져와 사용하니 분리라는 개념을 생각하면 안되는걸까요? fetch를 독립적으로 사용하는 경우도있다고하는데 이 경우는 왜 독립적으로 사용하는지 잘모르겠습니다.
react next.js react-query next-auth msw
밍끼
2024-10-21T03:11:42.742Z
댓글 1
좋아요 0
조회수 264
미해결
코드로 배우는 React 19 with 스프링부트 API서버
각각 vscode, intelliJ로 생성하였는데 다른 툴을 사용한 이유가 무엇인가요 그리고 두 프로젝트는 역할이 어떻게 다른가요
react spring-boot jpa jwt redux-toolkit
이서연
2024-10-20T16:31:08.072Z
댓글 1
좋아요 0
조회수 202
미해결
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
안녕하세요! 먼저 좋은 강의 제공해주셔서 감사드립니다. 이번에 프로젝트로 FE는 React, BE는 Django로 진행하게 되었고, 제가 Django를 맡게 되어 해당 강의를 수강 중에 있습니다. 커리큘럼을 보다보니 아래 처럼 Django로 FE부분도 구현하는 섹션들이 있는데요! 섹션 (8) 장고 Form을 활용한 생산성 높은 입력폼 처리 섹션 (10) 장고 주도의 웹 프론트엔드 기술과 웹 컴포넌트 섹션 (11) (포토로그 프로젝트) 장고 중심의 웹 서비스 개발하기 물론 나중에는 다 듣겠지만.. 아무래도 시간이 한정되어 있어, Django로 BE만 구현한다고 했을 때 이러한 섹션들도 필수적으로 들어야 하는 것인지 궁금합니다. 예를들면 이후 강의를 수강하려면 앞 강의가 필수적이여야 한다던지 등의 사유가 있을 것 같습니다. 만약에 프로젝트만을 위해서 일단 스킵 가능하다면, 이외에도 혹시 스킵 가능한 섹션이 있는지 문의드립니다! 좋은 강의 만들어주셔서 감사합니다~!
react python django web-api htmx
uk.choi
2024-10-20T15:30:47.772Z
댓글 1
좋아요 0
조회수 136
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
커스텀 DateConverter 04-03 강의 링크가 잘못되어 있는 것 같습니다!!
react python django web-api htmx
uk.choi
2024-10-20T12:28:11.420Z
댓글 2
좋아요 0
조회수 118
미해결
코드로 배우는 React 19 with 스프링부트 API서버
서비스를 인터페이스로 구축하는 이유를 여쭙고싶습니다!
react spring-boot jpa jwt redux-toolkit
김우철
2024-10-20T07:49:45.058Z
댓글 1
좋아요 0
조회수 192
미해결
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
강좌 잘 보고 있습니다. 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> ); }
2024-10-20T06:59:38.806Z
댓글 3
좋아요 0
조회수 444
미해결
SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
https://www.youtube.com/watch?v=uI3k9Ol-Mp4 영어 강의 보고 따라 하려니까 어려워서 그런데 단계별로 설명좀 해주실수 있나요?
HTML/CSS javascript sass jquery scss
현석오
2024-10-20T06:06:23.593Z
댓글 1
좋아요 1
조회수 266
미해결
SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
플러그인을 사용해야 되나요 아니면 피그마 ai 정식 버젼을 기다려야 되나요? text to figma , image to figma 괜찮은거 추천해주시면 감사여
HTML/CSS javascript sass jquery scss
현석오
2024-10-20T05:51:53.673Z
댓글 1
좋아요 1
조회수 229
미해결
SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
이런 테이블 피그마로 쉽게 그리는법 좀 알려주세요 강의에서 참고할만한 부분이 있을까여?
HTML/CSS javascript sass jquery scss
현석오
2024-10-20T04:40:36.721Z
댓글 2
좋아요 1
조회수 285
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
// promise 복습 promise 객체(executor 콜백함수(resolve, reject)) const delay= // delay는 ms값을 받아 promise 객체를 리턴 (ms)=>{return new Promise( // 인수로 함수를 받음, resolve(성공)를 인수로 받아 처리하는 지연함수(executor) (resolve)=>{setTimeout( // setTimeOut은 callback함수와 ms초값을 받음 ()=>{resolve();},ms);} ); } const start=()=>{delay(2000).then(()=>{console.log("대기");});} start(); // async const delay2= (ms)=>{return new Promise( (resolve)=>{setTimeout( ()=>{resolve();},ms);} ); } // 함수의 오른쪽에 작성 -> promise 객체 반환 const start2=async()=>{delay2(2000).then(()=>{console.log("async 대기");});} console.log(start2()); 섹션 4에 5강 async, await를 수강하던 중에 영상과 다른 결과가 출력 되어 질문 드립니다. 두 코드의 결과를 서로 비교하고 싶어서 코드를 2개로 나누었는데요. async를 적은 코드는 pending상태의 promise객체 가 나온다고 하셨는데 저는 계속 fulfilled가 나와서 제가 코드를 잘못 썼는지 질문 드리고 싶습니다. 위의 코드의 영향이 있을까 싶어 주석 처리 해도 결과는 같았습니다.
javascript async promise 객체 지연함수
고구마의고구마
2024-10-20T03:50:38.483Z
댓글 2
좋아요 1
조회수 183
미해결
Next + React Query로 SNS 서비스 만들기
로그인하고 홈 메인페이지에서 새로고침하면 오류 뜹니다 PostForm.tsx쪽 TextAreaAutosize 라이브러리 이 부분 주석하면 에러 안뜨는데 라이브러리 문제인지 제가 잘못한건지 모르겠습니다 key값 없다고 하는데 TrendSection.tsx에 {data?.map((trend) => ( <Trend trend={trend} key={trend.tagId} /> ))} 여기 trend.tagId에서 tagId를 못찾는거 같은데 백엔드 문제인가요??? 타입스크립트 Hashtag에 tagId: number 있어요
react next.js react-query next-auth msw
br
2024-10-19T09:48:19.928Z
댓글 2
좋아요 0
조회수 164
미해결
실무에 바로 적용하는 스토리북과 UI 테스트
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"] }
react typescript tailwind-css storybook ui-testing
jaehong2782
2024-10-19T07:19:47.125Z
댓글 1
좋아요 0
조회수 196
미해결
따라하며 배우는 타입스크립트 A-Z
interface Vehicle<T> { name: string; color: T; option: T; } 질문1. Generics과 n개의 제네릭타입설정 강사님의 예시는 1개의 Generics를 이용하셨는데 위의 코드와 같이 만약에 n개의 Generics타입을 지정 할 수도 있을까요?? 질문2. 만약 n개의 제네릭타입이 가능하다면? 어떻게 코드를 수정할 수 있을까요?? const car: Vehicle<{price: number}> = { name: 'Car', color: 'red', option: { price: 1000 } }
영준
2024-10-18T15:06:14.958Z
댓글 0
좋아요 0
조회수 107
미해결
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
노션에서 보니 우분투랑 mac만 있어서 설치에 어려움을 겪고 있네요 ㅜㅜ 혹시 window버전으로 설치를 한다면 수업에 지장이 있을까요?
javascript node.js docker rest-api nestjs
140015
2024-10-18T14:37:34.631Z
댓글 2
좋아요 0
조회수 221
해결됨
진짜! 자바스크립트(Javascript) - 기초부터 고급까지
브라우저 환경에서 window객체가 Global 스코프 역할까지 한다고 이해했습니다. 그런데 let,const로 정의한 함수들을 this, window를 명시하지 않고 실행하면 잘 실행되는 이유를 말씀하시면서 'let,const로 정의하면 Global스코프라고 볼 수 있는 Script스코프에 올라간다' 라고 하셨는데 여기서 말하는 Global 스코프는 window객체를 말하는 Global스코프와 다른건가요? 그럼 Global스코프(브라우저의 window보다 포괄적인 범위)는 내부에서 또 Script스코프와 Global스코프(브라우저환경에선 window객체)로 나눠지는거라고 이해하면 되는게 맞을까요...?
팀오
2024-10-18T12:19:24.338Z
댓글 2
좋아요 0
조회수 202
해결됨
누구나 쉽게 시작하는 웹개발 기초 (Basic Web Development Course)
안녕하세요 좋은 강의 감사합니다. 혹시 강의 시 사용된 강의 자료를 받아 볼 수 있을까요? 정중히 요청 드려봅니다. 감사합니다.
HTML/CSS javascript openai-api
사랑2
2024-10-18T08:57:53.571Z
댓글 2
좋아요 0
조회수 254
