프론트엔드

[프론트엔드] 서버 사이드 랜더링[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..

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

1.서장 먼저 코드 스플리팅에 대하여 알아 보겠습니다. 1.1 코드 스플리팅이란? 코드 분할(Code Splitting) 해석하자면 말 그대로 코드를 분할하는 작업을 말합니다. 여기서 코드를 왜 분할해야 할까? 이런 의문이 생기게 됩니다. 배경 React 즉 javascript로 개발을 하게되면 build를 통해서 하나의 파일에 모든 로직을 구겨 넣어서 개발을 하게 됩니다. 다만 이런경우 프로젝트 규모가 커질수록 당연히 파일용량도 같이 증가하게 됩니다. 특히 SPA(Single Page Application)로 되어있는 프로젝트의 경우 그 용량은 훨신 더 커집니다. 용량이 커진 js파일을 웹 브라우저에서 불러오게 되면 인터넷 환경에 따라 더 큰 로딩시간을 필요로 하게 됩니다. 즉 "코드 스플리팅" -> ..