묻고 답해요
169만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
서버 컴포넌트에서 API 호출 시 Supabase의 클라이언트/서버 클라이언트 차이점이 궁금합니다.
강의를 듣다가 궁금한 점이 생겨서 질문드립니다.브라우저에서 실행되는 코드에서는 브라우저 클라이언트를 사용하고, 서버에서 실행되는 코드에서는 서버 클라이언트를 사용합니다. - [Creating a Supabase client for SSR](https://supabase.com/docs/guides/auth/server-side/creating-a-client?queryGroups=framework&framework=nextjs&queryGroups=environment&environment=client#create-a-client)@supabase/ssr 라이브러리를 사용해서 2가지 유형의 클라이언트를 생성합니다.클라이언트 컴포넌트 클라이언트(createBrowerClient) - 브라우저에서 실행되는 클라이언트 컴포넌트에서 Supabase에 접근서버 컴포넌트 클라이언트(createServerClient) - 서버에서만 실행되는 서버 컴포넌트, 서버 액션 및 라우트 핸들러에서 Supabase에 접근 서버 컴포넌트로 동작하는 page 컴포넌트에서 각 클라이언트를 사용해 번갈아 API 호출을 해봤는데 동일하게 작동하는 것 같았습니다. 서버 컴포넌트에서 Supabase의 클라이언트/서버 클라이언트가 동작하는 방식의 차이가 있는지, 렌더링 방식에 차이가 있는지 궁금합니다. 서버와 클라이언트 개념과 렌더링 방식(SSR, CSR)이 자꾸 혼동되어 헷갈리네요..import { getTodos as getTodosClient } from '@/apis/todos'; import { getTodos as getTodosServer } from '@/actions/todos'; export default async function page() { const todos = await getTodos...(); } // todos.ts import { createBrowserSideClient } from "@/lib/client/supabase"; export const getTodos = async() => { const supabase = await createBrowserSideClient(); const result = await supabase.from("todos").select("*"); return result.data; }// todos.action.ts import { createServerSideClient } from "@/lib/server/supabase"; export const getTodos = async() => { const supabase = await createServerSideClient(); const result = await supabase.from("todos").select("*"); return result.data; }
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
새 프로젝트 생성시 빌드 에러가 뜹니다
어제까지도 같은 디렉토리에 토이 프로젝트 새로 생성하면서 잘 진행하고있는데, 오늘 카운터앱 진도 나가면서 새로운 프로젝트 생성하는데, 생성하고 빌드시 이런 에러가 뜹니다. { "name": "section06", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint .", "preview": "vite preview" }, "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1" }, "devDependencies": { "@eslint/js": "^9.17.0", "@types/react": "^18.3.17", "@types/react-dom": "^18.3.5", "@vitejs/plugin-react": "^4.3.4", "eslint": "^9.17.0", "eslint-plugin-react": "^7.37.2", "eslint-plugin-react-hooks": "^5.0.0", "eslint-plugin-react-refresh": "^0.4.16", "globals": "^15.13.0", "vite": "^6.0.3" } }package.json이구요 버전 체크 전부 해봤는데 어제 만든 잘 작동되는 프로젝트랑 아예 버전 차이도 없고, 생성후에 npm install 외에 아예 건든것도 없는데 npm run dev또는 npm run build 하면 저런 에러가 뜨네요.. 새로 다시 만들어도 에러고, 다른 디렉토리에 만들어봐도 똑같습니다.이거땜에 1시간은 날린거같은데, 이럴 경우에 어떻게 해결해야하는게 좋을까요??
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
input에 value 속성에 대해 질문드립니다!
안녕하세요!이번 강의 4분 10초에 나오는 state 값 content를 사용자에게 값을 입력받는 input의 value로 아래 코드와 같이 작성해주시는 이유는 무엇일까요??value는 어떤 용도로 사용되며 content를 넣어주면서 어떤 변화가 생기는건지 이해가 잘 안되어서 질문드립니다!<input value={content} placeholder="새로운 Todo..." />
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useMemo 강의 부분에 대해 질문있습니다.
현재 useMemo에 대한 강의를 보고 있습니다. 강의를 볼 땐 어느 부분의 코드가 계속 렌더링이 되기 때문에 불필요한 부분이라 최적화를 해주기 위해 useMemo를 사용한다라고 이해는 하지만 막상 혼자 어떤걸 만들어볼땐 어느 부분의 코드가 계속 렌더링이 되고 불필요한 코드인지 몰라 useMemo를 이용하기가 많이 어렵더라구요. 어떻게 하면 쉽게 이해해서 혼자 코드를 작성할 때 잘 이용할 수 있는지 궁금합니다 ^^
-
해결됨한 입 크기로 잘라먹는 Next.js
페이지라우터와 앱라우터의 데이터 패칭 방식의 차이에 관한 질문.
해당 강의에서 선생님이 설명해주시기로는,페이지라우터와 앱라우터의 차이로 인해 앱 라우터 버전에서는 리퀘스트 메모이제이션이 생겼다고 하셨습니다. 페이지라우터에서는, 트리의 최상단에서 api요청이 발생한다음에 해당 결과값을 각 컴포넌트에 나눠주는 구조이고, 앱 라우터는 모든 서버컴포넌트가 각각 api를 호출해야하는 구조라고 하셧는데, 제가 테스트 해본결과, 서버컴포넌트 끼리도 props로 데이터를 주고받을 수 있는것 같습니다. 그래서 햇갈리는 부분이 존재하는데요. import "./globals.css"; import Link from "next/link"; import style from "./layout.module.css"; import { BookData } from "@/types"; function InnerFooter({ books }: { books: BookData[] }) { return <>{books[0].author}</>; } async function Footer() { const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book` ); if (!response.ok) { return <footer>제작 @winterlood</footer>; } const books: BookData[] = await response.json(); const bookCount = books.length; return ( <footer> <footer>제작 @winterlood</footer> <div>{bookCount}개의 책이 존재함</div> <InnerFooter books={books} /> </footer> ); } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en"> <body> <div className={style.container}> <header> <Link href={"/"}>📚 ONEBITE BOOKS</Link> </header> <main>{children}</main> <Footer /> </div> </body> </html> ); } 제가 테스트 한 코드에서는 Footer 컴포넌트가 내부적으로 InnerFooter 컴포넌트를 호출하면서 데이터를 넘겨주고 있습니다. 선생님이 설명하신 부분이 제가 이해한 부분과는 다른걸까요?
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
useCallback 사용 이유를 잘 모르겠습니다...
안녕하세요 강의를 듣다 궁금한 점이 생겨서 질문 드립니다.강의에서는 list페이지와 add페이지로 이동할때 useCallbak을 사용하여 이동하는데, const handleClickList = () => { navigate('list'); }; const handleClickAdd = () => { navigate('add'); };다음과 같이 useNavigate만 사용해도 라우터 이동은 똑같지 않나요??
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
리액트 라이프 사이클 질문
글 수정기능을 추가하고 useReducer로 바꿔서 했는데 글을 추가해도 새로운 내용이 나타나지 않고, 마지막 요소가 다시 추가되었습니다. [{content:"To1"}, {content:"To1"}] 확인해보니 컴포넌트에서 받은 props를 useState초기화값으로 넣으면 바뀌지 않는 사실을 알게되었습니다.하지만 이부분을 useEffect형식으로 바꿔 적어주니 새로운 내용으로 바뀌는 것을 확인했습니다. // props content를 useState 초기화값으로 적용 const TodoItem = ({ content, id, isDone, date, onUpdate, onDelete }) => { const [upContent, setUpcontent] = useState(content); ... } //////////////////////////////////////////// // useEffect 적용 const TodoItem = ({ content, id, isDone, date, onUpdate, onDelete }) => { const [upContent, setUpcontent] = useState(""); useEffect(() => { if (content) { setUpcontent(content); } }, [content]); ... } useReducer를 적용하지 않을때 props를 useState초기화값을 넣어도 잘 구동되었습니다.// props content를 useState 초기화값으로 적용 const TodoItem = ({ content, id, isDone, date, onUpdate, onDelete }) => { const [upContent, setUpcontent] = useState(content); ... }이것이 리액트 라이프 사이클 때문에 이러한 현상이 발생한것인가요?
-
미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
현 강의자료는 이해는 했는데, 그럼 전 강의자료는 이젠 활용을 못하나요?
리뉴얼 된 자료를 확인하여 궁금하여 문의드립니다!현 강의에서는 notification 관련 자료가 없고, 예전 리뉴얼전 버전에서 자료가 있던데, 빠진 이유가 있나요?그리고, 전에 있던 강의는 이젠 강의를 들을 필요가 없는지 궁금하여 문의드립니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이 강의는 이제 업데이트가 진행되지 않는건가요?
문의드립니다.
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
혹시 깃 주소를 좀 알수 있을까요???
수업내용이 있는 깃주소를 알 수 있을까요?노션에 찾아봤는데 없는것 같아서요.
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
컴포넌트에서 삼항 연산자를 이용하여 JSX 를 반환할 때 궁금한 점
function HeartIconBtn({ isFavorite = false }) { return ( <button style={{ backgroundColor: 'white', border: 'none', }} > {isFavorite ? ( <img style={{ width: '32px', color: 'red' }} src="/images/heart-fill-icon.svg" alt="" /> ) : ( <img style={{ width: '32px', color: 'red' }} src="/images/heart-icon.svg" alt="" /> )} </button> ); } function LinkIconBtn({ link }) { return ( <> {link ? ( <a href={link} target="_blank"> <img style={{ width: '36px' }} src="/images/link-icon.svg" alt="lecture link" /> </a> ) : null} </> ); } export default function CourseItem({ image, title, description, isFavorite, link, }) { return ( <> <div style={{ display: 'flex', gap: '30px', justifyContent: 'center', alignItems: 'center', }} > <img style={{ width: '20%', borderRadius: '10px' }} src={image} alt={description} /> <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', width: '80%', gap: '10px', }} > <p style={{ fontSize: '16px', fontWeight: 'bold', color: 'black' }}> {title} </p> <p style={{ fontSize: '16px', fontWeight: 'bold', color: 'gray' }}> {description} </p> </div> <div style={{ display: 'flex', gap: '10px' }}> <LinkIconBtn link={link} /> <HeartIconBtn isFavorite={isFavorite} /> </div> </div> </> ); }CourseItem 컴포넌트에서 LinkIconBtn 을 포함하고 있습니다. LinkIconBtn 컴포넌트에서 function LinkIconBtn({ link }) { return ( <> {link ? ( <a href={link} target="_blank"> <img style={{ width: '36px' }} src="/images/link-icon.svg" alt="lecture link" /> </a> ) : null} </> ); }위 처럼 Fragment 를 사용하거나 <div></div> 를 사용해서 wrapping 을 하지 않으니깐 아래 처럼 오류가 발생하는데 이유를 정확하게 모르겠습니다...
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
새버전 강의
주기적으로 업데이트한다고 강의 소개에 크게 적어놓으셨는데, 왜 2023년 초 이후로 업데이트가 없나요?그리고 새로운 버전 강의가 나왔던데, 이전 버전 수강자들에게는 무료로 제공되나요?이 강의가 저렴한 것도 아니고 몇십만 원이나 하는데, 그 정도 보상은 해주셔야 한다고 생각합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
신규강의가 비슷하게 나왔던데...
기존에 프론트엔드 강의 수강생들에 대한 혜택은 없는건가요?? 거기는 이제 업데이트 안되는건가요?? 아 너무한데.....
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useReducer로 투두리스트 업그레이드 부분 질문있습니다.
안녕하세요 현재 useReducer를 이용하여 투두리스트 업그레이드 부분중에 몇가지 질문이 있습니다.useReducer에 대해서 어느정도 이해는 했지만 dispatch는 어느 부분에 작성을 해야되는지 조금 헷갈리는데 이 강의에서는 onCreate 함수안에 dispatch를 작성했는데 이 함수에 dispatch를 사용한 이유가 조금 헷갈립니다. 그리고 useRudcer는 비슷한 기능을 하는 함수들을(업데이트, 삭제) 좀 더 간단하게 만들기 위해 사용한다라고 이해하고 있으면 되는지도 궁금합니다.마지막으로 리덕스와 조금 비슷한것같은데 useReducer와 리덕스는 완전 다른 개념인건가요?
-
미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
배포 후 빈페이지
배포했는데 화면에 아무것도 안 뜨고콘솔창에 아래와 같은 오류가 뜹니다.▶ ReferenceError: require is not defined 검색해보니 vite가 require를 지원하지 않아서 라는데,해결방법이 있을까요? (+)구글링 했더니 package.json에 아래 코드를 추가하면 된다는데, 이 방법도 아닌 것 같아요."type": "commonjs",
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의 자료는 어디에 있나요?
강의 너무 잘 듣고 있어요. 강의 듣다보면 강의 자료 올려두었다고 얘기하시는데 자료는 어디에서 볼 수 있나요. ex) 최적화 관련 읽어보면 좋을 컨텐츠
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
13-17 ModelViewSet pytest 오류
안녕하세요 어제에 이어 강의 내용을 따라 가고 있는데요. 강의 내용대로 PostModelViewSet을 선언하고 (영상기준 8분30초까지 진행) pytest를 실행앴더니test_unauthenticated_user_cannot_create_post에서 assert 403 == 400test_non_author_cannot_update_post에서 assert 403 == 200test_nonauthor_cannot_delete_post에서 assert 403 == 204 오류가 각기 발생합니다. 강의를 따라가고 있는데 이런식으로만 오류가 발생하니 원인이 어디인지 찾기가 너무 힘든거 같습니다. 원인이 뭐고 이런 오류를 잡으려면 어떻게 해야할까요?
-
해결됨Next + React Query로 SNS 서비스 만들기
리액트 쿼리를 활용한 SSR으로 데이터 조회하기
안녕하세요!제가 강의를 모두 수강하고 프로젝트에서 리액트 쿼리를 통해 SSR을 적용하려고 하고 있습니다. 아래 코드는 fetchAPISever 함수를 통해 백엔드 api로부터 데이터를 요청하는 함수입니다. 이때fetchAPIsever 함수는 next/header의 cookies()를 통해 사용자의 토큰이 있으면 토큰을 넣어서 api를 요청하는 함수입니다.export const getBestAndPendingReviews = async (): Promise<ReviewePageResponse> => { const res = await fetchAPIServer('/api/review', 'GET'); if (res.code === 'SUCCESS') { return res.result; } throw new Error( `리뷰 페이지 데이터 불러오기 실패 ${res.code}-${res.message}`, ); }; 아래 코드는 리뷰 페이지에서 서버 사이드 렌더링으로 보여주기 위해 리액트 쿼리로 Hydration을 적용한 코드입니다.// src\app\reviews\page.tsx import { HydrationBoundary, QueryClient, dehydrate, } from '@tanstack/react-query'; import ReviewDashboard from './_components/ReviewDashboard'; import { getBestAndPendingReviews } from './_lib/getBestAndPendingReviews'; export default async function ReviewsPage() { const queryClient = new QueryClient(); await queryClient.prefetchQuery({ queryKey: ['reviews', 'best'], queryFn: getBestAndPendingReviews, }); const dehydrateState = dehydrate(queryClient); return ( <HydrationBoundary state={dehydrateState}> <ReviewDashboard /> </HydrationBoundary> ); } ' <ReviewDashboard/> 컴포넌트에서 UserInfo 컴포넌트를 반환하도록 설정하고 useQuery 훅을 사용하려 했으나, fetchAPIServer 함수에서 next/headers 를 import하고 있어서 클라이언트 컴포넌트에서 사용할 수 없다는 에러가 발생했습니다. 그러면 SSR을 적용하기 위해서는 getQueryData를 사용해야하는 걸까요..?import { QueryClient } from '@tanstack/react-query'; import { ReviewePageResponse } from '../_lib/getBestAndPendingReviews'; export default function UserInfo() { const queryClient = new QueryClient(); const reviews = queryClient.getQueryData<ReviewePageResponse>([ 'reviews', 'best', ]); const { total } = reviews!; if (!reviews) return <p>리뷰가 없습니다.</p>; console.log('reviews', reviews); return <p>작성한 리뷰 {total || 0}</p>; } 또는 useQuery를 쓰되 쿼리 함수를 Promise.Resolve()로 서버에서 전달 받은 데이터를 받는게 나은가 요? 'use client'; import { useQuery } from '@tanstack/react-query'; export default function UserInfo() { const { data: reviews, isLoading } = useQuery({ queryKey: ['reviews', 'best'], queryFn: () => Promise.resolve(), // 서버 데이터 재활용 }); if (isLoading) return <p>Loading...</p>; if (!reviews) return <p>리뷰가 없습니다.</p>; const { total } = reviews!; console.log('reviews', reviews); return <p>작성한 리뷰 {total || 0}</p>; }
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
[수정] 린캔버스 수정1만 자막 없습니다.
안녕하세요~! 지금까지 수업 진도 잘 따라갔는데 [수정] 린캔버스 수정1만 자막이 없네요 ㅠㅠ 자막 언제 나올까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
투두리스트 content 수정 기능 추가 문의
투두리스트를 만들고 있는데여기서 만약 삭제버튼 옆에 수정버튼을 추가하여todo list에 입력한 content 내용을 수정할 수 있는 기능을 추가하려면todolist 내용 요소를 div요소에서 input text 요소로 바꾸고보이기는 input value사용하고,수정은 OnChange 이벤트를 사용하면 될까요?
