서버사이드 렌더링 (개발자라면 상식으로 알고 있어야 하는 개념 정리 ⭐️)
HTML-код
- Опубликовано: 31 июл 2024
- 클라이언트 사이드 렌더링(CSR)과 서버사이드 렌더링(SSR) 요즘 많이 들어 보셨죠? 도대체 이 아이들은 무엇인지, 우리가 어떤 점을 고려해서 선택해서 사용해야 하는지도 함께 9분이라는 짧은 영상안에 모든것을 정리해 보도록 할께요.(↙ 자세한 내용)
___________________________
💡 풀스택 개발 로드맵 ⇢ academy.dream-coding.com/page...
🚀 엘리와 더 체계적으로 배우고 싶다면 ⇢ 드림코딩 아카데미:
academy.dream-coding.com/
.....................................................
✨ 관련된 영상들
웹 최신 트렌드 : • 2021 웹개발 트렌드 (개발자라면 알아...
리액트를 배워보고 싶다면: • 리액트 강의 + 유튜브 클론코딩 외 실전...
.....................................................
☀️ 드림코딩 엘리
모든 드림코더분들이 개발자로 성장해 나가고 꿈을 이루는 여정에 함께 할 채널입니다 :)
❝Don't forget to code your dream
여러분들의 멋진 꿈을 코딩하세요 ⭐️
.....................................................
🌐 프론트엔드 개발자 되기 입문자편 영상 목록:
• 프론트엔드 강의 - 프론트엔드 개발자 되...
📒 자바스크립트 기초 강의 영상 목록:
• 자바스크립트 기초 강의 (ES5+): 같...
💻 개발자라면 누구나 알고 있으면 좋은 지식 💡
• 개발자라면 누구나 알고 있으면 좋은 지식 💡
💰 개발자 경력 관리 영상 목록:
• 승승장구 커리어 관리 🚀
📈 IT 트렌드
• IT 트렌드 📈
📷 개발자 브이로그
• 개발자 브이로그 📷
🤗 생산력 향상 팁
• Tech & Tools ❤️
.....................................................
00:00 소개
00:13 웹의 역사(SPA 시대까지)
01:55 CSR (클라이언트 사이드 렌더링)
04:22 SSR (서버 사이드 렌더링)
05:59 TTV와 TTI 측면에서 한번더 정리
07:33 어떻게 개선할 수 있을까?
08:16 Gatsby
08:54 Next.JS
09:16 정리
.....................................................
#프론트엔드#서버사이드렌더링#웹개발 
Наука
![CENTRAL CEE - GEN Z LUV [VERTICAL VIDEO]](http://i.ytimg.com/vi/VIbidJm9q34/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이란 용어를 많이 접해서 다시 정확하게 정리하러 왔습니다~ 늘 양질의 정보를 제공 해주셔서 감사해합니다.
엘리님 지식에 절반이라도 제가 받을 수 있다면 그걸로 만족합니다 ㅜㅜ!!
영상 많이 올려주세요오오오~!! 많은 사람이 기다리고 있습니다 히히
그리고 새해복 많이 받으세요!! ㅎㅎ
유익한 영상 감사합니다. 최근에 리액트로 풀스택 앱만들기 프로젝트를 공부했는데 그때 처음들었던 용어에 대한 정리가 되었습니다. 새해 복 많이 받으세요!
엘리님 영상 진짜 넘넘넘 고퀄아닌가요.. 최고입니다 짱짱
와우 최고의정리입니다 ㅋㅋㅋ 소름 돋았어요 감사해요 ㅎㅎ 머리속에 자유롭게 다니던 지식들이 한군데에 잘 모여서 정리가 되었어요
최고입니다! 새해 복 많이 받으세요!
똑같은 정보도 엘리님이 설명해주시는건 왜 이렇게 쏙쏙 이해가 잘되는건지.. 늘 감탄하고 많이 배우고가요. 감사합니다🙌🏻!!
하하 이해가 잘 된다니 정말 좋아요 😆
정말 궁금했던 개념에대해서 너무 잘 설명해주셔서 이해가 잘 되었습니다. 좋은 영상 감사합니다.
또 이렇게 좋고 유용한 정보를 ㅠㅠ 감사합니다ㅎㅎ
엘리님도 즐거운 설 보내세요ㅎㅎ
즐거운 설날 보내세요 🙌
이제까지 블로그에서 SSR CSR 정리된거 엄청 많이 봤는데, 이 영상 하나로 종결이네요...이렇게 명쾌하고 깔끔하게 설명하다니.. 너무 허탈하고 당황스럽네요..ㅋㅋ 문화충격받은 느낌 ㅋㅋㅋㅋ
엘리님이 최고입니다 .
발음이 어쩜 이렇게 또박또박하고 정확하신가요! 목소리도 너무너무 좋으세요!! 날가져요!
와 ㅠㅠㅠㅠ요즘 리엑트로 프로젝트 하면서 너무너무 고민하던 부분이였는데 정확히 집어서 알려주셔서 감사해요! SEO부분에 고민이 많았는데 Next.js를 배워봐야겠어요!!
너무 잘 보고 있습니다! 옛날 자바스크립트 영상을 보면서 차근차근 공부하고 있는데 큰 도움 받고 있는 것 같습니다. 항상 좋은 영상 올려주셔서 감사합니다!😊😊
이렇게 코멘트 남겨 주셔서 감사해요 😊
오늘도 좋은 영상 감사합니다!!! 이런 정보 진짜 어디 없잖아요......:🥰 항상 건강 조심하시고 즐거운 명절 보내세요 엘리님 !!!!!
Anne님 항상 감사해요 ❤️
어떻게 항상 궁금한 정보만 만들어주시는지...! 좋은 영상 감사합니다
어떻게 이렇게 훌륭한 컨텐츠를 만들 수 있죠? 항상 감탄합니다!
영상 올라오자마자 5번은 봤었는데 그 당시에는 뭔가 두루뭉실하게 잡히던 개념이, 그 사이에 또 공부 좀 했다고 지금 다시보니까 이해가 가네요ㅠㅠㅠㅠㅠ 그것도 진짜 쏙쏙 이해가 가요. 내용도 알차고 영상도 진짜 너무 잘만드시고.... 진짜 엘리님 최고👍
맞아요 맞아요~ 짧은 영상 하나만으로 다 가져 가기 보다는 Yez님과 같이 스스로 공부하면서 다시 병행해서 관련 영상을 보시면 더 시너지 효과가 일어 나는거 같아요 😊 감사합니다
영상퀄리티가 점점 좋아지는 것 같아요 ㅎㅎ 오봇 목소리까지!! 오늘도 많이 배우고 갑니다😊
좋은 하루 되세요 엘리님!
감사합니다 ❤️
두번 보니 이해가 가네요! 덕분에 이제 CSR과 SSR은 자신있게 설명할수있을것같습니다. 매번 좋은설명 감사드려요...!!!!❤🔥
정말 좋은 내용과 강의 매번 감사드립니다.
언제나 퀄리티높은 영상 감사합니다!!
새해복 많이받으세요!!!
설명을 너무 잘해주셔서 쏙쏙 들어옵니다. 강의 감사드립니다.
이 주제를 이런 여유있는 템포로 10분 내로 알기 쉽게 전달이 되는게 놀랍네요. 깔끔하고 좋네요^^
좋은 피드백 주셔서 감사해요 😊
면접 준비하느라 다시 자세히 보고있습니다. 정말 도움이 많이 됩니다! 브라우저101에 이어 nodejs인강까지 잘 듣고있습니다. 항상 감사해요:)
이런 영상 기본 개념 영상 너무 좋습니다!! 👍
두번 세번 보겠습니다
건우님이 좋아해 주시니 저도 좋네요 🤩
머릿속에 떠다니는 용어들과 차이점을 한 번에 깔끔하게 정리할 수 있는 영상이네요! 관련 용어를 모르신다면 각각 공부하시고 마무리하면서 다시 보시면 정말 좋을 거 같습니다 👍
댓글 왠만하면 잘 안다는데 엘리님이 말씀을 너무 잘하셔서 안 달수가 없네요
최고이십니다
감사합니다 😊
SEO 로보트에서 깜짝 놀랐어요. ㅋㅋ정말 엘리 님은 센스쟁이이신듯! 렌더링들에 관한 명료한 설명 감사합니다. 뭐가 제일 좋다가 아닌 모든 것에 장단점이 있으니 상황을 보고 제대로 쓰는게 중요하겠네요! 웹 개발 공부는 정말 무궁무진한 것 같아요! 엘리 님도 가족분들과 즐거운 설날 연휴 보내세요!!! ;)
로보트를 캐치 하셨다니 영상을 꼼꼼하게 보셨군요 🙌 다른 사람이 쓰고 있다고 해서 그냥 라이브러리를 가져다가 쓰는것이 아니라, 정확하게 어떤 장단점이 있는지, 그리고 추가적으로 고려해 봐야 하는것이 있는지 확인하는것이 좋아요. 이 영상이 다음에 관련 라이브러리를 고를때 도움이 되셧으면 좋겠어요 :)
감사합니다! 즐거운 설 되세요!
좋은 명절 보내세요 :)
와 - 엄청 많은 정보를 꽉 채워넣었네요. 무심코 가볍게 읽을만한 내용처럼 보이는데 실제로는 몇번 봐야 할 정도로 알찬 정보인것 같아요.
맞아요~ 중요한 내용을 10분안으로 꾹꾹 눌러 담은거라 하하 다음에 다른 자료들과 함께 다시 맘잡고 정리해 보시면 좋을 것 같아요 :)
이런 기술 트렌드 올려주시는것 정말 감사하게 보고 있습니다! 🙏
기술 트렌드 영상 좋아해 주셔서 감사해요 😊
내용 이해도 쉽고 깔끔해요. 덕분에 low SEO 도 제대로 알게되었네요 :)
얼만큼 효율적으로 배치해서 홈페이지를 보여줄수있느냐가 프론트의 주요업무인것이죠?
엘리덕분에 개념정리 잘했습니다 !
너무 쉽게 이해할 수 있도록
신경 많이 써주셨네요
정말 감사합니다
와 엘리님 제가 궁금했던 개념들이었는데 잘 정리해주셔서 감사드립니다!! :)
중간에 기계음 목소리 귀엽네요ㅎㅎㅎ
잘 배우고 갑니다~ :)
항상 정말 유용한 정보 감사합니다 엘리쌤❤️
제가 CSR과 SSR을 확실하게 이해하게 된 영상입니다. 감사합니다. 😊
컨텐츠의 질이 너무 좋네요. 구독하고 갑니다.
감사합니다 너무 쉽게 잘 설명이 되어 있어 금방 이해가 됐습니다
CSR SSR에 대해서 말만 많이 들었지 잘 이해 못하고 있었는데 한방에 정리돼요. 저 이런 컨텐츠 너무 좋아요 짱짱짱
제가 열심히 준비한 이런 개념정리 컨텐츠 좋아해 주셔서 감사합니다 ❤️
영상 감사합니다 반복해서 보면서 익혀야겠어요
정리 너무 깔끔해요 감사합니다~
웹개발에 관심이있어서 공부 하려고 구독했는데 이런 꿀같은 영상이! 목소리가 너무 예쁘셔서 1초도 안 쉬고 집중했네요 ㅋㅋㅋ 좋은 영상 감사합니다!
좋은 피드백 주셔서 감사해요 😊
이해 너무 쉬워요! 좋은 영상 감사합니다~
정말 깔끔하게 설명해주셔서 감사합니다.
좋은 하루 되세요^^
감사합니다 🙆♀️
엘리님 항상 좋은 영상 감사합니다.
존경합니다!! 🤩
감사합니다 🙌
좋아요 3개 누르고 싶은 심정 ㅠㅠ 엘리님 영상은 전교1등 정리노트 본 것 같은 느낌이에요. ㅎㅎ
요즘은 개발자들 카톡방에 가장 많이 추천받는 유튜버 이신 것 같네요. 늘 감사합니다 : D
좋게 봐주셔서 감사해요 ❤️ 개발자들 카톡방은 어떻게 들어 가는건가요?ㅋㅋㅋ 저도 들어가보고 싶어요~~~ 슬랙같은 건가요?
너무 유용한 정보를 쉽게 잘 설명해주셔서 항상 감사합니다 :)
감사합니다 🍻
10분도 안 되는 시간에 이렇게 정수를 담을 수 있다니 대단하십니다!!!
감사합니다 🙌
어떻게 이렇게 초보 개발자 입장에서 생각할 수 있는 의문점들을 캐치해서 영상으로 잘 정리해서 만들 수 있는지 정말 대단하십니다.
다른 강의에서는 중요한 핵심이지만 제대로 짚어주지 않거나 초보 입장에서 들었을 때 애매한 표현들을 항상 잘 캐치하시는데 굉장한 능력이십니다.
영상마다 따봉 누르고 있습니다. 엘리님 덕분에 유튜브가 더 풍요로워 지네요. 감사드립니다.
정성 가득한 좋은 피드백 정말 감사합니다 ❤️
깔끔하고 명확한 정리 감사합니다:) 코딩 가이드 이렇게 잘해주시는 분 없는거 같아요~~ 유료 강의 수준보다 낫습니다:)
감사합니다 🙆♀️
와! 궁금해하고있었는데 영상이 딱!
완벽하게 이해하려고 2번연속봤어요ㅎㅎㅎ이제 안헷갈릴것 같아요 감사합니다
와 두번 보셨다니 🤩
깔끔한 정리 감사합니다!
한국 나이로 52, 90년대 초반 OOP 개념 CPP 코딩 접한 이후로 요즘처럼 코딩이 즐거운 적이 없네요. 엘리님 덕분에 새로운 분야를 알아가는 재미가 넘칩니다. 한클릭씩 정지시켜가며 열공중이네요. 늘 고맙습니다.
와, 열심히 공부하시고 살아 가는 모습에 저도 많이 배웁니다 저도 감사합니다 ❤️
글로만 볼 때는 추상적이라 잘 머리에 안들어왔는데 역시 이렇게 영상으로 보니까 너무 쉽게 이해되네요 :)
이해가 되셨다니 다행이예요 🙌
좋은 자료 정말 감사드립니다.
늘 잘보고 있습니다 감사합니다!
저도 늘 감사합니다 :)
좋은 영상 감사합니다!
어찌 이리 짧은데 풍부한 컨텐츠를 만들 수 있는 것입니다.
강의가 깔끔하고 좋은 강의네요
문과 엔지니어로 취직해서 지금까지 별로 이 부분을 깊게 알지 못한 채로 일해왔던 거 있죠.. 반성하고 좋은 정보 얻어갑니다 ㅠㅠ항상 감사합니다
정말 이해가 쏙쏙 돼요!! 감사합니다!!
이렇게 코멘트 남겨 주셔서 감사해요 😊
Csr과 ssr 불러오는 과정의 차이에 대해 궁금했는데 정말 유익한 영상이었습니다.
와 오늘 하루종일 이거 공부했는데 엘리님이 정리해주셨었네요;; 구글 알림 해놨는데 왜 못보고 이제야 봤는지... 복습이라도 감사히 해봅니다. 어디가서 스승이 누구냐고 물으면 엘리님이라고 해야겠어요...
하하 J LEE 님 센스있는 코멘트 감사해요 :))
뭘 모르는지 모르는 상태에서도 보기 좋은 영상이네요.
진짜 컨텐츠 천재다 천재
와우 오늘 면접준비하면서 이부분 따로공부하고있다가 놀려고 유튜브 왔다가 !!!!!!!!!! 이걸 딱!!!!!!!!!!!!!! 통했어요 ! 열공할게요 ㅋㅋ 놀지말라는 하늘의 뜻인가봐요
문선님 곧 면접 보시나요? 좋은 결과 있기를 제가 응원하고 있을께요 🙌 면접을 위해서 이 부분까지도 직접 찾아보고 공부 하셨던거예요? 준비성 최고👍
영상 처음부터 끝까지 완전 액기스네요
하하 좋게 봐주셔서 감사합니다 ✨
이해가 쏙쏙!
설명너무짱(cool)이에여 1.5배로들어도 귀에 콕콕박혀요
고마워요 엘리~ 오늘 인턴 면접 봤는데, CSR vs SSR차이, CORS가 무엇인지(근데 "*"로 하면 어떤 문제가 있는지 설명 못 함... ㅠㅠ), localStorage가 무엇이 있는지(이거에 대해 XSS,CSRF로 설명함.) 그 외 정말 도움 너무 많이 되었어요 ㅠㅠ. 아 this를 어디다 쓰는지도 제대로 설명 못 함.. ㅠㅠ 그래도 엘리님 영상이 정말 도움 되었어요 감사해요~~ 혹 나중에 상태 관리를 왜 해야 하는지도 영상 만들어주세요!~
입문자입니다. 와.. 얼핏 보기만해도 최신동향을 정말 알기쉽게 설명해주셔서 이해가 쏙쏙갔습니다, 기초 마인드부터 탄탄히 공부하고있게되네요. ㅎㅎ감사합니다.
정리가 잘 되신다니 다행이예요 🙌
유용한 설명 감사합니다~!
이 채널 너무 애정합니다🙋♀️
Code your Dream ✨
역시나 정리가 쉽고 깔끔해요! 내공이 느껴지네요. 인턴에게 이 링크 던져주고 보라고 해야겠어요 ㅋㅋ
첫로딩은 ssr로, 그 다음부터는 spa로 하는 방법도 괜찮은거 같아요~
하하 인턴에게 주신다니 🤩 맞아요 맞아요 저도 그렇게 많이 해요 :) SSR -> SPA 순서로. 첫로딩은 아니고, 정말 중요한 뼈대만 SSR 로 먼저 렌더링 해서 보내주고 있어요
이건 진짜 좋아요를 안누를래야 안누를수가 없는거네요..신입인데 많이바워갑니다
감사합니다~ 꿀 정보 얻고 가여
감사합니다 ✨
감사합니다. 덕분에 개념정리 잘 했습니다!
감사합니다 🙌
우와 영상 잘보고갑니다 ㅎㅎ 저도 엘리님처럼 말하고싶어요ㅎㅎㅎ
드림코딩형 좋은 영상 감사해요
react.js로 개발하다가 SSR때문에 next.js를 고려해보려고 알아보고있다가 이 영상이 생각나서 다시 복습하러왔어요👋
너무나 쏙쏙 잘 이해했습니다 ㅎㅎ
이해가 잘 되셨다니 감사해요 ❤️
깔끔하게 알려주셔서 감사합니다
프론트엔드개발자를 목표로 공부하는 학생입니다. 매번 영상 잘보고있습니다!! 매번 이렇게 이해하기 좋은 영상 감사합니다!!!!
안녕하세요 :) 코멘트 남겨 주셔서 감사합니다 ✨
좋은 영상 항상 감사합니다
감사합니다 ✨
와 엄청난 양질의 설명이네요. 설명 무쳤다
좋은 영상 정말 감사합니다.
이렇게 코멘트 남겨 주셔서 감사해요 😊
믿고보는 드림코딩 재밋게 잘봤습니다
재밌게 보셨다니 감사합니다 ✨
감사합니다~ 그리고 예전보다 훨씬 말씀도 듣기 좋게 잘 하시는 것 같아요~~ (예전에도 좋았는데 더 좋아졌다는 말입니다 ㅎㅎ)
아 그래요? 하하 좋은 피드백 주셔서 감사합니다 😆 어떻게 하면 더 명확하게 전달 할 수 있을지 고민하고 있어요~ 다음에도 개선할 수 있는 피드백 주시면 감사하게 받을께요 ❤️
으아 컨텐츠와 설명논리가 너무 좋습니다....
웹사이트 성격에 적합한 CSR, SSR 방식의 선정이 중요할 것 같네요.
너무재밌어요 진짜알아야할게너무많아욤