전체 글

해당 글 178건

React Server Component (RSC)

2023. 4. 15. 01:33

지난 use() 훅에 관한 포스트에서 나왔던 주제인 React Server Component, Client Component, Shared Component 에 관해 다뤄보겠습니다. 요약 2020년 12월 21일, React 팀에서 React Server Components 를 공개했습니다. React Server Component 는 클라이언트 사이드의 풍부한 인터렉티비와 전통적인 서버사이드 렌더링의 성능적 이점을 결합하여 다음과 같은 효과를 기대할 수 있습니다. 서버에서만 실행되어 번들 크기에 전혀 영향을 주지 않습니다. 클라이언트에서 다운로드 되지 않아 번들 크기가 줄어 시작 시간 개선에 도움이 됩니다. 데이터베이스, 파일 시스템, 마이크로 서비스 등 서버측 데이터 소스에 엑세스 할 수 있습니다...

software engineering/frontend

취준 & 이직 Retrospective

2023. 4. 7. 16:04

이번 이직은 꽤 긴 시간을 소비하며 하고 싶었던 공부와 방향성을 확실하게 잡을 수 있었던 아주 좋은 경험이었다. 코딩테스트, 과제, 면접을 진행하며 기업별로 원하는 인재상도 달랐고 문화도 달랐지만 기본적인 CS 지식 그리고 내 분야에 대한 자신감과 성장가능성은 기업 규모에 상관없이 요구되었던 거 같다. 그리고 그 과정 속에서 새로운 지식 또한 굉장히 많이 얻게 된 거 같다. 갑작스럽게 회사 상황이 좋지 않아 회사 M&A 이후 몇 달 뒤 사업 종료 결정이 되어 당황했지만 6개월 간 실업급여와 위로금을 받은덕에 이런 시간을 가질 수 있었다. 많은 기업에 지원하며 탈락의 고배도 마셨지만 최종 오퍼나 임원 면접까지 도달하며 내가 회사를 선택함에 있어서 가장 중요하게 생각했던 점은 '내가 회사를 즐겁게 다닐 수..

company

React - Use() Hook

2023. 3. 29. 01:14

본 글은 RFC 의 번역입니다. Jotai 개발자의 블로그를 보다가 궁금하여 자세하게 찾아보기 위해 작성했습니다. 비동기 처리의 기본 예 예: 서버 구성 요소에서의 await // This example was adapted from the original Server Components RFC: // https://github.com/reactjs/rfcs/pull/188 async function Note({id, isEditing}) { const note = await db.posts.get(id); return ( {note.title} {note.body} {isEditing ? : null} ); } 이는 서버의 비동기 데이터에 액세스하는 데 권장되는 방법입니다. 아래의 React의 클라이언..

software engineering/frontend

React- 어떤 상태 관리 라이브러리를 사용할까?

2023. 3. 27. 23:14

Jotai 탄생 배경 React Context - useState와 useContext 조합에서 re-render 문제를 해결하기 위해 등장했습니다. Provider Hell (Root Component가 너무 많은 Contex Provider를 갖는 경우) 동적 추가/삭제 (하위 트리들을 다시 리마운트 해야하는 단점이 생김)으로 일반적으로 Top-Down 문제를 해결하기 위해 memoziation 을 보통 활용하여 re-render를 방지하는 selecter function을 사용합니다. Jotai는 Recoil로 부터 영감 받아 atomic model 기반의 bottom-up 방식의 접근을 사용합니다. atom을 결합한 상태를 만들고 atom dependency 에 기반하여 render를 최적화함으로..

software engineering/frontend

React v18.0

2023. 3. 9. 19:25

배경 2022년 3월 29일에 React v18.0을 정식적으로 사용할 수 있게 되었습니다. 가장 큰 변화는 automatic batching, new APIs like startTransition, and streaming server-side rendering with support for Suspense와 같은 concurrent feature를 사용할 때 Concurrent Rendering 을 지원한다는 점 입니다. 기존에 React 에서는 UI를 렌더링할 때 우선순위 큐나 다중 버퍼링과 같은 기술을 사용하여 동시에 렌더링 되는것처럼 보이게 하였고 사용자는 UX를 어떻게 보여줄지에 집중하고 이 동시성이 어떻게 작동하는지 아는것은 기대하지 않는다고 합니다. 근데 Concurrent React 는 ..

software engineering/frontend

당신이 고민하고 있던 Typescript 패턴

2023. 3. 4. 21:55

공통으로 사용되는 타입과 Spreading attributes를 사용할 때 어떻게 하면 좋을까 알아보다 좋은 포스팅이 있었다. WithChildren helper type type WithChildren = T & { children?: React.ReactNode }; type CardProps = WithChildren; // works as well type CardProps = { title: string } & WithChildren; Preset attributes type ButtonProps = Omit; function Button({ ...allProps }: ButtonProps) { return ; } // 💥 This breaks, as we omitted type const z ..

software engineering/javascript

Compression Javascript

2023. 3. 4. 21:47

Next.js는 기본적으로 Gzip 압축을 제공하지만 Nginx와 같은 HTTP 프록시에서 사용하는 것이 좋다. Webpack을 사용하여 코드를 번들링하는 경우 Gzip 압축에 CompressionPlugin을 사용하거나 Brotli 압축에 BrotliWebpackPlugin을 사용할 수 있다. (vite-plugin-compression2) Oyo는 Gzip 대신 Brotli 압축으로 전환한 후 파일 크기가 15-20%, Wix는 21-25% 감소했다. compress(a + b)

software engineering/frontend

CLS (Cumulative Layout Shift)

2023. 3. 3. 16:19

CLS(Cumulative Layout Shift) - Core Web Vital 항목으로 사용자 입력 500ms 이내에 발생하지 않는 레이아웃 이동에 대한 점수를 합산하여 콘텐츠의 불안정성을 측정합니다. 측정을 통해 사용자에게 발생하는 레이아웃 이동(layout shift) 빈도를 측정하여 이 문제를 해결하는 데 도움이 됩니다. 열악한 CLS 값이 발생하는 일반적인 이유 크기가 정해지지 않은 이미지 크기가 정해지지 않은 광고, 임베드 및 iframe 동적으로 주입된 콘텐츠 FOIT/FOUT을 유발하는 웹 글꼴 FOIT: 브라우저가 웹 글꼴을 다운로드하기 전에 텍스트가 보이지 않는 현상 FOUT: 브라우저가 웹 글꼴을 다운로드하기 전에 텍스트가 대체 글꼴로 렌더링되는 현상 DOM을 업데이트하기 전에 네트..

software engineering/frontend

content-visibility: 렌더링 속도를 향상시키는 CSS property

2023. 3. 2. 12:51

Chromium 85에서 등장한 content-visibility속성은 페이지 로드 성능을 개선하기 위한 가장 영향력 있는 새로운 CSS 속성 중 하나일 수 있습니다. 사용자 에이전트가 필요할 때까지 레이아웃 및 페인팅을 포함한 요소의 렌더링 작업을 건너뛸 수 있습니다. 콘텐츠의 상당 부분이 화면 밖에 있는 경우 초기 사용자 로드 속도가 훨씬 빨라집니다. 또한 화면 콘텐츠와 더 빠르게 상호 작용할 수 있습니다. 브라우저 지원 content-visibility CSS Containment Spec 에 의존하고 대부분 브라우저에 지원됩니다. CSS Containment CSS containment의 주요 목표는 나머지 페이지에서 DOM subtree를 예측 가능하게 격리하여 웹 콘텐츠의 렌더링 성능을 향상시..

software engineering/frontend

FE 성능 개선을 위한 7가지 방법

2023. 2. 14. 21:13

1. 리소스 최소화하기, 압축하기 Webpack과 같은 번들러를 통해 안쓰는 HTML, CSS, JS를 optimized 하고 compress 하기. Emotion과 같은 툴을 이용해 안쓰는 CSS 정리하기 2. 서버 요청 줄이기 CSS Sprites 사용하기 무분별한 third-party-plugins 사용줄이기 서버사이드 렌더링 initial load 이용하기 3. 불필요한 폰트 없애기 커스텀 폰트의 경우 WOFF2와 같은 포맷으로 변경해 효율적인 형태 폰트로 변경하기 안쓰는 subset font 정리하기 페이지에서 사용될 폰트 preload 하기 4. 이미지 압축하기 JPEG, PNG 보다 WebP(JPEG보다 25-35%, PNG보다 26% - 대부분 브라우저 지원), AVIF(JPEG보다 50%..

software engineering/frontend