CSR CSR 배포 전략 with S3, Cloud Front, Github Actions S3는 정적 리소스를 대규모로 저장하는데 특화되어 있고, CloudFront는 캐싱기능과 전 세계 다양한 사용자들에게 빠른 속도로 전달하거나 https를 이용할 수 있기 때문에 S3 + CloudFront 로 CSR을 배포하기에 적절하다고 생각한다. ⚠️ 암호화 / 복호화 과정에 시간이 소요되며, 정적 파일을 배포하기 때문에 암호화할 필요가 없다. 추가로 고급 설정에 객체 잠금 기능은 중요한... cloudfrontgithub actionsS3awsCSRReactCSR 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 vs CSR / var let const 이미 html에 초기 화면에 대한 레이아웃을 위한 노드들이 다 들어있기 때문에 브라우저에 그대로 페인팅을 할 수가 있다. html에 필요한 정보들이 다 들어가 있는 상태로 응답받기 때문에, 전통적인 서치엔진(SEO) 이 이를 읽고 분석하기가 용이했다 초기에는 서버사이드 랜더링과 마찬가지로 html에 대한 2진수 응답을 서버로부터 전달받는것은 동일하다. 하지만 그 안에 내용물에는, 정확하게 말... CSRSSRCSR Vue CSR 기반 마이크로 전단 실현 방안 실천 여기 서 마이크로 전단 의 각종 장단 점 을 말 하지 않 고 중간 배경 관리 시스템 의 개발 을 맡 고 있다 고 가정 합 니 다.모든 업무 모듈 은 한 프로젝트 에 포장 되 어 있 습 니 다.업 무량 이 계속 증가 함 에 따라 컴 파일 이 점점 느 려 집 니 다.오래된 프로젝트 에서 새로운 업 무 를 독립 적 으로 개발 하고 독립 적 으로 배치 할 수 있 기 를 기대 합 니 다.오래된 프로젝... VueCSR미 전단
CSR 배포 전략 with S3, Cloud Front, Github Actions S3는 정적 리소스를 대규모로 저장하는데 특화되어 있고, CloudFront는 캐싱기능과 전 세계 다양한 사용자들에게 빠른 속도로 전달하거나 https를 이용할 수 있기 때문에 S3 + CloudFront 로 CSR을 배포하기에 적절하다고 생각한다. ⚠️ 암호화 / 복호화 과정에 시간이 소요되며, 정적 파일을 배포하기 때문에 암호화할 필요가 없다. 추가로 고급 설정에 객체 잠금 기능은 중요한... cloudfrontgithub actionsS3awsCSRReactCSR 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 vs CSR / var let const 이미 html에 초기 화면에 대한 레이아웃을 위한 노드들이 다 들어있기 때문에 브라우저에 그대로 페인팅을 할 수가 있다. html에 필요한 정보들이 다 들어가 있는 상태로 응답받기 때문에, 전통적인 서치엔진(SEO) 이 이를 읽고 분석하기가 용이했다 초기에는 서버사이드 랜더링과 마찬가지로 html에 대한 2진수 응답을 서버로부터 전달받는것은 동일하다. 하지만 그 안에 내용물에는, 정확하게 말... CSRSSRCSR Vue CSR 기반 마이크로 전단 실현 방안 실천 여기 서 마이크로 전단 의 각종 장단 점 을 말 하지 않 고 중간 배경 관리 시스템 의 개발 을 맡 고 있다 고 가정 합 니 다.모든 업무 모듈 은 한 프로젝트 에 포장 되 어 있 습 니 다.업 무량 이 계속 증가 함 에 따라 컴 파일 이 점점 느 려 집 니 다.오래된 프로젝트 에서 새로운 업 무 를 독립 적 으로 개발 하고 독립 적 으로 배치 할 수 있 기 를 기대 합 니 다.오래된 프로젝... VueCSR미 전단