강의 파일을 열면 에러가 뜨는데 어떻게 해결하나요? ㅠㅠ

안녕하세요.프론트쪽은 처음이라 하나 하나 해보고 있는데요. 카카오 맵으로 구현 하고 싶어서 https://github.com/JaeSeoKim/react-kakao-maps-sdk 라이브러르를 사용해서 naver map 사용하는 부분을 고쳐서 동작 시켰는데요.strategy="afterInteractive" , "beforeInteractive" 로 하면 TypeError: undefined is not an object (evaluating 'new window.kakao.maps') 에러가 나요.네이버맵 대신 카카오맵을 사용하고 싶은데요. 어떻게 해야할까요?감사합니다. 

안녕하세요!궁금한게 있어서 질문드려요 ㅎㅎ현업에서 next version 12.3.4를 쓰고 있고next/image를 사용해서 이미지를 화면에 보여주려고 하고 있는데 일반 img 태그를 쓸 때보다 화질이 안좋습니다.. 어떤 부분을 개선해야 할까요?또한 next/image를 쓰면 이미지 최적화 및 lazy loading을 자동으로 지원한다고 했는데,priority를 설정 해주지 않으면 이미지가 늦게 로드 되고 lazy loading은 layout 옵션을 설정해주지 않으면 안되더라구요!구 버전은 자동으로 지원해주지 않는걸까요? 아래 처럼 쓰고 있습니다."next/future/image" "next/image" 두개 다 쓰고 있습니다! import Image from 'next/future/image'; <Image      src="" alt=""      width={320}     height={395}     quality={100} />

매 요청마다 로그인 유지를 위한 요청을 보낸다고 할때(유저 정보를 받아오는 방식)useEffect를 이용해 CSR로 구현을하면 로그인 정보를 받아오기 전에는 초기상태가 없기 때문에`초기상태` -> `유저정보 들어있는 상태` 로 변경하는 과정에서 화면 CSS에 깜빡임이 발생합니다.이 현상이 저는 layout shift와 같다고 느껴서 해결을 하고 싶은데 실무에서는 보통 어떻게 해결하나요?초기로드에 SSR을 적용할지, 아니면 CSR 에서도 깜빡임을 없애는 방법이 있는지 궁금합니다.

동적인 페이지에서 getStaticPaths 를 사용할때 fallback: true 속성을 이용해서 페이지를 요청때마다 새롭게 빌드할수 있는걸 배웠습니다.만약 getStaticPaths를 안쓰고 getStaticProps만 쓰는경우는 요청할때마다 빌드하는 방식의 처리를 못하는건가요? , getStaticprops만 사용하면 revalidate 밖에 못하는건가요?

https://nextjs.org/docs/getting-started/installation 공식문서, 아래 명령어 실행.npx create-next-app@latest폴더명 적고 아래와 같이 선택하여 설치. ✔ Would you like to use TypeScript? … Yes ✔ Would you like to use ESLint? … Yes ✔ Would you like to use Tailwind CSS? … Yes ✔ Would you like to use `src/` directory? … No ✔ Would you like to use App Router? (recommended) … Yes ✔ Would you like to customize the default import alias? … No강좌 그대로 따라하려고 했는데 아래 캡쳐화면이 현재 제가 설치한 화면 입니다.강의 화면 처럼 pages 이런 폴더들이 없는데, 대체 어떻게 하라는 건가요??사용하지 않는 코드를 모두 정리하라고 했는데, 정리해야하는 코드들이 없을 경우 어떻게 처리를 해야 하는 지 상세한! 자세한! 답변 바랍니다. 

위와 같이 실행이 안되고 저 상태로 계속 멈춰있습니다. 종료하고 다시해도 안되고, 삭제했다 다시 설치해도 안되고, 컴퓨터를 껐다 켜도, NPM을 업그레이드 시켜도 계속 저 창에서 멈춰있는 것만 반복하는데 뭐가 문제일까요?

1. fallback:true인 경우 npm run build 할때 정적 페이지를 생성하는게 아니라외부사용자가 접근한 시점에 생성을해서 보여준다는 것인가요?맞다면 npm build 시점에는 생성을 하나도 안한다는 건가요?2. fallback: false인 경우 npm run build 시에 getStaticPaths 에서 return한 path에 대한 페이지만 생성하는게 맞나요?3. getStaticProps 안에서 fallback에 대한 처리는 fallback:true인 경우에만 처리하는거죠?(return { notFound: true } 같은것)4. getStaticPaths는 path에 따른 페이지를 생성시켜주는 함수이니 동적 라우팅에만 사용하는 함수인가요?5. 데이터가 자주 바뀌는 페이지도 이러한 방식을 적용가능한것 같은데 초기 페이지에 대해서SSR과 SSG 중 하나의 선택지로 골라서 적용을 해야할것 같네요. 어떤것을 선택해야 하는지는직접 성능을 측정해가면서 비교하는게 정확한가요? 아니면 강좌에서 말씀하신것 처럼 웬만하면 SSR를 지양하고SSG를 적용하는쪽으로 가는게 좋은건가요? CSR, SSR, SSG 적용을 하는 판단기준이 잘 안서네요.

CSR 부분 강의를 듣던도중 useEffect 바깥에서 window나 document를 접근하는 경우 문제가 되는것을 알게 되었습니다.강의에서는 초기에 값이 들어있지않은 html을 프리렌더링해서 제공한다고 설명하고 있는데 이부분에서 의문점이 있습니다. 1. 제가 기존에 알고있던 CSR은 프리렌더링을 하지 않는걸로 알고 있었는데그러면 결국 프리렌더링 이라는것은 SSR SSG ISR CSR 까지 모두 적용되고있는 방식인가요? 2. 프리렌더링을 하는것이 맞다면, 저같은 경우 일전에 했던 리액트 프로젝트를정적 파일을 저장하는 aws S3에 배포해본적이 있는데 이것이 가능했던 이유가서버에서 렌더링을 진행하기 않기때문에 가능한것이라고 알고 있었습니다.그렇다면 S3에서 CSR만 적용된 리액트 프로젝트를 배포할수있는 이유는 무엇인가요? 

개인정보 페이지같은 보안이 중요한경우 CSR보다 SSR을 적용하는게 좋다고 하셨는데 오히려 검색엔진의 정보수집때문에(SEO) 개인정보를 노출할수도 있지 않나요? 검색을 해보니 이런 주장을 하는 분들도 계셔서요요청을 최소화 하냐 vs 정보수집에 노출되지 않도록 하냐 이 두개의 충돌같은데 어떻게 생각하시는지 궁금합니다.

먼저 좋은 강의 해주셔서 감사합니다. 궁금한 점은 CSR이 자바스크립트 파일을 캐시한다고 하셨는데 여기서의 캐시가 브라우저가 state값을 계속 가지고 있다는 것인지 아니면 브라우저가 js파일을 가지고 계속 동적으로 렌더링 할 때 사용한다는 의미인가요? 둘 다 아니라면 캐시의 의미가 궁금합니다. 다시 한 번 좋은 강의 감사드려요

안녕하세요 강사님. getServerSideProps 강의를 보고 실습중에 캐시가 되지 않아 질문드립니다. 다음과 같이 코드를 작성하고, getServerSideProps 페이지에서 로드된 html 문서의 헤더를 보면 캐시 정보가 나오지 않고 캐시가 되지 않는데 이유를 알 수 있을까요..?import type { GetServerSideProps, NextPage } from 'next'; type Props = { data: number; }; const Example: NextPage<Props> = ({ data }) => { return ( <main> <h1>getServerSideProps Page!</h1> <p>값: {data}</p> </main> ); }; export default Example; export const getServerSideProps: GetServerSideProps = async ({ res }) => { res.setHeader( 'Cache-Control', 'public, s-maxage=5, stale-while-revalidate=10' ); const delayInSeconds = 2; const data = await new Promise((resolve) => setTimeout(() => resolve(Math.random()), delayInSeconds * 1000) ); return { props: { data }, }; };

안녕하세요! 강의 잘보고있습니다 :)next.js 13 버전으로 create-next-app 으로 설치하여 강의를 듣고있는데요,섹션1 > getStaticProps 강의내용대로 동일코드를 입력했지만props로 넘긴 값을 받아오질 못하더라구요.. console.log를 찍어봐도 안넘어와서 문의드립니다ㅠㅠ 아래와같이 입력했고 /app/section1/page.tsx로 만들었습니다.관련 깃헙소소는 : https://github.com/simjieun/next13 여기에 있습니다! 한번 확인부탁드리겠습니다ㅠㅠimport { NextPage } from "next"; interface Props { second: number; } const Example: NextPage<Props> = ({ second }) => { return ( <main> <h1>getStaticProps Page</h1> <p>{second}</p> </main> ); }; export default Example; export async function getStaticProps() { const delayInSecond = 2; const second = await new Promise((resolve) => { setTimeout(() => { resolve(Math.random()); }, delayInSecond * 1000); }); return { props: { second, }, }; }

안녕하세요. 최근 강의를 수강을 시작하였는데요. nextjs가 13버전으로 바뀜에 따라 강의 에 맞게 소스 코드를 받아서 진행하려고 합니다. git checkout 으로 0-2 branch로 이동하고 여기서 부터 이어하려고 했으나,  error: Your local changes to the following files would be overwritten by checkout: pages/section1/clientSideRendering.tsx pages/section1/getServerSideProps.tsxPlease commit your changes or stash them before you switch branches.Aborting 변경점이 있는것 같아 해당 branch로 이동이 안되는것 같습니다!$ git stash && git pull origin master && git stash pop임시 저장소로 옮기고 pull을 하려고 했으나 git@github.com: Permission denied (publickey).fatal: Could not read from remote repository.Please make sure you have the correct access rightsand the repository exists. 키가 없어서 안되는것 같습니다! 혹시 이런경우에 어떻게 해결해야 할지 알 수 있을까요?     

안녕하세요 선생님 콘솔을 찍으면 자꾸 브라우저 개발자 도구 콘솔에서 안보이고 터미널에서만 보이는데 이유가 뭔지 알 수 있을까요? 해당 컴포넌트가 server client component라 그런걸까요?'use client'; 라고 적은 컴포넌트에서는 콘솔이 잘 찍힙니다. 

안녕하세요! 강의 수강 중 에러 원인을 모르겠어서 문의드립니다.next.js 최신 업데이트 버전을 사용하고 있어 동적 페이지 아래와 같이 생성 후 동일한 코드를 작성하였습니다. getstaticpath로 페이지 생성은 되었습니다. console에 path도 잘 나타나는 것 확인했습니다!근데 getstaticprops에서의 console이 아무것도 찍히지 않습니다. 실행 자체가 되지 않는 것 같은데 아무리 찾아도 모르겠습니다ㅜㅜ 무엇이 잘못된 것일까요?ㅜㅜ  

안녕하세요 선생님.제가 지금 npx create next app을 하면 pages가 아니라 app폴더 방식으로 버전 13이 기본으로 되어 있는 것 같습니다.13 버전으로 공부해도 괜찮을까요? getStaticProps함수 등 여러가지 기능이 바뀌었을 것 같아서요

Next.js 에서 스타일링을 하는 방법들이 다양한 것으로 알고 있습니다.css-in-js도 제공하는 styled-jsx아니면 재설정 해서 styled-component, emotion ..... 등등프로젝트 스타일링을 scss, scss module로 결정하셨는데 혹시 이유가 있나요 ?????

getStaticProps강의의 2분대에 나오는 코드를 동일하게 작성하고 npm run dev를 입력해서 localhost:3000/section1/getStaticProps 로 접속을 했는데 개발자도구에서 보니 계속 pending으로만 되어있고 빈 화면으로 계속 로딩중 상태에서 변화가 없는데 왜그런건가요? 콘솔에 별다른 에러도 안뜹니다 getStaticProps함수를 주석처리해주면 정상적으로 접속이 되는데 해당 함수를 사용하기만 하면 이렇게 접속이 안돼요

server state 관리를 swr 말고 react-query를 사용하려고 합니다.아래와 같이 해당 queryKey를 가지고 stores에 대한 data를 전역으로 관리하고 싶었는데, fetchFunction 자리에 stores props가 들어갈 수 없어서 처음에 어떻게 initialdata를 가져올 수 있을지 잘 모르겠습니다.. react-query는 수업때 배우진 않지만 혹시 아시는 부분이 있다면 알려주시면 감사하겠습니다 !!const { data } = useQuery([queryKey], fetchFun)