Recent Articles
-
Web
[웹심화] SSR 과 CSR (우리가 옳은 선택을 했나?)
CSR(Client Side Rendering)과 SSR(Server Side Rendering)은 대척 관계에 있는 방식인만큼 장단점이 서로 엇갈려 있다. 따라서 서로의 장단을 정확하게 알고, 적재적소에 필요한 방식으로 구현하는 것이 중요하다고 생각한다. 우선, CSR 이 정확히 뭐고 SSR이 정확히 무엇인가? 1. SSR 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식 ⭕️ User가 Website 요청을 보냄. ⭕️ Server는 'Ready to Render'. 즉, 즉시 렌더링 가능한 html파일을 만든다. ⭕️ (리소스 체크, 컴파일 후 완성된 HTML 컨텐츠로 만든다.) ⭕️ 클라이언트에 전달되는 순간, 이미 렌더링 준비가 되어있기 때문에 HTML은 즉시 렌더링 된다. 그러..
-
Web
[웹심화] Next.js
1. Next.js 란 무엇인가? Next.js는 리액트 기반의 서버사이드 렌더링 프레임워크이다. 더보기 ⭕️ CSR (Client Side Rendering) CSR은 쉽게 말해서 클라이언트에서 렌더링을 모두 처리하는 것이다. 맨 처음 렌더링을 할 때 서버에서 페이지 전체를 받아서 보여주고, 사용자의 요청에 따라서 리소스를 서버에 요청하고 제공받아서 화면에 띄우는 방식이다. 서버에 HTML문서를 요청하는 것이 아니라 브라우저에서 자바스크립트로 화면을 렌더링 하는 것! CSR은 SPA에 적합한 방식이기 때문에, 화면에 렌더링을 할 때 HTML은 텅텅 비어있다. 또한 맨 처음에 화면에 필요한 자바스크립트파일(라이브러리 + 프레임워크 + 소스코드 등)을 몽땅 다운받게 되기 때문에, 첫 렌더링에 많은 시간이 ..
-
JavaScript
[JavaScript] Promise 프라미스화
콜백을 받는 함수를 프라미스를 반환하는 함수로 바꾸는 것을 '프라미스화(promisification)'라고 한다. 기능을 구현 하다 보면 콜백보다는 프라미스가 더 편리하기 때문에 콜백 기반 함수와 라이브러리를 프라미스를 반환하는 함수로 바꾸는 게 좋은 경우가 종종 생길 수 있다. ⭕️setTimeOut 함수 예시 function wait(text, milliseconds) { setTimeout(() => text, milliseconds); } // 특정 밀리세컨즈 후에 text라는 함수를 수행하는 함수 fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .then((result) => { con..
-
JavaScript
[JavaScript] 프라미스 API
Promise 클래스에는 5가지 정적메소드가 있다. 1. Promise.all 만약 여러개의 프로미스를 동시에 실행시키고 모든 프로마스가 준비될 때가지 기다려야한다면? ( 여러개의 URL에 동시에 요청을 보내고 다운로드가 모두 완료된 이후에 필요한 콘텐츠를 실행시키는 경우) Promise.all을 사용할 수 있다. let promise = Promise.all([...promises...]); Promise.all은 요소 전체가 프로미스 배열을 받고, 새로운 프로미스를 반환한다. 배열 안에 프로미스가 모두 실행이 되면 새로운 프로미스가 이행되는데, 배열 안 프라미스의 결괏값을 담은 배열이 새로운 프라미스의 result가 된다. Promise.all([ new Promise(resolve => setTim..
-
JavaScript
[JavaScript]프라미스와 에러 핸들링
프라미스가 거부되면 제어 흐름이 제일 가까운 rejection 핸들러로 넘어가기 때문에 프라미스 체인을 사용하면 에러를 쉽게 처리할 수 있다. fetch('https://no-such-server.blabla') // 존재하지 않는 url일 때. .then(response => response.json()) .catch(err => alert(err)) // 실행흐름이 이 .catch로 넘어가면서 에러를 alert한다. 여기서 .catch는 첫번째핸들러일 필요는 없고 여러개의 .then뒤에도 올 수 있다. 가장 먼저 오는 .catch에서 에러를 처리한다. 1. 암시적 try...catch 프라미스 executor와 프라미스 핸들러 코드 주위엔 '보이지 않는(암시적) try..catch'가 있다. 예외가 ..
