눈으로 개발하는 블로그

Redis에 데이터를 저장할 때 opsForValue()대신 opsForList()를 사용해서 저장하겠습니다. opsForList()는 Redis에서 List 구조로 관리됩니다.그래서 입력된 데이터의 순서가 유지되고 리스트이기 때문에 앞(Left)과 뒤(Right) 양쪽에서 데이터를 넣고 제거할 수 있습니다. 순서를 유지하기 위해 리스트의 오른쪽에 데이터를 추가하면 됩니다.rightPush(key, value) opsForList()를 사용한 이유는 저장하는 데이터가 순서대로 들어가고 하나의 Key로 모든 데이터를 관리하기가 편리하기 때문입니다.redisTemplateString.opsForList().rightPush("download:test", chunkData);:redisTemplateStrin..

서버 로컬 디스크나 스토리지에서 직접 파일을 읽어오면 디스크 I/O(입출력 부하)가 증가합니다. 이로 인해 시스템 응답 속도가 느려지고 병목 현상이 발생하기 쉽습니다. 가장 좋은 해결책은 CDN(Content Delivery Network)을 도입해 트래픽을 분산하는 것입니다. 하지만 보안상의 이유나 환경적 제약으로 인해 서버가 직접 파일을 전송해야 하는 순간이 있습니다. 이때 파일을 매번 디스크에서 읽지 않고 메모리에 캐싱한 뒤 전송하면 속도를 높일 수 있습니다. 하지만 모든 파일을 무작정 메모리에 올리면 서버 메모리가 바닥나는 OOM(Out of Memory) 현상을 마주할 수 있습니다. 이를 방지하려면 TTL(Time-To-Live, 유효 기간)을 적용해 일정 시간이 지난 데이터는 메모리에서 즉시 ..

Docker Compose는 여러 개의 컨테이너를 하나로 묶어 정의하고 실행할 수 있도록 돕는 도구입니다.하나의 명령어(docker compose up)로 여러 컨테이너를 켜고 끌 수 있게 해줍니다. docker-compose.yml파일은 각각의 컨테이너들을 실행할 때 필요한 옵션들을 적어둔 문서입니다. 1. Redis 폴더를 생성합니다.C:\workspaces\docker\redis 2. C:\workspaces\docker\redis에 docker-compose.yml파일을 생성합니다.# compose 파일 버전version: "3.9"# 컨테이너 내의 서비스들 정의services: # 서비스명(이름을 설정해도 docker-compose.yml 파일이 있는 폴더명(프로젝트명)으로 생성됨) redi..

exec 명령어실행 중인 컨테이너 내부에서 새로운 명령어를 실행합니다.docker exec [OPTIONS] CONTAINER COMMAND [ARG...] Redis CLI 실행실행 중인 redis 컨테이너에서 redis-cli를 실행시킵니다.-it (or -i -t) : 대화형 터미널을 열어 컨테이너 내부에서 명령어를 입력할 수 있게 합니다.docker exec -it dev-redis redis-cli redis-cli keys * 명령어로 모든 키를 가져옵니다. (현재는 키가 없습니다.)keys *ctrl+z, ctrl+d, ctrl+c를 누르면 redis-cli가 종료됩니다. Bash 실행실행 중인 redis 컨테이너에서 bash를 실행시킵니다.docker exec -it dev-redi..

Docker 명령어 pull 명령어레지스트리에서 로컬 시스템으로 이미지를 다운로드합니다.docker pull [OPTIONS] NAME[:TAG|@DIGEST] Redis의 이미지를 가져오겠습니다.최신 버전의 이미지를 가져올 경우에는 latest를 입력하시면 됩니다.docker pull redis:latest 특정 버전을 가져올 경우에는 버전을 입력하시면 됩니다.docker pull redis:8.2.1 images 명령어로컬 시스템에 다운로드된 이미지를 리스트로 보여줍니다.docker images [OPTIONS] [REPOSITORY[:TAG]] 모든 이미지을 보여줍니다.docker imagesdocker image ls image rm 명령어로컬 시스템에 다운로드된 이미지들을 삭제합니다.dock..

Redis 이미지 다운로드1. [Docker Hub]를 누르고 검색창에 "redis"를 입력하고 [Search]버튼을 누릅니다. 2. redis를 선택합니다. 3. [Tag]에서 latest(가장 최신 버전)나 다운로드 받을 버전을 선택하고 [Pull]버튼을 누릅니다. 작성 당시 버전은 8.8.2입니다. 4. redis 이미지를 다운로드합니다. 5. [Images]에 redis 이미지가 나타납니다. Redis 이미지 실행 (컨테이너 생성)1. [Images]에서 redis 이미지에 있는 [Run]버튼을 누르면 이미지가 Build 되어 redis 컨테이너가 생성되고 실행됩니다. 2. 컨테이너에 대한 옵션을 설정합니다. [Optional setting]를 펼칩니다. 3. [컨테이너 이름]과 [포트]를 입력..

Docker Desktop 설치하기1. Docker (https://www.docker.com/) 사이트에 접속합니다. 2. 상단 메뉴에서 Products에 있는 Docker Desktop를 클릭합니다. 3. Download Docker Desktop에서 Download for Windows-AMD64를 선택합니다. 4. 다운로드 됩니다. 5. 다운로드된 Docker Desktop Installer.exe를 실행하여 설치합니다.설치를 위해 초기화합니다.구성을 설정합니다. shortcut를 설치하기 위해서 체크합니다. (기본적으로 체크되어 있습니다.)설치를 위해 파일들의 풉니다.설치가 완료되어 윈도우를 재부팅을 해야 합니다. 작성 당시 버전은 4.91.0입니다. (업그레드를 진행하였습니다.) Docker..

이번에는 데이터를 청크(Chunk) 단위로 분할하여 전하는 대신 리소스를 한 번에 전송하는 방식으로 구현하겠습니다.이 방식은 HTTP 범위 요청(HTTP range requests)처럼 클라이언트에서 리소스의 일부(특정 범위)를 보내달라고 요청할 때나 서버에서 리소스 전체를 보낼때 사용됩니다.ResponseEntity이 방식으로 소용량의 데이터를 보낼 때 사용하시기 바랍니다. 대용량 파일 전송 시에는 메모리 효율이 떨어질 수 있으니 유의하시기 바랍니다. ResponseEntity를 적용한 컨트롤러의 기본 구조입니다. 간단하게 텍스트 문자열을 전송합니다.package com.example.transmission.controller;import org.springframework.http.HttpHeader..

기존 Servlet 기반의 코드를 Spring REST API 형태로 변경해보겠습니다. Spring에서 권장하는 ResponseEntity 방식을 사용하여 대용량 파일 다운로드할 때 메모리가 효율적으로 사용되게 구현하겠습니다.ResponseEntity StreamingResponseBody는 대용량 데이터를 메모리에 한 번에 올리지 않고 청크(Chunk) 단위로 나누어 클라이언트에 비동기 스트리밍 방식으로 전송할 때 사용하는 인터페이스입니다.데이터를 메모리에 적재하지 않고 즉시 처리하므로 OutOfMemoryError가 발생하지 않습니다.별도의 스레드에서 실행되어 메인 스레드를 차단하지 않고 데이터를 효율적으로 전송합니다.클라이언트(브라우저)와 연결된 출력 스트림에 람다식(->)으로 데이터를 write하..

파일 다운로드 전체 소스DB 테이블 생성임시 다운로드 파일 테이블다운로드되는 파일에 대한 정보를 관리하는 테이블입니다. 다운로드가 진행되면 데이터가 생성되고 완료되면 삭제됩니다. 1. DBeaver를 사용하여 SQL문을 실행합니다.-- testdb.tb_down_tempfile definitionCREATE TABLE `tb_down_tempfile` ( `SEQ` int NOT NULL AUTO_INCREMENT COMMENT '다운로드 임시 파일 시퀀스', `FILE_ID` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '다운로드 파일 ID', `FILE_PATH` varchar(256) CHARACTE..

대용량 파일 다운로드의 문제점 서버(Server)여러 사용자가 동시에 대용량 파일을 다운로드하면 네트워크 트래픽(데이터 전송량)이 증가하고 서버의 자원(메모리, 스레드)을 많이 사용하게 되어 서버의 응답이 지연되고 서비스가 느려지거나 중지될 수 있습니다. 클라이언트(Client)파일 다운로드를 중지하거나 이어서 받을수 가 없습니다.메모리 부족으로 브라우저가 강제로 종료될 수 있습니다.다운로드 시간이 길어지면 섹션이 종료되거나 네트워크 불안전(중단)하면 전송 속도가 떨어지면서 다운로드가 실패될 수 있습니다. 문제점 해결 방법 클라이언트에서 청크(Chunk) 단위로 업로드해서 해결했던거 처럼 다운로드에서도 대용량 파일을 청크(Chunk) 단위로 나누어 전송하면 문제점을 해결할 수 있습니다. 서버(Server..

파일 다운로드 (gzip/zip) 전체 소스 파일을 gzip/zip 형식으로 압축하여 다운로드되게 만든 코드입니다.테스트를 위해 서버에 있는 test.txt, test.png, test.mov파일을 다운로드하게 개발되어 있습니다. 소스 경로transmission +src +main +java +com +example +transmission +controller DownloadServlet4.java +webapp ..

서버에서 클라이언트로 파일을 보낼 때 압축을 사용하면 전송하는 데이터 용량이 줄어들어 네트워크 트래픽을 크게 줄일 수 있습니다. (데이터 용량이 줄어 클라이언트가 파일을 다운로드하는 시간이 빨라집니다.) GZIP과 ZIP 형식으로 파일을 압축하여 다운로드하는 기능 구현 방법을 소개합니다. GZIP과 ZIP의 차이점구분GZIPZIP확장자.gz.zipContent-Typeapplication/gzipapplication/zip압축단일 파일만 압축 (텍스트 파일에 적합)여러 파일 또는 폴더를 압축 GZIP단일 파일만 압축하는 포맷입니다. 원본 파일의 포맷 형식을 유지하기 위해 기존 파일명과 확장자 뒤에 .gz를 붙여서 다운로드 파일명을 생성해야 합니다.test.txt → test.txt.gz만약, text...

파일 다운로드 (multipart/mixed) 전체 소스 멀티파트인 multipart/mixed 방식으로 파일이 다운로드되게 만든 코드입니다.테스트를 위해 서버에 있는 test.png, test.mov파일을 다운로드하게 개발되어 있습니다. 소스 경로transmission +src +main +java +com +example +transmission +controller DownloadServlet3.java +webapp ..

실무에서 multipart/mixed를 활용한 파일 다운로드를 접할 기회는 드물지만, 개발자로서의 개발 스펙트럼을 넓히고 깊이 있는 기술 구조를 이해하기 위해 그 개념과 구현 방법을 살펴보고 multipart/mixed 기반의 파일 다운로드 구현법을 알아보겠습니다. multipart/mixed는 서버에서 클라이언트로 응답 본문(Body)에 독립적인 여러 종류의 파일(텍스트, 바이너리(Binary))을 동시에 담아 전송할 때 사용하는 Content-Type입니다. multipart/mixed는 multipart/form-data와 비슷하지만 다른 점이 있습니다.구분multipart/form-datamultipart/mixed사용하는 곳웹 Form 전송이메일 클라이언트, 다중 전송 클라이언트, API(JSO..

파일 다운로드 (HTTP Transfer-Encoding) 전체 소스 HTTP 전송 인코딩(Transfer-Encoding) 방식으로 파일이 다운로드되게 만든 코드입니다.테스트를 위해 서버에 있는 test.mov파일을 다운로드하게 개발되어 있습니다. 소스 경로transmission +src +main +java +com +example +transmission +controller DownloadServlet2.java +weba..

HTTP Transfer-Encoding은 서버에서 웹 브라우저에 실시간으로 데이터를 보내거나 대용령의 파일을 보낼때 사용되는 기술입니다. HTTP 전송 인코딩(Transfer-Encoding) HTTP 전송 인코딩 (https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Transfer-Encoding) HTTP Transfer-Encoding은 네트워크상의 노드(서버와 클라이언트) 간 메시지 전송에 사용되는 인코딩 형식을 지정합니다.Transfer-Encoding은 노드 간 메시지에 적용되는 홉간(Hop-by-hop, 노드 사이의 개별 구간(Hop)에서만 적용) 응답 헤더입니다. 대부분의 인코딩은 chunked입니다.Transfer-E..

파일 다운로드 (HTTP 범위 요청) 전체 소스 HTTP 범위 요청(HTTP range requests) 방식으로 파일이 다운로드되게 만든 코드입니다.테스트를 위해 서버에 있는 test.mov파일을 다운로드하게 개발되어 있습니다. 소스 경로소스 경로 transmission +src +main +java +com +example +transmission +controller DownloadServlet.java +resources ..

웹 브라우저가 서버에 있는 파일을 다운로드 받을 때 파일을 한번에 다운로드하는게 아니라 여러 번에 나누어서 다운로드 합니다. 이때 사용되는 기술이 HTTP 범위 요청(HTTP range requests)입니다. HTTP 범위 요청(HTTP range requests)은 클라이언트가 서버에 리소스의 일부(특정 범위)를 보내달라고 요청하는 겁니다. 이 기술은 미디어 플레이어, 대용량 파일 다운로드에서 사용되고 있습니다. HTTP 범위 요청(HTTP range requests) HTTP 범위 요청 (https://developer.mozilla.org/en-US/docs/Web/HTTP/Range_requests) HTTP 범위 요청(HTTP range requests)을 사용하기 위해서 서버가 HTTP 범..

파일 업로드 전체 소스 DB 테이블 생성임시 업로드 파일 테이블업로드 되는 파일에 대한 정보를 관리하는 테이블입니다. 업로드가 진행되면 데이터가 생성되고 완료되면 삭제됩니다. 업로드 파일 테이블업로드가 완료된 파일에 대한 정보를 관리하는 테이블입니다. 1. DBeaver를 사용하여 SQL문을 실행합니다.-- testdb.tb_up_tempfile definitionCREATE TABLE `tb_up_tempfile` ( `SEQ` int NOT NULL AUTO_INCREMENT COMMENT '업로드 임시 파일 시퀀스', `FILE_ID` varchar(32) COLLATE utf8mb4_general_ci NOT NULL COMMENT '업로드 파일 ID', `FILE_PATH` varchar(..

모든 청크 데이터(이진 데이터)를 다 받은 후 내부의 바이트를 읽어 파일 형식(MIME Type)과 파일 확장자가 같은지 비교할 수 있습니다. 검증을 통해 악성 스크립트나 해킹 실행 파일이 문서 파일이나 이미지 파일로 위장해 서버로 업로드되는 것을 원천적으로 차단할 수 있어 보안이 강화됩니다. 아파치 티카(Apache Tika, https://tika.apache.org/)Tika는 다양한 파일에서 메타데이터와 텍스트를 감지하고 추출하는 라이브러리콘텐츠 유형 감지(파일 시작 부분 근처에서 특수("magic") 바이트 패턴을 찾아 파일 유형을 감지) 1. Tika를 사용하기 위해 pom.xml에 추가합니다.[Maven] org.apache.tika tika-core 3.0.0[Gradle]..

청크 데이터(이진 데이터)를 암호화하여 보내면 보안을 높여 전송할 수 있습니다. 하이브리드 암호화 구조로 청크 데이터 전송1. 서버에서 RSA를 사용하여 공개키(PublicKey)와 개인키(PrivateKey)을 생성하고 공개키(PublicKey)를 클라이언트에 전달합니다.2. 클라이언트에서는 AES Key를 랜덤으로 생성하고 청크 데이터를 암호화합니다.3. AES Key를 서버에서 생성한 RSA 공개키(PublicKey)로 암호화하여 암호화된 청크 데이터와 같이 서버로 전송합니다.4. 서버에서 RSA 개인키(PrivateKey)로 AES Key를 복호화해서 암호화된 청크 데이터를 복호화합니다. RSA 공개키, 개인키 생성 서버에서 RSA를 사용하여 공개키와 개인키를 생성합니다. 1. 서버에서 Key..

청크 데이터(이진 데이터)를 그래도 보내도 되지만 압축하면 전송 효율이 좋아지기 때문에 압축 라이브러인 pako(파코)를 사용하여 압축하여 전송할 수 있습니다. Blob(Binary Large Object)를 압축pako (https://github.com/nodeca/pako)pako(파코)는 Zlib 라이브러리의 JavaScript 구현체입니다. 1. pako(파코) 라이브러리를 CDN으로 가져옵니다. pako.gzip()은 Blob 객체를 직접 입력받을 수 없기 때문에 Uint8Array 같은 이진 배열(TypedArray) 형태로 데이터를 변환해서 사용해야 합니다. ArrayBuffer (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refer..

대용량 파일 업로드대용량 파일을 청크로 분리하여 업로드하는 프로세스를 시퀀스 다이어그램(Sequence Diagram)으로 표현했습니다. Sequence Diagram(시퀀스 다이어그램) 웹 브라우저에서 대용량 파일을 청크(Chunk)로 분리하기 위해서 slice() 함수를 사용하면 됩니다. slice (https://developer.mozilla.org/en-US/docs/Web/API/Blob/slice)File API의 slice 함수를 사용하여 Blob(Binary Large Object)를 가져옵니다. 파일에서 시작 바이트(begin)부터 끝 바이트(end)까지(end 미포함) 복사하여 Blob(Binary Large Object) 객체로 반환합니다.slice(start, end);// 업로드..

카테고리별 파일 업로드 설정 관리는 게시판 기반 형태로 단순한 CRUD로 되어 있어 설명 없습니다. 소스만 보셔도 충분히 이해하실 겁니다. 카테고리별 파일 업로드 설정 관리 전체 소스 DB 테이블 생성카테고리 테이블카테고리와 업로드/다운로드의 파일 경로, 업로드 청크 크기, 전송 암호화 여부 등을 관리하는 테이블입니다. 1. DBeaver를 사용하여 SQL문을 실행합니다.-- testdb.tb_category definitionCREATE TABLE `tb_category` ( `SEQ` int NOT NULL AUTO_INCREMENT COMMENT '카테고리 시퀀스', `CATE_ID` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci ..

대용량 파일 전송(업로드/다운로드) 시스템 개발을 위해 기능을 정의하고 만들어 보겠습니다. 개발환경은 다음과 같습니다.IDE : IntelliJ IDEA 2025.2.2 (Community Edition)spring-boot 3.4.0Java 17.0.14MySQL 8.4 개발할 기능들을 기능 정의서로 정리하였습니다. 이전에 설명드린 것처럼 대용량 파일을 한번에 전송하지 않고 청크로 분리하여 전송하고 전송 중 중지, 재시작, 삭제를 할 수 있게 개발하겠습니다. 또한 보안을 강화하기 위해서 무결성 검증, 파일 확장자 변조 검증, 암호화 전송, 압축 전송 등 기능을 추가하여 개발하겠습니다. 기능 정의서기능기능 설명파일 업로드 설정 관리(관리자)대용량 파일 업로드에 대한 조건과 업로드 후 조치 사항을 설정합니..

대용량 파일 업로드의 문제점서버(Server)파일의 크기가 클 수록 네트워크 트래픽(데이터 전송량)이 증가하고 서버의 자원(메모리, 스레드)을 많이 사용하게 되어 서버의 응답이 지연되고 서비스가 느려지거나 중지될 수 있습니다.전송시간이 길어지면 서비스 서버의 섹션 타임아웃(Session Timeout)이 발생해서 섹션 정보가 삭제될 수 있습니다. 클라이언트(Client)파일 업로드를 중지하기가 쉽지 않습니다.파일 전송이 동기 처리일 경우 전송 완료할 때까지 웹 브라우저가 중지됩니다.전송 시간이 길어지면 섹션이 종료되어 다음 작업을 할 수 없게 될 수 있습니다. 서버(Server) 측 문제 해결 방법JVM 옵션에서 다이렉트 메모리(-XX:MaxDirectMemorySize) 조정 → 임시적인 조치웹 서버 ..

앱에 위치 기반 기능을 추가해보겠습니다. @capacitor/geolocation 설치 (https://capacitorjs.com/docs/apis/geolocation) 위치 기반 기능 사용1. geolocation 설치 (터미널에서 실행합니다.)npm install @capacitor/geolocation --save 2. src\views\LunchMenu에 LunchMenuMapView.vue 파일을 생성합니다. GeoLocation 나의 위치: 위도: {{ loc.lat }} 경도: {{ loc.lng }} 현 위치 3. src\router\index.js 파일을 수정합니다. :import LunchMenuMapVie..

Capacitor를 사용하여 쉽게 앱을 개발해 보도록 하겠습니다. Capacitor (https://capacitorjs.com) Web App에 Capacitor 추가 (https://capacitorjs.com/docs/getting-started#add-capacitor-to-your-web-app) 1. capacitor 설치 (터미널에서 실행합니다.)npm install @capacitor/core @capacitor/cli --save 2. Capacitor 초기화 (터미널에서 실행합니다.)npx cap init App Name : 앱 이름 (변경하지 않으려면 그냥 엔터 키를 누릅니다. 변경하려면 입력합니다.) Package ID : 앱의 패키지 아이디 (변경하지 않으려면 그냥 엔터 키를 누..

Android Studio 다운로드1. Android Developer (https://developer.android.com/?hl=ko) 사이트로 이동합니다. 2. [Android 스튜디오 다운로드]를 클릭합니다. 3. 약관를 아래로 스크롤한 후 동의를 체크하고 하고 [다운로드]를 누릅니다.현재는 Android Studio Quail 2 입니다. 4. Android Studio가 다운로드 됩니다. Android Studio 설치1. [Next] 버튼을 누릅니다. 2. 설치할 컴퍼넌트를 선택하고 [Next] 버튼을 누릅니다. 3. 설치 경로를 설정하고 [Next] 버튼을 누릅니다. 4. 설치 이름을 설정하고 [Next] 버튼을 누릅니다. 5. 설치가 진행됩니다. 6. 설치가 완료되면 [Finish] ..