https://junheedot.tistory.com/ 이후 글 작성은 티스토리에서 보실 수 있습니다.
태그 목록
- 전체보기(44)
- deep dive(26)
- Java Script(15)
- JavaScript(13)
- js(12)
- React(9)
- Event(4)
- typescript(3)
- redux saga(2)
- http(2)
- issue(2)
- 프론트엔드(2)
- this(2)
- project(2)
- local(2)
- global(2)
- parse()(2)
- github(2)
- &&(2)
- 취준(2)
- try catch(2)
- stringify()(2)
- REST API(2)
- PR(2)
- kakao api(2)
- ajax(2)
- object(2)
- 알고리즘(2)
- social-login(2)
- local storage(2)
- 프로퍼티(1)
- stack(1)
- queue(1)
- 전역(1)
- 객체 타입(1)
- 이벤트 전파(1)
- heap(1)
- 프로미스(1)
- obejct(1)
- 객체(1)
- generator(1)
- velog(1)
- XMLHTTPRequest(1)
- CommonJS(1)
- ESM(1)
- Module(1)
- 이벤트 타깃(1)
- call stack(1)
- 면접(1)
- MPA(1)
- 지역(1)
- throttle(1)
- debounce(1)
- 디바운스(1)
- await(1)
- event loop(1)
- 고차 함수(1)
- react redux(1)
- async(1)
- 비동기(1)
- name binding(1)
- branch(1)
- 렉시컬 스코프(1)
- reducer(1)
- error(1)
- 인스턴스(1)
- json(1)
- next(1)
- const(1)
- let(1)
- var(1)
- 화이팅(1)
- 기명 함수(1)
- teamProject(1)
- ClearTimeout(1)
- 즉시 실행 함수(1)
- new(1)
- 함수(1)
- setInterval(1)
- setTimeout(1)
- 메서드(1)
- 타이머(1)
- DOM(1)
- axios(1)
- 함수 표현식(1)
- 면접준비(1)
- 협업(1)
- CSR(1)
- SSR(1)
- 생성자 함수(1)
- type(1)
- clearInterval(1)
- localstorage(1)
- 함수 선언문(1)
- 스타트업(1)
- execution context(1)
- binding(1)
- 데이터 타입(1)
- 호출 스케줄링(1)
- strict mode(1)
- spa(1)
- use strict(1)
- next.js(1)
- 변수(1)
- 이벤트 버블링(1)
- 마이크로태스크 큐(1)
- life cycle(1)
- 팀프로젝트(1)
- 정적 타이핑(1)
- CRUD(1)
- 원시 타입(1)
- 블록 레벨 스코프(1)
- 이벤트 캡처링(1)
- redux(1)
- 정적 스코프(1)
- modal(1)
- Spring(1)
- emotion(1)
- task queue(1)
- infinite scrolling(1)
- scope(1)
- 함수 리터럴(1)
- 익명 함수(1)
- tag(1)
- function(1)
- primitive value(1)
- cors(1)
- 회고(1)
- 검색어(1)
- 동적 타이핑(1)
- 이벤트 위임(1)
- promise(1)
- 태스크 큐(1)
- 쓰로틀(1)
- boiler-plate(1)
- 동기(1)
- 자료구조(1)
- propagation(1)
전체보기 (44)deep dive(26)Java Script(15)JavaScript(13)js(12)React(9)Event(4)typescript(3)redux saga(2)http(2)issue(2)프론트엔드(2)this(2)project(2)local(2)global(2)parse()(2)github(2)&&(2)취준(2)try catch(2)stringify()(2)REST API(2)PR(2)kakao api(2)ajax(2)object(2)알고리즘(2)social-login(2)local storage(2)프로퍼티(1)stack(1)queue(1)전역(1)객체 타입(1)이벤트 전파(1)heap(1)프로미스(1)obejct(1)객체(1)generator(1)velog(1)XMLHTTPRequest(1)CommonJS(1)ESM(1)Module(1)이벤트 타깃(1)call stack(1)면접(1)MPA(1)지역(1)throttle(1)debounce(1)디바운스(1)await(1)event loop(1)고차 함수(1)react redux(1)async(1)비동기(1)name binding(1)branch(1)렉시컬 스코프(1)reducer(1)error(1)인스턴스(1)json(1)next(1)const(1)let(1)var(1)화이팅(1)기명 함수(1)teamProject(1)ClearTimeout(1)즉시 실행 함수(1)new(1)함수(1)setInterval(1)setTimeout(1)메서드(1)타이머(1)DOM(1)axios(1)함수 표현식(1)면접준비(1)협업(1)CSR(1)SSR(1)생성자 함수(1)type(1)clearInterval(1)localstorage(1)함수 선언문(1)스타트업(1)execution context(1)binding(1)데이터 타입(1)호출 스케줄링(1)strict mode(1)spa(1)use strict(1)next.js(1)변수(1)이벤트 버블링(1)마이크로태스크 큐(1)life cycle(1)팀프로젝트(1)정적 타이핑(1)CRUD(1)원시 타입(1)블록 레벨 스코프(1)이벤트 캡처링(1)redux(1)정적 스코프(1)modal(1)Spring(1)emotion(1)task queue(1)infinite scrolling(1)scope(1)함수 리터럴(1)익명 함수(1)tag(1)function(1)primitive value(1)cors(1)회고(1)검색어(1)동적 타이핑(1)이벤트 위임(1)promise(1)태스크 큐(1)쓰로틀(1)boiler-plate(1)동기(1)자료구조(1)propagation(1)
CSR, SSR
두개의 단어는 서로의 대척점 에 있다고 볼 수 있다. > CSR SSR 해당 개념에 대해 헷갈리지 않도록 조금 더 쉽게 작성해보기로 하였다. 웹 브라우저(크롬, 웨일, 파이어폭스, IE, ...)에서 실제로 우리가 볼 수 있는 화면이 있다. 이러한 화면을 어디서 렌더링하는 지에 따라서 ①CSR과 ②SSR로 구분지을 수 있다. CSR (Client-Side-Rendering) 대표적인 클라이언트 사이드로 React를 예로 들 수 있다. CSR, 즉 클라이언트 사이드 렌더링은 SPA(Single Pace Application)에서 주로 쓰이는 기법으로 처음에 브라우저가 서버에 요청할 때 데이터가 없는 문서를 반환한다. ![](https://images.velog.io/images/junh0328/post/cbaad323-0159-425e-bde0-55bf165a3e9b/%E1%84%92%E1%85%AA%E1%84%86%E1
2021년 9월 20일
·
0개의 댓글·
0