현재 next.js 를 생성시킨후, 서버 start를 시킨후, 화면을 수정하면, 화면이 리로딩되고 있지 않습니다. 계속 새로 빌드를 해야지만, 화면 소스가 바꼈을 경우, 리로딩이 되는건가요?

안녕하세요 강사님.강사님 프론트엔드 강의도 보았고 현재 이 강의를 보며 진행중인 프로젝트 배포 단계에 있습니다! 여기서 몇가지 고민이 있는데,타임리프 등을 사용해서 서버에서 페이지를 만들어서 주는게 SSR 렌더링 방식으로 알고 있습니다! 그 반대인 CSR은 빈 페이지를 넘겨주고 클라이언트의 요청에 따라 값이 바뀌는 것이라고 학습했습니다. 현재 제 프로젝트는 스프링부트 + HTML + Ajax + RestController 를 이용해서 CSR 렌더링을 목표로 진행을 했는데요.(리액트나 뷰등은 학습 리소스등의 이유로 바닐라JS 를 사요했습니다.)그 과정에서 사용자가 접속하는 URL과 html을 어떻게 매핑해주지 고민하다, SSR 방식에서 많이 쓰는 타임리프를 사용하여 주소 경로와 html 페이지를 매핑 시켜주는 걸 이용해서 진행했습니다.@Controller public class ViewController { @GetMapping("/") public String home() { return "home"; } @GetMapping("/kakao") public String login() { return "kakao"; } @GetMapping("/join") public String join() { return "member/joinForm"; } @GetMapping("/add") public String addArticle(@RequestParam(name = "type") String articleType, Model model) { model.addAttribute("articleType", articleType); return "article/addArticle"; } }이런식으로 Controller를 만들어 타임리프 기본 경로(templates 패키지)를 이용하여 그 곳에 html 파일을 넣어주고 html 파일과 경로를 매핑 시켜주는 용도로만 사용을 했습니다. 이러고 강사님의 배포 강의를 보니 약간 제가 짠 방식은 SSR과 CSR이 짬뽕(?)된 느낌을 받았습니다. 아무래도 타임리프를 경로와 html을 매핑해주는 용도로만 사용하더라도 타임리프를 사용하고 있어서 그런 느낌을 받고 있는 것 같습니다. 강의에 나온 방식으로 바꿔서 프론트,백을 따로 배포 해보려고 하니 강의 내용에서 웹상 URL이 저희가 일반적으로 사용하는 경로가 아닌 .html 파일로 주소가 설정이 되는것으로 확인했습니다.만약 제 코드에서 타임리프를 사용하는 ViewController를 없애고 진행을 한다면 사용자가 실제 사용하는 URL을 html 파일명이 아닌 일반적인 URL로 사용할 수 있을까요? (쿼리 스트링, 패스 파라미터등도 고려하여..) nginx를 사용하면 힌트가 될 것 같다는 느낌을 받았습니다.아니면 현재 제가 진행한 방식처럼 타임리프를 유지한 채 프론트,백엔드를 따로 배포해도 문제가 없을지..결국 제가 원하는 방식은 깔끔하게 백/프론트를 분리하여 배포 하는 것인데 강의에서 .html 파일명으로 주소 경로가 지정되는 것을 보고 고민이 되어서 강사님 의견도 궁금하여 질문 남깁니다!

[질문 템플릿]1. 강의 내용과 관련된 질문인가요? (예/아니오)2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오)3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오)[질문 내용]강의 잘 보고 있습니다! HTTP API로 데이터를 주고 받을 경우 JSON 형태의 데이터만 내려주게 되는데 이럴 땐 MVC 패턴을 사용할 수 있나요 ?MVC 패턴은 SSR 방식에서만 적용되어 VIEW가 타임리프,JSP형태로 내려가는건지 만약 CSR형태도 MVC패턴이 적용된다고 한다면 CSR의 형태일때는 VIEW가 JSON 자체인지가 궁금합니다.번외로 클라이언트 서버 아키텍쳐의 경우 클라이언트가 WS,서버가 WAS로 불러도 되나요 ? 느낌은 비슷한 거 같아서..

선생님, 안녕하세요. 너무 기초적인 질문일 수 있지만, 갑자기 궁금해져서 질문드립니다. 서버사이드 렌더링의 경우, 서버에서 pre-render된 코드를 만들어서 보내주고, 클라이언트에서 hydrate를 해서 페이지를 만든다고 알고 있습니다. 클라이언트 사이드 렌더링의 경우는 html코드와 js코드를 함께 보내서, 클라이언트에서 페이지를 만들구요. 서버사이드 렌더링을 할 때, pre-render된 코드를 만드는 서버는 각 클라이언트들의 컴퓨팅 자원을 사용하는 건지(클라이언트의 컴퓨터에서 만드는 건지), 아니면 배포하는 중앙(?)서버(aws ec2 또는 이 강의에서 처럼 vercel)의 컴퓨팅 자원을 사용하는 건지(서버에서 만드는 건지) 궁금합니다.  클라이언트 측에서 다 계산을 한다고 하면, 중앙(?)서버의 부담이 적을테지만, 중앙(?)서버에서 한다고 하면, 부담이 갈 수 있을 것 같아서요. 최근 next.js 14버전이 되면서 디비와 직접 통신하는 등 기능이 많이 생겼는데, 이 통신하는 등의 역할은 client side가 아닌 server side에서만 가능하더라구요. 그래서 server side라는 게 중앙서버 하나에만 있다면, 계산이 오래걸린다거나 트래픽이 늘어나거나 한다면 다른 사용자들에게도 영향을 끼치지 않을까 궁금했습니다.(자동 확장이 되지 않을때) 또, 이런식으로 간다면 따로 백엔드 서버가 필요없게 될 수도 있겠다라고도 생각해봤는데, 어떻게 보고계시는지도 궁금합니다.

안녕하세요, 실무에서 next.js를 이번에 사용할려고 강의를 듣고있습니다.강의 초반부에 SSR의 경우 (getServerSideProps) API 응답 속도에 따라 렌더가 되지않아 가급적 자제하라고 본 것 같은데,실무에선 사실 컴포넌트 내에서 API요청량이 많을텐데 보통 어떤식으로 구현하시는지 궁금합니다보통 getServerSideProps 에서 API 통신을 하고 props로 넘겨줘서 쓰는지 ? 아니면 CSR방식으로 일반 컴포넌트 내에서 API통신을 하는지 ? 도 궁금합니다.2번 질문에서 CSR방식으로 컴포넌트 내에서 API통신을 한다면 next.js를 쓰는 장점은 비동기 데이터 dom들을 제외한 html을 서버에서 렌더링해준다는게 장점일까여?

선생님, 안녕하세요. 좋은 강의 너무 감사해요. 답변도 잘해주셔서 너무 감사해요. 선생님은 천재에요. 강의를 보다보니 (보통 prop을 받을 때)어떤때는 type을 사용하시고, 어떤때는 interface를 사용하시던데, 각각 어떤 경우에 사용하시는 지 설명해주실수있을까요?

선생님 안녕하세요. 좋은강의 너무 감사드립니다!다름이 아니라 이번 강의에서MapSection.tsx에서const MapSection = () => { const { initializeMap } = useMap(); const onLoadMap = (map: NaverMap) => { initializeMap(map); }; return ( <> <Map onLoad={onLoadMap} /> // 이부분 <Markers /> // 이부분 </> ); }; export default MapSection; 이런식으로 return값에 위에 Map 컴포넌트, 아래에 Markers컴포넌트가 왔잖아요.그래서 저는 맵위에 마커들을 덮어씌우는(?)형식으로 나오게 될 줄 알았습니다. 그런데 결과를 보니, 이렇게 map div밑에 자식으로 들어가있더라구요. 어떻게 이렇게 되는지 설명해주시면 감사하겠습니다!!

Map.tsx에서//Map.tsx if (onLoad) { onLoad(map); }이 구문은 왜 쓰인걸까요??MapSection.tsx 에서 Map을 부르는 부분을 봐도// MapSection.tsx import Map from "./Map"; const MapSection = () => { return ( <Map onLoad={() => { console.log("load!"); }} /> ); }; export default MapSection; 별다른 기능을 하는 것 같지는 않아서요.onLoad를 정의하고 있는 Map.tsx의 Props에서도type Props = { mapId?: string; initialCenter?: Coordinates; initialZoom?: number; onLoad?: (map: NaverMap) => void; }; 변수로 NaverMap을 받기만 하고 별다른 기능은 하는 것 같지가 않은데,혹시 onLoad가 어떤 기능을 하고있는지 알려주실 수 있을까요?? ++ 추가로, const map = new window.naver.maps.Map(mapId, mapOptions);이렇게 했을 때, 어떻게 <div id={mapId} style={{ width: "100%", height: "100%" }} />이 태그에 Map이 들어가는지 궁금합니다!

NoSSR도 useEffect와 같이 실행되는 건가요? 선생님 안녕하세요. 좋은강의 너무 잘 듣고있습니다. 감사합니다.윈도우 크기를 변경했을 때, width의 값이 같이 변경되는게 신기해서 질문드립니다.useEffect안의 math.random()의 값이 변경되는 타이밍에 window의 width값도 같이 변경되더라구요. 제 생각에는, 랜덤값이야 useEffect안에서 setData를 통해 계속 바꿔주고 있으니 변경되는게 맞다고 생각했지만, window값은 처음 값을 받아오면 새로고침을 해주기 전까지는 값이 변경되지 않을줄 알았거든요. 그런데 랜덤값이 변경될 때 값이 같이 변경되더라구요. 그래서 혹시 이게 dynamic이 useEffect와 같은 역할을 한다면, window크기를 변경할 때마다 width의 값이 바로바로 바껴야 할 텐데, 그건 또 아니고 랜덤값이 바뀔때 같이 바뀌니까, 이게 어떤식으로 실행되는건지 알고싶어서 질문드립니다. import { NextPage } from "next"; import dynamic from "next/dynamic"; import { useEffect, useState } from "react"; // import NoSSR from "@/components/section1/NoSSR"; const NoSSR = dynamic(() => import("@/components/section1/NoSSR"), { ssr: false, }); const Example: NextPage = () => { const [data, setData] = useState(0); useEffect(() => { const delayInSeconds = 10; new Promise<number>((resolve) => setTimeout(() => resolve(Math.random()), delayInSeconds * 1000) ).then((result) => setData(result)); console.log("NoSSR : ", NoSSR); }); return ( <main> <h1>Client - Side data fetching</h1> <p>값 : {data}</p> <NoSSR /> </main> ); }; export default Example; 위 코드는 강의 보면서 따라치고, 궁금해서 로그를 찍어본 코드입니다. 딜레이를 10초로 주고, 그 안에서 윈도우 크기를 계속 바꿔봤는데, 윈도우 크기를 바꾼다고 해서 바로바로 변경되는 게 아니라, 10초가 지나고 랜덤값이 바뀔 때, 같이 바뀝니다.

안녕하세요 강의 정말 잘 듣고있습니다!SSG가 SSR보다 사용자 경험이 좋은건 이해했습니다! 근데 한가지 더 의문점인건 SSG가 아니고 SSR을 선택해야하는 케이스가 있을까요? 라는 의문이 듭니다! 예를 들면 검색결과 페이지라던가 매번 매순간 페이지의 내용이 달라지는 페이지라면 SSG가 아니고 SSR로 만드는게 더 적합한 그런 케이스가 실무에서 있을까요?

강의후반부에 window에 접근하는 상황인 NoSSR을 수강하면서 해당 상황이 어떤 케이스인지 확인차 질문 남깁니다.Next에서 window나 document같이 WebAPI에 기재된 객체들에 접근하는 코드를 쓸 때 백엔드 단에서 접근이 불가하니, dynamic을 사용한다 정도로 이해하면 되려나요?.? 이와는 다르게, useEffect의 경우 브라우저에서 렌더가 될 때 코드가 돌아가니까 WebAPI에 접근이 가능하다 정도로 이해하면 되려나요?.?

안녕하세요 !강의 중에 a tag를 감싸고 있는 컴포넌트를 만들경우라고 하셨는데 useRouter나 Link를 쓰게 되면 a tag를 굳이 안써도 되지 않을까 생각하는데 그럼에도 불구하고 a tag를 쓰는 경우가 있을까요?

안녕하세요!마지막에 8:20에 나오는 설명대로 commit을 나누어서 진행하고 push and build를 하였는데 아래와 같이 error가 발생하고 있습니다. 어떤 부분이 문제인지 궁금합니다Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error SyntaxError: Unexpected token < in JSON at position 0 Error: Export encountered errors on following paths:/ 아래에 코드로 build하면 정상적으로 동작합니다..const stores = (await import('../public/stores.json')).default 

아니요: 'X-Robots-Tag' http 헤더에서 'noindex'가 감지됨페이지 색인을 생성할 수 없음: ‘NOINDEX’ 태그에 의해 제외되었습니다. 라고 뜨는데,Robots.txt 도 제 url 에 맞춰서 변경했는데 뭐가 문제가 되는지 모르겠습니다..!네이버 서치어드바이저에는 잘 등록된 상태 입니다.

저는 scss 대신 emotion 스타일을 사용하고 컴포넌트or 페이지를 스타일 파일과 한폴더에 넣어 사용합니다 (아래와 같은 폴더구조)페이지 폴더가 라우트 기능을 해서인지 다음과 같이 빌드 최적화에 실패햇다고 뜨는 현상이 있는데 컴포넌트폴더 에서는 문제없이 되는데 페이지 폴더에서만 이렇게 되는 원인이 무엇인가요?또 해당 페이지를 컴포넌트로 이동신후 페이지에서 단순 호출만 하게 한다면 최적화가 정상적으로 되는건가요? 

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 네이버 클라우드 플랫폼에도 사용횟수는 늘어나고 있고 css를 건드려봐도 map이 생성이안되서 height 100% 가 먹히질 않고있습니다.. 뭐가문제일까요 ㅠㅠ++ 개발자 도구 Network 를 열어봐도 잘 받아오고잇고 지도 이미지도 받아오는것을 확인 하였습니다.

next Link를 이용하게 되면 해당 페이지에서 링크 페이지의 js를 미리 불러온다는 내용이 강의에 존재하였는데헤더나 푸터등 모든페이지에 공용으로 들어가는 영역에 site맵 존재하고 모든 링크를 걸어 놓게 된다면 모든 페이지가 미리 js 형태로 불러와 지게 되는건가요?해당 경우에는 next의 강점이 많이 무뎌질거 같아 질문합니다.

안녕하세요! nextjs 실습중입니다. next/Image를 사용해서 이미지를 띄웠는데, dev 환경에서는 이미지가 잘 떴는데, 실제로 배포하니까 에러가 나면서 이미지가 안뜨네요 아무리 구글링 해봐도 모르겠어서 질문 드립니다ㅜㅜ

수업 잘듣고 있습니다. 수업 외적으로 VSCode 에서 코딩 중에 회색으로 코드 힌트가 들어가 있던데요. 어떤 익스텐션인지 알려 주실 수 있을까요?검색 중인데 못찾겠네요.죄송하지만 도움을 주셨으면 감사하겠습니다.좋은 주말되세요

안녕하세요 용주님swr 대신에 React-query랑 Recoil로 상태관리를 하고 있는데, map에 대한 data를 setMapInfo에 저장하고 있고, Markers에서 mapInfo에 대한 값을 useRecoilValue로 가져오고 있는 상황입니다. const [mapInfo, setMapInfo] = useRecoilState(mapState) const initializeMap = () => { const mapOptions = { center: new window.naver.maps.LatLng(...initialCenter), zoom: initialZoom, minZoom: 9, scaleContorl: false, mapDataControl: false, logoControlOptions: { position: naver.maps.Position.BOTTOM_LEFT, }, } let map = new window.naver.maps.Map(mapId, mapOptions) mapRef.current = map setMapInfo(map) } 그런데 계속 아래와 같이 Type error가 발생하고 있는 상황입니다. 어떤 문제 때문에 발생하는지 알 수 있을까요? 수업과 무관한 질문이여서 죄송합니다! ㅜ참고로 @types/navermaps : 3.6.5 버전입니다.