묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
백틱 적용이 안 돼요..
위 화면과 같이 백틱으로 감싸서 사용할 때, 적용이 안 되는데, 서칭을 해보면 Browser 호환 문제라는 말들이 있습니다. 영상에서와 같은 Chrome을 통한 Console창에서 실습 중인데 무엇이 문제일까요?
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Prettier 적용 안되는 이슈
강의에서 소개해주신 것 처럼 Format on Save 옵션을 적용하였는데도, 저장 시 자동으로 Formatter가 작동하지 않아 서치해보니,Default Formatter 옵션이 위처럼 없음(null)로 설정이 된 경우에는 Prettier로 적용해주어야 정상동작하더라구요.해당 내용 공유드려요 ㅎ
-
해결됨Next + React Query로 SNS 서비스 만들기
강좌 보면서 개인프로젝트에 적용중입니다. build시 "Arrow" cannot be used as a JSX component 에러가 납니다.
./src/_components/Carousel.tsx 110:6 Warning: React Hook useEffect has a missing dependency: 'nextFn'. Either include it or remove the dependency array. react-hooks/exhaustive-deps (....lint warning문구 생략) info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules Linting and checking validity of types .Failed to compile. ./src/_components/Carousel.tsx:137:12 Type error: 'Arrow' cannot be used as a JSX component. Its type 'FC<PropsWithChildren<ArrowProps>>' is not a valid JSX element type. Type 'FunctionComponent<PropsWithChildren<ArrowProps>>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'. Type 'ReactElement<any, any> | null' is not assignable to type 'ReactNode'. Type 'ReactElement<any, any>' is not assignable to type 'ReactNode'. Property 'children' is missing in type 'ReactElement<any, any>' but required in type 'ReactPortal'. 135 | className={`h-full w-full ${inArrow ? 'absolute' : ''} max-w-full`}> 136 | {!!showNavButton && ( > 137 | <Arrow | ^ 138 | direction="left" 139 | executeFn={prevFn} 140 | inArrow={inArrow} error Command failed with exit code 1. 'use client'; import { FC, PropsWithChildren, useEffect, useState } from 'react'; interface ArrowProps { direction: 'left' | 'right'; executeFn: () => void; inArrow?: boolean; hoverStyle?: string; } const Arrow: FC<PropsWithChildren<ArrowProps>> = ({ direction, executeFn, inArrow, hoverStyle, children, ...props }) => { const [hoverColor, setHoverColor] = useState(hoverStyle || undefined); useEffect(() => { hoverStyle && setHoverColor(`hover:${hoverStyle}`); }, [hoverStyle]); const returnString = direction === 'left' ? '<' : '>'; return ( <div onClick={executeFn} className={`${inArrow ? 'absolute z-50' : ''} ${direction === 'left' ? 'left-0 top-0 rounded-l-lg' : 'right-0 top-0 rounded-r-lg'} center-vertical flex h-full w-[30px] cursor-pointer text-[30px] ${hoverColor && hoverColor}`} {...props}> {returnString} {children} </div> ); }; export default Arrow; next build를 했을때 해당 에러가 Arrow컴포넌트에서 발생하였습니다. Arrow컴포넌트에서 제가 정의한 FC<PropsWithChildren<ArrowProps>>타입이 유효한 JSX element type이 아니라는 메시지 인거 같습니다. 이 에러가 나는 이유가유효한 JSX엘리먼트가 아니어서 일것같아서return 하는 jsx문법에 오류가 있는지 확인하려div 겉에도 fragment로 감싼다거나returnString을 해주는 중괄호 부분도 fragment로 감싸거나children도 감싸보았습니다.그러나 똑같은 에러가 발생하고 있는 상황입니다. const returnString = direction === 'left' ? '<' : '>'; 혹시 위의 코드가 문제가 발생할까 싶어서 SVG파일을 만들어조건에따라 왼쪽 오른쪽 SVG 파일 컴포넌트를 return 문 안에서 렌더링 해주었는데여기서도 동일한 에러가 발생하였습니다. Type error: 'LeftSvg' cannot be used as a JSX component. Its type '({ className, width, height, onClick, cyAttribute, }: { className?: string | undefined; width?: number | undefined; height?: number | undefined; onClick?: (() => void) | undefined; cyAttribute?: string | undefined; }) => JSX.Element' is not a valid JSX element type. Type '({ className, width, height, onClick, cyAttribute, }: { className?: string | undefined; width?: number | undefined; height?: number | undefined; onClick?: (() => void) | undefined; cyAttribute?: string | undefined; }) => JSX.Element' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'. Type 'Element' is not assignable to type 'ReactNode'. Property 'children' is missing in type 'Element' but required in type 'ReactPortal'. 24 | }, [hoverStyle]); 25 | > 26 | const returnString = direction === 'left' ? <LeftSvg /> : <RightSvg />; | ^ 27 | 28 | return ( 29 | <div error Command failed with exit code 1. 참고로'DatePicker' cannot be used as a JSX component. Its instance type 'ReactDatePicker<undefined, undefined>' is not a valid JSX element.이런 에러가 타입에러 발견 된 적이 있어서 package.json파일에 "resolutions": { "@types/react": "^18.0.0" }, resolutions로 버전을 위와 같이 맞춰주어서해결한 적이 있습니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
학습 로드맵
안녕하세요. 좋은 강의 만들어주셔서 감사합니다.이번에 강의 업데이트가 된 김에 미뤄왔던 공부를 하려고 하는데요.가지고 있는 강의는 이정도가 있고,리액트 훅 정도는 알고 사용할 수 있는 정도인데, 공부 순서를 어떻게 하면 좋을까요? [보유 강의]따라하며 배우는 노드, 리액트 시리즈 - 기본 강의따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기 (리뉴얼)따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기 (리뉴얼)따라하며 배우는 TDD 개발 (리뉴얼)따라하며배우는 도커와 CI환경 (리뉴얼)
-
해결됨실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
toHaveClass 테스트코드 관련하여 질문 남깁니다!
안녕하세요 현재 섹션2 관련하여 강의 듣고 있는 수강생입니다. 다름이 아니오라, 현재 강의에선 순수 css를 통해 클래스명 테스트 코드를 작성해주셨는데요..! 만약에 css 모듈이나, vanilla-extract 같이 클래스명이 동적으로 생성되는 경우에는 어떤식으로 테스트 코드를 작성해야할까요 ? 예전에 혼자서 vanilla-extract 관련해서 테스트 코드를 작성해보려고 했던적이 있는데, 단순히 toHaveClass로만 하려고하니까, 클래스명이 동적으로 결정이 되어서 에러가 계속 발생하더라구요..! (예를 들어서 클래스명이 header라면, headerhnfgbvds341 이런식) 강의 너무 잘 듣고 있습니다! 읽어주셔서 감사합니다. import React from "react"; import { render, screen } from "@testing-library/react"; import TestComponent from "@/components/TestComponent"; import { testContainer } from "@/components/testComponent.css"; describe("Example Component Test", () => { test("클래스명에 대한 테스트", () => { render(<TestComponent />); const exampleElement = screen.getByText("TestComponent"); expect(exampleElement).toHaveClass(testContainer); }); }); ```
-
미해결Next + React Query로 SNS 서비스 만들기
리액트 v5 useQuery onSuccess 관련 질문드립니다!
리액트 쿼리v5 부터 useQuery onSuccess 가 사라진걸로 알고있는데요! useQuery로 데이터패칭이 끝나면 zustand나 전역상태관리에 받아온 데이터를 저장하고싶은데 어떤식으로 하면될까요??
-
해결됨Next + React Query로 SNS 서비스 만들기
회원가입시 redirect가 안됩니다.
클라이언트 컴포넌트에서 Server Actions 사용하기에서 가입하기를 누르면response에는 message: null이 잘 오는데 redirect에서 에러가 납니다.404 SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON at JSON.parse (<anonymous>) at parseJSONFromBytes (node:internal/deps/undici/undici:5329:19) at successSteps (node:internal/deps/undici/undici:5300:27) at fullyReadBody (node:internal/deps/undici/undici:1447:9) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async specConsumeBody (node:internal/deps/undici/undici:5309:7) at async onSubmit (webpack-internal:///(action-browser)/./src/app/(beforeLogin)/_lib/signup.ts:49:21) at async C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:406 at async t2 (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:38:6412) at async rS (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:41:1369) at async doRender (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\base-server.js:1378:30) at async cacheEntry.responseCache.get.routeKind (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\base-server.js:1539:28) at async DevServer.renderToResponseWithComponentsImpl (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\base-server.js:1447:28) at async DevServer.renderPageComponent (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\base-server.js:1844:24) at async DevServer.renderToResponseImpl (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\base-server.js:1882:32) at async DevServer.pipeImpl (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\base-server.js:895:25) at async NextNodeServer.handleCatchallRenderRequest (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\next-server.js:269:17) at async DevServer.handleRequestImpl (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\base-server.js:791:17) at async C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\dev\next-dev-server.js:331:20 at async Span.traceAsyncFn (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\trace\trace.js:151:20) at async DevServer.handleRequest (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\dev\next-dev-server.js:328:24) at async invokeRender (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\lib\router-server.js:174:21) at async handleRequest (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\lib\router-server.js:353:24) at async requestHandlerImpl (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\lib\router-server.js:377:13) at async Server.requestListener (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\lib\start-server.js:140:13)at async onSubmit (webpack-internal:///(action-browser)/./src/app/(beforeLogin)/_lib/signup.ts:49:21) 에러가 난것을 확인했을때 다른것은 되는데 redirect가 안되는 것 같습니다.signup.ts는"use server"; import { redirect } from "next/navigation"; import { signIn } from "@/auth"; export default async function onSubmit(prevState: any, formData: FormData) { if (!formData.get("id") || !(formData.get("id") as string)?.trim()) { return { message: "no_id" }; } if (!formData.get("name") || !(formData.get("name") as string)?.trim()) { return { message: "no_name" }; } if ( !formData.get("password") || !(formData.get("password") as string)?.trim() ) { return { message: "no_password" }; } if (!formData.get("image")) { return { message: "no_image" }; } let shouldRedirect = false; try { const response = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/users`, { method: "post", body: formData, credentials: "include", } ); console.log(response.status); if (response.status === 403) { return { message: "user_exists" }; } console.log(await response.json()); shouldRedirect = true; await signIn("credentials", { username: formData.get("id"), password: formData.get("password"), redirect: false, }); } catch (err) { console.error(err); return { message: null }; } if (shouldRedirect) { redirect("/home"); } return { message: null }; } ESLint 오류가 나서 return {message:null}을 추가해준것과export default async function onSubmit(prevState: any, formData: FormData) {}async function onSubmit 형태로 바꾼것 외에는 건드린게 없고,공지사항대로 @auth/core와 next-auth 버전을npm i @auth/core@0.27 next-auth@5.0.0-beta.11 msw@2.1이렇게 설정해줬고,.env.local도NEXT_PUBLIC_API_MOCKING=enabled API_MOCKING=hello NEXT_PUBLIC_BASE_URL=http://localhost:9090/ .env도AUTH_SECRET=mustkeepinsecret NEXT_PUBLIC_API_MOCKING=enabledSingupModal.tsx"use client"; import style from "./signup.module.css"; import onSubmit from "../_lib/signup"; import BackButton from "@/app/(beforeLogin)/_component/BackButton"; import { useFormState, useFormStatus } from "react-dom"; function showMessage(messasge: string | null) { if (messasge === "no_id") { return "아이디를 입력하세요."; } if (messasge === "no_name") { return "닉네임을 입력하세요."; } if (messasge === "no_password") { return "비밀번호를 입력하세요."; } if (messasge === "no_image") { return "이미지를 업로드하세요."; } if (messasge === "user_exists") { return "이미 사용 중인 아이디입니다."; } return ""; } export default function SignupModal() { const [state, formAction] = useFormState(onSubmit, { message: null }); const { pending } = useFormStatus(); return ( <> <div className={style.modalBackground}> <div className={style.modal}> <div className={style.modalHeader}> <BackButton /> <div>계정을 생성하세요.</div> </div> <form action={formAction}> <div className={style.modalBody}> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="id"> 아이디 </label> <input id="id" name="id" className={style.input} type="text" placeholder="" required /> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="name"> 닉네임 </label> <input id="name" name="name" className={style.input} type="text" placeholder="" required /> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="password"> 비밀번호 </label> <input id="password" name="password" className={style.input} type="password" placeholder="" required /> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="image"> 프로필 </label> <input id="image" name="image" required className={style.input} type="file" accept="image/*" /> </div> </div> <div className={style.modalFooter}> <button type="submit" className={style.actionButton} disabled={pending} > 가입하기 </button> <div className={style.error}> {showMessage(state?.message || null)} </div> </div> </form> </div> </div> </> ); } showMessage에 TS오류나서 타입을 state?.message || null로 바꿔준것 외에는 없습니다.캐시도 다 삭제하고 mock서버랑 next서버 다 껐다가 다시 키고 vscode도 껐다가 다시 켜도 똑같습니다.. 리다이렉트가 안됩니다 ㅠㅠ 자꾸 404 SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON이 나옵니다... auth.ts도 바꾼것이 없습니다..import NextAuth from "next-auth" import CredentialsProvider from "next-auth/providers/credentials"; import {NextResponse} from "next/server"; export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: '/i/flow/login', newUser: '/i/flow/signup', }, providers: [ CredentialsProvider({ async authorize(credentials) { const authResponse = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}}/api/login`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: credentials.username, password: credentials.password, }), }) if (!authResponse.ok) { return null } const user = await authResponse.json() console.log('user', user); return { email: user.id, name: user.nickname, image: user.image, ...user, } }, }), ] });
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의자료 압축 풀기 오류
강의자료 압축을 풀고 싶은데 압축 오류가 뜨면서 압축이 안풀립니다 어떻게 해야 하나요??
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
themeprovider
만들어놓은 themeprovider파일 어떻게 자동으로 import 추가하나요? 저는 컴포넌트 눌러도 뜨는게 없어서요ㅠ
-
미해결프로젝트로 배우는 React.js
pagination nav가 안보여요
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.BlogList에 limit은 1로하고 Pagination의 default props limit값은 5로 했을때,페이지의 값과 default props limit의 값이 같으면 네비게이션이 생성되지가 않아요..
-
해결됨Next + React Query로 SNS 서비스 만들기
검색 필터 기능 구현 방식 질문
현재 X 프로젝트에서는 게시글 검색 및 필터 기능을 다른 페이지로 가게끔 설계가 되있는데요! 이와 같은 방식은 검색 데이터와 필터 데이터를 브라우저 주소에 관리하는 방식이라고 생각합니다. (맞게 생각하고 있는건지?) 현재 제가 팀 프로젝트로 여러개의 탭 중 커뮤니티 탭을 구현하고 있는데 커뮤니티 탭안에서만 검색 및 필터 기능을 구현하고 있습니다. 여기서 궁금증이 커뮤니티 굳이 브라우저 주소를 변경하지 않고 클라이언트 상태관리로 검색값 필터 값을 관리해도 되는걸까요? 정리해보자면 브라우저 주소로 검색 값 및 필터 값 관리클라이언트 데이터로 검색 값 및 필터 값 관리둘 중 어떤 게 더 좋은 방식인지 궁금합니다. 제가 생각했을때는 검색 및 필터 기능 사용 시 다른 페이지로 이동시키는건 전체 페이지가 리페인트되기 때문에 클라이언트 상태 관리보다 좋지 않은 방식인거 같은데 이점이 있는걸까요?
-
해결됨Next + React Query로 SNS 서비스 만들기
안녕하세요 nextjs를 사용한 프로젝트를 진행하다가 궁금증이 생겨 질문합니다!
안녕하세요, 강사님 강의 덕분에 nextjs와 next-auth, msw를 프로젝트에 잘 적용할 수 있게 되었습니다.그런데 현재 프로젝트에서 문제가 있었고 궁금한 점이 생겨 이렇게 질문을 남기게 되었습니다. 프로젝트에서 로그인 인증을 jwt 대신 쿠키를 사용하게 되었고 oauth를 통해 로그인하면 백엔드에서 set-cookie를 통해 쿠키를 set, 보내주는 상황이 되었습니다.이 때, nextjs에서 클라이언트 api 요청을 보낼 때 쿠키에 직접적으로 접근하지 않아도 자동으로 브라우저에서 요청할 때마다 쿠키를 같이 보내준다고 이해했는데 혹시 제가 이해한게 틀렸을까요? 프로젝트를 진행하면서 쿠키가 백엔드에게 보내는 요청에 담기지 않아 결국 서버액션을 사용해서 쿠키를 헤더에 담아서 보내는 방식으로 변경되었습니다. 클라이언트 요청에서 쿠키를 직접 (상수 값으로) 헤더에 담아서 요청을 보내도 서버에서 아무 값을 받지 못한다고 하는데 백엔드쪽을 잘 모르니 프론트 쪽에서 수정하는 방향으로 틀어서 프로젝트는 완료한 상황입니다.next-auth도 결국 걷어낸 상황이 되었는데, next-auth와 함께 쿠키를 사용하려면 백엔드에서 set 해 준 쿠키를 직접 한번 더 브라우저에 set-cookie를 해줘야 하는것인지도 궁금합니다.질문의 요지는 이렇습니다!1. 클라이언트 요청의 헤더에 쿠키를 직접 담아서 보내더라도 백엔드에서 받을 수 없는 상황이 있는지?-> 있다면 그 이유는? / 없다면 백엔드 문제인지?2. next-auth를 사용하는 경우 서버와 서버간의 요청이기 때문에 브라우저에 set-cookie를 해줄 수 없는게 맞는지?
-
미해결Next + React Query로 SNS 서비스 만들기
웹소켓 연결
제 파일이 전부 js 파일이라서 ts,tsx대신 전부 js파일로 만들었습니다.웹소켓연결이 안됩니다 ㅠ.꼭 타입스크립트를 써야만 하는 것 인가요 ?웹소켓은 채팅페이지에서 불렀습니다.
-
미해결Next + React Query로 SNS 서비스 만들기
강의에서 진행된 React-query로 prefetchQuery와 서스펜스를 사용한 패턴에 대해서 궁금한게 있습니다!
안녕하세요 강사님! 이 강의 덕분에 Next를 기반으로 다양한 프로젝트들을 진행할 수 있게 됐습니다!그러던 도중, 문득 강사님에게 배운 일부 내용에 대해 궁금한것이 추가적으로 생겨서 질문드립니다. prefetchQuery를 하게 될 경우 그 원리가 궁금합니다export default async function TabDeciderSuspense() { const queryClient = new QueryClient(); await queryClient.prefetchInfiniteQuery({ queryKey: ['posts', 'recommends'], queryFn: getPostRecommends, initialPageParam: 0, }); const dehydreatedState = dehydrate(queryClient); return ( <HydrationBoundary state={dehydreatedState}> <TabDecider /> </HydrationBoundary> ); } 위 코드에서 HydrationBoundary 로 dehydreatedState를 넘겨주는 원리가queryFn: getPostRecommends 를 통해 반환받은 값이 캐싱된 QueryClient인스턴스 자체를 클라이언트 컴포넌트로 넘겨주고 클라이언트 컴포넌트에서는 넘겨받은 QueryClient인스턴스에서 queryKey를 통해 캐싱 데이터를 바로 사용하는 것인가요?아니면 QueryClient 인스턴스 자체를 전송하는 것이 아니라, 인스턴스에 저장된 데이터와 상태 정보만(queryFn: getPostRecommends 반환값)클라이언트 사이드에서 사용할 수 있는 형태로 만든 뒤(=직렬화) 클라이언트 사이드에서 이 정보만 QueryClient(RQProvider.tsx에서 만든)에 적용하는 것인가요? 다른 글을 보면 강사님께서 prefetchQuery를 사용한 이유가 해당 페이지에 왔을 때 미리 데이터를 불러와서 SEO 측면에서 유리함을 가져가기 위해서라고 하셨는데, prefetchQuery없이 서버 컴포넌트에서 fetch → 하위 클라이언트 컴포넌트에 props로 전달 하는 형태도 동일한 효과를 가져가는게 맞는것일까요? 이 강의에서 진행했던, 서버 컴포넌트의 Suspense + 클라이언트 컴포넌트의 useSuspenseQuery 의 패턴을 적용할 때 발생하는 문제가 있습니다.(이 부분은 강사님의 코드가 아니라 저 혼자 이 강의를 토대로 직접 실습을 해보면서 맞닥뜨린 문제입니다.)현재 클라이언트 컴포넌트에서는 CORS대비 프록시를 사용하고 있습니다// next.config.js async rewrites() { return [ { source: '/api/:path*', // 외부 백엔드 api로 프록시 destination: `${process.env.NEXT_PUBLIC_BASE_URL_DEV}/api/:path*`, }, ]; }, 서버 컴포넌트에 Suspense를 걸어줍니다// page.tsx const page = ({ params }: PageProps) => { const slug = params.id; return ( <div> <Suspense fallback={<Spinner />}> <EditPresentation slug={Number(slug)} /> </Suspense> </div> ); }; 클라이언트 컴포넌트에서 useSuspenseQuery를 사용합니다const EditPresentation = ({ slug }: EditPresentationProps) => { const { data: value } = useSuspenseQuery({ queryKey: ['upload', slug], queryFn: async (presentationId: number) => { // 프록시 api const response = await fetch(`/api/presentations/${presentationId}`, { method: 'GET', }); if (response.ok) return await response.json(); }, }); return <>...</>; }; export default EditPresentation; 원래 이론대로라면 서버 컴포넌트의 <Suspense />에useSuspenseQuery의 queryFn이 걸려야 하는데, 브라우저 새로고침을 하게 되면 실행은 잘 되면서 동시에 아래의 에러가 발생합니다…(제 생각은) 클라이언트 컴포넌트도 어쨌든 처음에 서버를 거치게 되는데, 아마 서버에서는 프록시를 사용한 api를 읽어내지 못해서 발생하는 문제 같긴 한데,,, 혹시 이런 경우에는 어떻게 처리하는게 좋을까요...ㅠ
-
해결됨실무에 바로 적용하는 스토리북과 UI 테스트
스토리북 관련 팀 컨벤션
팀 내 스토리북 도입으로 인해 관련 컨벤션을 정하려고 합니다. 컴포넌트를 수정하게 되면 스토리북도 필수로 같이 수정해야 된다는 룰 말고는 떠오르는게 없는데 혹시 강사님이 사용하시는 컨벤션을 알려주실 수 있나요?
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
이번 강의에서는 SONG이라는 sqlite3 데이터베이스를 import 하지 않았는데 데이터가 혹시 어디서 불러진 건가요???
model.py를 보면 Song클래스가 정의되었는데 데이터가 어디서 불러와 졌는지를 잘 모르겠습니다ㅠ 도움 부탁드립니다. from __future__ import annotations from datetime import date from typing import Dict from urllib.parse import quote from django.db import models from django.utils.html import format_html # 파이썬 3.7부터 지원 # @dataclass class Song(models.Model): # 장고 모델 아니고 일반 파이썬 클래스! melon_uid = models.CharField(max_length=20, unique=True) rank = models.PositiveSmallIntegerField() album_name = models.CharField(max_length=100) name = models.CharField(max_length=100) artist_name = models.CharField(max_length=100) cover_url = models.URLField() lyrics = models.TextField() genre = models.CharField(max_length=100) release_date = models.DateField() like_count = models.PositiveIntegerField() @property def cover_image_tag(self): return format_html('<img src="{}" style="width: 50px;">', self.cover_url) @property def melon_detail_url(self) -> str: melon_uid = quote(self.melon_uid) return f"https://www.melon.com/song/detail.htm?songId={melon_uid}" @property def youtube_search_url(self) -> str: search_query = quote(f"{self.name}, {self.artist_name}") return f"https://www.youtube.com/results?search_query={search_query}" @classmethod def from_dict(cls, data: Dict) -> Song: return cls( melon_uid=data.get("곡일련번호"), rank=int(data.get("순위")), album_name=data.get("앨범"), name=data.get("곡명"), artist_name=data.get("가수"), cover_url=data.get("커버이미지_주소"), lyrics=data.get("가사"), genre=data.get("장르"), release_date=date.fromisoformat(data.get("발매일")), like_count=int(data.get("좋아요")), )
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
VSC에서 yarn dev가 작동하지 않습니다 (섹션 4)
안녕하세요. Node.js 챕터 수강 중인 학생입니다.과제를 만들기에 앞서 freeboard_frontend 폴더에서 yarn dev 명령어 실행하려는데,사이트 접속할 때마다 에러라고 뜹니다. ls 명령어로 확인도 하는데 왜 이러는지 모르겠네요.. 검색해도 뾰족한 대안이 안 나오고해결 부탁 드리겠습니다 ㅠㅠ
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 1
반응형 TextBox 질문입니다.
TextBox2의 경우 제목이 #2. React uncontrolled. canvas 라고 되어 있는데 코드를 보면 단순히 기존 onChange -> onInput으로만 바뀌어 있습니다. 따라서 ref를 사용한 예제로 바뀌면 좋을 것 같습니다.TextBox3 제목에 (자체 제작 방법) 이런 문구도 소괄호로 같이 표시되어 있으면 좋을 것 같습니다.또한 사소하지한 onChange와 onInput에 대한 약간의 차이 같은 설명이 주석이나 자막으로 처리되어 있으면 더욱 좋을 것 같습니다.TextBox5에 스터디를 하신 다른 분이 useImperativeHandle 훅을 사용한 것을 만들어주신 것 같은데 혹시 재남님은 useImperativeHandle을 실제 실무에서 활용하신 사례가 있으신지 궁금합니다.p.s) 매일 오전에 하나씩 보고 있는데 재밌게 보고 있습니다.좋은 강의 감사드립니다~
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
장고에서 song_detail.html을 찾아가는 이유를 모르겠습니다.
본 강의에서 views.py에 urlpatterns배열을 수업 내용인 song_detail에서 song_ddetail로 바꾸고 실행시켜 보았는데 장고에서는 hottrack/song_detail.html을 찾고 있습니다.urlpatterns에 있는 views.song_detail이 있기때문에 song_detail.html을 찾는게 아닌가용?? 혹시 어떻게 하면 song_ddetail.html과 연결 시킬 수 있을까요?? hottrack / urls.pyfrom django.urls import path, re_path # urlpatterns리스트에 필요한 것. from . import converters # noqa from . import views # view매핑을 위해 임포트. urlpatterns = [ path(route="", view=views.index), path(route="archives/<date:release_date>/", view=views.index), re_path(route=r"^export\.(?P<format>(csv|xlsx))$", view=views.export), path(route="<int:pk>/cover.png", view=views.cover_png), path(route="<int:pk>/", view=views.song_ddetail), ]hottrack/views.pysong_ddetail = DetailView.as_view( # 디테일뷰 구현 model=Song, # 모델인자로 Song지정함. )template song_detail 함수를 song_ddetail로 변경하면 작동이 되지 않는데 이유가 무엇인지 궁금합니다.
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
async와 promise가 결국 같이 쓰일필요가 없다는 뜻인가요?
강의 후반쯤에 "async안에 promise함수를 넣게되면 promise함수 그자체를 반환해서 async는 결국 별다른 기능을 하지않는다" 라고 하셨는데처음 이형태가 async 함수안에 new Promise()를 반환하는것보다 더 이상적인 형태라고 이해해도 될까요??