안녕하세요!! 우선 영상 너무잘봤습니다. 이해가 너무잘되네요 . 하나 궁금한게 있는데 SPA라는 건 CSR만 지원되면 가능한건가요? 클라이언트쪽에서 렌더링을 할수 있어야 동적으로 변경될 부분만 업데이트가 가능하기 때문에?!?! 그렇다면 Next.js를 이용한 React도 SPA라고 할수 있겠네요!? 그럼 SSR만으로 SPA를 만들수 있는 방법은 없을까요? 애초에 AJAX기술을 사용한 HTML을 서버에 놔둠으로써.. 제가 잘이해했나 모르겠네요.. 읽어주셔서감사합니다
안녕하세요. 좋은 질문이시고 거의 다 정확히 이이해를 하셨습니다. 다만 SPA 는 CSR이 가능한 모든것을 지칭하지 않습니다. 예를들어서 일반 전통적 사이트에서 Ajax를 사용해서 클라이언트 사이드 UI를 자바스크립트로 변형시키면 이또한 CSR이라고 볼 수 있습니다. 말그대로 클라이언트 사이드에서 렌더링 하니까요. 하지만 SPA는 아니죠 각 url 별로 새로운 페이지가 로딩이 되니까요. React 는 둘 다 해당됩니다. React 는 한 페이지로 모든 url을 렌더링하고 이 모든 작업을 클라이언트 사이드에서 하니까요. 말씀하신 NextJS의 경우 제작된 의도대로 세팅이 됐을 경우 SPA, CSR, SSR 세가지가 모두 해당이 됩니다. 왜냐하면 첫 요청을 하면 서버에서 미리 렌더링이 된 React 페이지가 전달되죠. 이후 첫 요청 다음에는 모두 클라이언트 사이드에서 렌더링이 됩니다.
그리고 질문이 있습니다. CSR과 SSR 둘다 서버에서 HTML파일을 내려준다고 할수 있는거 아닌지 궁금해요 SSR은 렌더링된 페이지 째로 HTML을 내려주는것이고 CSR은 body태그 안에 div태그만 있는 빈 HTML 파일만 내려줘서 렌더링은 클라이언트 사이드에서 하는걸루요
맞습니다. 코드 스플리팅을 하면 번들링 사이즈 문제를 꽤나 해결할 수 있습니다. 이제 SPA도 성숙기에 접어드는 시기라 말할 수 있어서 단점들이 자체적으로도 많이 보완되고 있죠. 영상에서는 단점과 장점을 모두 극대화 하고 싶어서 원론적인 측면에서 이야기한게 없지않아 있습니다~
네 그럴경우 서버에서 클러스터링을 해서 보내줘야합니다. 모든 데이터를 다 보내주는게 아니라 영역으로 나눠서 해당 영역에 몇개의 데이터가 있는지만 보내주면 훨씬 빠르겠죠. 클러스터링은 알고리즘이 여러가지 있는데 가장 간단한건 k-means 클러스터링 알고리즘입니다. 카카오 맵에서 자동으로 해주는 클러스터링 알고리즘을 직접 코딩한다 생각하시면 되세요. 대학에서 통계를 안하셨으면 조금 어려워요. 각종 라이브러리들을 찾아보시는것도 방법이예요.
안녕하세요. 훌륭한 강의 감사합니다. NextJS 를 사용하면 완성된 HTML 을 내려줄 수 있다고 이해했습니다. HTML 을 완성해나가는 과정에 대해서 궁금한 점이 있는데요, 요즘은 backend 서버를 json 서버 형식으로 제공하는 경우가 많은데 특정 페이지에서 API 호출 결과 json을 바탕으로 HTML 을 구성하는 작업이 필요하다고 가정하면 1. 브라우저가 페이지를 요청하면, 2. nextjs 는 node 기반으로 배포되니, node에서 백엔드 서버로부터 데이터를 받아오고 3. 거기서 HTML 을 그린 다음에 4. 브라우저에 완성된 HTML 을 제공한다. 5. 그래서 브라우저에서는 JS 를 작동시킬 필요 없이 HTML 을 바로 그리면 된다 위 과정으로 이뤄지는게 맞을까요? 감사합니다.
![[5분만에 알아보기] 2022년 개발자 되는법](http://i.ytimg.com/vi/t8oMyhwy_lI/mqdefault.jpg)
![[5분만에 알아보기] 2022년 개발자 되는법](/img/tr.png)
무려 30시간!
아무것도 몰라도 배울 수 있는 코드팩토리의 Flutter 강의 바로가기!
bit.ly/3tflvR6
20분으로 CSR과 SSR, NEXT.js가 무엇인지까지 간단하고 쉽게 설명해주셔서 감사해요~~ 너무 이해가 잘 됐어요~
자세한 예를 들어서 쉽게 설명해주시네요 감사합니다
csr ssr 설명은 진짜 이 영상이 단연 최고네요. 굿
와 딕션이 너무 좋아서 귀에 쏙쏙들어옵니다. CSR SSR 덕분에 잘 배우고 갑니다 :->
감사합니다~
잘 배우고 갑니다. 감사합니다.
SSR, CSR이해하려고 몇번을 읽어도 잘 머릿속에 들어오지 않았는데, 이 동영상강의 하나가 해결해주었네요ㅠㅠ 설명을 정말 잘해주시네요!! 감사합니다~
너무 좋은 강의 입니다. 구독 안 할 수가 없네요.
감사합니다!
명쾌한 강의 감사합니다^^
wow... CSR, SSR, SSG니 뭐니 개념공부는 했지만 애매하게 이해한 상태에서 일단 next와 react로 토이 프로젝트를 몇개 진행했었는데요,
그 후에 이제 이 영상을 보니까 확실히 정리되는 느낌을 받았습니다. 감사합니다.
정리 딱 깔끔!!! 잘 배우고 갑니다!! 구독 바로 눌렀어요!!
좋은 강의 정말 감사합니다!! 개념 이해가 되네요~
감사합니다~
설명 잘 듣고 갑니다. 이해 안되던 부분이 쉽게 이해되고 가네요 화이팅!
감사합니다!
시간 순삭 ㄷㄷ 강의 잘 들었습니다!
너무 명쾌하고 좋은강의 인거같아요 next는 사용하고있지만 앞으로 모르는 기술 소개해주시면 큰 도움 될꺼같아요 swr 도 너무 좋았습니다
감사합니다~
강의 인증하고 갑니다.강의 두개완독
고생하셨습니다!
이해 너무 잘됩니다!!
잘들었습니다 감사합니다
감사합니다
와우...
구독했습니다. 정말 감사드려요! 굿정보!
감사합니다
감사합니다. SSR과 CSR에 대해 자세히 배울 수 있었습니다!
감사합니다~
잘봤습니다 ~감사합니다 ^^
감사합니다~
강의 너무 잘 봤습니다 :)
질문이 있는데, 리액트를 사용할 경우 cloudFront를 사용하여도 캐싱효과를 얻지 못하는 것인가요?
파일단위의 캐싱은 돼요. 그래서 불러오는게 빨라지지만 ssr처럼 페이지를 만들어둔 상태로 보내주는 역할을 하진 않습니당~
좋은 정보 공유 감사합니다~
영상에서 SSR의 장점으로 html응답의 캐싱을 말씀하셨는데, CSR에서도 json응답을 캐싱할 수 있지 않을까요?
상당히 흥미로운 생각이세요~ 가능은 하지만 방법론에 대한 여러가지 고민이 생길 것 같습니다~
감사합니다ㅏㅏ!!
이해에 많은 도움이 되었습니다~~ 감사합니다!
감사합니다~
CSR: 첫 로딩 시간이 더 걸림, SEO 최적화가 잘 안됨,
18:10
존나명쾌합니다 감사합니다!!
감사합니다~
코드 보여주실때 더 확대해서 잘 보이게 해주시면 폰으로 영상 볼때 좋을것같습니다
아! 죄송합니다. 핸드폰을 고려를 전혀 안했네요 ㅠ
@@codefactory_official 반응형 동영상을 제작해 주세요 ㅋㅋㅋ
잘 보고 갑니다 감사합니다!!
감사합니다~
안녕하세요!! 우선 영상 너무잘봤습니다. 이해가 너무잘되네요 . 하나 궁금한게 있는데 SPA라는 건 CSR만 지원되면 가능한건가요? 클라이언트쪽에서 렌더링을 할수 있어야 동적으로 변경될 부분만 업데이트가 가능하기 때문에?!?! 그렇다면 Next.js를 이용한 React도 SPA라고 할수 있겠네요!? 그럼 SSR만으로 SPA를 만들수 있는 방법은 없을까요? 애초에 AJAX기술을 사용한 HTML을 서버에 놔둠으로써.. 제가 잘이해했나 모르겠네요.. 읽어주셔서감사합니다
안녕하세요. 좋은 질문이시고 거의 다 정확히 이이해를 하셨습니다. 다만 SPA 는 CSR이 가능한 모든것을 지칭하지 않습니다. 예를들어서 일반 전통적 사이트에서 Ajax를 사용해서 클라이언트 사이드 UI를 자바스크립트로 변형시키면 이또한 CSR이라고 볼 수 있습니다. 말그대로 클라이언트 사이드에서 렌더링 하니까요. 하지만 SPA는 아니죠 각 url 별로 새로운 페이지가 로딩이 되니까요. React 는 둘 다 해당됩니다. React 는 한 페이지로 모든 url을 렌더링하고 이 모든 작업을 클라이언트 사이드에서 하니까요. 말씀하신 NextJS의 경우 제작된 의도대로 세팅이 됐을 경우 SPA, CSR, SSR 세가지가 모두 해당이 됩니다. 왜냐하면 첫 요청을 하면 서버에서 미리 렌더링이 된 React 페이지가 전달되죠. 이후 첫 요청 다음에는 모두 클라이언트 사이드에서 렌더링이 됩니다.
@@codefactory_official 답변 감사합니다 덕분에 이해가 잘되었습다😄
그리고 질문이 있습니다. CSR과 SSR 둘다 서버에서 HTML파일을 내려준다고 할수 있는거 아닌지 궁금해요
SSR은 렌더링된 페이지 째로 HTML을 내려주는것이고 CSR은 body태그 안에 div태그만 있는 빈 HTML 파일만 내려줘서 렌더링은 클라이언트 사이드에서 하는걸루요
맞습니다. 맞는 말씀인데 정확히 의도한 페이지가 형성되어 있지 않은 형태로 받아지는거죠. SPA 설명드린 부분에서 말씀 드린것처럼 일반적으로 virtual dom 을 형성하기 위한 뼈대만 받게 됩니다.
SPA 3대장 리액트: 푸른꿩 앵귤러: 붉은개, 뷰: 초록소. 앵귤러가 jquery 도넛 만듬, 익스플러러 오야지!!!!!
초기에 한번에 모든페이지를 불러오는 CSR도 코드스플릿을 이용하면 이 또한 단점으로 언급하셨던 부분을 보완하는거라고 생각되는데 어떻게 생각하시는지 궁금합니당
맞습니다. 코드 스플리팅을 하면 번들링 사이즈 문제를 꽤나 해결할 수 있습니다. 이제 SPA도 성숙기에 접어드는 시기라 말할 수 있어서 단점들이 자체적으로도 많이 보완되고 있죠. 영상에서는 단점과 장점을 모두 극대화 하고 싶어서 원론적인 측면에서 이야기한게 없지않아 있습니다~
강의 너무 너무 잘 들었습니다! CSR과 SSR이 어떤건지 잘 모르고있었는데 덕분에 많이 알고 가요!! ☺️
감사합니다~
영상보고 댓글 남깁니다
혹시 카카오맵에 띄울 데이터가
2만개 정도되니 클러스터링을
해도 어마어마하게 느려지더라구요
그래서 카카오에 질문한걸 검색하니
서버에서 클러스터링을 한후에
결과만 보내라고 하는데
생초보라서 전혀 진도가 안나갑니다
서버에서 클러스터링을 어떻게 하는지
알수있을까요?
좋은밤 되시고
올한해 기저같은 일들이 가득하시길
기원드립니다
네 그럴경우 서버에서 클러스터링을 해서 보내줘야합니다. 모든 데이터를 다 보내주는게 아니라 영역으로 나눠서 해당 영역에 몇개의 데이터가 있는지만 보내주면 훨씬 빠르겠죠. 클러스터링은 알고리즘이 여러가지 있는데 가장 간단한건 k-means 클러스터링 알고리즘입니다. 카카오 맵에서 자동으로 해주는 클러스터링 알고리즘을 직접 코딩한다 생각하시면 되세요. 대학에서 통계를 안하셨으면 조금 어려워요. 각종 라이브러리들을 찾아보시는것도 방법이예요.
안녕하세요. 훌륭한 강의 감사합니다.
NextJS 를 사용하면 완성된 HTML 을 내려줄 수 있다고 이해했습니다.
HTML 을 완성해나가는 과정에 대해서 궁금한 점이 있는데요,
요즘은 backend 서버를 json 서버 형식으로 제공하는 경우가 많은데
특정 페이지에서 API 호출 결과 json을 바탕으로 HTML 을 구성하는 작업이 필요하다고 가정하면
1. 브라우저가 페이지를 요청하면,
2. nextjs 는 node 기반으로 배포되니, node에서 백엔드 서버로부터 데이터를 받아오고
3. 거기서 HTML 을 그린 다음에
4. 브라우저에 완성된 HTML 을 제공한다.
5. 그래서 브라우저에서는 JS 를 작동시킬 필요 없이 HTML 을 바로 그리면 된다
위 과정으로 이뤄지는게 맞을까요?
감사합니다.
맞습니다.