목록웹 (web)/프론트엔드 (8)

코린이의 개발 일지

[Next.js] Image 컴포넌트와 이미지 최적화

Image 컴포넌트 기능 Next.js에서 제공하는 Image 컴포넌트가 기본적으로 지원하는 최적화 기능이 있다. 1. 포맷 및 사이즈 변환 용량 최소화를 위해 png 포맷에서 webp 포맷으로 변경되어 다운로드 된 것을 확인할 수 있다. 또한 원래 이미지 사이즈가 아닌 현재 컴포넌트에 맞춰서 자동으로 사이즈 변환된 것을 확인할 수 있다. 이러한 포맷 및 사이즈 변환 작업은 이미지에 대한 최초 요청시에 Next.js 서버에서 진행되며, 이후 요청에는 캐시가 만료될 때까지 캐시된 이미지가 제공되기 때문에 첫번째 요청보다 훨씬 빠르게 이미지를 서빙할 수 있다. 만약 파일 크기 및 포맷 변환을 막고 이미지 퀄리티 그대로 가져오고 싶다면 unoptimized 옵션을 false로 주면 된다. 2. lazy loa..
웹 (web)/프론트엔드 2023. 7. 13. 00:38
React Sever Component 살펴보기

React Sever Component란? 서버 사이드 렌더링 서버에서 사용자에게 보여줄 페이지를 모두 미리 구성한 뒤 페이지를 렌더링 하는 방식 RSC 위의 그림처럼 서버 컴포넌트는 렌더링 과정에서 클라이언트 사이드 렌더링과 서버 사이드 렌더링을 동시에 할 수 있도록 해준다. 즉 컴포넌트 별로 서버에서 렌더링할지, client에서 렌더링할지가 결정된다. RSC 동작 방식 사용자가 접속하면 브라우저가 프론트엔드 서버에 요청을 보낸다. 프론트엔드 서버는 렌더링을 시작한다. root 컴포넌트 부터 시작해서 서버 컴포넌트와 클라이언트 컴포넌트를 분리하여 렌더링을 한다. 클리이언트 컴포넌트는 일종의 ‘placeholders’로 채워 놓고, 서버 컴포넌트는 html 태그로 이루어진 트리구조로 렌더링한다. 서버는 ..
웹 (web)/프론트엔드 2023. 4. 29. 23:02
React로 Server Side Rendering 구현하기 - 3. Data fetching

이전 글에서 Server에서 Components 컴파일해서 HTML문서 생성하고 클라이언트에서 응답으로 받은 HTML에 다운 받은 JavaScript 파일을 Hydration해서 이벤트 동작까지 하는 과정을 살펴봤다. 웹팩 설정하기: https://polarmin.tistory.com/73 서버 구축하기 : https://polarmin.tistory.com/74 React로 Server Side Rendering 구현하기 - 1. 웹팩 설정 Next.js 쓰면 되는데, SSR을 직접 구현하는 이유? Next.js를 다뤄 보면서 내가 SSR에 제대로 이해하지 못하고, 구현에 급급하여 사용하고 있다는걸 느꼈다. Server Side Rendering을 조금 더 깊게 이해해보고 polarmin.tistory..
웹 (web)/프론트엔드 2023. 3. 30. 02:20
React로 Server Side Rendering 구현하기 - 2. 서버 구축

서버 구축 이제 서버 사이드 렌더링을 처리할 서버를 작성할 차례이다. Express를 설치한다. npm install express 앞서 만들어 뒀던 index.server.tsx 파일 내용을 초기 렌더링을 해서 정적파일을 클라이언트에 넘겨주는 형태로 바꿔줄 것이다. 서버에서 렌더링해서 클라이언트로 넘겨주기 // ./src/index.server.tsx import React from 'react'; import ReactDOMServer from 'react-dom/server'; import express from 'express'; import { StaticRouter } from 'react-router-dom'; import App from './App'; const app = express(..
웹 (web)/프론트엔드 2023. 3. 9. 18:32
이전 Prev 1 2 Next 다음