vroomfan

안녕하세요 치현님. 이용에 불편을 드려 죄송합니다.영상이 정상적으로 잘 보여야하는데, 재생 로직에 버그가 있는 것 같습니다.혹시 시크릿탭이나 다른 브라우저에서는 재생이 되시나요?계속 재생이 안 되신다면 오른쪽 하단에 있는 '문의하기' 버튼으로 인프런에 문의 부탁드리겠습니다..!감사합니다. 😇

강의 영상 질문

안녕하세요 봄봄님. 기다려주셔서 감사합니다. 늦게나마 답변드립니다!ㅠㅠ강의 소스코드를 예로 들면&nbsp;<code>getFeedbackListFromFirestore</code>&nbsp;나&nbsp;<code>addFeedbackToFirestore</code>&nbsp;함수를 서버나 클라이언트 단에서 직접 호출하고 있습니다. 이렇게 BaaS에서 제공하는 함수를 직접 호출하면 편리하기도 하고 직접 통신할 수 있다는 장점이 있습니다.다만 다른 API 서버나 BaaS를 함께 사용하는 경우, 호출하는 방식이 각각 달라 통일성을 해칠 수 있고 엔드포인트를 숨기고 싶은 경우도 있을 수 있습니다. 이 경우에 BaaS 호출을 api routes로 옮기면 좋습니다. 호출부를 한 번 감싸면, 클라이언트 단에서&nbsp;<code>fetch('/api/feedback')</code>&nbsp;처럼 직관적인 url로 통일시킬 수 있습니다. 또한 서버에서 실행되기 때문에 엔드포인트를 숨길 수 있다는 장점도 있습니다. 다만 말씀하신대로 next.js api routes 통신이 한 번 추가되는 것이기 때문에 cold start를 하거나 서버 성능이 좋지 않다면 응답이 조금 느려질 수도 있습니다.상황에 따라 적절히 사용해주시면 좋을 것 같습니다! 감사합니다 :)

API 라우터를 사용해야 하는 경우에 대해

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

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

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

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

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

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

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

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

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

interface 와 type

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

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

안녕하세요. 질문 감사합니다.<ol><li>이어지는 3-3~3-5 강의에서 MapSection.tsx의 <code>onLoad</code> 함수를 추가로 작성하게 됩니다. 깔끔한 코드를 위해 미리 prop을 분리해두었습니다ㅎㅎ</li><li>해당 코드가 naver map API에서 지정한 문법이기 때문입니다. naver map 객체를 생성할 때 <code>naver.maps.Map</code> 클래스를 사용하고, 첫번째 인자로 <code>지도를 삽입할 HTML 요소 혹은 id</code>를 받습니다. 이해를 위해 해당 API 링크 첨부드립니다! (<a target="_blank" rel="noopener noreferrer nofollow" href="https://navermaps.github.io/maps.js.ncp/docs/naver.maps.Map.html">https://navermaps.github.io/maps.js.ncp/docs/naver.maps.Map.html</a>) +해당 강의의 설명란에 있는 '네이버 script load 예제'도 보시면 도움이 될 것 같습니다. <img src="https://cdn.inflearn.com/public/files/posts/c8071cf0-7c84-4a91-9f4a-cdf4eaac044b/image.png" alt="image" title="image"></li></ol>감사합니다. :)

onLoad함수 (script태그의 onLoad X)

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

vroomfan

Bài viết