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

안녕하세요! 질문 감사합니다. 서버사이드 렌더링을 할 때 서버의 자원을 사용하는 것이 맞습니다. 하지만 하나의 서버만 사용하면 사용자가 많아짐에 따라 부하가 발생할 수 있습니다. 말씀해주신대로 강의에서는 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-ssr https://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.html https://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 예제'도 보시면 도움이 될 것 같습니다. (사진) 감사합니다. :)