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

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

• format_list_bulleted React
• · 2024. 12. 21.
• textsms

[HTTP 완벽가이드] 10. HTTP/2.0

HTTP의 성능 문제를 개선하기 위해 HTTP/2.0을 만들고 있다. HTTP/2.0의 등장 배경HTTP/1.1의 메시지 포맷은 구현의 단순성과 접근성에 주안점을 두고 최적화되었기에, 성능을 어느정도 희생시켜야 했다. 커넥션 하나를 통해 요청 하나를 보내고 그에 대한 응답 하나만을 받는 HTTP의 메시지 교환 방식은 단순함 면에서는 우수했지만, 응답을 받아야만 그 다음 요청을 보낼 수 있기 때문에 심각한 회전 지연(latency)가 발생했다. 이 문제를 회피하기 위해 병렬 커넥션, 파이프라인 커넥션이 도입되었지만 성능 개선에 대한 근본적인 해결책이 되지 못했다. 구글은 웹을 더 빠르게 하겠다는 목표 아래 SPDY 프로토콜을 내놓았다. SPDY는 헤더를 압축하여 대역폭을 절약했고, 하나의 TCP 커넥션에 ..

• format_list_bulleted 네트워크
• · 2024. 11. 17.
• textsms

[HTTP 완벽가이드] 09. 웹 로봇

웹 로봇은 사람과의 상호작용 없이 연속된 트랜잭션들을 자동으로 수행하는 소프트웨어 프로그램이다. 많은 로봇이 웹 사이트에서 다른 웹 사이트로 떠돌아다니면서, 콘텐츠를 가져오고, 하이퍼링크를 따라가고, 그들이 발견한 데이터를 처리한다. 이러한 종류의 로봇들은 그들의 동작 방식에 따라 '크롤러', '스파이더', '웜', '봇' 등 다양한 이름으로 불린다. 크롤러와 크롤링웹 크롤러는 웹 페이지를 한 개 가져오고, 그 다음 페이지가 가리키는 모든 웹 페이지를 가져오는 일을 재귀적으로 반복하는 방식으로 웹을 순회하는 로봇이다. 이러한 로봇을 크롤러라고 부른다. HTML 하이퍼링크들로 만들어진 웹을 따라 '기어다니기(crawl)' 때문이다.  어디에서 시작하는가: '루트 집합'크롤링을 시작하기 전, 크롤러에게 출발..

• format_list_bulleted 네트워크
• · 2024. 11. 17.
• textsms

[HTTP 완벽가이드] 08. 통합점: 게이트웨이, 터널, 릴레이

여러 종류의 리소스에 접근하는데 HTTP가 어떻게 쓰이는지 알아보고, 다른 프로토콜이나 애플리케이션 간 통신에 HTTP를 어떻게 사용하는지 알아보도록 하자. 주요 키워드게이트웨이: 서로 다른 프로토콜과 애플리케이션 간의 HTTP 인터페이스다.애플리케이션 인터페이스: 서로 다른 형식의 웹 애플리케이션이 통신하는데 사용한다.터널: HTTP 커넥션을 통해서 HTTP가 아닌 트래픽을 전송하는데 사용한다.릴레이: 일종의 단순한 HTTP 프락시로, 한 번에 한 개의 홉에 데이터를 전달하는데 사용한다.게이트웨이HTTP의 확장과 인터페이스는 필요에 의해 발전해왔다.웹에 더 복잡한 리소스를 올려야 할 필요가 생기면서 모든 리소스를 한 개의 애플리케이션으로만 처리할 수 없어졌다. 이러한 문제를 해결하기 위해 리소스를 받기..

• format_list_bulleted 네트워크
• · 2024. 11. 3.
• 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

취뽀 후기 2024년도 상반기와 하반기 절반을 보내며...

벌써 10월이 끝나가고 있다... 원래는 여름방학 때, 회고를 쓰려고 했는데 바쁘기도 하고 상반기에 딱히 한 일이 많지 않았기도 하고, 회고 쓸 시간에 공부를 하려고 하다보니 회고를 미루고 미루다가 지금에야 쓰게 되었다.  #1. 졸업작품12월 달부터 고민했던 졸업작품... 결국 개발자의 개발 시간을 측정해주는 VSCode의 Extension을 개발하였고, 이를 시각화해주는 웹 서비스를 구현했다. 사실 이 졸업작품의 의의는 없고, "VSCode Extension은 어떻게 구현할까?"에 대한 단순 호기심으로 인해 서비스 기획을 시작하게 되었다.  거의 혼자 졸업작품을 하면서 CI/CD, 백엔드, Docker의 개념을 익힐 수 있었다. #2. 카카오테크 부트캠프종강 전 후로, 여러 부트캠프에 지원을 했었다..

• format_list_bulleted 회고
• · 2024. 10. 21.
• textsms