HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🍭
프로그래머스 데브코스 기동팀 스크럼!/
🏆
궁금한것 토론 & 자료
🏆

궁금한것 토론 & 자료

SSR vs CSR
  • SSR CSR 구글 설명
웹 렌더링 | Web | Google Developers
개발자로서 우리는 종종 애플리케이션의 전체 아키텍처에 영향을 미칠 의사 결정을 하곤 합니다. 웹 개발자가 하는 가장 핵심적인 결정 중 하나는 애플리케이션에서 로직와 렌더링을 구현하는 것입니다. 이는 생각보다 어려울 수 있습니다. 웹 사이트를 구축하는 데는 여러 가지 방법이 있으니까요. 이 영역에 대한 우리의 이해도는 지난 몇 년 동안 Chrome에서 대형 사이트들을 상담하며 깊어졌습니다.
웹 렌더링 | Web | Google Developers
https://developers.google.com/web/updates/2019/02/rendering-on-the-web?hl=ko
웹 렌더링 | Web | Google Developers
 
  • 렌더링 자체는 서버에서 paint까지 하는게 아니라는것 같은 글
서버사이드 렌더링(ssr) & 클라이언트 사이드 렌더링(csr)
CSR : Client Side Rendering SSR : Server Side Rendering 우선 그럼.. 렌더링이 뭘까 ?? 렌더링 이란 요청해서 받은 내용을 브라우저 화면에 표시하는 것 __서버로 부터 받지 !!! ___ 자 다시 Loader 가 서버로 부터 정보들을 불러옴 파싱을 통해 문서를 DOM 트리로 만든다.
서버사이드 렌더링(ssr) & 클라이언트 사이드 렌더링(csr)
https://velog.io/@ash3767/%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81
서버사이드 렌더링(ssr) & 클라이언트 사이드 렌더링(csr)
 
  • 서버에서 dom tree → paint까지 일련의 과정을 한다고 설명하는것 같은글
1. 서버사이드 렌더링(SSR), 클라이언트사이드 렌더링(CSR)
서버와 클라이언트 기술은 프로그래밍에 있어 가장 근간이 된다. 전세계에 존재하는 거의 모든 프로그램은 서버와 클라이언트가 존재해 네트워크 상에서 데이터를 주고 받기 떄문이다. 프로그램엔 다양한 플랫폼이 생겨났지만 가장 많이 사용하게 되는 환경은 웹이다. 우리가 원하는 서비스를 구현하기 위해 웹을 모르고는 이야기 하기 어렵다. 그리고 이번 시간에는 웹을 구축하기 위해선 클라이언트와 서버를 만들어야 한다.
1. 서버사이드 렌더링(SSR), 클라이언트사이드 렌더링(CSR)
https://adrian0220.tistory.com/165
1. 서버사이드 렌더링(SSR), 클라이언트사이드 렌더링(CSR)
 
  • 브라우저 렌더링
NAVER D2
NAVER D2
https://d2.naver.com/helloworld/59361
 
브라우저 렌더링 과정 - Reflow Repaint, 그리고 성능 최적화
렌더링이란 HTML, CSS, JavaScript등 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 과정을 말합니다. 웹 개발을 하며 브라우저의 렌더링 과정을 정확하게 이해하고 있으면 어떻게 개발을 해야 좋은 성능을 내는지, 성능 최적화를 어떻게 해야하는지를 정확하게 판단할 수 있다고 생각합니다. 이번 포스팅을 통해 그 내용에 대해 알아보도록 하겠습니다.
브라우저 렌더링 과정 - Reflow Repaint, 그리고 성능 최적화
https://boxfoxs.tistory.com/408
브라우저 렌더링 과정 - Reflow Repaint, 그리고 성능 최적화
 
  • DOM 렌더링 설명
객체 모델 생성 | Web Fundamentals | Google Developers
"type": "thumb-down", "id": "missingTheInformationINeed", "label":"Missing the information I need" },{ "type": "thumb-down", "id": "tooComplicatedTooManySteps", "label":"Too complicated / too many steps" },{ "type": "thumb-down", "id": "outOfDate", "label":"Out of date" },{ "type": "thumb-down", "id": "translationIssue", "label":"Translation issue" },{ "type": "thumb-down", "id": "samplesCodeIssue", "label":"Samples / code issue" },{ "type": "thumb-down", "id": "otherDown", "label":"Other" }] [{ "type": "thumb-up", "id": "easyToUnderstand", "label":"Easy to understand" },{ "type": "thumb-up", "id": "solvedMyProblem", "label":"Solved my problem" },{ "type": "thumb-up", "id": "otherUp", "label":"Other" }] 브라우저가 페이지를 렌더링하려면 먼저 DOM 및 CSSOM 트리를 생성해야 합니다.
객체 모델 생성 | Web Fundamentals | Google Developers
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model?hl=ko
객체 모델 생성 | Web Fundamentals | Google Developers
 
  • 렌더링 과정 및 CSR이 나온 이유
SSR(Sever Side Rendering)과 CSR(Client Side Rendering)
이 글은 SSR(Sever Side Rendering)과 CSR(Client Side Rendering)에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요! 렌더링의 개념부터 다시 짚고 넘어가자! 서버로부터 HTML 파일을 받아 브라우저 화면에 표시하고 그리는 작업을 렌더링이라고 한다. 렌더링의 과정은 아래를 참고하자!
SSR(Sever Side Rendering)과 CSR(Client Side Rendering)
https://ivorycode.tistory.com/entry/SSRSever-Side-Rendering%EA%B3%BC-CSRClient-Side-Rendering
SSR(Sever Side Rendering)과 CSR(Client Side Rendering)
 
  • 웹렌더링 설명 - 렌더링 의미
웹 렌더링의 유형 1- Only SSR, Static SSR
Rendering 방법, 적용법에 대해서는 가볍게 읽어주세요. 필자또한 Front-ent 지식은 그렇게 깊지 않으며(잘못된 부분 지적 환영합니다!), React 등을 사용한다면, Rendering은 Front-end 개발자가 담당하는 경우가 많을 것이라 예상합니다. 흔히 렌더링이라고 하면, html 파일로부터 DOM tree를 만드는 이 과정을 말합니다. 하지만 CSR/SSR에서 말하는 렌더링은 이를 넘어서 template 언어, javascript 로 작성된 component(react)등 html이 아닌 것을 html로 변환하는 과정을 포함합니다.
웹 렌더링의 유형 1- Only SSR, Static SSR
https://tech.junhabaek.net/%EC%9B%B9-%EB%A0%8C%EB%8D%94%EB%A7%81%EC%9D%98-%EC%9C%A0%ED%98%95-1-only-ssr-static-ssr-b10c3916fb09#9742
웹 렌더링의 유형 1- Only SSR, Static SSR