서버사이드 렌더링 (개발자라면 상식으로 알고 있어야 하는 개념 정리 ⭐️)

Sdílet
Vložit
  • čas přidán 17. 07. 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 정리
    .....................................................
    #프론트엔드#서버사이드렌더링#웹개발
  • Věda a technologie

Komentáře • 291

  • @ashinan74
    @ashinan74 Před 3 lety +46

    SSR의 CSR대비 장점을 부각시키려다보니까 SSR이 CSR보다 신기술인거처럼 포장되어버렸는데요, SSR은 CSR보다 더 오래된 기술입니다. AJAX가 뜨기이전에 동적으로 웹페이지를 생성할 수 있는 기술이 SSR이었고, PHP, ASP, JSP이런게 다 SSR 을 위해서 사용되던 것들이죠. CGI는 그것보다 더 오래되었구요. 당시에는 CSR이라는 개념이 없었기 때문에 서버 사이드 렌더링이란 이름 대신에 서버사이드 스크립트라고 불렀습니다. AJAX가 뜨면서 서버에서만 가능하던 것들이 클라이언트로 많이 넘어가면서 CSR이 발전하고, 영상의 내용처럼 CSR의 단점때문에 SSR이 재조명되었죠.

    • @dhkim_2315
      @dhkim_2315 Před rokem

      저도 이렇게 생각했어요
      CSR이 신기술이고 SSR이 구기술이고 이렇게..
      CSR = MPA 이렇게 혼동되기도 했는데, 엘리님 영상부터 봤으면 오개념 생길일도 없었을듯..

  • @dream-coding
    @dream-coding  Před 3 lety +78

    코로나로 온 가족이 함께 모일 수는 없지만, 그래도 훈훈하고 따뜻한 즐거운 설날 연휴 보내세요 😆 다음에는 제 얼굴을 들고 오는 영상으로 찾아뵐께요 :)

    • @ElinJ-hy2mb
      @ElinJ-hy2mb Před 3 lety

      즐거운 설날 되시구, 새해 복 많이많이 받으세요 ❤️

    • @user-xh9nd9cc8r
      @user-xh9nd9cc8r Před 3 lety

      새해복 많이 받으세요 좋은 영상 감사합니다

    • @sproutboot
      @sproutboot Před 3 lety

      넹 얼굴 들고 오는 영상 기대 하겠슴다

    • @aladin2734
      @aladin2734 Před 3 lety

      영상에 나오는 애니메이션/ 설명할때 나오는 그림 영상들 어떻게 만드시는지 여쭈어봐도 될까요?

  • @user-wb1eg6sl3v
    @user-wb1eg6sl3v Před 3 lety

    엘리님 지식에 절반이라도 제가 받을 수 있다면 그걸로 만족합니다 ㅜㅜ!!
    영상 많이 올려주세요오오오~!! 많은 사람이 기다리고 있습니다 히히
    그리고 새해복 많이 받으세요!! ㅎㅎ

  • @5115abc
    @5115abc Před 2 lety

    너무 알기 쉽게 잘 설명 해주셔서 감사합니다! 이 영상이 처음 올라 왔을 때 이미 보았으나 ( 습관적으로 엘리님 영상은 올라오자 마자 보게 돼요 ㅋㅋ) 이런게 있구나 하고 넘어갔었거든요. 그런데 최근 공부하다가 ssr이란 용어를 많이 접해서 다시 정확하게 정리하러 왔습니다~ 늘 양질의 정보를 제공 해주셔서 감사해합니다.

  • @bbyou1998
    @bbyou1998 Před 3 lety +1

    목소리가 너무 좋으셔서 영상 볼때마다 기분좋아져요😆 항상 좋은영상 감사합니다

  • @ootoma1477
    @ootoma1477 Před 2 lety +1

    진짜 짱 좋다 ... 😂 약간 이해 안됐던 것들도 한방에 정리되는 느낌이네요 너무 감사합니다 ~~

  • @user-tl2vb4uk8c
    @user-tl2vb4uk8c Před 2 lety

    평소에 확실히 설명하지 못하던 개념들인데, 이렇게 쉽고 간단하게 설명해주셔서 너무 감사합니다😁

  • @leta3519
    @leta3519 Před 3 lety

    항상 좋은 영상 감사드려요! 항상 건강하시고 새해복 많이 받으세요!

  • @dhkim_2315
    @dhkim_2315 Před rokem +1

    이제까지 블로그에서 SSR CSR 정리된거 엄청 많이 봤는데, 이 영상 하나로 종결이네요...이렇게 명쾌하고 깔끔하게 설명하다니.. 너무 허탈하고 당황스럽네요..ㅋㅋ 문화충격받은 느낌 ㅋㅋㅋㅋ
    엘리님이 최고입니다 .

  • @mangokimmm
    @mangokimmm Před 3 lety

    엘리님 영상 진짜 넘넘넘 고퀄아닌가요.. 최고입니다 짱짱

  • @marketerinroom
    @marketerinroom Před 3 lety

    와우 최고의정리입니다 ㅋㅋㅋ 소름 돋았어요 감사해요 ㅎㅎ 머리속에 자유롭게 다니던 지식들이 한군데에 잘 모여서 정리가 되었어요

  • @wdoodoo1
    @wdoodoo1 Před 3 lety

    유익한 영상 감사합니다. 최근에 리액트로 풀스택 앱만들기 프로젝트를 공부했는데 그때 처음들었던 용어에 대한 정리가 되었습니다. 새해 복 많이 받으세요!

  • @jasonko1202
    @jasonko1202 Před 3 lety +1

    와 ㅠㅠㅠㅠ요즘 리엑트로 프로젝트 하면서 너무너무 고민하던 부분이였는데 정확히 집어서 알려주셔서 감사해요! SEO부분에 고민이 많았는데 Next.js를 배워봐야겠어요!!

  • @user-lg7zo8rb7j
    @user-lg7zo8rb7j Před 2 lety

    발음이 어쩜 이렇게 또박또박하고 정확하신가요! 목소리도 너무너무 좋으세요!! 날가져요!

  • @yeseullee2206
    @yeseullee2206 Před 3 lety +1

    영상 올라오자마자 5번은 봤었는데 그 당시에는 뭔가 두루뭉실하게 잡히던 개념이, 그 사이에 또 공부 좀 했다고 지금 다시보니까 이해가 가네요ㅠㅠㅠㅠㅠ 그것도 진짜 쏙쏙 이해가 가요. 내용도 알차고 영상도 진짜 너무 잘만드시고.... 진짜 엘리님 최고👍

    • @dream-coding
      @dream-coding  Před 3 lety

      맞아요 맞아요~ 짧은 영상 하나만으로 다 가져 가기 보다는 Yez님과 같이 스스로 공부하면서 다시 병행해서 관련 영상을 보시면 더 시너지 효과가 일어 나는거 같아요 😊 감사합니다

  • @_anne755
    @_anne755 Před 3 lety

    오늘도 좋은 영상 감사합니다!!! 이런 정보 진짜 어디 없잖아요......:🥰 항상 건강 조심하시고 즐거운 명절 보내세요 엘리님 !!!!!

  • @kokoro33250
    @kokoro33250 Před 3 lety +1

    어떻게 이렇게 훌륭한 컨텐츠를 만들 수 있죠? 항상 감탄합니다!

  • @user-qi8jy3ht2h
    @user-qi8jy3ht2h Před 3 lety

    또 이렇게 좋고 유용한 정보를 ㅠㅠ 감사합니다ㅎㅎ
    엘리님도 즐거운 설 보내세요ㅎㅎ

  • @buck02
    @buck02 Před 3 lety

    어떻게 항상 궁금한 정보만 만들어주시는지...! 좋은 영상 감사합니다

  • @user-if6of1gq3v
    @user-if6of1gq3v Před 3 lety +1

    너무 잘 보고 있습니다! 옛날 자바스크립트 영상을 보면서 차근차근 공부하고 있는데 큰 도움 받고 있는 것 같습니다. 항상 좋은 영상 올려주셔서 감사합니다!😊😊

    • @dream-coding
      @dream-coding  Před 3 lety

      이렇게 코멘트 남겨 주셔서 감사해요 😊

  • @dongminkim5168
    @dongminkim5168 Před 3 lety

    정말 궁금했던 개념에대해서 너무 잘 설명해주셔서 이해가 잘 되었습니다. 좋은 영상 감사합니다.

  • @minhakim6902
    @minhakim6902 Před rokem

    두번 보니 이해가 가네요! 덕분에 이제 CSR과 SSR은 자신있게 설명할수있을것같습니다. 매번 좋은설명 감사드려요...!!!!❤‍🔥

  • @user-nb5hu9ro7g
    @user-nb5hu9ro7g Před 3 lety

    영상퀄리티가 점점 좋아지는 것 같아요 ㅎㅎ 오봇 목소리까지!! 오늘도 많이 배우고 갑니다😊
    좋은 하루 되세요 엘리님!

  • @fkqoseka
    @fkqoseka Před 3 lety

    똑같은 정보도 엘리님이 설명해주시는건 왜 이렇게 쏙쏙 이해가 잘되는건지.. 늘 감탄하고 많이 배우고가요. 감사합니다🙌🏻!!

    • @dream-coding
      @dream-coding  Před 3 lety +1

      하하 이해가 잘 된다니 정말 좋아요 😆

  • @음색깡패시-연
    @음색깡패시-연 Před 3 lety

    와 엘리님 제가 궁금했던 개념들이었는데 잘 정리해주셔서 감사드립니다!! :)
    중간에 기계음 목소리 귀엽네요ㅎㅎㅎ
    잘 배우고 갑니다~ :)

  • @minyoungkim8407
    @minyoungkim8407 Před 3 lety

    최고입니다! 새해 복 많이 받으세요!

  • @youmeson2494
    @youmeson2494 Před 3 lety +1

    SEO 로보트에서 깜짝 놀랐어요. ㅋㅋ정말 엘리 님은 센스쟁이이신듯! 렌더링들에 관한 명료한 설명 감사합니다. 뭐가 제일 좋다가 아닌 모든 것에 장단점이 있으니 상황을 보고 제대로 쓰는게 중요하겠네요! 웹 개발 공부는 정말 무궁무진한 것 같아요! 엘리 님도 가족분들과 즐거운 설날 연휴 보내세요!!! ;)

    • @dream-coding
      @dream-coding  Před 3 lety +1

      로보트를 캐치 하셨다니 영상을 꼼꼼하게 보셨군요 🙌 다른 사람이 쓰고 있다고 해서 그냥 라이브러리를 가져다가 쓰는것이 아니라, 정확하게 어떤 장단점이 있는지, 그리고 추가적으로 고려해 봐야 하는것이 있는지 확인하는것이 좋아요. 이 영상이 다음에 관련 라이브러리를 고를때 도움이 되셧으면 좋겠어요 :)

  • @skdhwia
    @skdhwia Před rokem

    머릿속에 떠다니는 용어들과 차이점을 한 번에 깔끔하게 정리할 수 있는 영상이네요! 관련 용어를 모르신다면 각각 공부하시고 마무리하면서 다시 보시면 정말 좋을 거 같습니다 👍

  • @user-oc1wx8vy2n
    @user-oc1wx8vy2n Před 2 lety

    면접 준비하느라 다시 자세히 보고있습니다. 정말 도움이 많이 됩니다! 브라우저101에 이어 nodejs인강까지 잘 듣고있습니다. 항상 감사해요:)

  • @pungsan2490
    @pungsan2490 Před 2 lety

    제가 CSR과 SSR을 확실하게 이해하게 된 영상입니다. 감사합니다. 😊

  • @staryun2671
    @staryun2671 Před 3 lety

    언제나 퀄리티높은 영상 감사합니다!!

  • @SJ-ew6xo
    @SJ-ew6xo Před 2 lety

    설명을 너무 잘해주셔서 쏙쏙 들어옵니다. 강의 감사드립니다.

  • @postgres2981
    @postgres2981 Před 3 lety +11

    어떻게 이렇게 초보 개발자 입장에서 생각할 수 있는 의문점들을 캐치해서 영상으로 잘 정리해서 만들 수 있는지 정말 대단하십니다.
    다른 강의에서는 중요한 핵심이지만 제대로 짚어주지 않거나 초보 입장에서 들었을 때 애매한 표현들을 항상 잘 캐치하시는데 굉장한 능력이십니다.
    영상마다 따봉 누르고 있습니다. 엘리님 덕분에 유튜브가 더 풍요로워 지네요. 감사드립니다.

    • @dream-coding
      @dream-coding  Před 3 lety +1

      정성 가득한 좋은 피드백 정말 감사합니다 ❤️

  • @Ms-rj8px
    @Ms-rj8px Před 3 lety +10

    와우 오늘 면접준비하면서 이부분 따로공부하고있다가 놀려고 유튜브 왔다가 !!!!!!!!!! 이걸 딱!!!!!!!!!!!!!! 통했어요 ! 열공할게요 ㅋㅋ 놀지말라는 하늘의 뜻인가봐요

    • @dream-coding
      @dream-coding  Před 3 lety

      문선님 곧 면접 보시나요? 좋은 결과 있기를 제가 응원하고 있을께요 🙌 면접을 위해서 이 부분까지도 직접 찾아보고 공부 하셨던거예요? 준비성 최고👍

  • @user-vu7ew6qm4c
    @user-vu7ew6qm4c Před 3 lety +2

    이런 영상 기본 개념 영상 너무 좋습니다!! 👍
    두번 세번 보겠습니다

    • @dream-coding
      @dream-coding  Před 3 lety +1

      건우님이 좋아해 주시니 저도 좋네요 🤩

  • @jblee7452
    @jblee7452 Před 3 lety

    얼만큼 효율적으로 배치해서 홈페이지를 보여줄수있느냐가 프론트의 주요업무인것이죠?
    엘리덕분에 개념정리 잘했습니다 !

  • @jimankim8086
    @jimankim8086 Před 3 lety

    정말 좋은 내용과 강의 매번 감사드립니다.

  • @TheAc3112
    @TheAc3112 Před 3 lety

    항상 정말 유용한 정보 감사합니다 엘리쌤❤️

  • @junhyeokjang1629
    @junhyeokjang1629 Před 3 lety

    새해복 많이받으세요!!!

  • @DaekyuLee
    @DaekyuLee Před 3 lety

    이 주제를 이런 여유있는 템포로 10분 내로 알기 쉽게 전달이 되는게 놀랍네요. 깔끔하고 좋네요^^

    • @dream-coding
      @dream-coding  Před 3 lety

      좋은 피드백 주셔서 감사해요 😊

  • @user-ps6tt3kp7l
    @user-ps6tt3kp7l Před 3 lety

    댓글 왠만하면 잘 안다는데 엘리님이 말씀을 너무 잘하셔서 안 달수가 없네요
    최고이십니다

  • @Kai-Shin
    @Kai-Shin Před 3 lety +2

    좋아요 3개 누르고 싶은 심정 ㅠㅠ 엘리님 영상은 전교1등 정리노트 본 것 같은 느낌이에요. ㅎㅎ
    요즘은 개발자들 카톡방에 가장 많이 추천받는 유튜버 이신 것 같네요. 늘 감사합니다 : D

    • @dream-coding
      @dream-coding  Před 3 lety

      좋게 봐주셔서 감사해요 ❤️ 개발자들 카톡방은 어떻게 들어 가는건가요?ㅋㅋㅋ 저도 들어가보고 싶어요~~~ 슬랙같은 건가요?

  • @dev_jeongdaeri
    @dev_jeongdaeri Před 3 lety

    엘리선배님! 오늘도 좋은 강의 감사합니다! ☺️ 선배님 궁금한게 있는데요 qraphql 외국에서는 프로젝트에 많이 사용하는 편인가요?!

    • @dream-coding
      @dream-coding  Před 3 lety +1

      정확한 통계자료를 아직 찾아 보지 않아서 일반화 해서 말씀 드리기에는 무리가 있지만, GraphQL인기가 점점 올라가고 있지만, 아직까지는 Rest API가 많이 이용되어 지고 있어요 (오랜 기간동안 지속적으로 쓰여지던 아이이기 때문에)

    • @dev_jeongdaeri
      @dev_jeongdaeri Před 3 lety

      @@dream-coding 답변 정말 감사합니다! ☺️

  • @good9dotori
    @good9dotori Před 3 lety

    와 - 엄청 많은 정보를 꽉 채워넣었네요. 무심코 가볍게 읽을만한 내용처럼 보이는데 실제로는 몇번 봐야 할 정도로 알찬 정보인것 같아요.

    • @dream-coding
      @dream-coding  Před 3 lety

      맞아요~ 중요한 내용을 10분안으로 꾹꾹 눌러 담은거라 하하 다음에 다른 자료들과 함께 다시 맘잡고 정리해 보시면 좋을 것 같아요 :)

  • @ddatgi
    @ddatgi Před 3 lety

    컨텐츠의 질이 너무 좋네요. 구독하고 갑니다.

  • @aron5951
    @aron5951 Před 3 lety

    너무 쉽게 이해할 수 있도록
    신경 많이 써주셨네요
    정말 감사합니다

  • @user-mp7kj2sj3b
    @user-mp7kj2sj3b Před 3 lety

    웹개발에 관심이있어서 공부 하려고 구독했는데 이런 꿀같은 영상이! 목소리가 너무 예쁘셔서 1초도 안 쉬고 집중했네요 ㅋㅋㅋ 좋은 영상 감사합니다!

    • @dream-coding
      @dream-coding  Před 3 lety

      좋은 피드백 주셔서 감사해요 😊

  • @jeffrey0208
    @jeffrey0208 Před 3 lety

    내용 이해도 쉽고 깔끔해요. 덕분에 low SEO 도 제대로 알게되었네요 :)

  • @user-qv6pd3ep6z
    @user-qv6pd3ep6z Před 2 lety

    감사합니다 너무 쉽게 잘 설명이 되어 있어 금방 이해가 됐습니다

  • @heejaekwon5940
    @heejaekwon5940 Před 3 lety +3

    깔끔하고 명확한 정리 감사합니다:) 코딩 가이드 이렇게 잘해주시는 분 없는거 같아요~~ 유료 강의 수준보다 낫습니다:)

  • @donghyuk80
    @donghyuk80 Před 3 lety

    어찌 이리 짧은데 풍부한 컨텐츠를 만들 수 있는 것입니다.

  • @user-kv4tw6wc4w
    @user-kv4tw6wc4w Před 3 lety

    CSR SSR에 대해서 말만 많이 들었지 잘 이해 못하고 있었는데 한방에 정리돼요. 저 이런 컨텐츠 너무 좋아요 짱짱짱

    • @dream-coding
      @dream-coding  Před 3 lety

      제가 열심히 준비한 이런 개념정리 컨텐츠 좋아해 주셔서 감사합니다 ❤️

  • @aaaaaab631
    @aaaaaab631 Před 3 lety

    이런 기술 트렌드 올려주시는것 정말 감사하게 보고 있습니다! 🙏

    • @dream-coding
      @dream-coding  Před 3 lety

      기술 트렌드 영상 좋아해 주셔서 감사해요 😊

  • @jw_sw8157
    @jw_sw8157 Před 2 lety

    정리 너무 깔끔해요 감사합니다~

  • @hppdogi
    @hppdogi Před 3 lety +2

    와! 궁금해하고있었는데 영상이 딱!
    완벽하게 이해하려고 2번연속봤어요ㅎㅎㅎ이제 안헷갈릴것 같아요 감사합니다

  • @user-bada444
    @user-bada444 Před 2 lety

    이해 너무 쉬워요! 좋은 영상 감사합니다~

  • @windrika
    @windrika Před 3 lety

    영상 감사합니다 반복해서 보면서 익혀야겠어요

  • @lazyreport
    @lazyreport Před rokem

    진짜 컨텐츠 천재다 천재

  • @jskim3886
    @jskim3886 Před 3 lety +1

    이건 진짜 좋아요를 안누를래야 안누를수가 없는거네요..신입인데 많이바워갑니다

  • @dev_jeongdaeri
    @dev_jeongdaeri Před 3 lety

    선배님 혹시 그러면 검색 엔진 취적화가 가장 중요한 웹사이트의 경우에는 서버사이드 랜더링 사이트랑 스태틱 사이트 중에서 스태틱 사이트가 제일 좋은 선택이라고 보면 될까요?!

    • @dream-coding
      @dream-coding  Před 3 lety +3

      검색 엔진 최적화가 중요하다면, 사용자가 접속할때마다 데이터가 사용자에 상관없이, 항상 일정한 데이터거나, 많은 데이터들을 동적으로 처리 하지 않아도 된다면 스태틱 사이트를, 유동적으로 자주 변경된다면 서버사이드 렌더링을 고려해 보면 좋을 것 같아요 🙌

    • @dev_jeongdaeri
      @dev_jeongdaeri Před 3 lety

      @@dream-coding 답변 정말 감사합니다! 요즘 vue 서버사이드 랜더링 프레임워크 nuxt 에 관심이 생겨서 알아보고 있었는데 정말 알찬 영상 항상 감사합니다! 😊❤️

  • @Uts3q2
    @Uts3q2 Před 3 lety

    10분도 안 되는 시간에 이렇게 정수를 담을 수 있다니 대단하십니다!!!

  • @user-vs8uu7rq1z
    @user-vs8uu7rq1z Před 2 lety

    뭘 모르는지 모르는 상태에서도 보기 좋은 영상이네요.

  • @dhkim6672
    @dhkim6672 Před 3 lety

    엘리님 항상 좋은 영상 감사합니다.
    존경합니다!! 🤩

  • @minji1601
    @minji1601 Před 3 lety

    문과 엔지니어로 취직해서 지금까지 별로 이 부분을 깊게 알지 못한 채로 일해왔던 거 있죠.. 반성하고 좋은 정보 얻어갑니다 ㅠㅠ항상 감사합니다

  • @keunbai1
    @keunbai1 Před 3 lety

    한국 나이로 52, 90년대 초반 OOP 개념 CPP 코딩 접한 이후로 요즘처럼 코딩이 즐거운 적이 없네요. 엘리님 덕분에 새로운 분야를 알아가는 재미가 넘칩니다. 한클릭씩 정지시켜가며 열공중이네요. 늘 고맙습니다.

    • @dream-coding
      @dream-coding  Před 3 lety

      와, 열심히 공부하시고 살아 가는 모습에 저도 많이 배웁니다 저도 감사합니다 ❤️

  • @user-oz7gv5yc2f
    @user-oz7gv5yc2f Před rokem

    Csr과 ssr 불러오는 과정의 차이에 대해 궁금했는데 정말 유익한 영상이었습니다.

  • @imode7
    @imode7 Před 3 lety

    감사합니다! 즐거운 설 되세요!

  • @jlee3680
    @jlee3680 Před 3 lety

    와 오늘 하루종일 이거 공부했는데 엘리님이 정리해주셨었네요;; 구글 알림 해놨는데 왜 못보고 이제야 봤는지... 복습이라도 감사히 해봅니다. 어디가서 스승이 누구냐고 물으면 엘리님이라고 해야겠어요...

    • @dream-coding
      @dream-coding  Před 3 lety +1

      하하 J LEE 님 센스있는 코멘트 감사해요 :))

  • @joon09s
    @joon09s Před 3 lety

    정말 깔끔하게 설명해주셔서 감사합니다.
    좋은 하루 되세요^^

  • @user-om9nx9gv6w
    @user-om9nx9gv6w Před 3 lety

    너무 유용한 정보를 쉽게 잘 설명해주셔서 항상 감사합니다 :)

  • @MrCoolcsg
    @MrCoolcsg Před 3 lety

    깔끔한 정리 감사합니다!

  • @hyeonsu-hl2ff
    @hyeonsu-hl2ff Před 3 lety

    글로만 볼 때는 추상적이라 잘 머리에 안들어왔는데 역시 이렇게 영상으로 보니까 너무 쉽게 이해되네요 :)

    • @dream-coding
      @dream-coding  Před 3 lety

      이해가 되셨다니 다행이예요 🙌

  • @user-mt8ow5ov8i
    @user-mt8ow5ov8i Před 3 lety

    좋은 자료 정말 감사드립니다.

  • @HJ-xf1ol
    @HJ-xf1ol Před 3 lety

    고마워요 엘리~ 오늘 인턴 면접 봤는데, CSR vs SSR차이, CORS가 무엇인지(근데 "*"로 하면 어떤 문제가 있는지 설명 못 함... ㅠㅠ), localStorage가 무엇이 있는지(이거에 대해 XSS,CSRF로 설명함.) 그 외 정말 도움 너무 많이 되었어요 ㅠㅠ. 아 this를 어디다 쓰는지도 제대로 설명 못 함.. ㅠㅠ 그래도 엘리님 영상이 정말 도움 되었어요 감사해요~~ 혹 나중에 상태 관리를 왜 해야 하는지도 영상 만들어주세요!~

  • @user-ou3dw1yj7t
    @user-ou3dw1yj7t Před 2 lety

    react.js로 개발하다가 SSR때문에 next.js를 고려해보려고 알아보고있다가 이 영상이 생각나서 다시 복습하러왔어요👋

  • @hjrr6471
    @hjrr6471 Před 2 lety

    와 엄청난 양질의 설명이네요. 설명 무쳤다

  • @user-py6wy2ib9p
    @user-py6wy2ib9p Před 2 lety

    설명너무짱(cool)이에여 1.5배로들어도 귀에 콕콕박혀요

  • @user-gj7hj2lw2f
    @user-gj7hj2lw2f Před rokem

    강의가 깔끔하고 좋은 강의네요

  • @hjsin4526
    @hjsin4526 Před 3 lety

    우와 영상 잘보고갑니다 ㅎㅎ 저도 엘리님처럼 말하고싶어요ㅎㅎㅎ

  • @Keepheap
    @Keepheap Před rokem

    으아 컨텐츠와 설명논리가 너무 좋습니다....

  • @user-hk3qe3pg8s
    @user-hk3qe3pg8s Před 2 lety

    엘리님 안녕하세요~! 영상을 보고 js와 브라우저 렌더링에 대해 공부해보다가 궁금한게 생겨서 댓글 남깁니다.
    SSR이 서버쪽에서 html 파일을 만든 뒤 client에게 넘기는 것이고, CSR은 js를 이용해 동적으로 client 쪽에서 html을 생성한다고 이해했습니다.
    그렇다면 CSR의 경우 브라우저 렌더링은 어떤 시점에서 일어나는 건가요??
    제가 이해하기론 브라우저의 렌더링 엔진이 html 파일을 파싱해서 DOM tree를 구축하고 CSSOM과 합쳐서(?) 렌더 트리를 만든 뒤 화면에 그려내는 것 같은데요, SSR은 이미 html이 완성된 상태로 들어오는 것이니깐 이 브라우저 렌더링 과정이 이해가 되는데, CSR의 경우 일단 html이 완성되지 않은 상태로 넘어오는 것은 물론이고 SPA의 경우 컴포넌트가 계속 화면에서 사라지고, 새롭게 생성되는 과정이 발생할텐데 이 경우에는 브라우저 렌더링이 어떻게 이루어지는 건가요?? 컴포넌트가 새롭게 생성/삭제 될 때마다 DOM tree를 다시 만드는 건가요?

  • @sky-lover
    @sky-lover Před 3 lety

    입문자입니다. 와.. 얼핏 보기만해도 최신동향을 정말 알기쉽게 설명해주셔서 이해가 쏙쏙갔습니다, 기초 마인드부터 탄탄히 공부하고있게되네요. ㅎㅎ감사합니다.

    • @dream-coding
      @dream-coding  Před 3 lety

      정리가 잘 되신다니 다행이예요 🙌

  • @Jake-lk2fy
    @Jake-lk2fy Před 3 lety

    좋은 영상 감사합니다!

  • @stbjang
    @stbjang Před 4 měsíci

    미국 선생님 생각나게 하는 진행..좋아요

  • @happykhk
    @happykhk Před 3 lety

    엘리님!! 어떻게 딱 요즘에 관심있는 내용들만 업로드가 딱되는걸까요 감사합니다 :)
    내일 타입스크립트 강의 시작합니다!! ㅎㅎ
    엘리님은 리액트를 사용하실때 클래스로 사용하시는지 훅스를 사용하시는지 궁금합니다!!

    • @dream-coding
      @dream-coding  Před 3 lety +1

      기존에 클래스로 만들어져 있는 경우는 기존 클래스를 그대로 쓰고, 새로 만드는 컴포넌트만 훅으로 작성하고 있어요 :)

    • @happykhk
      @happykhk Před 3 lety

      답변 감사합니다 :)

  • @user-vt2pc6jt5u
    @user-vt2pc6jt5u Před 3 lety +1

    영상 처음부터 끝까지 완전 액기스네요

    • @dream-coding
      @dream-coding  Před 3 lety +1

      하하 좋게 봐주셔서 감사합니다 ✨

  • @gamdal3489
    @gamdal3489 Před 3 lety

    늘 잘보고 있습니다 감사합니다!

  • @user-nv3pk5fe8r
    @user-nv3pk5fe8r Před 2 lety

    드림코딩형 좋은 영상 감사해요

  • @user-sq9ze8rt7v
    @user-sq9ze8rt7v Před 3 lety

    안녕하세요! 고생많으십니다!
    ssr, csr 프로젝트도 만들어보고, 엘리님 영상을 포함한 여러 자료들을 접해가며 확신을 갖고싶은 고민?생각? 이 있는데요
    react는 build시 root만 생성되고
    next는 특정 페이지를 정적생성한다면 build시에 그부분은 html에 만들어지는데
    next의 경우 서버에서 클라이언트에게 보내주는 정적 페이지들은 개발자의 빌드단계에서 완성되고 서버는 그냥 빌드단계에서 만들어진걸 뿌려주기만 하는거라고 보는게 맞나요..?
    그것이 맞다면 csr과 ssr의 차이는 빌드단계에서 결정나는게 맞나요..?
    아니면.. 제가 잘못알고있는걸까요..?

  • @AB-qt2lr
    @AB-qt2lr Před 3 lety

    이 채널 너무 애정합니다🙋‍♀️

  • @miltonfriedman897
    @miltonfriedman897 Před rokem

    드림코딩님 영상 잘 만들어주셔서 감사합니다.
    질문이 있습니다. 렌더링이라는 것이 쉽게 말하면 html을 실제 화면(view)로 만드는 것으로 알고 있는데 그렇다면 서버 사이드 렌더링이 말그대로 서버에서 html을 렌더링하는 것이라면 서버에서 클라이언트로 보내는 데이터는 html 형태가 아니라 이 html이 렌더링되어 나온 화면이 보내지는 것인가요? 그러면 그 html이 렌더링되어 나온 화면은 어떤 데이터의 형태인 건가요? 그리고 클라이언트에 해당하는 브라우저에는 렌더링 엔진이라는 것이 있는데 서버측에서 넘어온 것이 이미 렌더링된 화면이라면 브라우저는 렌더링 엔진을 쓰지 않게 되는 것가요?

  • @jinbju
    @jinbju Před 3 lety

    역시나 정리가 쉽고 깔끔해요! 내공이 느껴지네요. 인턴에게 이 링크 던져주고 보라고 해야겠어요 ㅋㅋ
    첫로딩은 ssr로, 그 다음부터는 spa로 하는 방법도 괜찮은거 같아요~

    • @dream-coding
      @dream-coding  Před 3 lety

      하하 인턴에게 주신다니 🤩 맞아요 맞아요 저도 그렇게 많이 해요 :) SSR -> SPA 순서로. 첫로딩은 아니고, 정말 중요한 뼈대만 SSR 로 먼저 렌더링 해서 보내주고 있어요

  • @jangwonyoon3695
    @jangwonyoon3695 Před 3 lety

    정말 이해가 쏙쏙 돼요!! 감사합니다!!

    • @dream-coding
      @dream-coding  Před 3 lety

      이렇게 코멘트 남겨 주셔서 감사해요 😊

  • @pine_cherry
    @pine_cherry Před 3 lety

    프론트엔드개발자를 목표로 공부하는 학생입니다. 매번 영상 잘보고있습니다!! 매번 이렇게 이해하기 좋은 영상 감사합니다!!!!

    • @dream-coding
      @dream-coding  Před 3 lety

      안녕하세요 :) 코멘트 남겨 주셔서 감사합니다 ✨

  • @user-ek4ns1if5f
    @user-ek4ns1if5f Před 3 lety +1

    이해가 쏙쏙!

  • @nullpointexception119
    @nullpointexception119 Před 3 lety

    유용한 설명 감사합니다~!

  • @user-ds3is5oh6l
    @user-ds3is5oh6l Před 3 lety

    한번더 들으러 왔어요👍

  • @user-xs4ef2lj1x
    @user-xs4ef2lj1x Před rokem

    깔끔하게 알려주셔서 감사합니다

  • @minzcode
    @minzcode Před 3 lety +1

    웹사이트 성격에 적합한 CSR, SSR 방식의 선정이 중요할 것 같네요.