코린이의 개발 일지

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

이전 글에서 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..

서버 구축 이제 서버 사이드 렌더링을 처리할 서버를 작성할 차례이다. 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(..

Next.js 쓰면 되는데, SSR을 직접 구현하는 이유? Next.js를 다뤄 보면서 내가 SSR에 제대로 이해하지 못하고, 구현에 급급하여 사용하고 있다는걸 느꼈다. Server Side Rendering을 조금 더 깊게 이해해보고자 React로 직접 구현해보기로 했다. 프로젝트 목표 기존에 구현했던 CSR 프로젝트를 SSR로 바꿀 것이다. 구현이 완료된 이후에는 기존 CSR 프로젝트와 SSR 프로젝트의 성능을 비교해볼 예정이다. 순전히 궁금증과 학습을 위해서 시작한 프로젝트이기 때문에 SSR을 처음 접하는 분이라면 Next.js를 사용하는걸 추천한다. Next.js가 리액트 라우터와 호환이 안되는게 불만이라면 Remix라는 프레임워크를 추천한다. 우선 서버 사이드 렌더링의 기본 동작 과정부터 살펴보..