묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라먹는 Next.js(15+)
상세 페이지 api관련 궁금증
책의 정보 상세 페이지에 접근하게 되면 책의 상제 정보 요청과, 책의 리뷰에 대한 api 요청이 이렇게 두가지를 하는데요혹시 현업에서도 이런 상세 페이지(상품 정보, 댓글이나 상품평이 필요한 페이지)에서 api요청을 여러번 하게 백엔드 api를 설계 하는 것인가요?? 아니면 두번 요청이 필요한 페이지에 대한 예를 만들기 위해 분리를 해 놓은 것인가요???
-
해결됨한 입 크기로 잘라먹는 Next.js(15+)
예전에는 컴포넌트 만들떄 파스칼로 많이 했는데
page.tsx나 index.tsx는 그렇다치는데,searchbar 는 파스칼로 요즘에 안하나요 ?
-
미해결기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
next zustand 사용 시 문의
next zustand 세팅 시, provider 를 사용해야한다는 글이 있어서요.현재 강의처럼 이후에 서비스 개발 시 사용해도 이슈가 없는 부분일까요?https://zustand.docs.pmnd.rs/guides/nextjs#providing-the-storehttps://leonkong.cc/nextjs-zustand-
-
해결됨한 입 크기로 잘라먹는 Next.js(15+)
getStaticPaths
getStaticPaths함수는 async키워드를 안붙이는 함수인가요?
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
react 19의 useActionState가 더이상 isPending은 지원하지 않는 듯합니다
공식문서 내용입니다. 더이상 pending관련 값은 return해주지 않네요 공유차 전달드려요
-
해결됨[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
채팅 관련 부분, useInfiniteQuery
안녕하세요, 채팅 관련 부분에, reverseInfiniteQuery를 적용할 수 있을 것 같아, 도전해보던 찰나에 잘 안되어서 질문드립니다!!혹시 역무한스크롤 방식으로 할 수 있는 방법이 있을까요??보통 실무에서 채팅을 어떠한 방식으로 구현하는지 매우 궁금합니다.1. 역무한 스크롤 방식2. 계속해서 refetch를 하는 방식
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의에 대해 질문있습니다.
안녕하세요 강의를 열심히 보면서 하고 있습니다 궁금한 점이 커리큘럼이 html, css, js를 하고 리액트 강의도 있는 건가요? 아니면 리액트 없이 바로 Next.js 강의인가요?
-
해결됨한 입 크기로 잘라먹는 Next.js(15+)
섹션2 사전 렌더링에 대해 궁금한 것이 있습니다.
Next.js의 사전 렌더링에 대해서 설명을 하실때, 유저가 브라우저를 통해 서버에 초기 접속 요청을 할때, 자바스크립트 코드를 실행하여 html을 렌더링한다고 하셨는데 이 html은 해당 서비스의 특정 경로에 대해서만 html을 렌더링하는 것인가요?아니면 그 서비스에 있는 모든 페이지의 html을 렌더링하는 것인가요?
-
해결됨Next + React Query로 SNS 서비스 만들기
라우팅 관련 질문 있습니다!
안녕하세요강의 잘 보고 있습니다. 한가지 질문이 있는데요! 라우팅 테스트 중에 (beforeLogin) 하위로 추가 생성되는 라우트는 Link로 접속하면 잘 되는데, 직접 URL로 치고 가면 not-found 페이지가 뜨는데어떤 이유일까요 ? 질문1)아래 이미지의 itest 폴더 인터셉팅 잘됨. 하지만 새로고침 하거나 직접 localhost:3000/itest 치고 들어가면 페이지 없음. (원래는 새로고침 시 page.tsx 내용이 보여야 하지 않나요?) 질문2)테스트겸 localhost:3000/dkwlsWK 라우트를 생성해서 직접 URL치고 들어가니 역시 없는 페이지로 뜹니다.혹시 (그룹핑) 하거나 페레럴을 사용한 것과 연관이 있을까요 ? 질문3)아래 이미지 중 @modal/(.)itest 에 default.tsx 로 하면 에러가 나더라구요! (page.tsx로 하면 괜찮지만 페이지를 찾을 수 없음)
-
해결됨[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
Supabase smtp 추가 강좌 계획
안녕하세요, Supabase 인증강좌를 너무 잘 들었습니다!혹시 smtp 추가 강좌는 언제 추가 될 예정인지 알 수 있을까요??또 추가적으로, Supabase에 큰 관심이 생겨서, 학습해보면서, 개인 블로그를 제작해보고자 하는데 보통 서버비용을 얼마정도로 예상하면 될지, 뭔가 요금 같은거를 대시보드 형태로 쉽게 볼 수 있는 방법이 있는지도 궁금합니다!
-
해결됨한 입 크기로 잘라먹는 Next.js(15+)
Nextjs에서 React Query
안녕하세요 :) 기존 리액트 프로젝트에서는 React Query를 사용해서 서버 상태를 관리를 많이 했었는데 제 개인적인 생각은 굳이 nextjs에서는 특별한 것을(무한스크롤링 등) 구현하지 않는 이상은 필요없지 않을까라는 생각입니다.데이터 캐싱, revalidate, loading.tsx, error.tsx등을 이용해서 충분히 대체가 가능할거 같은데 혹시 어떻게 생각하시는지 궁금하고 만약 nextjs에서 react query를 사용하시면 주로 언제 사용하시는지 궁금합니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트원 imp_uid 관련 문의드려요
안녕하십니까.포트원에서 테스트 결제후 받은 imp_uid 값으로 강의 서버의 createPointTransactionOfLoading API에 impUid값을 세팅해서 보내려고 합니다 .테스트 결제후에 받은 imp_uid 값은 결과값 오는거까지는 잘 되는데, 해당 API에 담아서 보내면 자꾸 404 에러가 뜹니다. 왜 이러는 걸까요 ?
-
해결됨Next + React Query로 SNS 서비스 만들기
fetch가 force-cache여도 qn의 invalidateQueries가 가능한가요?
안녕하세요.강의를 복습하다가 캐싱 기능에 대해 질문이 생겼습니다. Next에서 fetch의 cache: 'force-cache'를 설정하면, 데이터가 공적 캐싱으로 처리된다고 알고 있습니다. 여기서 게시판을 예로 들어보면,게시물을 새로 포스팅하면 전체 게시물 목록을 갱신해야 하기 때문에 서버에서는 cache: 'no-store'를 설정하여 항상 최신 데이터를 가져오고, 클라이언트에서는 qn을 이용해서 staleTime을 설정하여 데이터를 일정 시간 동안 캐싱하고 있습니다. "force-cache"와 "useQuery" 내 두 번의 캐싱이 발생하여 비 효율적일 수 있다고 생각되어 cache: 'no-store'를 사용하여 클라이언트에서만 캐싱하고 있었는데요. 생각해보니 fetch를 이용해서 공적으로 캐싱하는게 성능적으로 우월할거 같아서 "force-cache"로 변경하고 invalidateQueries를 이용하여 클라이언트에서 post되면 데이터를 갱신하도록 변경하고 테스트를 해보았는데 잘되는게 이해가 되질 않습니다. 서버는 초기 항상 캐싱된 데이터를 반환하기 때문에 데이터가 상이할줄 알았는데 터미널을 봐도 post하고 리스트를 갱신할때만 Api 호출하고 이후엔 캐싱된 데이터를 잘 사용합니다. 이 경우, 사용자가 데이터를 갱신하면 서버의 캐시가 자동으로 업데이트되고, 공적 캐싱을 사용하여 효율적으로 데이터를 관리할 수 있는 건가요?
-
해결됨한 입 크기로 잘라먹는 Next.js(15+)
FCP 이후 페이지 이동은 CSR인가요?
안녕하세요 정환님.문득, 강의를 듣다가 "FCP 이후 페이지 이동은 CSR로 동작한다." 라는 내용으로 인해 아래와 같은 궁금증이 생겨서 질문 드립니다! 대표적으로 리액트의 CSR은 빈껍데기인 index.html 파일을 넘겨주기 때문에 SEO 최적화에 안 좋은데, FCP 이후 페이지 이동은 CSR로 동작한다면 SEO 최적화에 안 좋지 않을까요? FCP 이후 페이지 이동 요청이 발생하면 JS 실행(컴포넌트 교체), 페이지 교체가 이루어 지는데 실제로 페이지 교체를 위해 html 파일은 받아오지 않는거죠? 예를 들어서, search 페이지에서 book 페이지로 이동하는 걸 네트워크 탭으로 관측했을 때 search 페이지의 html 파일을 받아온 뒤, book 페이지로 이동한다면 book 페이지의 html 파일은 받아오지 않고 js 파일만 받아오는 것처럼요! 궁금한 점은 두 가지입니다!좋은 강의를 제작해 주셔서 감사드립니다!
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
component 파일에서는 tsx파일이 아니라 jsx 파일을 쓰는 이유를 알 수 있을까요?
4.5 loading.error에서요... component 폴더에 넣는 ErrorMessage와 LoadingBar 파일은 tsx가 아니라 jsx파일을 쓰는 이유를 알고 싶습니다
-
해결됨한 입 크기로 잘라먹는 Next.js(15+)
5.5 클라이언트 라우트 캐시
안녕하세요 :)설명을 해주실때 페이지에서 공통된 layout에 있는 RSC 페이로드만 클라이언트 라우터 캐시에 저장이 된다고 이해를 했는데 만약 layout.tsx 클라이언트 컴포넌트가 있는 경우라면 해당 클라이언트 컴포넌트의 React 코드(JS Bundle)를 서버로 다시 요청을 하는 건가요? 강의에서 설명을 하신대로 만약 루트레이아웃, 서비바 레이아웃 이렇게 있을때 만약 서치바 레이아웃에 클라이언트 컴포넌트가 포함이 되어 있다면 해당 서치바 레이아웃 코드가 클라이언트 라우터 캐시에 저장이 되는지, 아니면 클라이언트 컴포넌트가 섞여있을때는 해당 레이아웃은 클라이언트 라우트 캐시에 저장이 안되는지 궁금합니다
-
해결됨한 입 크기로 잘라먹는 Next.js(15+)
풀라우트 캐시1 ISR 방식 질문
5.1 풀라우트 캐시 강의를 듣다가 궁금한 점이 있습니다.Dynamic 페이지는 fetch 메서드에 캐시옵션이 없을때 적용이된다고 말씀하셨는데 후반부에 revalidate 옵션이 붙었을때는 스태틱 페이지라도 일정 시간 간격으로 풀 라우트 캐시를 업데이트 해준다. 라고 설명해주셨는데요,그렇다면 fetch 메서드에 캐시옵션이 없을때와 revalidate 옵션을 넣었을때는 스태틱 페이지로 설정이 된다. 라고 이해하면 되는걸까요? 아 제가 잘못 생각했었습니다. 이해 했습니다.
-
해결됨한 입 크기로 잘라먹는 Next.js(15+)
앱라우터와 rc버전 & next.js
섹션04 이후 진행되는 app 라우터 강의에 rc버전을 설치 section04 이후 강의 중 next 14버전(latest)에서 사용하지 못하는 부분이 있을까요??? 그렇다면 어떤 것들이 있을까요? 강의를 바탕으로 개인 블로그를 만들어 배포해 볼 생각인데 rc버전을 활용하는 것에 문제는 없을까요??next 강의를 들으며 느낀것이 최대한 dynamic한 사이트(페이지)들을 최대한 static하게 만들면서도 dynamic하게 만드는 것. <<< 이것이 next의 핵심 이라고 느껴지는데 제가 이해한 부분이 맞을까요??
-
미해결Next + React Query로 SNS 서비스 만들기
서버 액션를 통한 API 통신 시 쿠키 제어
안녕하세요. 강의를 보면서 NextAuth 없이 fetch 을 커스텀 함수로 구현 후 서버 액션에서만 호출하는 방식으로 구현해보고 싶어서 진행하고있습니다. 로그아웃 기능을 구현 중 토큰이 만료되었을때(API 호출 시 401 오류 발생으로) 쿠키를 제거하는 로직을 추가하였는데, 서버 액션에서만 가능하다는 오류가 발생합니다. 수동으로 로그아웃시에는 정상적으로 토큰이 제거되고, 정상적으로 로그인 페이지로 이동됩니다.. 정확한 상황은 페이지 진입 시 토큰 만료된 경우 middleware 에는 토큰이 있기때문에 페이지에 진입되고, API 호출 시 401 오류가 발생하고 쿠키 삭제 후 로그인 페이지로 리다이렉트되는데, 이때 middleware 상에는 토큰이 존재합니다..보통 자동 로그아웃 시 middleware 에서 쿠키 만료기간을 확인하고 제거하는 방식을 사용하는지, 저와 같이 해도 정상적으로 동작되어야하는건지 어떻게 접근해야될지 모르겠습니다 ㅠㅠ
-
해결됨손에 익는 Next.js - 마이그레이션하기
CRA에서 Next.js로 마이그레이션하기에서 compilerOptions.moduleResolution bundler 불가
안녕하세요.FatalError: error TS6046: Argument for '--moduleResolution' option must be: 'node', 'classic', 'node16', 'nodenext'.CRA에서 Next.js로 마이그레이션하기에서 강의를 모두 따라한 뒤 'npm run dev'를 실행하면 위 오류가 발생합니다. 찾아본 결과 TypeScript 버전이 5 이상이어야 tsconfig.json의 compilerOptions.moduleResolution에 bundler 값을 사용할 수 있는 것 같습니다.하지만 react-scripts에 요구되는 typescript의 버전은 "^3.2.1 || ^4"입니다. TypeScript를 5버전으로 올리면 lint 경고가 발생할 테니, compilerOptions.moduleResolution는 node 또는 nodenext로 설정하는 것이 현재 상황에서는 바람직하지 않나요?