파일 다중 업로드 Chunk 적용기: 대용량 파일 업로드 최적화
·
개발/FE
문제 발생기능 적용 후, 처음에는 이미지 파일들을 대상으로 업로드 테스트를 진행했습니다. 그러던 중 파일의 크기와 종류를 다양하게 하여 대용량 파일이나 고화질 이미지들이 포함된 업로드를 시도하게 되었습니다. 그 결과 업로드 시간이 지나치게 길어지고, 네트워크 환경에 따라 서버 API에서 타임아웃이 발생하는 문제를 겪었습니다. 해결 방법문제를 해결하기 위해 백엔드 개발자와 논의한 결과, 파일을 청크(Chunk) 단위로 분할하여 업로드하는 방식을 채택했습니다.이 방법은 대용량 파일을 작은 청크로 나누어 서버에 전송하는 방식으로, 한 번에 전송되는 데이터의 양을 줄여 서버와의 연결이 끊어지는 것을 방지하고, 업로드 안정성을 크게 향상할 수 있습니다. 이를 통해 대용량 파일을 효율적으로 업로드할 수 있게 되었습..
Vite vs. Webpack : 모듈 번들러의 이해와 비교
·
개발/FE
최근 React 강의를 복습하면서 Vite를 처음 사용해 보았습니다. Vite의 설치와 실행 속도가 create-react-app(CRA)에 비해 현저히 빠르다는 점이 인상적이었습니다. 이에, 그동안 사용해 온 CRA의 기반인 Webpack과 자세히 비교해보고자 합니다.  ◆ 모듈 번들러 (Module Bundler)란?여러 개의 자바스크립트 파일(모듈)을 하나의 파일로 묶어주는 도구입니다. 웹 애플리케이션에서는 여러 모듈을 사용하기 때문에, 이를 한 번에 로딩하는 것은 비효율적입니다. 이를 해결하기 위해 모듈 번들러는 여러 개의 파일을 하나의 번들로 묶어 최적화된 형태로 브라우저에 전달합니다. 모듈 번들러가 해결하는 문제모듈화된 코드 관리 : 여러 개의 파일로 나누어 개발할 수 있습니다.성능 최적화 :..
[ Typescript with React + NodeJS ] 02. TypeScript 기본 & 기본 타입
·
카테고리 없음
◆ 11. Using Typesnumberstring: ' ', " ", ` `(템플릿 리터럴)booleanapp.tsfunction add(n1: number, n2: number) { return n1 + n2;}const number1 = 5;const number2 = 2.8;const result = add(number1, number2);console.log(result); // 7.8함수의 매개변수에 타입을 지정하여 컴파일 시 오류를 예방할 수 있습니다.예를 들어 `number1`에 문자열이 넘어가면 타입 오류가 발생합니다. 이는 개발 중에만 확인이 가능하고, 컴파일된 JS에서는 오류가 발생하지 않습니다. ◆ 12. TypeScript 타입 vs. JavaScript 타입JavaScript..