Vite Vue를 만들었던 Evan You가 만든 새로운 프론트엔드 빌드 도구입니다. 기존 문제 ESM(ECMAScript Modules)이 등장하기 전에는 자바스크립트 언어에서의 모듈화 방식은 없었습니다. 그래서 모듈화를 하기 위해서는 Webpack 등의 도구를 활용하여 번들링 작업을 진행 했었습니다. 하지만 애플리케이션이 점점 발전함에 따라 처리해야되는 JS 모듈의 개수도 증가합니다. 이러한 상황에서 번들링 도구는 성능 병목 현상이 발생됐고, 서버 가동 시 처음부터 소스 크롤링 및 빌드 작업을 하기 때문에 오랜 시간을 기다려야 했습니다. 하지만 개발 서버 구동 시 번들러 기반 도구는 모든 소스 코드에 대해서 크롤링 및 빌드 작업을 마쳐야만 실제 페이지를 제공할 수 있었습니다. 이어서 Vite는 이 문..

이전 글에서 파일을 base64로 변환하는 작업에 대한 내용을 다루었습니다. 이번 글에서는 api 를 호출 하고, responseType을 arraybuffer로 설정했을 때, response 에 에러가 발생 시 해당 에러에 관련된 내용을 decoding 하는 방법에 대해 알아보겠습니다. 내용은 간단합니다. arraybuffer 타입의 데이터를 아래와 같은 메서드를 통해 decoding 하면 끝 입니다. /** * @description Array Buffer data to json object data * @param buffer * @returns */ export function arrayBufferToJson(buffer) { const decoder = new TextDecoder(); cons..

Base64는 데이터를 안전하게 전송하고 저장하기 위한 인코딩 방식 중 하나입니다. 이 방식은 바이너리 데이터를 텍스트 형태로 변환하여 안정적으로 전송하거나 저장할 수 있게 해줍니다. 그래서 파일을 Base64로 인코딩하면, 이진 데이터를 텍스트 데이터로 변환하여 안전하게 전송하거나 저장할 수 있습니다. 이 글에서는 파일을 Base64로 인코딩하는 방법에 대해 알아보겠습니다. Base64 인코딩은 프로그래밍 언어에서도 많이 사용되므로, 이 글을 통해 기본적인 사용 방법을 익히면 다양한 프로그래밍 언어에서 파일을 안전하게 다룰 수 있습니다. Image to Base64 이미지를 base64로 변환하게 된다면 따로 서버에 파일을 저장하지 않고도, 단순한 텍스트로 이미지 파일을 불러올 수 있습니다. 아래는 A..

Python 개발자들 사이에서 점차 인기를 끌고 있는 FastAPI는, 비동기 I/O 작업을 지원하며 빠르고 쉽게 API 서버를 개발할 수 있는 프레임워크입니다. 특히, Pydantic을 이용한 데이터 유효성 검사와 자동 문서화 기능 등을 제공하여 개발 생산성을 크게 높일 수 있습니다. 이번 블로그 글에서는 FastAPI의 기본적인 개념과 사용 방법을 소개하고, JWT(JSON Web Token)를 이용한 인증 방식을 구현해보는 예제를 다룰 예정입니다. JWT는 웹 서비스에서 많이 사용되는 토큰 기반 인증 방식으로, 사용자의 정보를 안전하게 전송하고 인증하는 방식입니다. 본 글에서는 FastAPI를 이용하여 간단한 API 서버를 만들고, 해당 서버에서 JWT 토큰을 발급하고 검증하는 방법을 알아보겠습니다..

TypeScript Decorator는 TypeScript의 핵심 기능 중 하나로, 클래스, 메서드, 프로퍼티 등에 메타데이터를 추가하고 동적으로 동작을 변경하는 방법을 제공합니다. Decorator는 앵귤러 프레임워크의 핵심 개념 중 하나이기도 하며, TypeScript를 사용하는 개발자들에게 꼭 알아둬야 할 중요한 개념입니다. 이번 블로그 글에서는 TypeScript Decorator가 무엇인지, 어떻게 사용하는지, 그리고 어떤 실제적인 예시들이 있는지 등에 대해 알아보도록 하겠습니다. 또한, Decorator를 사용하는 이점과 함께 어떻게 좀 더 유연하게 코드를 작성할 수 있는지 등을 다룰 예정입니다. 따라서 TypeScript를 사용하는 개발자라면 Decorator를 알아두면 매우 유용할 것입니다..

CSS Viewport-fit과 Safe Area: 모바일 웹 디자인에서 중요한 역할을 하는 두 속성 최근에는 모바일 기기의 사용이 늘어나면서 모바일 웹 디자인이 중요한 이슈가 되었습니다. 그리고 이에 따라 웹 디자이너들은 사용자가 모바일 기기에서 최상의 환경을 누릴 수 있도록 다양한 방법을 모색하고 있습니다. 이 중에서도 viewport-fit과 safe area는 디자이너들이 꼭 알아야 할 속성입니다. viewport-fit은 웹 페이지가 모바일 기기의 화면에 맞춰져 더 나은 사용자 경험을 제공하기 위한 속성입니다. safe area는 디자인이 모바일 기기의 화면에 맞추어 안전한 영역을 확보하도록 돕는 속성입니다. 이번 글에서는 viewport-fit과 safe area가 무엇인지, 어떻게 사용하는지..