React에서 웹워커를 사용하여 동적인 Webp를 정지시키자

요새 회사 적응하느라 블로그 글을 쓰지 못했다. 앞으로는 배운 것들을 계속 글로 남겨야겠다는 생각을 하게 되었다.회사에서 들어가며 느낀 점들이 많이 있었다. 혼자 개발할 때는 신경쓰지 않아도 될 것들을 신경써야 한다는 점과 커뮤니케이션의 중요성, 동료 분들이 적극적인 아이디어를 제안하는 모습들을 보며 배울 수 있었다.  최근에는 동적인 Webp를 정적인 Webp로 표현해야하는 요구사항이 존재했었다.이 과정에서 Blob 데이터의 메모리 관리 문제로 인해 고민을 한 결과 웹워커를 사용하여 해결했는데, 이 과정에서 배운 점들을 남기고자 한다. [요구사항]사용자는 동적인 Webp와 정적인 Webp 둘 다 저장 가능하다. 특정 영역에는 동적인 Webp를 정적인 Webp로 표현해야 하는 경우가 발생한다.  web..

• format_list_bulleted 프론트엔드 개발/React
• · 2024. 12. 21.
• textsms

Zustand 분석 1 - 상태 관리 코드를 살펴보자

Zustand는 크게 3 가지로 분석해볼 수 있다. 1. state 관리를 위한 vaniila.ts와 react.ts2. mutate를 위한 middleware3. 최적화를 위한 shallow 이번 섹션에서는 1번인 상태 관리 코드를 우선적으로 살펴보고자 한다. 상태 관리 코드는 2가지 파일에 나눠서 관리 중이다. 첫 번째는 vanilla.ts 파일이고, 두 번째는 react.ts 파일이다.react.ts 코드는 JS로 관리하는 상태관리 코드를 `useSyncExternalStore`라는 훅을 통해 리액트의 고유 상태로 넣어주는 코드이다. 때문에, vanilla.ts 파일을 자세히 살펴보면 react.ts 파일을 해석하는 데 오래 걸리지 않는다. `vanilla.ts`이 파일을 살펴보면 크게 2가지 함수..

• format_list_bulleted 프론트엔드 개발/React
• · 2024. 10. 24.
• textsms

[MicroFrontend 연습하기] - Webpack Federation 연습해보기

1. 프로젝트 초기 세팅하기1) `pnpm init`으로 `package.json` 파일 만들기pnpm init 2) `corepack` 설정 corepack은 Node.js 생태계에서 사용되는 패키지 관리 도구인 npm, yarn, pnpm 과 같은 다양한 패키지 매니저의 버전을 쉽게 관리하고 사용할 수 있도록 도와줍니다. corepack의 주요 역할패키지 매니저의 버전 관리프로젝트별로 사용해야 하는 패키지 매니저의 버전을 지정할 수 있으며, Corepack은 해당 버전을 자동으로 다운로드하고 사용하도록 설정합니다. 이를 통해 각 프로젝트에 맞는 패키지 매니저의 버전을 손쉽게 관리할 수 있습니다.패키지 매니저 설치 자동화Corepack을 사용하면 패키지 매니저를 사전에 설치할 필요 없이, 필요한 버전이..

• format_list_bulleted 프론트엔드 개발/React
• · 2024. 8. 2.
• textsms

[Deep Dive] React Server Component를 정확히 아시나요? - 1편

계속해서 React Server Component를 딥다이브하다보니 RSC를 직접 구현하는 방식에 대해서 알려주는 영상들이 몇몇이 있었습니다. Next.js가 내부적으로 해주는 일들과 비슷하게 구현할 수 있도록 되어 있었으며, 이를 통해 RSC에 대해 좀 더 자세히 이해할 수 있게 되었습니다. Zustand의 메인테이너이신 DAISHI KATO님께서 React Server Component에서 중요하게 생각하는 것은 Serialization(직렬화)라고 합니다. RSC 전에는 리액트는 하나의 메모리 공간에서 동작했지만 RSC가 나오게 되면서 리액트는 여러 공간에서 사용가능해졌다고 합니다. (server와 client, 브라우저의 워커쓰레드까지...)실습실습을 통해 설명을 해보도록 하겠습니다.`npm i ..

• format_list_bulleted 프론트엔드 개발/React
• · 2024. 5. 8.
• textsms

React 18의 Suspense에 대해서 알아보자

ReactJS 커뮤니티의 "Suspense-in-react-18"와 "Behavioral changes to Suspense in React 18"을 읽고 정리한 글입니다. Request For Comments(RFC)는 `` 컴포넌트의 동작에 대한 몇 가지 변경사항을 설명합니다.동작 변경: 커밋된 트리는 항상 일관성을 유지커밋: React 컴포넌트 트리의 변경사항이 브라우저에 확정적으로 반영되었음을 의미.새로운 기능: 스트리밍을 통한 서버 사이드 렌더링 지원새로운 기능: 기존 컨텐츠를 숨기지 않기 위해 트랜지션 사용동작 변경: 컨텐츠가 다시 나타날 때 레이아웃 효과 재실행단, Suspense API 자체는 변경되지 않았습니다. 16.6에서 Suspense가 최초로 릴리즈 되엇을 때, 한 가지 use c..

• format_list_bulleted 프론트엔드 개발/React
• · 2024. 5. 3.
• textsms

React의 SEO 최적화 방법: React-Helmet-Async & Prerender

SEO란 무엇인가 Search Engine Optimization의 약어이며, 웹사이트가 검색 결과에 더 잘보이도록 최적화하는 과정입니다. 검색엔진은 웹을 크롤링하면서 페이지에서 페이지로 링크를 따라가고, 찾은 콘텐츠의 색인을 생성합니다. 검색 결과로 나온 결과가 색인으로 만들어둔 콘텐츠인 것이죠. SPA란 무엇인가 SPA는 Single Page Application의 약어로, 하나의 html 파일에서 구동되는 웹 애플리케이션 형태의 페이지입니다. 유저는 브라우저에 한 번만 요청하여 페이지 전체를 로드합니다. 그 이후에는 유저 요청에 의해 필요한 데이터만을 업데이트하여 페이지를 계속 변경합니다. SPA의 단점: SEO가 어렵다. 검색 엔진의 크롤러는 링크를 타고 페이지를 돌아다니면서 웹 문서(HTML 파..

• format_list_bulleted 프론트엔드 개발/React
• · 2024. 4. 1.
• textsms