내가 원하는 웹사이트를 만들었는데 다른 사람에게 보여줘야 한다면?웹브라우저에 나와있는 localhost://~ 이 주소를 보내줄건가요?이건 내 컴퓨터에서만 볼 수 있죠. 그래서 이렇게 내가 만든 웹사이트를 외부에서도 다른 사람들이 볼 수 있도록 공유하기 위한 작업, 즉 "배포" 라는 것을 합니다.한마디로 어디 서버에 내가 만든 웹사이트를 올려놓는다는거죠.(개인적으로 배포라는 단어가 의미전달을 제대로 하지 못하는 것 같아 별로 좋아하지 않습니다만) 이런 과정을 아예 자동화하는 것이 CI(Continuos Integration)/CD(Continuos Deployment) 라고 하는 것입니다.내가 소스를 고치고 깃허브와 동기화하면, 깃허브와 연결된 Vercel에서 이를 감지해 배포까지의 과정이 자동으로 이루..

기술이 발전할 수록 알아야 할 것도 참 많아집니다.이번엔 도커에 대해서 알아보겠습니다. https://youtu.be/Sglo-dxGzGM?si=Wj7x0nlW53MMf-TC 도커(Docker)를 사용하는 가장 핵심적인 이유는 **프로그램을 어떤 환경에서든 에러 없이 일관되게 설치하고 실행할 수 있는 '이식성(Portability)'**을 확보하고, 개발 및 배포 과정의 비효율성을 없애기 위함입니다.도커가 현대 소프트웨어 개발에서 필수가 된 구체적인 이유는 다음과 같습니다.1. 완벽한 환경 일관성 ("내 컴퓨터에서는 되는데 왜 서버에선 안 되지?" 해결)이전에는 개발자의 PC에서 잘 작동하던 코드가 테스트 서버나 운영 서버에 배포되면 OS 버전 차이, 라이브러리 누락, 미세한 설정 값 차이 등으로 인..

요즘 node.js를 모르면 뭐 하나 제대로 할 수가 없습니다.node.js가 뭘까? https://youtu.be/2gFHL1E-XlQ?si=sSHZiFRSarZXlYn0 Node.js는 자바스크립트를 웹 브라우저 외부(서버나 컴퓨터 등)에서 실행할 수 있게 해주는 런타임 환경으로, 뛰어난 확장성과 성능을 바탕으로 다음과 같은 다양한 분야에서 활용됩니다. 1. 백엔드 서버 및 API 개발 가장 대표적인 사용처로, 데이터베이스(MongoDB 등)와 통신하며 데이터를 저장, 수정, 삭제(CRUD)하고 클라이언트의 요청을 처리하는 고성능 REST API와 백엔드 서비스를 구축할 때 사용됩니다. PayPal, Netflix, Uber, LinkedIn, Yahoo 등 대규모 데이터를 다루는 글로벌 기업들이..

부트스트랩이 처음 나왔을 쓸 때만 하더라도 와~ 이제 반복코딩은 없어지고 컴포넌트들을 아주 간단하게 만들겠구나...하며 좋아했던 기억이 납니다. 그리고 상당기간 부트스트랩으로 웹사이트를 개발했는데, 가장 큰 단점은 다 비슷비슷하고 고만고만한 디자인이 나온다는 것이었죠. 하지만 이제 그 단점을 보완한 테일윈드가 인기를 얻고 있습니다. https://youtu.be/S0swMK0LuEc?si=LrdluuHlRhpZLJqd Tailwind CSS는 미리 정의된 작은 스타일 클래스(유틸리티 클래스)들을 조합하여 HTML 문서 내에서 직접 웹사이트의 디자인을 완성할 수 있게 해주는 '유틸리티 퍼스트(Utility-First)' 기반의 CSS 프레임워크입니다. 초보자가 이해하기 쉬운 Tailwind CSS의..

📦 Webpack vs ⚡ Vite: 웹팩은 왜 필요했고, 비트는 왜 나왔을까? (초보자 완벽 가이드)안녕하세요! 프론트엔드 개발에 입문하면 가장 먼저 마주치게 되는 장벽 중 하나가 바로 **‘빌드 도구(Build Tool)’**와 **‘번들러(Bundler)’**라는 개념입니다."그냥 HTML, CSS, JS 파일만 만들어서 브라우저에 띄우면 되는 것 아닌가요?" 라고 생각하셨다면 주목해 주세요! 대세 빌드 도구인 **웹팩(Webpack)**과 **비트(Vite)**가 왜 세상에 나왔는지, 그리고 나에게 맞는 도구는 무엇인지 아주 쉽게 풀어 정리해 드립니다. 😉 https://youtu.be/Q7ToVF3UNJY?si=BFcwKhocllLEVF3h 1. 📦 Webpack은 왜 필요했을까? (라떼의..

AI툴이 발달하면서 정말 "딸깍" 하면 "뚝딱" 하고 웹사이트 하나가 만들어지는 세상이 됐습니다.HTML을 몰라도 CSS를 몰라도 AI와 대화하듯 이것 만들어줘, 저것 만들어줘 하기만 하면 됩니다. 디자인도 최근에 나온 구글의 스티치를 이용하면 초안을 잡는데 아주 쉽고, 이것을 피그마로 가져가면 보다 더 정밀하게 디자인할 수도 있습니다. (물론 스티치에서 만든 디자인만으로도 웹사이트 만드는데 문제가 없습니다.) 혹시 내가 원하는 웹디자인이 있다면 핀터레스트 같은 곳이나 실제 웹사이트를 캡처해 던져주기만 해도 비슷한 스타일의 디자인을 만들어줍니다. 그렇게 만든 웹사이트를 다른 사람들에게 보여주려면 "배포" 라는 것을 해야합니다.흔히 깃허브에 올려놓으면 "Page"라는 기능을 통해 외부에 공개가 가능합니다...

AI 시대가 오면서 다양한 용어들이 나오는데 그 중 AI를 위한 USB-C라고 하는 MCP에 대해 알아보겠습니다. https://youtu.be/ukWiwYWODFI?si=UXyCDnQ-o4G9Mf1Y#1 기초학습 https://youtu.be/7T9JSCkVGYI?si=l0o7sWhtZ5elxP-S #2 심화학습 **MCP(Model Context Protocol)**는 고립되어 있던 AI 모델(LLM)이 외부 데이터나 도구와 소통할 수 있도록 연결해 주는 표준화된 개방형 통신 규약입니다. 초보자들도 이해하기 쉽도록 흔히 'AI 세계의 만능 어댑터' 또는 **'AI를 위한 USB-C'**라고 불립니다.과거에는 AI 애플리케이션이 특정 데이터베이스나 로컬 파일에 접근하려면 각각 맞춤형 연결 코드를 ..

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

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

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

스왑파일이 잡혀있는지 확인해 보자.$ sudo free -m total used free shared buff/cache availableMem: 956 535 71 7 511 421Swap: 0 0 0 0으로 되어 있다. 1. 4G 스왑파일 생성$ sudo fallocate -l 4G /swapfile 2. 권한설정$ sudo chmod 600 /swapfile 3. 스왑 영역으로 설정$ sudo mkswap /swapfile 4. 스왑활성화$ sudo swapon /swapfi..

우선 필요한 것은 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 폴더에 바로 설치할거라서 저렇게 옮겨주었다.압축이 풀린 그누보드 폴더명은..

먼저 해야할 일은 오라클 프리티어에서 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/도메인..

우선 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의..

제일 좋은 방법은 마리아  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 그래서 위와 같은 버전을 설치하려고 선택하면 그 밑으로 ..