본문 바로가기

Programming/Javascript

 (14)
React에서 S3 대용량 파일 다운로드 받기 (multipart donwload) S3를 이용해서 파일을 업로드 / 다운로드 하다보면 대용량 파일(수백 MB~수 GB)을 다룰 때가 있습니다. 이 때 대용량 파일을 한 번에 다루게 된다면 메모리 문제나 타임아웃이 발생할 수 있습니다.이를 해결하기 위해서 AWS에서 업로드는 멀티파트 업로드 API를 제공하지만 다운로드는 별도의 API가 없습니다.하지만 GetObjectCommand에서 Range 옵션을 이용하여 잘게 chunk로 나누어 받은 다음 다시 합치는 방법으로 이를 해결 할 수 있습니다.사전 조건S3의 CORS를 허용해야합니다.[ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "GET", "..
AWS Amplify로 Astro 배포하기 Astro 프로젝트와 AWS 계정이 있다면 쉽게 서비스를 호스팅 할 수 있습니다.Astro 프로젝트 만들기yarn create astro@latest my-astro-app한 줄로 손 쉽게 Astro 프로젝트를 생성할 수 있습니다.도구가 다 도와줍니다.생성된 프로젝트에 astro-aws-amplify를 설치해줍니다.astro-aws-amplify는 Server-side Astro를 amplify로 배포할 수 있게 도와주는 어댑터입니다.# Using Yarnyarn add astro-aws-amplifyAstro Config에 어댑터를 추가해줍니다.// astro.config.mjsimport { defineConfig } from "astro/config";import awsAmplify from "as..
Astro.js vs Next.js 및 다른 프론트엔드 프레임워크 비교 Astro.js란?Astro.js는 정적 사이트 생성(SSG)과 멀티 프레임워크 지원을 핵심으로 하는 최신 프론트엔드 프레임워크입니다. HTML 우선 접근 방식과 클라이언트 사이드 JavaScript 최소화를 통해 빠른 성능을 제공하는 것이 특징입니다.Astro.js와 Next.js 비교비교 항목Astro.jsNext.js렌더링 방식정적 사이트 생성(SSG) 중심, 서버 사이드 렌더링(SSR) 가능SSG, SSR, ISR, CSR 지원퍼포먼스HTML 우선 접근 방식으로 JavaScript 로딩 최소화동적인 데이터 처리를 위해 일부 클라이언트 JavaScript 필요멀티 프레임워크 지원React, Vue, Svelte, Solid 등 다양한 UI 라이브러리 지원React 기반코드 스플리팅기본적으로 필요 없..
JavaScript의 for...in과 for...of 반복문 비교하기 JavaScript에는 배열이나 객체를 순회할 때 사용되는 다양한 반복문이 있습니다. 이 중 for...in과 for...of는 각각의 고유한 사용 사례와 특징을 가지고 있습니다. 이번 글에서는 이 두 반복문이 어떻게 다른지, 그리고 언제 사용해야 하는지를 예제와 함께 알아보겠습니다.for...in 반복문for...in 반복문은 객체의 열거 가능한 속성(enumerable properties)을 순회할 때 사용됩니다. 즉, 객체의 키(key)들을 순회합니다.문법:for (key in object) { // 실행할 코드}특징:객체의 속성 이름을 순회합니다.배열에도 사용할 수 있지만, 배열의 인덱스를 순회합니다.프로토타입 체인에 있는 속성도 포함될 수 있습니다.예제:const person = { name..
Next.js와 Svelte 비교 Svelte 5와 Next.js 15 비교웹 개발의 세계는 빠르게 변화하고 있으며, 새로운 프레임워크와 라이브러리가 지속적으로 등장하고 있습니다. 그 중에서도 Svelte 5와 Next.js 15는 많은 개발자들 사이에서 주목받고 있는 두 가지 프레임워크입니다. 이번 포스트에서는 이 두 프레임워크의 주요 기능, 성능, 사용자 경험, 커뮤니티와 생태계 등을 비교해 보겠습니다.Svelte는 컴파일러 기반의 프레임워크로, 개발자가 작성한 코드를 최적화하여 빠른 성능을 제공합니다. Svelte 5는 이전 버전보다 더욱 향상된 기능과 성능을 자랑합니다. 반면, Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 기능을 통해 SEO와 성능을 극대화합니다. Nex..
Javascript에서 SOLID 법칙 적용하기 SOLID 원칙 객체지향설계(Object Oriented Design)의 5가지 원칙 단일 책임 원칙(Single responsibility principle) 개방 폐쇄 원칙(Open/closed principle) 리스코프 치환 원칙(Liskov substitution principle) 인터페이스 분리 원칙(Interface segregation principle) 의존관계 역전 원칙(Dependency inversion principle) 장점 클린 코드(시간이 지나도 유지 보수와 확장이 쉬운 시스템) 단일 책임 원칙(Single responsibility principle) 클래스는 하나의 작업만 있어야 한다. 함수형에서는? -> 함수는 하나의 작업만 있어야한다. 장점 요구사항 변경 발생 시 하..
Javascript 일급 객체(First-class object) javascript에서 함수(Function)는 일급 객체(First-class object)이다. 일급 객체(First-class object)란? javascript에서 다음을 만족하여야 한다. 무명의 literal로 생성이 가능하다. 변수나 자료구조(배열(Array), 객체(Object) 등)에 할당이 가능하다. 다른 함수의 parameter로 전달이 가능하다. 다른 함수의 return으로 사용이 가능하다. Function이 일급 객체인 이유 javascript에서 Function은 다음과 같이 가능하다. 무명의 literal로 생성이 가능하다. var helloAlert = function(name){ (name + "님 환영합니다."); } helloAlert("world"); 변수나 자료구조(..
Javascript Currying(커링) Currying은 함수형 프로그래밍에서 기초개념이다. Currying은 다음과 같이 정의되고 있다. 다중 인수를 갖는 함수를 단일 인수를 갖는 함수들의 함수열로 바꾸는 것을 말한다. 간단하게 말해서 함수를 리턴하는 함수라고 생각하면 편할 듯 하다. f(a, b, c)의 인자가 3개인 함수를 f(a)(b)(c)와 같이 사용할 수 있다. const curry = (fn) => (a) => (b) =>fn(a,b); const add = (a, b) =>a + b; console.log(curry(add)("Hello")("Wolrd")); // result: HelloWorld Currying은 뒷 부분의 파라미터를 나중에 실행할 수 있다. f(a)(b)를 실행 후 (c)는 나중에 실행 가능하다. const..

티스토리툴바