next.js 멀티플 런타임 관련해서 질문 올립니다..

안녕하세요. 개인 일정으로 답변이 늦어져서 죄송합니다ㅜㅜ질문하신 내용에 대해 잘 아는 건 아니지만, vercel github issue에서 관련된 내용을 찾았습니다.github issue: https://github.com/vercel/vercel/discussions/6197vercel.json: https://vercel.com/docs/projects/project-configuration#routes프로젝트 root에 /api 폴더와 vercel.json 파일을 만들고, vercel.json을 통해 config를 조작하는 방법으로 보입니다. 직접 테스트해보진 못했지만 도움이 되셨으면 좋겠습니다!감사합니다 :)

아주 기초적인 질문입니다.

안녕하세요. 질문 감사드립니다.말씀하신대로 yarn start 명령어는 yarn build로 빌드된 파일을 실행하는 명령어이기 때문에, 코드가 바뀌어도 바로 리로딩되지 않습니다. yarn dev로 실행한 개발 환경에서는 코드를 바꾸면 바로 핫리로딩 됩니다! (https://nextjs.org/docs/getting-started/installation#manual-installation).감사합니다 :)

서버사이드 렌더링을 할 때, 서버는 어디에 있는 건가요?

안녕하세요! 질문 감사합니다.서버사이드 렌더링을 할 때 서버의 자원을 사용하는 것이 맞습니다. 하지만 하나의 서버만 사용하면 사용자가 많아짐에 따라 부하가 발생할 수 있습니다.말씀해주신대로 강의에서는 Vercel에서 제공하는 서버를 사용하는데, Vercel의 서버는 세계 여러 지역에 분포하고 있습니다. 따라서 사용자의 위치와 서버 상황에 따라 적절한 서버에서 빠르게 응답값을 내려줍니다. 이와 관련한 공식문서 링크 첨부해드립니다! (https://vercel.com/docs/edge-network/regions)+실제로 강의 영상 중 네트워크 탭에서 'X-vercel-id'를 확인하면 'icn1'(Seoul, South Korea) 에 위치한 서버를 사용하고 있다는 것을 확인할 수 있습니다. 하지만 저는 현재 해외에 있기 때문에 사이트에 접속하여 네트워크 탭을 확인하면(사진)이렇게 'X-vercel-id'가 'fra1'(Frankfurt, Germany) 로 자동 설정됩니다.서버리스 기술이 발전함에 따라 개발자가 직접 백엔드를 관리할 필요가 적어지고 있는 것 같습니다. 하지만 보안 등의 문제로 서버리스를 도입하지 못하거나 서버리스를 사용하더라도 해당 인프라를 학습하고 올바르게 사용하는 것이 중요하기 때문에 꾸준히 공부해나가면 좋을 것 같습니다!

수업을 듣다가 SSR에 관하여..

안녕하세요 질문 감사합니다. 해외에 있어 답변이 조금 늦었습니다ㅠㅠ평소 리액트 개발하시는 것과 비슷하게 구현하시면 됩니다. (컴포넌트에서 ajax 호출 / react-query 사용 등등). 다만 가장 최신의 Next.js 버전의 경우 Server Components 라는 새로운 기능을 도입하여 강의에서 언급한 SSR의 단점을 보완하고 있습니다. 강의 범위 밖의 내용이라 관련 링크만 남겨드리지만, 추후에 학습하면 도움이 되실 것 같습니다! (https://nextjs.org/docs/app/building-your-application/rendering/server-components)프로젝트마다 사용해야하는 렌더링 방식이 다르기 때문에 정해진 답은 없지만, 일반적인 경우라면 CSR 방식이 더 편할 것 같습니다. SSR/SSG/CSR에 관련된 앞선 질문들도 링크 첨부합니다ㅎㅎ(https://www.inflearn.com/questions/947345/%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%9C%A0%EC%A7%80-%EA%B5%AC%ED%98%84%EC%8B%9C-csr-vs-ssrhttps://www.inflearn.com/questions/1028810/ssr-vs-ssg)네! 부분적으로 CSR을 사용한다고 하더라도, 나머지 부분은 SSG(or SSR)로 pre-rendering 할 수 있다는 장점이 있습니다.감사합니다 :)

interface 와 type

안녕하세요. 질문 감사드립니다!type은 type Lat = number; type Lng = number; export type Coordinates = [Lat, Lng];와 같이 별칭을 부여하는 데 주로 쓰고자 했고, interface는 말씀하신대로 props와 같은 경우에 쓰고자 했습니다.코드를 확인해보니 Props도 type으로 지정한 경우가 몇 가지 보이는데, 큰 이유없이 작성한 것이니 interface로 통일하셔도 될 것 같습니다😅감사합니다 :)

엘리맨트들의 자식관계가 어떻게 이렇게 되나 궁금합니다.

안녕하세요. 질문 감사합니다!Marker 컴포넌트가 return하는 부분을 보시면 return null; 이라고 되어있을 것입니다. 즉, 마커 아이콘은 react의 렌더링부에 의해 그려지는 것이 아닌, Marker.tsx에 있는marker = new naver.maps.Marker({ map: map, position: new naver.maps.LatLng(...coordinates), icon, });코드에 의해 그려집니다.따라서 과 가 겉으로는 병렬 구조로 보일 수 있지만, 실제로는 naver map API의 방식대로 작동하게 됩니다. Marker API 문서를 훑어보시면 조금 더 이해가 되실 것 같습니다. 관련 링크 첨부드립니다ㅎㅎ(https://navermaps.github.io/maps.js.ncp/docs/tutorial-1-marker-simple.example.htmlhttps://navermaps.github.io/maps.js.ncp/docs/naver.maps.Marker.html)감사합니다 :)

onLoad함수 (script태그의 onLoad X)

안녕하세요. 질문 감사합니다.이어지는 3-3~3-5 강의에서 MapSection.tsx의 onLoad 함수를 추가로 작성하게 됩니다. 깔끔한 코드를 위해 미리 prop을 분리해두었습니다ㅎㅎ해당 코드가 naver map API에서 지정한 문법이기 때문입니다. naver map 객체를 생성할 때 naver.maps.Map 클래스를 사용하고, 첫번째 인자로 지도를 삽입할 HTML 요소 혹은 id를 받습니다. 이해를 위해 해당 API 링크 첨부드립니다! (https://navermaps.github.io/maps.js.ncp/docs/naver.maps.Map.html)+해당 강의의 설명란에 있는 '네이버 script load 예제'도 보시면 도움이 될 것 같습니다.(사진)감사합니다. :)

dynamic에 대한 질문

안녕하세요. 질문 감사합니다ㅎㅎ결론부터 말하자면 React의 리렌더링 조건에 의해 발생하는 현상입니다.const [data, setData] = useState(0); ... new Promise((resolve) => setTimeout(() => resolve(Math.random()), delayInSeconds * 1000) ).then((result) => setData(result)); ... ... 위의 코드는 부모 컴포넌트입니다. setTimeout에서 주기적으로 컴포넌트의 상태(data)를 업데이트합니다(즉, 부모 컴포넌트가 리렌더링 됨). 그리고 React는 부모 컴포넌트가 렌더링되면 자식 컴포넌트도 리렌더링합니다. -> 자식 컴포넌트가 리렌더링되기 때문에 window.innerWidth도 다시 계산되어 화면이 업데이트됩니다.감사합니다! :)

SSR vs SSG

안녕하세요. 질문 감사합니다.네! 보편적인 웹서비스를 개발한다면 실시간성이 그렇게까지 필요한 경우가 많진 않겠지만, '금융(은행, 주식)/병원/날씨' 등 실시간성이 중요하고 + 실시간이 아닐 경우 문제가 생기는 특수한 분야에서는 SSG보다 SSR(+필요시 웹소켓과 같은 기술도 함께)을 선택해야할 것입니다.그 외의 경우엔 프로젝트마다 상황이 다 달라서 그때마다 적절한 렌더링 방식을 선택하는 것이 좋아보입니다ㅎㅎ즐거운 연휴 되시길 바랍니다! :)

NoSSR 관련한 질문입니다:)

안녕하세요.넵넵 말씀하신대로 입니다ㅎㅎ질문 주셔서 감사합니다 :)