목록분류 전체보기 (77)

코린이의 개발 일지

React Sever Component 살펴보기

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

부스트 캠프 같이 했던 분들이랑 함께 디자인 시스템 개발 프로젝트를 진행 중이다. 진행하면서 맡은 컴포넌트 중에 가장 많은 고민을 했던 컴포넌트 개발 과정을 정리해보려 한다. 1. 디자인 시스템에서 컴포넌트 디자인 시스템에서 컴포넌트를 개발할 때는 정해져 있는 프로덕트 내에서 컴포넌트를 개발할 때와는 사뭇 다르다. 디자인 시스템에서의 컴포넌트는 다양한 상황에 대응 가능해야한다. 형태가 다양할 수도 있고, 동일 컴포넌트가 지원해야 하는 기능이 여러가지 일 수 있다. 동일한 디자인 컨셉을 가져가면서, 사용하는 상황에 맞춰 어느정도 유연하게 형태를 변경하여 사용할 수 있도록 하는 것이 목표이다. Carousel의 형태를 살펴보자. 2. Carousel의 기능과 형태 Carousel의 형태는 여러가지가 있다. ..
웹 (web)/CDS 프로젝트 2023. 4. 6. 20:33
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 3 4 5 6 ··· 20 Next 다음