WoohyunKing의 개발 성장일지

Client-Side Rendering(CSR) 클라이언트 사이드 렌더링이란 초기 웹사이트 접속시 서버로부터 모든 파일을 불러와 클라이언트에서 페이지를 렌더링한 후 사용자에게 보여주는 방식이다. CSR는 React, Vue, Angular 와 같은 single-page aplication (SPA) 에서 주로 사용되는 렌더링 방식인데, 즉 하나의 index.html 파일에 자바스크립트로 각 페이지를 렌더링한다. CSR 장점 초기에 웹사이트를 렌더링 후에 페이지간의 이동이 빠르다. 새로고침이나 화면 깜빡임 등과 같은 현상이 발생하지 않기 때문에 UX에 엄청난 이점을 준다. 서버가 클라이언트 뷰(View) 단에서 처리할 일을 신경쓰지 않아도 된다. CSR 단점 유저는 번들링이 완료된 JS 파일을 모두 다운로..

먼저 클라이언트-서버 간 통신에서 HTML을 반환하는 웹 서버의 대략적인 흐름은 다음과 같다. 정적 페이지(HTML/CSS/JS로 이루어진 웹 문서) 반환 👉🏻 DB 연동 및 API 요청 필요성 대두 👉🏻 동적 페이지(정적 페이지 + 서버에서의 비지니스 로직이 가미된 문서) 반환 정적 웹페이지(static web page) : 정적페이지란 항상 같은 내용을 보여주는 웹페이지(클라이언트가 URL을 통해 서버에 웹 페이지를 요청하였을 때, 서버 안에 이미 만들어져 있는 HTML 문서를 사용자에게 보여주는 경우) 동적 웹페이지(dynamic web page) : 동적페이지란 요청에 대해서 각각 다른 내용을 보여주는 웹페이지(클라이언트가 URL을 통해 서버에 웹 페이지를 요청했을 때, 서버는 사용자에 맞는 HT..

Next.js 란 무엇인가 Next.js는 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로, 리액트에는 없는 서버 사이드 렌더링server-side rendering(SSR), 정적 사이트 생성static site generation(SSG), 증분 정적 재생성incremental static regeneration(ISR)과 같은 다양하고 풍부한 기능을 제공합니다. + 확장 가능하고 유지 보수가 쉬운 웹 애플리케이션을 만들기 위한 여러 가지 방법을 제공 최근 몇 년 사이 웹 개발 분야에는 많은 변화가 있었습니다. 최신 자바스크립트 프레임워크들이 개발되기 전에는 동적 웹 애플리케이션을 만들기가 어렵고 복잡했습니다. 수없이 많은 라이브러리를 사용해야 했으며 원하는 대로 작동하도록 설정하는 것도 버..