🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 선생님 강의 잘 듣고 있습니다! 1.8 연산자 2 에서 수업을 듣고 저 혼자 해보는 중에 선생님께서 작성하신 문법과 다르게 작성한 식에서 정답이 출력 되었습니다. 제가 적은 문법이 추후에 다른 문법이나 개발을 하는데 충돌이 나거나 에러가 날 수 있는 경우가 생길 지 여쭤보고 싶어서 문의 남깁니다! 제가 적은 식은 아래와 같습니다. console 에 찍힌 값 : 10 입니다. var1 = null; var2 = 10; var3 = 30; console.log((var4 = var1 ?? var2));
안녕하세요. 강의 정말 재밌게 보고 있습니다. 딱 두 가지 몇번을 돌려봐도 궁금증이 풀리지 않아 문의드립니다. (* Page Router 를 사용하는 Next 14버전 기준) 1) ISR 질문 ISR은 기본적으로 SSR의 형태라고 생각 되는데(빌드 타임에 페이지를 생성해놓는것이..) 일정 시간을 두고 페이지를 재 생성 한다는 게 이해가 안 갑니다.. 이미 빌드를 마치고 서버에 배포를 했다고 가정하고(제가 원래 백엔드 개발자라..) 그 후에 페이지가 서버에서 재 생성되면 빌드가 다시 한번 이뤄지는건가요..? (빌드가 계속해서 이뤄질수는 없을텐데..) 아니면 처음에는 미리 생성 된 페이지를 전달해주고 이후로는 SSR 형태로 페이지가 생성되는걸까요? 데이터가 계속 최신으로 변경 되니 전체 페이지가 SSG일수는 없을거고(처음 요청에 응답한 페이지만 미리 생성된 페이지일텐데) 초기 SSG에 변경된 데이터만 SSR형식으로 만들어지는 건지.. 상식적으로 리빌드가 계속 될일은 없는데 페이지가 새로 생성이 된다고하니 빌드를 안 했는데 페이지가 생성될수 있나 싶고..제가 너무 틀에 갖혀서.. 2) 동적 페이지 + SSG 방식으로 렌더링하기 이것도 비슷한 결의 질문인 것 같은데요 fallback 옵션을 true로 했을 때 서버에서 필요한 작업을 마치면, 그 이후로는 캐싱이 되어서 없던 요청에 대한 페이지가 반쪽짜리 SSG에서 완전한 SSG로 작동하는건지 궁금합니다. 그리고 만약 캐싱이 되는게 맞다면 서버에서 캐싱이 되는걸까요? 추운 날씨에 감기조심하세요 감사합니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요. npx create-react-app my-app 명령어를 입력하면 어떤 에러가 발생하는 것도 아니고, 성공했다는 메시지도 나오지 않고 다시 명령어를 입력할 수 있는 상태로 돌아갑니다. nodeJs 버전은 22.12.0 이고 npm 버전은 10.9.0 입니다. 에러가 발생하지 않으니 해결 방법을 찾기가 쉽지 않아서 질문 남깁니다. 감사합니다.
안녕하세요, 아래와 같은 방식으로 dynamic import 적용하려는데 SEO에 부정적인 영향이 가는지 궁금해서 질문드립니다. 조금 찾아보니 Dynamic Import로 모두 제외해 버렸기 때문에 Google Bot 등의 크롤러가 웹 페이지에 방문했을 때 접속한 document 페이지에 크롤링할만한 정보가 없게 될 것이라는 이야기가 있어서 사실인지 궁금합니다. 사실이라면 dynamic import의 해당 단점을 보완할 수 있는 방법으로 ssr:true 설정 이외에 무엇이 있는지 궁금합니다 import dynamic from "next/dynamic"; const Zerocho = dynamic(() => import("features/Zero/components/templates/Zerocho"), { ssr: false }); export default function Hi() { const seo = getPageSeo("hihi"); return ( <> <NextSeo {...seo} /> <SchemaScript schema={schema} /> <Head> <meta name="hello" content={seo.hh} /> </Head> <Title>{seo.title}</Title> <Body> <Zerocho /> </Body> </> ); } export const getServerSideProps = async (context) => { return { props: { mode: true, modeCont: false, ...(await serverSideTranslations(context.gggg, ["hihi", "dodo"])), }, }; };
if(타이머 === "아직실행안함") 상태에서 스크롤퍼센트가 >= 0.7 이면 타이머 값을 다른 값으로 변경해주어야 타이머 = setTimeout(()=>{타이머="아직실행안함"},1000) 이 코드로 스로틀링 되는게 아닌가요? 영상에서는 타이머 값을 다른 값으로 변경해주지 않는데 이러면 타이머 = setTimeout(()=>{타이머="아직실행안함"},1000) 이 코드를 추가하기 전과 같지 않나요?
안녕하세요, 비슷한 유형의 질문이 이미 있어 저도 글을 남겨봅니다. 미리 구매해둔 후 이제 듣기 시작하려 하니, 새로운 교육과정으로 리뉴얼 되었다고 하는데, 시기를 놓쳐 쿠폰 혜택을 받지 못했습니다. 해당 강의에 기대를 많이 하고 있었는데, 리뉴얼된 버전으로 듣지 못한다는 사실이 안타까워 혹시 쿠폰을 받을 다른 방법이 없을지 문의드립니다. 감사합니다.
강사님 안녕하세요, 백엔드 서버 연결하고 게시물(PostForm.tsx) 올리는 부분에서 오류가 발생하여 질문드립니다. (섹션5 - 게시글 업로드 완성) hydration 이슈를 찾아봤는데 ( https://velog.io/@jhplus13/NextJS-React-Hydration-Error-%ED%95%B4%EA%B2%B0%EA%B8%B0 ) typeof window 과 관련있는거 같은데 혼자 해결하기 어려워 링크 첨부드립니다..! 오류해결을 위해 (hydration / PostRecommends.tsx) 해당 부분을 수정하였습니다..! 변수입력확인( Date.now(), Math.random(), new Date() ) + faker 해당부분은 주석처리 했습니다. 태그 중첩 확인, layout.tsx font 연결 확인 [콘솔 에러] intercept-console-error.js:56 A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used: - A server/client branch `if (typeof window !== 'undefined')`. - Variable input such as `Date.now()` or `Math.random()` which changes each time it's called. - Date formatting in a user's locale which doesn't match the server. - External changing data without sending a snapshot of it along with the HTML. - Invalid HTML tag nesting. It can also happen if the client has a browser extension installed which messes with the HTML before React loaded. https://react.dev/link/hydration-mismatch ... <HotReload assetPrefix=""> <ReactDevOverlay state={{nextId:1, ...}} dispatcher={{...}}> <DevRootNotFoundBoundary> <NotFoundBoundary notFound={<NotAllowedRootNotFoundError>}> <NotFoundErrorBoundary pathname="/home" notFound={<NotAllowedRootNotFoundError>} notFoundStyles={undefined} ...> <RedirectBoundary> <RedirectErrorBoundary router={{...}}> <Head> <link> <RootLayout> <html lang="ko" className="__variable..."> <body className="__className_fde3a9" - cz-shortcut-listen="true" > ... ... [Fragment key값 오류내용] // package.json { "name": "zcom", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@auth/core": "^0.27.0", "@fortawesome/fontawesome-svg-core": "^6.7.1", "@fortawesome/free-solid-svg-icons": "^6.7.1", "@fortawesome/react-fontawesome": "^0.2.2", "@tanstack/react-query": "^5.62.11", "@vanilla-extract/css": "^1.16.1", "@vanilla-extract/recipes": "^0.5.5", "@vanilla-extract/sprinkles": "^1.6.3", "classnames": "^2.5.1", "clsx": "^2.1.1", "dayjs": "^1.11.13", "next": "^15.0.4", "next-auth": "^5.0.0-beta.25", "react": "^19.0.0", "react-dom": "^19.0.0", "react-intersection-observer": "^9.14.1", "react-textarea-autosize": "^8.5.6", "zustand": "^5.0.2" }, "devDependencies": { "@faker-js/faker": "^9.3.0", "@tanstack/react-query-devtools": "^5.62.11", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", "@vanilla-extract/next-plugin": "^2.4.7", "@vanilla-extract/webpack-plugin": "^2.3.15", "msw": "^2.6.8", "typescript": "^5" }, "msw": { "workerDirectory": [ "public" ] } }
안녕하세요 공부를 하다가 궁금한 점이 생겨 질문을 드립니다. Header 컴포넌트에서 화살표 버튼을 각각 클릭하면 날짜가 증가되었다 감소되는 기능에서 이 부분의 state인 pivotDate를 Header컴포넌트가 아닌 Home컴포넌트에 작성된 이유는 날짜가 바뀌면 아래 리스트도 해당날짜에 작성된 리스트를 보여 줘야하니 전체를 관리하는 Home컴포넌트에 작성이 된 것인가요? 그리고 마지막으로 혼자 공부를 하다가 위 내용처럼 이 코드가 부모컴포넌트에 관리를 하는 것인지 그냥 Header처럼 해당기능을 해당 컴포넌트에 작성을 해야되는 것인지 감이 조금 잡히지 않는데 조금 쉽게 이해할 수 있는 방법이 혹시 있는지 궁금합니다.
7.2) 리뷰 추가 기능 구현하기 > 15:05~ 두 방식 모두 동일하게 입력 필드를 숨김 처리하지만 1번처럼 input의 type을 hidden으로 설정하게 되면 Next.js에서 오류를 발생시키지 않네요. // 1번 방식 <input type="hidden" name="bookId" value={bookId} /> // 2번 방식 <input hidden name="bookId" value={bookId} />
[그랩마켓] axios로 네트워크 통신하기 편 수강 중 질문이 생겼습니다. 강의 중 31초에 보면 Body 부분이 HTML로 되어있는데 그 전까지는 JSON으로 하라고 했다가 갑자기 언급 없이 변경이 돼있어서 HTML로 해야되는지 JSON으로 해야되는지 헷갈립니다. 강의 중 4분 10초와 같이 통신 결과, status:200, 화면도 잘 뜹니다. 그런데 data에 화살표가 생기고 누르면 그 아래 products 객체 아래 배열대로 화살표가 생기고 하는데 저는 그냥 data에 값들이 쭉 나열만 되어있습니다. 이 부분을 강의에서처럼 바꾸고 싶습니다.
조금 강의 핵심과 동떨어지는 질문인것같아서 죄송합니다, useReducer를 사용할때 reducer함수의 action.type에 대해 String 타입으로 기준이 잡히는거 보니깐 나중에 규모가 커지면 조금 불안할것 같아서요. 자바스크립트는 ENUM타입이 있는걸로 알고있는데 언급을 안하셔서 혹시 잘 안쓰는건가 싶어서 질문드립니다. String타입이 조건문의 기준이 되면 분명 프로젝트 규모가 커졌을때 발견되기힘든 런타임에러에 대한 걱정이 좀 있을것같아요
