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

[패키지매니저를 알아보자] NPM, YARN, YARN BERRY, PNPM

개요대부분 패키지 매니저의 기능은 동일합니다. 패키지 매니저들이 가진 주요 컨셉들은 다음과 같습니다.메타 데이터 처리 및 쓰기모든 의존성을 일괄(Batch) 설치 및 업데이트의존성 추가, 업데이트 및 제거스크립트 실행패키지 배포(publish)보안 감사(audit) 수행우리는 패키지 매니저를 결정할 때 보편적으로 설치속도, 스토리지 사용량, 기존 워크플로우와 결합되는 방식 등 기능 외적인 요구사항을 기준으로 사용할 패키지 매니저를 결정하게 됩니다. 전통적으로 npm과 yarn classic은 flat한 node_modules 폴더에 의존성을 설치했었고, 이는 유령 의존성 및 node_modules의 저장공간 등의 문제로 인해 비판이 존재했었으며 이는 기존의 문제를 해결하는 패키지 매니저들의 등장으로 이어..

• format_list_bulleted 개발환경
• · 2024. 8. 15.
• 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

Three.js 공부하기 1 - 기본 파일 세팅하기

1. 초기 세팅하기 먼저 vite를 이용해서 vanilla TS 파일을 만들어보자. 다음 명령어를 통해 Vanilla + TS 프로젝트의 초기 세팅의 도움을 받을 수 있다.npm create vite@latest . 그리고 three.js 관련 의존성을 설치해주자. npm i three --save TypeScript를 쓸 것이고, Three.js에서는 아직 별도의 d.ts 파일을 제공해주지 않기 때문에 @types/three를 설치해주도록 하자npm i --save-dev @types/three 이렇게 되면 초기 설정은 다 되었다. 2. 코드 작성이제 코드를 작성해보도록 하자.먼저 필요한 속성들과 생성자들을 작성해보도록 하자.class App { private renderer: THREE.WebGLR..

• format_list_bulleted 프론트엔드 개발
• · 2024. 6. 26.
• textsms

Nginx / AWS EC2를 활용하여 React와 Node 서버 배포해보기 3탄 - CI / CD 및 CORS 이슈 해결

CI / CD란 무엇일까?Continuous Integration은 영역별로 나눠서 개발할 때, 인터페이스 등의 충돌을 미리 발견하기 위해 매일 또는 매시간 저장소를 자동으로 빌드하는 개념이다. Continuous Delivery는 저장소 코드의 변경이 발생하면 개발 서버 또는 운영계에 자동으로 배포하는 작업이다. CI/CD 파이프라인의 구성요소버전 관리 시스템: 코드 저장소Git: 소스 코드를 관리하고 변경 사항을 추적하는 분산 버전 관리 시스템CI 서버: 코드 변경 사항을 자동으로 빌드하고 테스트하는 서버 Jenkins: 오픈 소스 자동화 서버. (다양한 플러그인을 통해 빌드, 테스트, 배포 파이프라인을 구성할 수 있음)Travis CI: Github 프로젝트와 통합하여 빌드, 테스트, 배포를 자동화..

• format_list_bulleted 개발환경
• · 2024. 6. 17.
• textsms