172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요. v15로 업데이트를 했는데 하이드레이션 오류가 발생하기 시작했습니다. /book/1 페이지에서 vscode 저장으로 Next.js가 재실행이 되면은 오류가 발생하는데요. 하이드레이션 과정에서 서버와 클라이언트의 HTML이 일치하지 않아 클라이언트에서 재생성이 된다는 오류가 발생하고 있습니다. 그래서 속도 저하가 굉장히 심해진 상태입니다. https://nextjs.org/docs/messages/react-hydration-error 이 곳에서 오류가 발생하는 원인과 해결법을 말해주고는 있는데, 지금 저한테만 발생하는 현상인건지 좀 궁금합니다.
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
<Row title="Netflix ORIGINALS" id="NO" fetchUrl={requests.fetchNetflixOriginals} isLargeRow > </Row> <Row title="Trending Now" id="NO" fetchUrl={requests.fetchTrending} > </Row> return ( <section className="row"> <h2>{title}</h2> <div className="slider"> <div className="slider__arrow-left"> <span className="arrow" onClick={() => { document.getElementById(id).scrollLeft -= window.innerWidth - 80 }}>{"<"}</span> </div> <div id={id} className="row__posters"> {movies.map((movie) => ( <img key={movie.id} className ={`row__poster ${isLargeRow && "row__posterLarge"}`} src={`https://image.tmdb.org/t/p/original/${isLargeRow ? movie.poster_path : movie.backdrop_path}`} alt={movie.name} > </img> ))} </div> <div className="slider__arrow-right"> <span className="arrow" onClick={() => { document.getElementById(id).scrollLeft += window.innerWidth - 80 }}>{">"}</span> </div> </div> </section> ) 넷플릭스 오리지널에서는 슬라이드가 제대로 동작합니다. 그런데 아래 row들의 화살표를 클릭했을때 넷플릭스 오리지널 포스터의 슬라이드가 동작하는데 이유를 모르겠습니다.
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
# Material Tailwind 와 연관된 라이브러리 설치 npm install @emotion/react @emotion/styled @material-tailwind/react @mui/icons-material --save npm install @tailwindcss/typography autoprefixer --save-dev 지난주 공개된 next.js 15에서 Material Tailwind 설정하려니 안되서 도움 부탁드립니다. 아직 초보라 이런 부분들이 개인적으로 좀 어렵네요~~^^;
미해결
[React 2부] 고급 주제와 훅
컨텍스르를 설계하실 때 const Consumer = ({childeren } => <>{children(emiiter.get())}</>) 설명하시면서 렌더프롭이라고 설명하셨습니다. 그 이후 Count 설계하실 때 {(value) => <div>{value.count}</div>} 라고 적으셨는데 렌드 프롭에 대한 설명이 없으셔서 정확히 어떻게 렌더링되는지 궁금합니다!! 정확한 원리를 자세히 모르겠습니다
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요! 지금까지 강의 너무 잘 들었습니다. React와 TypeScript 강의를 듣고 복습겸으로 제공해주신 핸드북 사이트까지 참고하면서 공부하고 있습니다! 혹시나 Next.js의 핸드북 사이트를 제가 못 찾은건지 아니면 없다면 만드실 계획은 없으신지 궁금해서 질문 올려봅니다. 좋은 강의 만들어주셔서 감사합니다.
미해결
[React 1부] 만들고 비교하며 학습하는 React
수업 영상대로 따라갔을때 props가 undefined로 나오는데 별도의 설정이 필요할까요? SearchForm에서 다음 코드를 추가했을때도 동일하게 안되네요 constructor(props) { super(props); ... }
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
landingpage에서 useEffect로 fetchProducts를 하고 있는데, VSCode development server를 켜놓고 하지 않습니까? 근데 vscode에서 save를 할 때 landingpage의 useEffect가 실행되는데, 이게 원래 이런건가요? useEffect는 컴포넌트가 처음 마운트 될 때만 실행되는 것으로 알고 있는데, 개발모드에서 save할 때는 save할 때마다 실행되나요? 궁금하네요.
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요 제로초님 modal을 구현하고있는데 궁금증이 생겨 질문드립니다. modal을 구현할 때 intercepting routes를 사용하는 이유가 궁금합니다. 단순히 parallel로만 띄우면 안되는건가요? 아래는 제가 구현한 코드예시입니다. https://github.dev/datoybi/next-playground simple-modal1은 parallel routes만 사용하였고, simple-modal2는 parallel routes + intercepting routes를 사용하였습니다. 두개 다 구현을 해보았는데 새로고침을 해도 둘의 결과값이 같습니다. 무엇때문에 intercepting routes를 사용하는 건가요? 미리 감사합니다!
해결됨
한 입 크기로 잘라먹는 Next.js
all books 를 가져오는 fetch 에서 한부분은 no-store 로 적용되고 한 부분은 force-cache 로 적용된다고 했을 때 한 부분이 no-store 이기 때문에 force-cache 한 부분도 계속 갱신되어질까요?
해결됨
한 입 크기로 잘라먹는 Next.js
기존처럼 사용하면 빌드시 타입 오류가 나와서 따로 type을 Promise 로 만들어 사용해줘야 하는 듯합니다. nextjs 링크도 첨부해두었습니다. https://nextjs.org/docs/app/building-your-application/upgrading/version-15#params--searchparams 참고로 search/page.tsx 에서 searchParams 를 다음과 같이 타입 적용해주었더니 정상 빌드되었습니다. type SearchParams = Promise<{ q?: string }>;
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
쌤~ 문득 궁금해져서 질문드립니다. 보통 파일작성하실 때 jsx확장자로 하시는데 왜 유독 util폴더에 있는 파일은 js확장자 인가요? jsx나 js든 자유롭게 써도 되는건지 어떤 규칙이나 의도가 있으신지 궁금합니다.!
미해결
코드로 배우는 React 19 with 스프링부트 API서버
api 서버에서 Todo 엔티티 에는 content 로 했는데 왜 이번 섹션4 강의부터 갑자기 writer 가 나오는 건가요? 원래 writer 인데 content로 잘못 만드신건데 그냥 사용하신건가요? 그냥 계속 진행 해도 별 문제 없는 건지 궁금합니다
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
import "./App.css"; import Viewer from "./components/Viewer"; import Controller from "./components/Controller"; import { useState } from "react"; function App() { const [count, setCount] = useState(0); const onClickButton = (value) => { setCount(count + value); }; return ( <div className="App"> <h1>Simple Counter</h1> <section> <Viewer count={count} /> </section> <section> <Controller onClickButton={onClickButton} /> </section> </div> ); } export default App; const Controller = ({ onClickButton }) => { return ( <div> <button onClick={() => { onClickButton(-1); }} > -1 </button> <button onClick={() => { onClickButton(-10); }} > -10 </button> <button onClick={() => { onClickButton(-100); }} > -100 </button> <button onClick={() => { onClickButton(100); }} > +100 </button> <button onClick={() => { onClickButton(10); }} > +10 </button> <button onClick={() => { onClickButton(1); }} > +1 </button> </div> ); }; export default Controller; App.jsx에서 onClickButton이 count, setCount 함수를 모두 사용하고 있을텐데요, 이것이 Controller.jsx로 넘어갈 때에는 아래와 같이 넘어가나요 (value) => { setCount(13 + value);//count:13일때 }; 아니면 App.jsx에서 onClickButton 함수를 호출하여 App.jsx의 count, setCount를 사용하는 것인가요? 너무 기초적인 질문을 드려 죄송합니다ㅠㅠ
해결됨
한 입 크기로 잘라먹는 Next.js
https://nextjs.org/docs/messages/sync-dynamic-apis 에 내용이 변경되었다고 하네요. 혹 어떻게 수정하면 좋을지에 대한 공지가 따로 있을까요?
미해결
코드로 배우는 React 19 with 스프링부트 API서버
refresh token filter를 validation하고 재발급해주는 걸 컨트롤러로 구현하셨는데 필터로 구현한다면 UsernamePasswordAuthenticationFilter 앞으로 지정한 JWTCheckFilter 에다가 구현하면될까요>?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요~ 포트폴리오 과제하다가 질문 생겨 남겨요 첫번째는 댓글 내용 수정할 때 댓글 내용을 지우다가 다 지워지면 수정 전 원래 댓글 내용으로 도로 바뀌는 문젠데요 댓글부분 리팩토링 끝마치고나서 발견해서 처음엔 뭘 잘못했나? 했는데 계속 보니 그냥 value에서 defaultValue를 대체하여 작성해주던 아래 부분 때문인 것 같더라고요 value={ props.inputs.contents !== "" ? props.inputs.contents : props.el?.contents ?? "" } 수정을 시작할 땐 props.inputs.contents === ""이니까 댓글 내용인 props.el?.contents를 불러와서 띄워주고, 지우는 중엔 state가 빈 문자열이 아니니까 props.inputs.contents대로 표시되다가 댓글 내용을 전부 지우면 props.inputs.contents가 다시 빈 문자열이 되어서 바로 기존 댓글 내용을 띄워버려요 아예 댓글 내용을 지우고 싶어도 지울수가 없게 되어버리는데 어떻게 바꾸면 될까요? 좀 생각해봤는데 감이 안와서요 혹시 나중에 고치는 내용이 나오나요 두번째는 이번 포트폴리오 과제의 댓글부분 리팩토링 진행하다가 궁금했던 건데요 // BoardCommentWrite.container.tsx // ... const onClickWrite = async (): Promise<void> => { // ... // setWriter(""); // setPassword(""); // setContents(""); setInputs( (prev) => Object.fromEntries( Object.keys(prev).map((key) => [key, ""]), ) as typeof prev, ); // ... } 댓글 작성 끝날때 writer, password, contents를 비워줄 수 있도록 빈 문자열로 초기화시켜주던 걸 이런식으로 바꾸었는데 리팩토링 마치고 나서 잘 돌아가긴 했는데요 위 부분을 너무 어거지로 바꾼 것 같아서 좀 그래요... 사실 setInputs({ writer: "", password: "", contents: "" }) 그냥 이렇게 하는게 여기선 가장 좋은 방법인 것 같긴 한데, 더 많은 state들을 묶는 경우도 있다고 생각하면 것도 좀... 그래서요 이번 댓글 부분 코드에서는 setInputs({ writer: "", password: "", contents: "" }) 이렇게 하는게 가장 적당할까요? 그리고 더 많은 걸 초기화해야한다고 치면 어떻게 하는게 좋을까요?
해결됨
풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
50개의 데이터를 넣는 과정에서 발생한 오류입니다. 임시 데이터라 발생한 오류라 나중에 데이터를 넣으면 해결된다는 답변을 보았는데 그 뒤에 수업을 따라가면서 맞게 코드작성을 하고 있는지 체크가 불가능한 상태여서 임시적으로라도 해결하는 방법이 있을까요?
미해결
코드로 배우는 React 19 with 스프링부트 API서버
api 가 요청받을때 시큐리티 필터 넘버링되서 13개쭉나오는 설정은 어디서 하는건지 알수있을까요>?
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요, 아래 ISR에 대해서 질문드렸었는데, nextjs 에서 2가지 구현 방법이있다고 해서 두가지가 어떤 차이점이 있고 어떻게 활용하는게 좋을지 궁금해서 질문드립니다! 1번 방법 = fetch API 의 revlidate를 활용하여 ISR 구현 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 async function ProductPage () { const queryClient = getQueryClient(); await queryClient.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(queryClient)}> <ProductList /> </HydrationBoundary> </section> </> ) } import { isServer, QueryClient, defaultShouldDehydrateQuery, } from '@tanstack/react-query' function makeQueryClient() { return new QueryClient({ defaultOptions: { queries: { staleTime: 10 * 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 } } '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={true} /> </QueryClientProvider> ) } export const getProducts = async () => { const res = await fetch(`http://localhost:9090/api/products`, { method: "GET", headers: { "Content-Type": "application/json", }, next: { revalidate: 10, } }); const data = await res.json(); const currentTime = new Date().toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit', fractionalSecondDigits: 3, hour12: false, }); 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; } 2번 방법 = export const revalidate 로 시간 설정 후 fetch로 받은 data 값을 바로 렌더링 시키기 import Product from "@/component/Product"; import styles from '@/component/ProductList.module.css'; import Image from "next/image"; export const revalidate = 10; export default async function Product2Page() { const data = await fetch('/api/products'); const products = await data.json(); console.log(revalidate, 'Product2Page'); return ( <> <section className='visual-sec'> <Image src="/visual.png" alt="visual" width={1920} height={300}/> </section> <section className="product-sec"> <h2>상품 리스트</h2> <div className={styles.productList}> {products.map((product: any) => ( <Product key={product.item_no} product={product} /> ))} </div> </section> </> ) } 2개다 ISR로 구현되며, 1번 방법은 Data Cache 캐싱 매커니즘을 활용하고, 2번 방법은 Full Router Cache 캐싱 매커니즘을 활용한다의 차이점으로 생각이 드는데, 이 외에 다른 차이점과 실제 개발을 하면서 선호되는 방식이 따로 있을까요? 해당 페이지만 보았을때는 2번 방법으로 해도 어차피 주기적으로 다시 생성해서 최신 데이터를 반영하면 복잡하게 react-query를 사용하고, Hydration을 하면서 데이터를 동기화할 필요가 있나 싶어서 어떻게 사용해야할지 감이 안잡히네여
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
dispatch(logoutUser()) 실행시 dispatch(authuser())도 함께 실행되는 문제가 발생하고 있는데 원인을 잘 모르겠습니다.
