게시글
질문&답변
2023.11.25
서버사이드 렌더링을 할 때, 서버는 어디에 있는 건가요?
안녕하세요! 질문 감사합니다. 서버사이드 렌더링을 할 때 서버의 자원을 사용하는 것이 맞습니다. 하지만 하나의 서버만 사용하면 사용자가 많아짐에 따라 부하가 발생할 수 있습니다. 말씀해주신대로 강의에서는 Vercel에서 제공하는 서버를 사용하는데, Vercel의 서버는 세계 여러 지역에 분포하고 있습니다. 따라서 사용자의 위치와 서버 상황에 따라 적절한 서버에서 빠르게 응답값을 내려줍니다. 이와 관련한 공식문서 링크 첨부해드립니다! ( https://vercel.com/docs/edge-network/regions ) +실제로 강의 영상 중 네트워크 탭에서 'X-vercel-id'를 확인하면 'icn1'(Seoul, South Korea) 에 위치한 서버를 사용하고 있다는 것을 확인할 수 있습니다. 하지만 저는 현재 해외에 있기 때문에 사이트에 접속하여 네트워크 탭을 확인하면 (사진)이렇게 'X-vercel-id'가 'fra1'( Frankfurt, Germany ) 로 자동 설정됩니다. 서버리스 기술이 발전함에 따라 개발자가 직접 백엔드를 관리할 필요가 적어지고 있는 것 같습니다. 하지만 보안 등의 문제로 서버리스를 도입하지 못하거나 서버리스를 사용하더라도 해당 인프라를 학습하고 올바르게 사용하는 것이 중요하기 때문에 꾸준히 공부해나가면 좋을 것 같습니다!
- 1
- 2
- 479
질문&답변
2023.10.28
수업을 듣다가 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 할 수 있다는 장점이 있습니다. 감사합니다 :)
- 1
- 2
- 266
질문&답변
2023.10.12
interface 와 type
안녕하세요. 질문 감사드립니다! type은 type Lat = number; type Lng = number; export type Coordinates = [Lat, Lng]; 와 같이 별칭을 부여하는 데 주로 쓰고자 했고, interface는 말씀하신대로 props와 같은 경우에 쓰고자 했습니다. 코드를 확인해보니 Props도 type으로 지정한 경우가 몇 가지 보이는데, 큰 이유없이 작성한 것이니 interface로 통일하셔도 될 것 같습니다😅 감사합니다 :)
- 1
- 1
- 170
질문&답변
2023.10.10
엘리맨트들의 자식관계가 어떻게 이렇게 되나 궁금합니다.
안녕하세요. 질문 감사합니다! 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 ) 감사합니다 :)
- 1
- 1
- 185
질문&답변
2023.10.10
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 예제'도 보시면 도움이 될 것 같습니다. (사진) 감사합니다. :)
- 1
- 1
- 201
질문&답변
2023.10.10
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 도 다시 계산되어 화면이 업데이트됩니다. 감사합니다! :)
- 1
- 1
- 204
질문&답변
2023.10.01
SSR vs SSG
안녕하세요. 질문 감사합니다. 네! 보편적인 웹서비스를 개발한다면 실시간성이 그렇게까지 필요한 경우가 많진 않겠지만, '금융(은행, 주식)/병원/날씨' 등 실시간성이 중요하고 + 실시간이 아닐 경우 문제가 생기는 특수한 분야에서는 SSG보다 SSR(+필요시 웹소켓과 같은 기술도 함께)을 선택해야할 것입니다. 그 외의 경우엔 프로젝트마다 상황이 다 달라서 그때마다 적절한 렌더링 방식을 선택하는 것이 좋아보입니다ㅎㅎ 즐거운 연휴 되시길 바랍니다! :)
- 1
- 2
- 237
질문&답변
2023.09.26
NoSSR 관련한 질문입니다:)
안녕하세요. 넵넵 말씀하신대로 입니다ㅎㅎ 질문 주셔서 감사합니다 :)
- 1
- 1
- 208
질문&답변
2023.09.21
매장 데이터 json 관련 질문
안녕하세요 질문 감사합니다! 크롤링의 불법 여부는 서비스의 목적, 데이터 이용 방식, 크롤링 양 등에 따라 달라질 수 있기 때문에 구상하신 사이트가 어떤 성격을 띄는지 잘 따져봐야할 것 같습니다. 일반적으로 쉽게 접근할 수 있는 데이터가 아닌 데이터(로그인을 해야 접근할 수 있거나 유료인 데이터 등)를 크롤링하는 것은 문제가 될 수도 있습니다. 다만 쉽게 접근할 수 있는 매장 정보나 사진을 일회성으로 크롤링하는 것은 문제삼기 힘들다 판단했습니다. 데이터에 접근하는 데 큰 노력이 필요하지 않다. 경쟁사(라고 할 것이 없지만)에 큰 피해를 준다고 보기 어렵다. 데이터의 양이 적고, 지속적으로 크롤링하여 제공자의 서버에 피해를 주지 않는다. 관련한 기사는 이미 찾아보셨을 것 같아, 내용이 괜찮은 링크 2개만 첨부드립니다!ㅎㅎ 크롤링 판결의 검토(정보통신망법, 저작권법 등): https://www.shinkim.com/kor/media/newsletter/1843 robots.txt, 5가지 고려 사항 등 참고: http://imcreator.tistory.com/102 영리 목적으로 서비스를 구상하고 계신다면 위의 글들을 참고해주시고, 관련 판례와 기사를 알아보거나 자문을 구해보시는 것을 추천드립니다. 감사합니다 :)
- 1
- 1
- 141
질문&답변
2023.09.14
a tag 질문 !
안녕하세요 질문 감사합니다. 말씀하신대로 nextjs v13부터는 tag 대신 Link 컴포넌트를 사용할 수 있기 때문에 많은 경우 Link 컴포넌트를 사용해도 무방합니다! 하지만 외부 라이브러리에서 CustomAnchor와 비슷한 컴포넌트를 가져온다거나, 자체적으로 재활용성이 높은 컴포넌트를 작성하기 위해 기본 HTML element tag로 컴포넌트를 작성할 수도 있습니다. 이런 경우 legacyBehavior prop을 함께 사용하게 됩니다. 감사합니다 :)
- 1
- 2
- 171