CSR React Dom이란? (+ hydrate를 써야 하는 이유!) If you use ES6 with npm, you can write import ReactDOM from 'react-dom'. If you use ES5 with npm, you can write var ReactDOM = require('react-dom'). ► 이 react-dom 패키지는 앱의 최상위 수준에서 사용할 수 있는 DOM 관련 메서드를 제공한다고 합니다. Render a... ReactDOMCSRnextjsSSRReactHydrateCSR NextJS 공식 문서 정리 (12버전 기준) 참고: 리액트의 useEffect 를 사용해서 NextJS에서도 CSR를 선택적으로 수행할 수 있다. HTML 이 각 페이지 요청에 대해서 서버에서 생성된다. getServerSideProps 를 사용해 SSR 를 선택적으로 적용할 수 있다. getStaticProps 를 사용해 페이지를 정적으로 생성할 수 있다. NextJS는 Origin Server, CDN, Edge에 배포할 수 있다.... CSRpre-rendering공식문서nextjsSSRssgCSR [TIL]1201-Node.js(2) 웹 서비스 동작 방식 HTTP 요청은 사용자가 어떤 데이터가 필요한지를 서버에게 알리는 역할 HTTP 요청은 사용자가 어떤사용자가, 어떤 데이터를 필요로 하는지 등을 담고 있다. HTTP 응답은 사용자가 요청한 데이터와, 어떤 데이터가 전송되는지 등을 담고 있다. 구글맵, 웹 채팅 등 사용자가 다양한 기능을 수행할 수 있음 웹 프레임워크 - HTTP 요청 처리 웹 프레임워크는 HTTP 요청을... CSR라우팅SSR엘리스SW엔지니어트랙웹TILexpress.jsCSR [CS] AJAX, SSR, CSR, CORS Day-28 Asynchronous JavaScript And XMLHttpRequest 약자로 JavaScript, DOM, Fetch, XMLHttpReqest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법입니다. AJAX의 가장 큰 특징은 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 페이지를 보여줍니다. fetch를 사용하면, 페이지를 이동하지 않아도 서버로부터 필요한 데이... CSRSSRcorsajaxFetchCSR 서버사이드 렌더링(SSR),클라이언트 사이드 렌더링(CSR) 웹 페이지 접속시, 클라이언트가 서버에 요청을 하게되면 view를 서버에서 랜더링해서 화면에 출력하는 전통적인 방식이다. 그렇기때문에 첫 로딩이 매우 빠르나 js파일을 받기전까지는 인터렉션에 반응하지 않게된다. 한번에 서버에서 웹의 정보를 받기때문에 검색엔진에 웹의 정보를 읽을 때 에러가 나지 않는다. 서버에서 html을 클라이언트에게 전달해주기때문에 초기로딩속도가 빠르다. 서버에서 매 페이... SSRCSRCSR
React Dom이란? (+ hydrate를 써야 하는 이유!) If you use ES6 with npm, you can write import ReactDOM from 'react-dom'. If you use ES5 with npm, you can write var ReactDOM = require('react-dom'). ► 이 react-dom 패키지는 앱의 최상위 수준에서 사용할 수 있는 DOM 관련 메서드를 제공한다고 합니다. Render a... ReactDOMCSRnextjsSSRReactHydrateCSR NextJS 공식 문서 정리 (12버전 기준) 참고: 리액트의 useEffect 를 사용해서 NextJS에서도 CSR를 선택적으로 수행할 수 있다. HTML 이 각 페이지 요청에 대해서 서버에서 생성된다. getServerSideProps 를 사용해 SSR 를 선택적으로 적용할 수 있다. getStaticProps 를 사용해 페이지를 정적으로 생성할 수 있다. NextJS는 Origin Server, CDN, Edge에 배포할 수 있다.... CSRpre-rendering공식문서nextjsSSRssgCSR [TIL]1201-Node.js(2) 웹 서비스 동작 방식 HTTP 요청은 사용자가 어떤 데이터가 필요한지를 서버에게 알리는 역할 HTTP 요청은 사용자가 어떤사용자가, 어떤 데이터를 필요로 하는지 등을 담고 있다. HTTP 응답은 사용자가 요청한 데이터와, 어떤 데이터가 전송되는지 등을 담고 있다. 구글맵, 웹 채팅 등 사용자가 다양한 기능을 수행할 수 있음 웹 프레임워크 - HTTP 요청 처리 웹 프레임워크는 HTTP 요청을... CSR라우팅SSR엘리스SW엔지니어트랙웹TILexpress.jsCSR [CS] AJAX, SSR, CSR, CORS Day-28 Asynchronous JavaScript And XMLHttpRequest 약자로 JavaScript, DOM, Fetch, XMLHttpReqest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법입니다. AJAX의 가장 큰 특징은 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 페이지를 보여줍니다. fetch를 사용하면, 페이지를 이동하지 않아도 서버로부터 필요한 데이... CSRSSRcorsajaxFetchCSR 서버사이드 렌더링(SSR),클라이언트 사이드 렌더링(CSR) 웹 페이지 접속시, 클라이언트가 서버에 요청을 하게되면 view를 서버에서 랜더링해서 화면에 출력하는 전통적인 방식이다. 그렇기때문에 첫 로딩이 매우 빠르나 js파일을 받기전까지는 인터렉션에 반응하지 않게된다. 한번에 서버에서 웹의 정보를 받기때문에 검색엔진에 웹의 정보를 읽을 때 에러가 나지 않는다. 서버에서 html을 클라이언트에게 전달해주기때문에 초기로딩속도가 빠르다. 서버에서 매 페이... SSRCSRCSR