SSR의 CSR대비 장점을 부각시키려다보니까 SSR이 CSR보다 신기술인거처럼 포장되어버렸는데요, SSR은 CSR보다 더 오래된 기술입니다. AJAX가 뜨기이전에 동적으로 웹페이지를 생성할 수 있는 기술이 SSR이었고, PHP, ASP, JSP이런게 다 SSR 을 위해서 사용되던 것들이죠. CGI는 그것보다 더 오래되었구요. 당시에는 CSR이라는 개념이 없었기 때문에 서버 사이드 렌더링이란 이름 대신에 서버사이드 스크립트라고 불렀습니다. AJAX가 뜨면서 서버에서만 가능하던 것들이 클라이언트로 많이 넘어가면서 CSR이 발전하고, 영상의 내용처럼 CSR의 단점때문에 SSR이 재조명되었죠.
어떻게 이렇게 초보 개발자 입장에서 생각할 수 있는 의문점들을 캐치해서 영상으로 잘 정리해서 만들 수 있는지 정말 대단하십니다. 다른 강의에서는 중요한 핵심이지만 제대로 짚어주지 않거나 초보 입장에서 들었을 때 애매한 표현들을 항상 잘 캐치하시는데 굉장한 능력이십니다. 영상마다 따봉 누르고 있습니다. 엘리님 덕분에 유튜브가 더 풍요로워 지네요. 감사드립니다.
SEO 로보트에서 깜짝 놀랐어요. ㅋㅋ정말 엘리 님은 센스쟁이이신듯! 렌더링들에 관한 명료한 설명 감사합니다. 뭐가 제일 좋다가 아닌 모든 것에 장단점이 있으니 상황을 보고 제대로 쓰는게 중요하겠네요! 웹 개발 공부는 정말 무궁무진한 것 같아요! 엘리 님도 가족분들과 즐거운 설날 연휴 보내세요!!! ;)
로보트를 캐치 하셨다니 영상을 꼼꼼하게 보셨군요 🙌 다른 사람이 쓰고 있다고 해서 그냥 라이브러리를 가져다가 쓰는것이 아니라, 정확하게 어떤 장단점이 있는지, 그리고 추가적으로 고려해 봐야 하는것이 있는지 확인하는것이 좋아요. 이 영상이 다음에 관련 라이브러리를 고를때 도움이 되셧으면 좋겠어요 :)
저는 Next.js기반 ssr에다가 service worker (다른 댓글에 답글로 다신 workbox요!) 붙여서 사용하는데 공부한 지 6개월밖에 안되서 넘 야매로 짠 듯해 보이지만 주변 지인들이 속도 빠르고 좋다고 했어요!! 근데 ssg로 했어야 하나... 싶기도 해요😢 로그인 안 한 경우에 한해서 seo가 중요해서요! Google lightsail인가? 가기서 측정해보니 seo 점수는 높게 나왔는데... 뭔가 불안해요ㅠㅠ(웃긴건 드림코딩 타입스크립트 듣고 코드 교체 후 빌드하니 용량은 줄더라구요ㅋㅋ)
개발자를 꿈꾸는 비전공자 인데요.. 궁금한게 있습니다. 실력있는 개발자 분들은 필요한 공부는 어떻게 하시는 편인가요..? html/css -> java => jsp/ servlet => spring 이렇게 공부했는데 그다음 무엇을 공부할지 찾는 팁 같은 게 있을까요.. ㅠ 많이 만들다 보면 눈에 보일지... 이 상태로 취업해도 문제 없는건지 더 공부하고 취업을 해야하는지 .. 머리속이 복잡해요 ㅠㅠ
분야에 따라 다르다고 생각합니다. 저는 그래픽스 분야에 관심이 많아서 c/c++/java => 컴퓨터그래픽스/선형대수 이론 => OpenGL/Direct3D => Physically based rendering 순서대로 공부했네요. 게임이나 미디어아트 작품들을 직접 만들면서 공부를 했구요. 공부하기 전에 자기가 원하는 분야를 먼저 결정하는게 좋다고 생각해요.
안녕하세요 엘리님 ! 개인적인 질문하나 드려도 될까 모르겠습니다 😂 드림코딩의 모든 강의들을 결제해서 수강중인데요 ! 항상 수업을 들을 때 마다 맥북으로 개발하는 모습을 보다보니 저도 맥북을 하나 지르고싶어서 (ㅎㅎ..) 댓글을 남기게 되었어요 엘리님 영상중에 맥북을 추천하는 영상에 댓글로 M1 맥북을 구매하셨다고 하는데 혹시 프론트엔드 개발을 함에 있어서 호환성의 문제는 없는지 너무 궁금하네요 ..! 그리고 제 지갑으로는 맥북에어가 최대 사양일 것 같아서 에어로 살까 고민하는데 확실히 프로로 개발하는 것 보다는 많이 차이가 나려나요..? 고민이 생겨서 댓글 남깁니다 ㅠ
드림코딩님 영상 잘 만들어주셔서 감사합니다. 질문이 있습니다. 렌더링이라는 것이 쉽게 말하면 html을 실제 화면(view)로 만드는 것으로 알고 있는데 그렇다면 서버 사이드 렌더링이 말그대로 서버에서 html을 렌더링하는 것이라면 서버에서 클라이언트로 보내는 데이터는 html 형태가 아니라 이 html이 렌더링되어 나온 화면이 보내지는 것인가요? 그러면 그 html이 렌더링되어 나온 화면은 어떤 데이터의 형태인 건가요? 그리고 클라이언트에 해당하는 브라우저에는 렌더링 엔진이라는 것이 있는데 서버측에서 넘어온 것이 이미 렌더링된 화면이라면 브라우저는 렌더링 엔진을 쓰지 않게 되는 것가요?
너무 알기 쉽게 잘 설명 해주셔서 감사합니다! 이 영상이 처음 올라 왔을 때 이미 보았으나 ( 습관적으로 엘리님 영상은 올라오자 마자 보게 돼요 ㅋㅋ) 이런게 있구나 하고 넘어갔었거든요. 그런데 최근 공부하다가 ssr이란 용어를 많이 접해서 다시 정확하게 정리하러 왔습니다~ 늘 양질의 정보를 제공 해주셔서 감사해합니다.
엘리님 안녕하세요~! 영상을 보고 js와 브라우저 렌더링에 대해 공부해보다가 궁금한게 생겨서 댓글 남깁니다. SSR이 서버쪽에서 html 파일을 만든 뒤 client에게 넘기는 것이고, CSR은 js를 이용해 동적으로 client 쪽에서 html을 생성한다고 이해했습니다. 그렇다면 CSR의 경우 브라우저 렌더링은 어떤 시점에서 일어나는 건가요?? 제가 이해하기론 브라우저의 렌더링 엔진이 html 파일을 파싱해서 DOM tree를 구축하고 CSSOM과 합쳐서(?) 렌더 트리를 만든 뒤 화면에 그려내는 것 같은데요, SSR은 이미 html이 완성된 상태로 들어오는 것이니깐 이 브라우저 렌더링 과정이 이해가 되는데, CSR의 경우 일단 html이 완성되지 않은 상태로 넘어오는 것은 물론이고 SPA의 경우 컴포넌트가 계속 화면에서 사라지고, 새롭게 생성되는 과정이 발생할텐데 이 경우에는 브라우저 렌더링이 어떻게 이루어지는 건가요?? 컴포넌트가 새롭게 생성/삭제 될 때마다 DOM tree를 다시 만드는 건가요?
초기의 웹사이트 방식과 SSR의 차이점이 있다면 무엇인가요? 저는 초기 웹사이트의 경우, 서버의 역할이 단순히 이미 만들어진 html 및 js를 전달하기만 하고 SSR의 경우, 필요한 파일들과 data를 종합해 html, js 등 전달할 최소한의 파일을 요청 시마다(?) 만들어서 전달한다는 차이로 이해했습니다.. 이게 맞는 이해인 지 확인해주시면 감사하겠습니다!!
엘리님 너무 잘봤습니다. 좋은영상 감사합니다. 이번영상은 조금 어려워서 여러번돌려봤네요.. 돌려보다 궁금한점이 생겨서 질문드립니다..!! 궁금한 부분이 CSR방식을 이용하면 모두 SPA로 만들수 있나? 라는게 궁금합니다. 클라이언트 쪽에서 렌더링을 할수 있어야 Single Page Application을 만들수 있기 때문에. 위 내용이 맞다면 SSR만을 통해서 SPA를 만드는건 불가능한건가요?
![[10분 테코톡] 🎨 신세한탄의 CSR&SSR](http://i.ytimg.com/vi/YuqB8D6eCKE/mqdefault.jpg)
코로나로 온 가족이 함께 모일 수는 없지만, 그래도 훈훈하고 따뜻한 즐거운 설날 연휴 보내세요 😆 다음에는 제 얼굴을 들고 오는 영상으로 찾아뵐께요 :)
즐거운 설날 되시구, 새해 복 많이많이 받으세요 ❤️
새해복 많이 받으세요 좋은 영상 감사합니다
넹 얼굴 들고 오는 영상 기대 하겠슴다
영상에 나오는 애니메이션/ 설명할때 나오는 그림 영상들 어떻게 만드시는지 여쭈어봐도 될까요?
SSR의 CSR대비 장점을 부각시키려다보니까 SSR이 CSR보다 신기술인거처럼 포장되어버렸는데요, SSR은 CSR보다 더 오래된 기술입니다. AJAX가 뜨기이전에 동적으로 웹페이지를 생성할 수 있는 기술이 SSR이었고, PHP, ASP, JSP이런게 다 SSR 을 위해서 사용되던 것들이죠. CGI는 그것보다 더 오래되었구요. 당시에는 CSR이라는 개념이 없었기 때문에 서버 사이드 렌더링이란 이름 대신에 서버사이드 스크립트라고 불렀습니다. AJAX가 뜨면서 서버에서만 가능하던 것들이 클라이언트로 많이 넘어가면서 CSR이 발전하고, 영상의 내용처럼 CSR의 단점때문에 SSR이 재조명되었죠.
저도 이렇게 생각했어요
CSR이 신기술이고 SSR이 구기술이고 이렇게..
CSR = MPA 이렇게 혼동되기도 했는데, 엘리님 영상부터 봤으면 오개념 생길일도 없었을듯..
이제까지 블로그에서 SSR CSR 정리된거 엄청 많이 봤는데, 이 영상 하나로 종결이네요...이렇게 명쾌하고 깔끔하게 설명하다니.. 너무 허탈하고 당황스럽네요..ㅋㅋ 문화충격받은 느낌 ㅋㅋㅋㅋ
엘리님이 최고입니다 .
어떻게 이렇게 초보 개발자 입장에서 생각할 수 있는 의문점들을 캐치해서 영상으로 잘 정리해서 만들 수 있는지 정말 대단하십니다.
다른 강의에서는 중요한 핵심이지만 제대로 짚어주지 않거나 초보 입장에서 들었을 때 애매한 표현들을 항상 잘 캐치하시는데 굉장한 능력이십니다.
영상마다 따봉 누르고 있습니다. 엘리님 덕분에 유튜브가 더 풍요로워 지네요. 감사드립니다.
정성 가득한 좋은 피드백 정말 감사합니다 ❤️
발음이 어쩜 이렇게 또박또박하고 정확하신가요! 목소리도 너무너무 좋으세요!! 날가져요!
와우 오늘 면접준비하면서 이부분 따로공부하고있다가 놀려고 유튜브 왔다가 !!!!!!!!!! 이걸 딱!!!!!!!!!!!!!! 통했어요 ! 열공할게요 ㅋㅋ 놀지말라는 하늘의 뜻인가봐요
문선님 곧 면접 보시나요? 좋은 결과 있기를 제가 응원하고 있을께요 🙌 면접을 위해서 이 부분까지도 직접 찾아보고 공부 하셨던거예요? 준비성 최고👍
선배님 혹시 그러면 검색 엔진 취적화가 가장 중요한 웹사이트의 경우에는 서버사이드 랜더링 사이트랑 스태틱 사이트 중에서 스태틱 사이트가 제일 좋은 선택이라고 보면 될까요?!
검색 엔진 최적화가 중요하다면, 사용자가 접속할때마다 데이터가 사용자에 상관없이, 항상 일정한 데이터거나, 많은 데이터들을 동적으로 처리 하지 않아도 된다면 스태틱 사이트를, 유동적으로 자주 변경된다면 서버사이드 렌더링을 고려해 보면 좋을 것 같아요 🙌
@@dream-coding 답변 정말 감사합니다! 요즘 vue 서버사이드 랜더링 프레임워크 nuxt 에 관심이 생겨서 알아보고 있었는데 정말 알찬 영상 항상 감사합니다! 😊❤️
어찌 이리 짧은데 풍부한 컨텐츠를 만들 수 있는 것입니다.
엘리선배님! 오늘도 좋은 강의 감사합니다! ☺️ 선배님 궁금한게 있는데요 qraphql 외국에서는 프로젝트에 많이 사용하는 편인가요?!
정확한 통계자료를 아직 찾아 보지 않아서 일반화 해서 말씀 드리기에는 무리가 있지만, GraphQL인기가 점점 올라가고 있지만, 아직까지는 Rest API가 많이 이용되어 지고 있어요 (오랜 기간동안 지속적으로 쓰여지던 아이이기 때문에)
@@dream-coding 답변 정말 감사합니다! ☺️
좋아요 3개 누르고 싶은 심정 ㅠㅠ 엘리님 영상은 전교1등 정리노트 본 것 같은 느낌이에요. ㅎㅎ
요즘은 개발자들 카톡방에 가장 많이 추천받는 유튜버 이신 것 같네요. 늘 감사합니다 : D
좋게 봐주셔서 감사해요 ❤️ 개발자들 카톡방은 어떻게 들어 가는건가요?ㅋㅋㅋ 저도 들어가보고 싶어요~~~ 슬랙같은 건가요?
SEO 로보트에서 깜짝 놀랐어요. ㅋㅋ정말 엘리 님은 센스쟁이이신듯! 렌더링들에 관한 명료한 설명 감사합니다. 뭐가 제일 좋다가 아닌 모든 것에 장단점이 있으니 상황을 보고 제대로 쓰는게 중요하겠네요! 웹 개발 공부는 정말 무궁무진한 것 같아요! 엘리 님도 가족분들과 즐거운 설날 연휴 보내세요!!! ;)
로보트를 캐치 하셨다니 영상을 꼼꼼하게 보셨군요 🙌 다른 사람이 쓰고 있다고 해서 그냥 라이브러리를 가져다가 쓰는것이 아니라, 정확하게 어떤 장단점이 있는지, 그리고 추가적으로 고려해 봐야 하는것이 있는지 확인하는것이 좋아요. 이 영상이 다음에 관련 라이브러리를 고를때 도움이 되셧으면 좋겠어요 :)
두번 보니 이해가 가네요! 덕분에 이제 CSR과 SSR은 자신있게 설명할수있을것같습니다. 매번 좋은설명 감사드려요...!!!!❤🔥
와 오늘 하루종일 이거 공부했는데 엘리님이 정리해주셨었네요;; 구글 알림 해놨는데 왜 못보고 이제야 봤는지... 복습이라도 감사히 해봅니다. 어디가서 스승이 누구냐고 물으면 엘리님이라고 해야겠어요...
하하 J LEE 님 센스있는 코멘트 감사해요 :))
머릿속에 떠다니는 용어들과 차이점을 한 번에 깔끔하게 정리할 수 있는 영상이네요! 관련 용어를 모르신다면 각각 공부하시고 마무리하면서 다시 보시면 정말 좋을 거 같습니다 👍
진짜 짱 좋다 ... 😂 약간 이해 안됐던 것들도 한방에 정리되는 느낌이네요 너무 감사합니다 ~~
영상 올라오자마자 5번은 봤었는데 그 당시에는 뭔가 두루뭉실하게 잡히던 개념이, 그 사이에 또 공부 좀 했다고 지금 다시보니까 이해가 가네요ㅠㅠㅠㅠㅠ 그것도 진짜 쏙쏙 이해가 가요. 내용도 알차고 영상도 진짜 너무 잘만드시고.... 진짜 엘리님 최고👍
맞아요 맞아요~ 짧은 영상 하나만으로 다 가져 가기 보다는 Yez님과 같이 스스로 공부하면서 다시 병행해서 관련 영상을 보시면 더 시너지 효과가 일어 나는거 같아요 😊 감사합니다
어떻게 이렇게 훌륭한 컨텐츠를 만들 수 있죠? 항상 감탄합니다!
이건 진짜 좋아요를 안누를래야 안누를수가 없는거네요..신입인데 많이바워갑니다
진짜 컨텐츠 천재다 천재
얼만큼 효율적으로 배치해서 홈페이지를 보여줄수있느냐가 프론트의 주요업무인것이죠?
엘리덕분에 개념정리 잘했습니다 !
뭘 모르는지 모르는 상태에서도 보기 좋은 영상이네요.
한국 나이로 52, 90년대 초반 OOP 개념 CPP 코딩 접한 이후로 요즘처럼 코딩이 즐거운 적이 없네요. 엘리님 덕분에 새로운 분야를 알아가는 재미가 넘칩니다. 한클릭씩 정지시켜가며 열공중이네요. 늘 고맙습니다.
와, 열심히 공부하시고 살아 가는 모습에 저도 많이 배웁니다 저도 감사합니다 ❤️
목소리가 너무 좋으셔서 영상 볼때마다 기분좋아져요😆 항상 좋은영상 감사합니다
댓글 왠만하면 잘 안다는데 엘리님이 말씀을 너무 잘하셔서 안 달수가 없네요
최고이십니다
감사합니다 😊
react.js로 개발하다가 SSR때문에 next.js를 고려해보려고 알아보고있다가 이 영상이 생각나서 다시 복습하러왔어요👋
제가 CSR과 SSR을 확실하게 이해하게 된 영상입니다. 감사합니다. 😊
와 - 엄청 많은 정보를 꽉 채워넣었네요. 무심코 가볍게 읽을만한 내용처럼 보이는데 실제로는 몇번 봐야 할 정도로 알찬 정보인것 같아요.
맞아요~ 중요한 내용을 10분안으로 꾹꾹 눌러 담은거라 하하 다음에 다른 자료들과 함께 다시 맘잡고 정리해 보시면 좋을 것 같아요 :)
CSR SSR에 대해서 말만 많이 들었지 잘 이해 못하고 있었는데 한방에 정리돼요. 저 이런 컨텐츠 너무 좋아요 짱짱짱
제가 열심히 준비한 이런 개념정리 컨텐츠 좋아해 주셔서 감사합니다 ❤️
저는 Next.js기반 ssr에다가 service worker (다른 댓글에 답글로 다신 workbox요!) 붙여서 사용하는데 공부한 지 6개월밖에 안되서 넘 야매로 짠 듯해 보이지만 주변 지인들이 속도 빠르고 좋다고 했어요!! 근데 ssg로 했어야 하나... 싶기도 해요😢 로그인 안 한 경우에 한해서 seo가 중요해서요! Google lightsail인가? 가기서 측정해보니 seo 점수는 높게 나왔는데... 뭔가 불안해요ㅠㅠ(웃긴건 드림코딩 타입스크립트 듣고 코드 교체 후 빌드하니 용량은 줄더라구요ㅋㅋ)
엘리님 지식에 절반이라도 제가 받을 수 있다면 그걸로 만족합니다 ㅜㅜ!!
영상 많이 올려주세요오오오~!! 많은 사람이 기다리고 있습니다 히히
그리고 새해복 많이 받으세요!! ㅎㅎ
Csr과 ssr 불러오는 과정의 차이에 대해 궁금했는데 정말 유익한 영상이었습니다.
개발자를 꿈꾸는 비전공자 인데요..
궁금한게 있습니다. 실력있는 개발자 분들은 필요한 공부는 어떻게 하시는 편인가요..?
html/css -> java => jsp/ servlet => spring 이렇게 공부했는데 그다음 무엇을 공부할지 찾는 팁 같은 게 있을까요.. ㅠ
많이 만들다 보면 눈에 보일지... 이 상태로 취업해도 문제 없는건지 더 공부하고 취업을 해야하는지 .. 머리속이 복잡해요 ㅠㅠ
취업전, 취업후, 단계, 프로젝트 그리고 앞으로 목표에 따라서 배워야 하는게 달라지는 거 같아요. 지금 현재 취업을 준비 하고 계시다면, 어느쪽으로 가시고자 하는지 취업하고자 하는 분야에 따라서 그 부분을 조금 전략적으로 공부 하시고 준비 하시는게 좋아요 :)
분야에 따라 다르다고 생각합니다.
저는 그래픽스 분야에 관심이 많아서 c/c++/java => 컴퓨터그래픽스/선형대수 이론 => OpenGL/Direct3D => Physically based rendering 순서대로 공부했네요.
게임이나 미디어아트 작품들을 직접 만들면서 공부를 했구요.
공부하기 전에 자기가 원하는 분야를 먼저 결정하는게 좋다고 생각해요.
깔끔하고 명확한 정리 감사합니다:) 코딩 가이드 이렇게 잘해주시는 분 없는거 같아요~~ 유료 강의 수준보다 낫습니다:)
감사합니다 🙆♀️
설명을 너무 잘해주셔서 쏙쏙 들어옵니다. 강의 감사드립니다.
똑같은 정보도 엘리님이 설명해주시는건 왜 이렇게 쏙쏙 이해가 잘되는건지.. 늘 감탄하고 많이 배우고가요. 감사합니다🙌🏻!!
하하 이해가 잘 된다니 정말 좋아요 😆
안녕하세요 엘리님 ! 개인적인 질문하나 드려도 될까 모르겠습니다 😂 드림코딩의 모든 강의들을 결제해서 수강중인데요 ! 항상 수업을 들을 때 마다 맥북으로 개발하는 모습을 보다보니 저도 맥북을 하나 지르고싶어서 (ㅎㅎ..) 댓글을 남기게 되었어요 엘리님 영상중에 맥북을 추천하는 영상에 댓글로 M1 맥북을 구매하셨다고 하는데 혹시 프론트엔드 개발을 함에 있어서 호환성의 문제는 없는지 너무 궁금하네요 ..! 그리고 제 지갑으로는 맥북에어가 최대 사양일 것 같아서 에어로 살까 고민하는데 확실히 프로로 개발하는 것 보다는 많이 차이가 나려나요..? 고민이 생겨서 댓글 남깁니다 ㅠ
에어로는.. 사실 개발하기에 많은 한계가 있으실 것 같아요 ㅠ ㅠ 낮은 사양이라도 프로로 구입하셨으면 좋겠어요
이런 영상 기본 개념 영상 너무 좋습니다!! 👍
두번 세번 보겠습니다
건우님이 좋아해 주시니 저도 좋네요 🤩
입문자입니다. 와.. 얼핏 보기만해도 최신동향을 정말 알기쉽게 설명해주셔서 이해가 쏙쏙갔습니다, 기초 마인드부터 탄탄히 공부하고있게되네요. ㅎㅎ감사합니다.
정리가 잘 되신다니 다행이예요 🙌
ssr 설명 너무나 감사합니다. 진짜 여러번 다른곳에서 csr ssr 공부하다가 이 강의보니까 명료해지네요.
질문이 있습니다 각각 css는 언제 받아오는거에요? html 전송될때 css도 전송되나요?
강의가 깔끔하고 좋은 강의네요
너무 잘 보고 있습니다! 옛날 자바스크립트 영상을 보면서 차근차근 공부하고 있는데 큰 도움 받고 있는 것 같습니다. 항상 좋은 영상 올려주셔서 감사합니다!😊😊
이렇게 코멘트 남겨 주셔서 감사해요 😊
최고입니다! 새해 복 많이 받으세요!
항상 좋은 영상 감사드려요! 항상 건강하시고 새해복 많이 받으세요!
영상퀄리티가 점점 좋아지는 것 같아요 ㅎㅎ 오봇 목소리까지!! 오늘도 많이 배우고 갑니다😊
좋은 하루 되세요 엘리님!
감사합니다 ❤️
드림코딩님 영상 잘 만들어주셔서 감사합니다.
질문이 있습니다. 렌더링이라는 것이 쉽게 말하면 html을 실제 화면(view)로 만드는 것으로 알고 있는데 그렇다면 서버 사이드 렌더링이 말그대로 서버에서 html을 렌더링하는 것이라면 서버에서 클라이언트로 보내는 데이터는 html 형태가 아니라 이 html이 렌더링되어 나온 화면이 보내지는 것인가요? 그러면 그 html이 렌더링되어 나온 화면은 어떤 데이터의 형태인 건가요? 그리고 클라이언트에 해당하는 브라우저에는 렌더링 엔진이라는 것이 있는데 서버측에서 넘어온 것이 이미 렌더링된 화면이라면 브라우저는 렌더링 엔진을 쓰지 않게 되는 것가요?
너무 쉽게 이해할 수 있도록
신경 많이 써주셨네요
정말 감사합니다
유익한 영상 감사합니다. 최근에 리액트로 풀스택 앱만들기 프로젝트를 공부했는데 그때 처음들었던 용어에 대한 정리가 되었습니다. 새해 복 많이 받으세요!
웹사이트 성격에 적합한 CSR, SSR 방식의 선정이 중요할 것 같네요.
감사합니다 너무 쉽게 잘 설명이 되어 있어 금방 이해가 됐습니다
미국 선생님 생각나게 하는 진행..좋아요
문과 엔지니어로 취직해서 지금까지 별로 이 부분을 깊게 알지 못한 채로 일해왔던 거 있죠.. 반성하고 좋은 정보 얻어갑니다 ㅠㅠ항상 감사합니다
새해복 많이받으세요!!!
와우 최고의정리입니다 ㅋㅋㅋ 소름 돋았어요 감사해요 ㅎㅎ 머리속에 자유롭게 다니던 지식들이 한군데에 잘 모여서 정리가 되었어요
너무 알기 쉽게 잘 설명 해주셔서 감사합니다! 이 영상이 처음 올라 왔을 때 이미 보았으나 ( 습관적으로 엘리님 영상은 올라오자 마자 보게 돼요 ㅋㅋ) 이런게 있구나 하고 넘어갔었거든요. 그런데 최근 공부하다가 ssr이란 용어를 많이 접해서 다시 정확하게 정리하러 왔습니다~ 늘 양질의 정보를 제공 해주셔서 감사해합니다.
엘리님 영상 진짜 넘넘넘 고퀄아닌가요.. 최고입니다 짱짱
와! 궁금해하고있었는데 영상이 딱!
완벽하게 이해하려고 2번연속봤어요ㅎㅎㅎ이제 안헷갈릴것 같아요 감사합니다
와 두번 보셨다니 🤩
평소에 확실히 설명하지 못하던 개념들인데, 이렇게 쉽고 간단하게 설명해주셔서 너무 감사합니다😁
10분도 안 되는 시간에 이렇게 정수를 담을 수 있다니 대단하십니다!!!
감사합니다 🙌
안녕하세요! 고생많으십니다!
ssr, csr 프로젝트도 만들어보고, 엘리님 영상을 포함한 여러 자료들을 접해가며 확신을 갖고싶은 고민?생각? 이 있는데요
react는 build시 root만 생성되고
next는 특정 페이지를 정적생성한다면 build시에 그부분은 html에 만들어지는데
next의 경우 서버에서 클라이언트에게 보내주는 정적 페이지들은 개발자의 빌드단계에서 완성되고 서버는 그냥 빌드단계에서 만들어진걸 뿌려주기만 하는거라고 보는게 맞나요..?
그것이 맞다면 csr과 ssr의 차이는 빌드단계에서 결정나는게 맞나요..?
아니면.. 제가 잘못알고있는걸까요..?
와 엄청난 양질의 설명이네요. 설명 무쳤다
와 ㅠㅠㅠㅠ요즘 리엑트로 프로젝트 하면서 너무너무 고민하던 부분이였는데 정확히 집어서 알려주셔서 감사해요! SEO부분에 고민이 많았는데 Next.js를 배워봐야겠어요!!
어떻게 항상 궁금한 정보만 만들어주시는지...! 좋은 영상 감사합니다
엘리님 next같은건 js라서 서로 빌드도같이할수있고 호환성도좋은데요 리액트를 프론트스택으로두고, 스프링부트를 백엔드로 두고개발하면 기본적으로 CSR이면서 SSR은 많이어렵고, SSG는 아직안되는게맞는건가요?
컨텐츠의 질이 너무 좋네요. 구독하고 갑니다.
엘리님 안녕하세요~! 영상을 보고 js와 브라우저 렌더링에 대해 공부해보다가 궁금한게 생겨서 댓글 남깁니다.
SSR이 서버쪽에서 html 파일을 만든 뒤 client에게 넘기는 것이고, CSR은 js를 이용해 동적으로 client 쪽에서 html을 생성한다고 이해했습니다.
그렇다면 CSR의 경우 브라우저 렌더링은 어떤 시점에서 일어나는 건가요??
제가 이해하기론 브라우저의 렌더링 엔진이 html 파일을 파싱해서 DOM tree를 구축하고 CSSOM과 합쳐서(?) 렌더 트리를 만든 뒤 화면에 그려내는 것 같은데요, SSR은 이미 html이 완성된 상태로 들어오는 것이니깐 이 브라우저 렌더링 과정이 이해가 되는데, CSR의 경우 일단 html이 완성되지 않은 상태로 넘어오는 것은 물론이고 SPA의 경우 컴포넌트가 계속 화면에서 사라지고, 새롭게 생성되는 과정이 발생할텐데 이 경우에는 브라우저 렌더링이 어떻게 이루어지는 건가요?? 컴포넌트가 새롭게 생성/삭제 될 때마다 DOM tree를 다시 만드는 건가요?
와 엘리님 제가 궁금했던 개념들이었는데 잘 정리해주셔서 감사드립니다!! :)
중간에 기계음 목소리 귀엽네요ㅎㅎㅎ
잘 배우고 갑니다~ :)
이 주제를 이런 여유있는 템포로 10분 내로 알기 쉽게 전달이 되는게 놀랍네요. 깔끔하고 좋네요^^
좋은 피드백 주셔서 감사해요 😊
이런 기술 트렌드 올려주시는것 정말 감사하게 보고 있습니다! 🙏
기술 트렌드 영상 좋아해 주셔서 감사해요 😊
정말 좋은 내용과 강의 매번 감사드립니다.
정리 너무 깔끔해요 감사합니다~
설명너무짱(cool)이에여 1.5배로들어도 귀에 콕콕박혀요
정말 깔끔하게 설명해주셔서 감사합니다.
좋은 하루 되세요^^
감사합니다 🙆♀️
정말 궁금했던 개념에대해서 너무 잘 설명해주셔서 이해가 잘 되었습니다. 좋은 영상 감사합니다.
이해 너무 쉬워요! 좋은 영상 감사합니다~
으아 컨텐츠와 설명논리가 너무 좋습니다....
오늘도 좋은 영상 감사합니다!!! 이런 정보 진짜 어디 없잖아요......:🥰 항상 건강 조심하시고 즐거운 명절 보내세요 엘리님 !!!!!
Anne님 항상 감사해요 ❤️
영어를 하시는지 한국어를 하시는지 모르는 그 미끄러지듯한 발음처럼 미끄러지듯 머릿속에 쏙쏙 들어오네요. 감사합니다
하하 좋게 들어 주셔서 감사해요 🤩 영어가 모국어가 아닌데 영어권 회사에서 오랫동안 일하다 보니깐 한국어로 얘기할때 영어 단어지만 한국어 발음으로 쓰이고 있는 단어가 나오면 어떻게 말해야 할지 말하면서도 갈팡질팡하네요 ㅋㅋ
웹개발에 관심이있어서 공부 하려고 구독했는데 이런 꿀같은 영상이! 목소리가 너무 예쁘셔서 1초도 안 쉬고 집중했네요 ㅋㅋㅋ 좋은 영상 감사합니다!
좋은 피드백 주셔서 감사해요 😊
면접 준비하느라 다시 자세히 보고있습니다. 정말 도움이 많이 됩니다! 브라우저101에 이어 nodejs인강까지 잘 듣고있습니다. 항상 감사해요:)
언제나 퀄리티높은 영상 감사합니다!!
역시나 정리가 쉽고 깔끔해요! 내공이 느껴지네요. 인턴에게 이 링크 던져주고 보라고 해야겠어요 ㅋㅋ
첫로딩은 ssr로, 그 다음부터는 spa로 하는 방법도 괜찮은거 같아요~
하하 인턴에게 주신다니 🤩 맞아요 맞아요 저도 그렇게 많이 해요 :) SSR -> SPA 순서로. 첫로딩은 아니고, 정말 중요한 뼈대만 SSR 로 먼저 렌더링 해서 보내주고 있어요
ㅋㅋㅋㅋ 로봇...ㅋㅋ 진지하게 보다가 터졌네요
항상 유용한 정보 감사합니다~!
또 이렇게 좋고 유용한 정보를 ㅠㅠ 감사합니다ㅎㅎ
엘리님도 즐거운 설 보내세요ㅎㅎ
즐거운 설날 보내세요 🙌
영상 감사합니다 반복해서 보면서 익혀야겠어요
내용 이해도 쉽고 깔끔해요. 덕분에 low SEO 도 제대로 알게되었네요 :)
좋은 자료 정말 감사드립니다.
초기의 웹사이트 방식과 SSR의 차이점이 있다면 무엇인가요?
저는 초기 웹사이트의 경우,
서버의 역할이 단순히 이미 만들어진 html 및 js를 전달하기만 하고
SSR의 경우, 필요한 파일들과 data를 종합해 html, js 등 전달할 최소한의 파일을 요청 시마다(?) 만들어서 전달한다는 차이로 이해했습니다..
이게 맞는 이해인 지 확인해주시면 감사하겠습니다!!
감사합니다! 즐거운 설 되세요!
좋은 명절 보내세요 :)
영상 처음부터 끝까지 완전 액기스네요
하하 좋게 봐주셔서 감사합니다 ✨
CSR과SSR이 SPA에포함되는건가요? 아니면 SPA이후 나온 다른부류의 기술들인가요?
글로만 볼 때는 추상적이라 잘 머리에 안들어왔는데 역시 이렇게 영상으로 보니까 너무 쉽게 이해되네요 :)
이해가 되셨다니 다행이예요 🙌
드림코딩형 좋은 영상 감사해요
엘리님 너무 잘봤습니다. 좋은영상 감사합니다. 이번영상은 조금 어려워서 여러번돌려봤네요.. 돌려보다 궁금한점이 생겨서 질문드립니다..!! 궁금한 부분이 CSR방식을 이용하면 모두 SPA로 만들수 있나? 라는게 궁금합니다. 클라이언트 쪽에서 렌더링을 할수 있어야 Single Page Application을 만들수 있기 때문에. 위 내용이 맞다면 SSR만을 통해서 SPA를 만드는건 불가능한건가요?
SPA + SSR을 병합해서 만들 수도 있어요 :)
깔끔하게 알려주셔서 감사합니다
항상 정말 유용한 정보 감사합니다 엘리쌤❤️
엘리님 XHR은 aka AJAX가 아닐까요? 헷갈려서 댓글 달아봅니다 ㅎㅎ (1:18)
AJAX는 비동기 처리를 가리키는 용어이고, XHR은 그것을 가능하게 하는 기술중 하나예요
이 채널 너무 애정합니다🙋♀️
Code your Dream ✨
사이트 규모, 개발시간 따라 무엇을 선택할지 고민이 필요 하네요. 신기술이 만능인듯 이야기하기 전에...
프론트엔드개발자를 목표로 공부하는 학생입니다. 매번 영상 잘보고있습니다!! 매번 이렇게 이해하기 좋은 영상 감사합니다!!!!
안녕하세요 :) 코멘트 남겨 주셔서 감사합니다 ✨