웹에서의 텍스트 압축 텍스트 압축은 데이터 타입안에서 낭비되는 공간을 줄이고, 궁긍적으로 네트워크 대역폭 사용량을 크게 감소시킬 수 있습니다. 특히 대부분의 요소(HTML, JS, CSS, JSON 등)가 텍스트로 이루어진 웹 사이트에서는 사이트 트래픽의 대부분을 점유하는 Big3(자바스크립트, CSS, HTML)을 압축하여 전송한다면 브라우저 로딩과 네트워크 대역폭 사용량을 개선할 수 있습니다. ⚠️ 그렇지만 무조건적인 압축이 좋은 것은 아닙니다. 압축을 푸는 시간이 네트워크 요청보다 오래 걸릴 경우에는 압축을 적용하지 않는 것이 좋으며, 성능 개선을 위해 사이트의 문제점을 분석하고, 트래픽에 영향을 미치는 파일을 압축 전송했을 때 네트워크 대역폭 절약에 큰 도움이 될 수 있습니다. 웹에서 텍스트를 압..

프로젝트의 상태를 검사하기 위해 Health Check를 진행하는 것은 매우 중요합니다. 서비스에 문제가 발생하지는 않았는지, 가용성 점검을 위해 안정적인 상태를 확인하는 것이 필요한데요, 이때 프론트엔드의 건강 상태를 모니터링하기 위해서 적절한 health check 파일을 생성해주는 것이 좋습니다. | 만약 헬스 체크 파일이 없다면 어떻게 될까요? 임의의 사이트에 대해 curl 요청을 날려보겠습니다. 아주 많은 양의 통 html 코드가 응답으로 반환되는 것이 보이시나요? 사이트에 따라 헬스체크를 위한 별도의 경로가 존재하겠지만, 만약 health check 파일이 생성되어 있지 않다면 상태 모니터링을 위해 매번 대용량의 응답을 돌려받아야 합니다. 😱 서비스에 문제가 발생하지는 않았는지를 확인하고, 가..

처음 세상에 공개된 후 챗 GPT는 압도적인 성능으로 하나의 트렌드가 되었습니다. 검색 엔진을 대체할 만큼 정보 수집은 물론 대화, 코딩 등에서 큰 기량을 뽐내는 GPT 모델은 이미 인간의 일상 곳곳에 접목되어 다양한 업무를 대체하고, 보조하기 위한 수단으로 사용되고 있습니다. 이런 고성능 모델을 프로젝트에 활용하면 얼마나 재미있는 서비스를 만들어 볼 수 있을까요? (두근두근) 챗 GPT의 세 번째 버전의 인공 지능 중 하나인 GPT-3.5-Turbo 모델을 기반으로 진행한 저의 Open AI 프로젝트를 공유합니다. 특정 인물과 가상의 직업군을 가진 멘토와 커뮤니케이션을 체험하는 채팅 서비스를 만들고자 했는데요, 대화를 위한 언어 모델 선정 과정에서 GPT-3.5-Turbo을 선택하게 되었습니다. GPT..

자바스크립트는 객체를 생성할 때 자동으로 메모리를 할당하고, 필요치 않을 때 자동으로 해제하는 작업이 수행됩니다. 이를 위해 크롬 같은 브라우저에서는 다양한 가비지 컬렉션 기법이 수행되고 있습니다. 가비지 컬렉션의 정확한 동작 방식 및 전략은 자바스크립트 엔진의 버전에 따라 다를 수 있으며 성능 및 메모리 사용에 영향을 미치는 중요한 요소입니다. 가비지 컬렉션(Garbage Collection) 가비지 컬렉션(Garbage Collection)은 메모리 관리 기법 중 하나로, 자바스크립트가 실행되는 동안 생성된 가비지(미사용 객체)를 수집하여 더 이상 사용되지 않는 객체(가비지)를 자동으로 식별하고 메모리를 회수하여 메모리 누수를 방지하는 작업을 말합니다. 웹 애플리케이션에서 자바스크립트 실행 도중에 가..

10월 26일 컨퍼런스에서 발표된 Next.js 13 버전, 새롭게 변경된 내용을 정리해봅니다 :) | 공식 문서 | 컨퍼런스 페이지 | 예제 배포 사용 Next.js 13 App Playground – Vercel Explore the new app directory (App Router) in Next.js 13. vercel.com 최신 Next.js 설치 npm i next@latest react@latest react-dom@latest eslint-config-next@latest 무엇이 달라졌는지? app/ Directory (beta) (app/디렉토리): Easier, faster, less client JS Layouts (레이아웃) React Server Components (리액트 ..

React에서 브라우저의 네트워크 단절 상태를 핸들링 하는 방법에 대해 소개합니다. | Handling Internet Disconnection In React Applications. 🔎 필요성 프론트에서 예외 처리 로직을 추가할 때, 사용자에게 상황에 맞는 적합한 피드백을 실제로 주고 있는지 점검해볼 필요가 있습니다. 이를 통해 부족한 예외 처리를 정리하고, 우선 순위를 고려해 사용자 경험을 높여가는 것이 중요합니다. (유저 플로우와 맞는 예외 처리는 사용자 접속 및 유지율 향상에도 영향을 미치기 때문) 본 게시물에선 유저 브라우저 상태에 따라 네트워크 단절 상태에 맞는 UI를 제공하도록 브라우저 navigator를 활용해 React 애플리케이션에서 적합한 네트워크 상태를 체크하는 방법을 정리했습니다..