FE/React

[React] 모던 리액트 딥다이브 4. 서버 사이드 렌더링 주요 정리

1. 싱글 페이지 애플리케이션이란?싱글 페이지 애플리케이션의 약자인 SPA는 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식을 의미한다. SPA는 말 그대로 하나의 페이지로 구현되며 새로운 페이지를 받아오지 않는다. 최초에 첫 페이지에서 데이터를 모두 불러온 이후에 페이지 전환 단계에서는 자바스크립트와 브러우저의 history.pushState와 history.replaceState로 이뤄지기 때문에 서버에서 HTML을 내려받지 않고 하나의 페이지에서 모든 작업을 처리한다. SPA는 최초 첫 페이지를 받을 때는 SSR을 사용할 수 있으며 이후에는 CSR을 이용하여 렌더링을 진행해야 한다. 1.1 SPA에서 페이지 전환이 일어나는 과정을 설명하시오페이지 전환 시..

[React] SPA, CSR은 같을까 다를까

답부터 이야기 하자면 SPA, CSR은 같지 않다. 애초에 비교 대상이 아니다. CSR(Client Side Rendering)사용자가 웹 브라우저에 주소를 입력하면 데이터가 없는 빈 HTML만 받아오고, 데이터는 여러 static 파일들이 로드된 이후에 요청해서 받아오는 방식으로 진행됨SSR(Server Side Rendering)CSR과 반대로 데이터까지 모두 삽입하여 완성된 HTML을 받아오는 방식으로 진행됨SPA(Single Page Application)서버로부터 첫 페이지만 받아오고 이후에는 동적으로 페이지를 구성하여 새로운 페이지를 받아오지 않는 웹 어플리케이션을 말함데이터를 수정하거나 조회할 때 페이지가 새로고침 되지 않고 다른 페이지로 넘어가지 않음MPA(Multiple Page Appl..

React 개발시 Node.js를 설치하는 이유

Node.js는 React를 사용하기 더 쉽게 해주는 도구들을 내장하고 있는 오픈소스이자JavaScript runtime environment(실행 환경)이다.(*runtime : 특정 언어로 만든 프로그램들을 실행할 수 있는 환경) React 개발을 처음 시작할 때, Node.js 를 함께 설치한다.Node.js는 무엇이기에 항상 react와 같이 따라다니는 걸까? 결론적으로 말하면, React 개발시, Node.js가 필수적인 것은 아니다. 즉, node.js 없이도 React는 사용이 가능하다! 그래도 Node.js를 설치하는 데 이유는 있는 법!맨 처음에 언급도 했다.차근차근 살펴보자 1️⃣ Node.js는 자바스크립트 실행 환경이기 때문이다.자바스크립트는 HTML에 종속되어 있는 언어이며, HT..

페이지 이동 시 스크롤 위치 항상 위에 고정시키기

페이지 이동 시 해당페이지의 스크롤을 항상 상단으로 이동시키는 방법이다.아래에서 위로 움직이는 애니메이션이 있는 페이지였기에 스크롤 위치가 중요했는데, 이전 페이지의 스크롤 위치가 상단이 아니면 애니메이션이 깨지는 오류가 발생해 해당 방법으로 오류를 해결하였다.import { useLocation } from "react-router";import { useEffect } from "react";function ExamplePage() { const { location } = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [location]); *window.scrollTo- 문서의 지정한 위치로 스크롤더보기상황1. 아래에서 위로 뜨는 ..