묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자"로
next Request Memoization과 react cache
next.js에서 제공하는 Request Memoization 기능은 같은 엔드포인트 경로로 여러 개의 요청이 들어왔을 때 하나의 요청으로 캐싱해주는걸로 알고있습니다. 이와 관련해서 3가지 궁금증이 있습니다. Request Memoization 기능은 같은 페이지 한정인가요. 아님 프로젝트 전역에 적용되는걸까요?? 예를 들어 /dashboard 와 /home 두 페이지 모두에서 getUserInfo 라는 fetch 함수를 호출한다면 이 경우도 Request Memoization 이 적용되는건가요.만약 같은 엔드포인트지만 넘겨주는 파라미터가 다를 경우도 Request Memoization이 적용되나요?axios를 사용한다면 Request Memoization 기능을 활용할 수 없는걸로 알고있는데 react에서 제공하는 cache 함수를 사용하면 동일한 효과를 기대할 수 있나요? 감사합니다!!
-
미해결Next + React Query로 SNS 서비스 만들기
next Request Memoization과 react cache
next.js에서 제공하는 Request Memoization 기능은 같은 엔드포인트 경로로 여러 개의 요청이 들어왔을 때 하나의 요청으로 캐싱해주는걸로 알고있습니다. 이와 관련해서 3가지 궁금증이 있습니다. Request Memoization 기능은 같은 페이지 한정인가요. 아님 프로젝트 전역에 적용되는걸까요?? 예를 들어 /dashboard 와 /home 두 페이지 모두에서 getUserInfo 라는 fetch 함수를 호출한다면 이 경우도 Request Memoization 이 적용되는건가요.만약 같은 엔드포인트지만 넘겨주는 파라미터가 다를 경우도 Request Memoization이 적용되나요?axios를 사용한다면 Request Memoization 기능을 활용할 수 없는걸로 알고있는데 react에서 제공하는 cache 함수를 사용하면 동일한 효과를 기대할 수 있나요? 감사합니다!!
-
해결됨비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE
러버블에 대한 궁금한 점입니다.
러버블과 n8n과 같은 것을 연동하는 이유는 무엇일까요?러버블로 프로젝트 제작을 해봤는데요. 유뷰트 스크립트를 가져오려고 외부 라이브러리를 설치해서 스크립트를 가져오게 하는 방법을 사용하려고 하고 있는데요. 계속 스크립트를 가져오지 못하고 있습니다. 이와 같은 경우는 러버블이 할 수 없는 영역이라고 봐야 할까요?
-
미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
TypeError: Invalid URL
안녕하세요,1) 강사님 깃코드에서 코드 clone해서 가져온 후2) 노션 환경 변수 세팅3) npm run dev 실행하니까 localhost:3000에서 저런 에러가 뜨네요어떻게 해결하면 될까요?
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
앱라우팅 방식의 네비게이팅 방식
1. 앱 라우터에서는 왜 페이지 이동 전에 프리패칭(prefetching)이 이뤄지지 않는 것처럼 보일까요?페이지 라우터(Page Router) 방식에서는 링크가 뷰에 등장하면 해당 링크의 JS 번들이 자동으로 프리패칭되는 것으로 알고 있습니다.그런데 앱 라우터의 동작 구조를 설명한 도식(2번 사진)에서는, 사용자가 실제로 페이지 이동을 요청한 이후에 JS 번들과 RSC Payload를 받는 것으로 표현되어 있습니다.페이지 라이팅과 달라진 점이 RSC payload를 보내주는 것이라 하셨는데 도식에서는 언제 JS 번들을 보내주는지에 차이가 있어보여서 질문드립니다. 2. 앱라우터 방식에서 클라이언트 컴포넌트만 JS 번들에 포함된다는 설명과 관련해서, 다음 내용이 맞는지 확인 부탁드립니다.초기 접속 시 서버에서 서버컴포넌트를 RSC 페이로드로 해석하고 완성된 HTML을 보내준다.초기 접속 시 브라우저는 해당 페이지의 클라이언트 컴포넌트 JS Bundle만 받는다. 이후, JS Bundle과 HTML을 하이드레이션 한다.페이지 전환 시, 새로 이동하는 페이지의 JS Bundle과 함께 서버 컴포넌트에 대한 RSC Payload도 함께 받아 브라우저에서 조합된다.즉, 페이지 전환 전에 프리패칭이 없다. 이렇게 이해하는게 맞을까요?
-
미해결Next + React Query로 SNS 서비스 만들기
seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?
seo 관련해서 궁금한게 있습니다.seo 최적화라는게 크롤링 봇이 서버에서 렌더링된 html을 크롤링하고 인덱싱하는걸로 알고 있습니다. 만약 서버 fetch 를 했지만 data 자체는 렌더링하지 않은 경우는 크롤링 봇이 어떻게 인식을 하는지 궁금합니다. 예를 들어 서버 fetch를 했지만 아래와 같이 서스펜스 역할하는 로직으로 인해 클라이언트 환경에서 hydrate 된 이후에 데이터가 렌더링된다면 서버에서 fetch는 이루어졌지만 렌더링된건 아니기 때문에 크롤링봇이 데이터를 인식하지 못하게 되는걸까요?? export function ConditionalClientWrapper({ children, fallback, }: ConditionalClientWrapperProps) { const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); if (!mounted) return fallback ?? null; return children; } <ConditionalClientWrapper fallback={<Loading />}> //dataList에서 서버 fetch 가 이루어집니다. <dataList /> </ConditionalClientWrapper> SEO 최적화를 위한 조건이 데이터 렌더링인지 단순 서버 fetch 만하면 되는건지 궁금합니다. 추가로 리액트 쿼리의 prefetch를 사용하면 seo 최적화를 가질 수 있는건가요?? 감사합니다!
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
빌드는 잘 되었고 pm2 start를 하는데 typeerror가 발생합니다.
배포를 준비하고 있는데 개발/로컬 환경에서는 문제가 없이 잘 되다가상용 환경에 배포를 하려고하니 에러가 발생하고 있습니다. 빌드는 에러 없이 잘 되었는데 pm2 start를 하니 [TypeError: Cannot read properties of undefined (reading 'filter') 타입에러가 갑자기 나타나버렸습니다. 우선 filter 사용하는 부분에 대한 예외처리들을 넣어주었는데 동일한 에러가 계속 발생하고 있습니다. 어떠한 경우에 이런 에러가 발생하는 것일까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
업데이트 버전 수강
기존에 강의를 구매했었는데 업데이트 버전 수강하려면 재구매 해야 하는 거지요?
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
페이지 라우터의 단점을 보완할 방법
안녕하세요. 강의에서 설명해주신 페이지 라우터의 단점 중"불필요한 컴포넌트들도 JS 번들에 포함된다"는 내용에 대해 질문드리고 싶습니다.제가 이해한 바로는, 초기 HTML은 사전 렌더링 시 모든 컴포넌트를 포함하여 만들어지되,실제로 브라우저에서 하이드레이션(클라이언트 측 React 활성화)이 일어나는 컴포넌트는상호작용이 필요한 컴포넌트나 CSR 방식으로 처리된 컴포넌트에 한정되어이들만 JS 번들에 포함되는 것으로 생각했습니다.즉, 단순히 정적인 컴포넌트는 HTML로만 렌더링되고,JS 번들에는 포함되지 않거나 최소화된다고 이해했는데,혹시 이 부분에서 제가 잘못 이해하고 있는 걸까요?초기 렌더링 시 어떤 요소들이 HTML로 렌더링되고,어떤 컴포넌트들이 JS 번들에 포함되는지 기준을 설명해주시면 감사하겠습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
fetchUser 요청시 userPoint.amount
충전 금액이 balance에 누적되는 것 같은데, userPoint에는 따로 저장되는 것이 아닌가요?아니라면 충전 된 유저의 포인트는 어떻게 가져와야 될까요?그리고, 사진처럼 fetchUser 하면 userPoint.amount 가 non-nullable field 라며 userPoint의 amount를 못가져오는데 혹시 오류일까요?
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
[id].tsx페이지 SEO 관련 질문드립니다.
안녕하세요. 배포 후 SEO 확인 과정에서 이해되지 않는 부분이 있어 질문드립니다. [id].tsx에서 동적 라우팅을 처리할 때, getStaticPaths를 통해 id=1,2,3에 해당하는 페이지는 빌드 시점에 SSG로 사전 렌더링되도록 설정하였고,나머지 ID에 대해서는 fallback: true를 사용해 첫 요청 시 SSR처럼 처리되는 것으로 이해했습니다. 또한 강의에서 router.isFallback이 true일 경우, SEO를 고려하여 <Head>에 별도의 메타 정보를 넣어주는 분기 처리를 하신 것으로 알고 있습니다.저는 이 분기 처리가 필요한 이유가, 해당 시점에는 실제 데이터가 포함된 HTML이 아직 완성되지 않았기 때문에 SEO 검사 도구나 크롤러에 최소한의 메타 정보를 제공하려는 의도라고 이해했습니다. 하지만 실제 배포된 결과를 확인해보니, id=1,2,3 외의 fallback으로 생성된 페이지들조차도og:image 등 메타 정보가 정상적으로 노출되고 SNS 공유 시에도 커버 이미지가 잘 보이고 있습니다. 이런 경우, fallback으로 생성된 SSR 페이지임에도 불구하고 og 태그가 잘 노출되는 이유는 무엇인지 궁금합니다.SEO 관점에서 이런 동작이 가능한 이유가 있다면 설명 부탁드립니다.
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
eslint 설정
실제 코드에 나와 있는 설정과 아래의 설명이 반대로 바뀐 거 같은데 어디에 맞춰서 설정해주면 될까요?
-
미해결제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
저도 api로 들어왔는데 상단 메뉴에 대쉬보드가 안보입니다 ㅜ
저도 api로 들어왔는데 상단 메뉴에 대쉬보드가 안보입니다 ㅜ
-
미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
세션 6의 퀴즈 5번 정답 옵셔널 캐치올 아닌가요?
문제에서도 /docs 가 있고, 해설에도 옵셔널 캐치올에는 /docs가 포함 될때도 사용된다고 되어 있는데, 막상 답은 캐치올을 선택해야 답으로 나오네요.
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
npm 배포 후 import 시 오류사항
npm 배포 후 import 해서 컴포넌트 사용할 때 첫 번째 사진과 같은 오류가 발생합니다. 'codecamp-ui' 설치 후 접속해도 동일한 오류가 나옵니다.어떤 부분이 문제일까요..?
-
미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
상세 페이지 404 에러 발생
안녕하세요, 짐코딩님.덕분에 재밌는 수업 듣고 있습니다. :) 현재 저는 짐코딩 님의 깃허브에서=> 최종 코드를 clone해서 모두 받은 후 그 중에서 Notion API만 변경해서 제 notion과 연결을 한 후 수업을 수강하고 있습니다. (API 연결 활성화가 되어 있는 캡처본/.env에서도 환경변수로 설정 완료) 혼자서 노션 블로그 게시물 등록 및 조회 테스트를 해보다가 2가지 문제점이 발생했습니다. 제가 직접 노션에 추가한 게시물의 경우 '게시물 목록'에는 뜨지만 상세페이지 클릭했을 경우 404 에러 발생 예를 들어) localhost:3000/blog/web (web은 slug 값) 이렇게 타이핑하면 상세 페이지에 잘 들어가는데, 해당 블로그를 클릭해서 들어가면 아직 url에 localhost:3000/blog/243888f~~ 이런식으로 뜨네요 ㅜㅜ 반영이 늦는걸까요직접 노션에 추가한 게시물을 노션에서삭제한 후브라우저에서 보면 사라지지 않고 '게시물 목록'에 뜨고, 상세페이지를 클릭했을 경우 '404 에러 발생' 제가 직접 올린 노션 게시물만 저런 현상이 발생하고. 짐코딩님께서 미리 작성해놓으신 '웹 개발 학습 가이드'나 'Git 시작하기' 등은 상세 페이지를 클릭하면 잘 뜹니다. 이유를 모르겠습니다 ㅜㅜ 코드를 전달 드리고 싶은데,짐코딩님 코드를 모두 클론한 걸 사용하고 있어서 어떻게 전달드려야 할지 모르겠어서 우선은 404 에러가 뜨는 이미지와 상황 설명만 먼저 전달 드립니다! 참고로 현재까지 저는 remark and rehype 플러그인 설치 강의까지 학습했습니다! 제가 왕초보라 많이 미흡합니다. 최대한 쉽게 설명해주시면 너무나 감사드리겠습니다!항상 친절한 답변과 강의 감사드립니다.
-
미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
스타일이 적용 안되는 문제
안녕하세요, 선생님.현재 블로그 상세 목차 UI까지 강의 수강했는데 코드 수정한 후 local에 띄어보니 스타일이 적용 안되는 문제가 발생했습니다. 선생님 github에서 해당 강의 관련 코드 다 가져와서 복붙 했는데도 저러네요...제가 왕초보라서 도와주시면 감사하겠습니다!
-
해결됨인프런 클론코딩 Part 1: Next.js와 NestJS로 시작하는 실전 프로젝트
JWT 발급을 Front에서 하는게 맞는건가요??
안녕하세요. 강의를 듣던 중 궁금한 부분이 있어서 질문드립니다.토큰 발급은 기본적으로 백엔드에서 처리하는 것으로 알고있는데,본 강의에서는 frontend/auth.ts 에서 토큰을 발급하고 있습니다.의도하신건지? 궁금해서 질문드립니다.감사합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
koreanjson 관련 사이트가 접속이 안되요
koreanjson.com 접속이 계속 안되서 대체 사이트가 있을까요?
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
사전 렌더링과 getServerSideProps
안녕하세요, 강의 잘 듣고 있습니다.강의를 들으며 이해하지 못한 부분들이 있습니다.NextJS는 페이지 요청을 받았을 때 기본적으로 사전 렌더링(서버에서 JS 렌더링)을 한다고 이해하고 있었는데, 그러면 getServerSideProps함수를 선언하지 않아도 사전 렌더링이 진행되는거 아닌가요? 그런데 본 강의에서는 SSR을 진행하기 위해서는 getServerSideProps를 선언한다고 나와있는데, 그러면 SSR=기본적 사전 렌더링이 아닌건가요? 사전 렌더링은 기본적으로 되는게 아니라 명시적으로 getServerSideProps를 선언해야 가능한건가요?사전 렌더링은 초기 접속 요청 시에만 진행되는게 맞을까요? 페이지 이동 시에는 진행되지 않나요? 따라서 이 페이지 이동 시에 사전 렌더링을 진행하기 위해서 getServerSideProps를 명시적으로 선언하려는 것인가요? (그렇다면 1번질문 해결)감사합니다.
