분류 전체보기

[프론트엔드] 서버 사이드 랜더링[2]

2. 프로젝트 준비 및 설정 서버 사이드 렌더링을 진행하기 전에 라우터를 사용하여 라우팅을 하는 프로젝트를 먼저 만들겠습니다. ssr-recipe 프로젝트 안에 react-router-dom을 설치합니다. yarn add react-router-dom@^5.3.1 주의사항!! 2022년 기준으로 현재 라우터를 설치하면 6.x.x 버전으로 설치됩니다. 6.x.x 버전부터는 Route 컴포넌트 사용법이 달라져서 필자는 5.x.x 버전을 사용했으니 참고 바랍니다. 라우터 6.x.x 버전을 사용하고 싶다면 아래 작성한 글을 참고하셔서 수정하여 사용하시면 됩니다. [프론트엔드] React Router v6 업데이트 React Router v6 정식 릴리즈 React Router v6가 정식으로 릴리즈 되었다. 공..

[프론트엔드] 서버 사이드 랜더링[1]

1. 서버 사이드 렌더링의 이해 1.1 서버 사이드 렌더링(SSR)이란? 서버 사이드 렌더링이란 UI를 서버단에서 렌더링하는 것을 말합니다. 이전의 만든 리엑트 프로젝트는 클라이언트 사이드 렌더링(CSR)을 하고 있습니다. 클라이언트 사이드 렌더링은 UI 렌더링 처리를 모두 브라우저를 통해서 하는 것 입니다. 즉, 자바스크립트를 실행해야 개발자가 만든 화면이 사용자에게 보여지는 것을 뜻합니다. 1.2 프로젝트 생성 CRA로 프로젝트를 생성하고 개벌 서버를 실행 하겠습니다. yarn create react-app ssr-recipe cd ssr-recipe yarn start 서버를 실행하셨으면 웹 브라우저에서 크롬 개발자도구를 열고 Network 탭을 클릭해 주세요. Response 안에 div 태그를 ..

[프론트엔드] 코드 스플리팅 [3]

3. React.lazy와 Suspense를 통한 컴포넌트 코드 스플리팅 코드 스플리팅(분할) 작업을 위해 리엑트에 내장된 기능으로 유틸함수인 React.lazy와 컴포넌트인 Suspense가 있습니다. 먼저 두개의 내장 기능에 대해서 알아 보겠습니다. 주의사항!! react v16.6 버전 이후부터 React.lazy와 Suspense 컴포넌트 사용이 가능합니다. 그 전 버전에서는 import 함수를 통해서 불러온다음, 컴포넌트 자체를 state에 넣는 방식으로 구현해야 합니다. (이전 글참고) 3.1 React.lazy와 Suspense React.lazy란? 컴포넌트를 렌더링하는 시점에서 비동기적으로 로딩할 수 있게 해 주는 유틸 함수입니다. Suspense란? 리액트 내장 컴포넌트. 코드 분할된 ..

[프론트엔드] 코드 스플리팅 [2]

2. 자바 스크립트 비동기 로딩 2.1 자바스크립트 함수 스플리팅 컴포넌트 코드를 스플리팅하기에 앞서 일반 자바스크립트 함수를 먼저 스플리팅 해보겠습니다. src 디렉토리에 nodjfy.js 파일을 생성하여 다음 함수를 작성해 보세요. - nodify.js export default function nodify() { alert("빌드 테스트중입니다."); } 작성이 끝났으면 App.js 파일에서 nodify 함수가 실행되도록 코드를 수정하세요. - App.js import logo from "./logo.svg"; import "./App.css"; import nodify from "./nodify"; function App() { const onClick = () => { nodify(); }; r..