분류 전체보기 101

브라우저에서 바로 이미지를 PDF로 — SvelteKit 기반 Image to PDF 제작기

TL;DR — 서버 없이, 개인 파일을 외부로 전송하지 않고 브라우저 안에서만 이미지를 PDF로 변환하는 웹앱을 SvelteKit + Tailwind CSS v4로 만들었습니다. GitHub Pages에 무료로 배포해서 누구나 쓸 수 있습니다.왜 만들었나요?스캔 이미지나 사진 몇 장을 PDF로 묶어 제출해야 할 때가 꽤 자주 있습니다. 그런데 vFlat 앱으로 사진을 찍었더니 유료 서비스에 가입을 해야 하더군요. 그래서 급히 직접 만들어보기로 했습니다. 어떻게 만들었나요?안티그래비티에 대략적인 기능을 설명해 주었습니다.그러자 스스로 개발초안을 만들며 개선안까지 제시를 해주었습니다.처음에는 서버에서 동작하는 것으로 생각했으나, 브라우저에서도 처리할 수 있다고 제안까지 한 것입니다. 그리고 안티그래비티가 임..

바이브코딩 2026.07.01

나만의 실시간 주식 대시보드 by Google Antigravity

🚀 시작하게 된 이유주식을 하다 보면 항상 아쉬운 게 있었습니다. 국내 증권사 HTS는 기능은 많지만 UI가 복잡하고, 해외 주식을 보려면 앱을 또 따로 켜야 하고, 환율은 어딘가에서 또 따로 확인해야 하고…그래서 아예 내가 원하는 기능만 담은 대시보드를 직접 만들어보자고 생각했습니다."코스피, 나스닥, 내가 보유한 주식, 환율까지 한 화면에서 바로 보고 싶다." 그게 My Stock의 시작이었습니다. 📱 어떤 서비스인가요?My Stock은 실시간 글로벌 시장 지수, 개별 주식 시세, 환율을 한 화면에서 모니터링하고, 내 포트폴리오를 원화 기준으로 관리할 수 있는 개인용 금융 대시보드 웹앱입니다. 주요 기능을 정리하면 이렇습니다:📊 글로벌 지수 모니터링: 코스피, 코스닥, 나스닥, S&P 500을..

바이브코딩 2026.07.01

[SvelteKit] 이미지 드래그앤드롭 PDF 변환 웹 프로그램 만들기

안녕하세요! 오늘은 스벨트킷(SvelteKit)을 활용하여 사용자가 업로드한 이미지들을 하나의 PDF 파일로 병합하고 다운로드할 수 있는 웹 애플리케이션 개발 가이드를 정리해 보려고 합니다.특히 데스크톱뿐만 아니라 모바일 환경 최적화, 작업 진행 중 세련된 애니메이션, 그리고 서버 용량 관리를 위한 24시간 임시 파일 자동 삭제(TTL) 기능까지 포함된 완성도 높은 풀스택 프롬프트와 설계 구조입니다.🛠️ 기술 스택 및 개발 프레임워크Framework: SvelteKit (최신 안정 버전)Styling: Tailwind CSS (반응형 및 모바일 터치 최적화)PDF Library: pdf-lib 또는 jsPDF (서버/클라이언트 환경에 맞춤)Storage: Node.js 내부 스케줄러 기반의 24시간 자..

스벨트킷 2026.06.24

FTP로 오라클 클라우드 프리티어에 업로드 하기

우선 필요한 것은 PuTTY과 FileZilla 를 다운받는다. PuTTY를 설치하면 PuTTYgen 프로그램을 실행한다. 앞서 프라이빗과 퍼블릭 키를 만들어두었다면 프라이빗키를 Load를 통해 불러온 뒤 Save private key로 저장하면 .ppk 파일로 저장된다. 파일질라를 실행한 후 프로토콜 SFTP, 호스트는 내 도메인, 포트는 22, 로그온 유형은 키파일.사용자는 ubuntu 그리고 키파일을 앞서 생성한 ppk 파일을 불러온 후 연결하면 된다. 만약, 업로드가 되지 않는다면 /var/www/html 폴더의 소유자와 그룹이 ubuntu로 되어 있는지 확인하고 그렇지 않다면 소유자를 변경한다.

그누보드 설치하기

워드프레스를 설치할까 하다가 아무래도 최근에 이걸로 홈페이지 몇 개를 만든 경험이 있어 조금이나마 익숙한 그누보드를 설치하기로 했다. $ cd /var/www$ sudo wget https://github.com/gnuboard/gnuboard5/zipball/master$ sudo apt install unzip -y$ sudo unzip master$ sudo mv gnuboard-gnuboard5-68a9e45/* ./html git clone 기능으로 설치해보려고 했으나 인증이 잘 안되어서 그냥 zip 파일을 가지고 와서 압축풀고 설치하는 걸로.그런데 다운받고 보니 확장자가 zip이 아니다.그냥 압축풀고 나는 기본 html 폴더에 바로 설치할거라서 저렇게 옮겨주었다.압축이 풀린 그누보드 폴더명은..

Let's Encrypt 무료 SSL 인증서 설치하기

먼저 해야할 일은 오라클 프리티어에서 HTTPS에 대한 포트 443을 열어두어야 한다.   그 다음 아래와 같은 명령을 실행한다. $ sudo apt update$ sudo apt install certbot python3-certbot-nginx -y $ sudo certbot --nginx -d 도메인명 -d 도메인명 설치 시 이메일 주소와 서비스계약에 동의하는지 묻는데 y,  그 다음에 이메일을 단체와 공유할 것인지 묻는데 n  를 선택해도 된다.  설치에 성공하면 아래와 같은 메시지를 볼 수 있다. (여기서 도메인명은 자신의 도메인이 보일 것이다.)Successfully received certificate.Certificate is saved at: /etc/letsencrypt/live/도메인..

원격으로 maria db에 접속하기

우선 DBeaver 라는 접속툴을 설치한다. DBeaver Community | Free Universal Database Tool DBeaver Community | Free Universal Database ToolDBeaver Universal Database Tool DBeaver Community is a free cross-platform database tool for developers, database administrators, analysts, and everyone working with data. It supports all popular SQL databases like MySQL, MariaDB, PostgreSQL, SQLite, Apachdbeaver.io maria db의..

maria db 설치하기

제일 좋은 방법은 마리아  db 사이트에서 설치방법을 확인하는 것. Download MariaDB Server - MariaDB.org Download MariaDB Server - MariaDB.orgREST API Reporting Bugs … Continue reading "Download MariaDB Server"mariadb.org   내가 설치한 우분투는 코드네임이 noble이었다. $ lsb_release -aNo LSB modules are available.Distributor ID: UbuntuDescription: Ubuntu 24.04.2 LTSRelease: 24.04Codename: noble 그래서 위와 같은 버전을 설치하려고 선택하면 그 밑으로 ..

hosting.kr에서 도메인 구입 후 연결하기

매번 IP 주소를 입력해서 내 서버에 접속하기란 쉽지 않다.그래서 원래는 카페24에서 주로 도메인 등을 구입해왔는데 이번에는 호스팅케이알 - Your Global IT Partner | 도메인, 웹호스팅, SSL, 오피스, 서버 에서 도메인을 구입해 봤다.(이 사이트가 UI나 사용법이 훨씬 더 세련됐다.) me.kr 도메인이 1년에 9,800원이라길래 하나 구입했다. 이제 오라클 프리티어와 연결을 해야할텐데 처음에 챗GPT가 설명을 잘못 해주는 바람에 조금 헤맸다.그런데 설정은 아주 단순했다.오라클 프리티어에서 설정할 것은 아무 것도 없다. hosting.kr에서 구입한 도메인을 클릭하고 네임서버/DNS 메뉴로 가면 DNS 관리가 있다. 새 레코드 추가를 클릭하면 위와 같이 나오는데 호스트 이름에 ..

우분투 nginx에 PHP 설치하기

1. 시스템 업데이트$ sudo apt update$ sudo apt upgrade -y  2. 필수 패키지 설치$ sudo apt install software-properties-common -y  3. 최신 PHP 버전을 제공하는 PPA 추가$ sudo add-apt-repository ppa:ondrej/php -y$ sudo apt update  4. PHP 최신 버전 설치 (현재 8.3)$ sudo apt install php8.3 php8.3-fpm php8.3-cli php8.3-common php8.3-mysql php8.3-curl php8.3-xml php8.3-mbstring -y  5. 설치 확인$ php -vPHP 8.3.20 (cli) (built: Apr 10 2025 21:..

PHP 설치 전 디렉토리 권한 설정하기

PHP를 설치하기 전에 nginx의 html 디렉토리가 어디있는지 보면 /var/www 에 있다.그런데 보면 사용자와 그룹이 root로 되어 있다.$ ls -l /var/www/total 4drwxr-xr-x 2 root root 4096 Apr 12 16:13 html 아래와 같이 ubuntu로 변경해 준다.오라클 프리티어에 ssh  접속하면 사용자가 ubuntu이다. $ sudo chown -R ubuntu /var/www$ sudo chgrp -R ubuntu /var/www$ ls -l /var/www/total 4drwxr-xr-x 2 ubuntu ubuntu 4096 Apr 14 08:06 html

오라클 클라우드 프리티어에서 nginx 설치 후 접속이 안될 때 CIDR도 확인하자

생성했던 인스턴스를 여러 번 삭제하고, 가상네트워크도 지웠다 만들었다...몇 번을 해도 왜 index 화면을 보기 어려운 걸까...ㅠ검색을 해보니 포트 아니면 방화벽의 문제였다. nginx 설치하니 80포트는 자동으로 열어두는 것 같다. 그러니 포트 문제도 아니고... 아래 수신규칙은 찾아 들어가기 힘들다. 콘솔에 들어가 1. 가상 클라우드 네트워크 메뉴로 들어간다.2. 목록에서 생성된 VCN를 선택한다. 3. 상단 "보안" 메뉴로 들어가면 아래 목록이 나오고 선택해서 들어가서 "보안규칙"에 가면 수신규칙을 추가할 수 있다.  인스턴스 생성 시 OS 이미지는 우분투로 했는데 우분투 방화벽은 아예 설치가 되어 있지 않아 이것도 문제가 아니었다. $ sudo ufw statussudo: ufw: comman..

반응형

최근 댓글

Total

  • Today :
  • Yesterday :