오늘도 공부

https://clerk.com/ Clerk | Authentication and User ManagementThe easiest way to add authentication and user management to your application. Purpose-built for React, Next.js, Remix, and “The Modern Web”.clerk.com 📌 Clerk란?Clerk는 풀스택 애플리케이션을 위한 인증 및 사용자 관리 서비스입니다. 기존의 Firebase Authentication, Auth0, Supabase Auth와 비슷하지만, Next.js, React, Remix, Svelte 등 최신 웹 프레임워크와 긴밀하게 통합되어 개발 속도를 크게 단축시킬 수 있습니다...

https://www.convex.dev/ Convex | The reactive database for app developersConvex is the reactive database for app developers. Everything you need to build your full-stack project.www.convex.dev Convex DB란?Convex DB는 풀스택 개발을 위한 백엔드 데이터베이스 및 서버리스 프레임워크입니다. 기존의 데이터베이스와 달리 자동 스케일링, 상태 관리, 트랜잭션 처리 및 리얼타임 기능을 포함한 완전한 백엔드 솔루션을 제공합니다.Convex는 특히 React, Next.js, Svelte, Vue 등과의 연동이 강력하여 풀스택 개발을 단순화하는 것을 목표..

Next.js 15로 만든 웹사이트를 구글 검색에서 잘 노출되게 하려면(SEO 적용) 아래 단계를 따르는 것이 좋습니다.---1. Next.js의 기본 SEO 설정1) 에 메타 태그 추가Next.js에서는 next/head를 사용하여 각 페이지의 태그를 관리할 수 있습니다.import Head from "next/head";export default function Home() { return ( Next.js 15 SEO 튜토리얼 Next.js 15 SEO 최적화 );}title 태그: 페이지 제목 (검색결과 제목으로 사용됨)meta description: 검색결과에서 설명으로 노출됨..

Next.js에 Google AdSense 광고를 삽입할 수 있습니다. 다만, Next.js는 기본적으로 서버 사이드 렌더링(SSR)을 지원하기 때문에 AdSense 코드가 제대로 실행되려면 클라이언트 사이드에서 실행되도록 설정해야 합니다.1. Google AdSense 승인 및 코드 발급먼저, Google AdSense 계정을 승인받고, 광고 코드를 발급받아야 합니다.2. Next.js에 AdSense 삽입하는 방법(1) _document.js에 전체 사이트용 스크립트 추가Google AdSense의 스크립트를 모든 페이지에서 실행하려면 _document.js 또는 _document.tsx 파일을 수정해야 합니다.📌 pages/_document.jsimport { Html, Head, Main, Ne..

파이어폭스(Firefox)에서 네트워크 응답 내용을 직접 변경하는 것은 기본적으로 제공되지 않지만, 몇 가지 방법을 활용하면 가능할 수 있습니다.1. 개발자 도구에서 응답을 수정하는 방법파이어폭스 자체 개발자 도구(F12)를 사용하면 네트워크 요청을 가로챌 수 있지만, 응답 자체를 수정하는 기능은 기본적으로 제공되지 않습니다.2. Tamper Dev 확장 프로그램 사용Tamper Dev 같은 확장 프로그램을 사용하면 HTTP 요청 및 응답을 가로채고 수정할 수 있습니다.요청을 보낼 때 Tamper Dev를 실행하면 특정 요청을 가로챌 수 있으며, 원하는 응답 내용을 수정할 수도 있습니다.3. Mitmproxy 또는 Burp Suite 사용파이어폭스의 네트워크 트래픽을 가로채려면 Mitmproxy나 Bur..

원문https://android-developers.googleblog.com/2025/02/second-beta-android16.html?utm_source=email&utm_medium=newsletter&utm_campaign=Play-february25&m=1 The Second Beta of Android 16Android 16 Beta 2 is now available, with new features for professional camera experiences, graphical effects, performance improvements, and more.android-developers.googleblog.com Android 16 베타 2 주요 업데이트 요약Google은 Andro..

PostgreSQL에서 테이블 구조를 확인하는 방법에는 여러 가지가 있습니다. 주요 방법은 다음과 같습니다.1. psql 메타 커맨드 사용psql 클라이언트에서는 간단하게 메타 커맨드를 사용할 수 있습니다.예시:\d 테이블명이 명령어는 해당 테이블의 컬럼, 데이터 타입, 인덱스, 제약조건 등을 보여줍니다.2. information_schema 뷰 사용SQL 쿼리로 테이블의 구조를 확인하려면 information_schema.columns 뷰를 활용할 수 있습니다.예시 쿼리:SELECT column_name, data_type, character_maximum_length, is_nullable, column_defaultFROM information_schema.columnsWHER..

안녕하세요. 최근에 무료 및 유료로 가능한 신규 텔레그램 채굴앱 Megamine을 소개를 해드렸는데요.  https://javaexpert.tistory.com/1091 신규 텔레그램 무료 채굴 MegaMine을 소개합니다새로운 텔레그램 미니 무료(유료) 채굴앱 소개합니다. 최근 파이코인을 보면 꾸준히 시간될때마다 채굴해주는 무료 앱을 해주는게 추후 어떻게 될 지 모르니 좋은 것 같습니다. 그래서 새롭게javaexpert.tistory.com무료 체험 및 신규 가입은https://t.me/megaminetg_bot/megamine?startapp=1407569090 Megamine#Megamine is a mining game based on Proof-of-Work (PoW). Community: @M..

텔레그램 미니앱 + 테스트 결제 튜토리얼 (Step-by-Step)이 튜토리얼에서는 텔레그램 미니앱을 개발하고, 스타(Stars) 테스트 결제까지 연동하는 방법을 단계별로 진행합니다.🛠️ 1. 준비사항📌 필요한 것텔레그램 봇 생성웹 서버(Node.js + Express)Stripe 결제 시스템 (테스트 모드)Webhook (결제 상태 확인)🚀 2. 텔레그램 봇 생성 및 설정1️⃣ BotFather로 봇 생성텔레그램에서 BotFather와 채팅 후,아래 명령어를 입력하여 새 봇을 생성합니다./newbotBotFather가 요청하는 정보 입력봇 이름 설정 → (예: MyMiniAppBot)사용자명(username) 설정 → (예: my_miniapp_bot)2️⃣ API Token 복사BotFather..

새로운 텔레그램 미니 무료(유료) 채굴앱 소개합니다. 최근 파이코인을 보면 꾸준히 시간될때마다 채굴해주는 무료 앱을 해주는게 추후 어떻게 될 지 모르니 좋은 것 같습니다. 그래서 새롭게 런칭한 MegaMine이라는 유무료 텔레그램 채굴앱을 소개해드릴게요. 공식 트위터 주소는 https://x.com/MegaMine_POW  접속 방법은 아래 링크를 클릭해서 MegaMine 실행만 해주시면 됩니다. https://t.me/megaminetg_bot/megamine?startapp=1407569090 Megamine#Megamine is a mining game based on Proof-of-Work (PoW). Community: @Megamine_community Announcements: @Megam..

커서 룰 추가방법https://docs.cursor.com/context/rules-for-aiYou are a senior Dart programmer with experience in the Flutter framework and a preference for clean programming and design patterns.Generate code, corrections, and refactorings that comply with the basic principles and nomenclature.## Dart General Guidelines### Basic Principles- Use English for all code and documentation.- Always declare the ..

원본 출처https://substack.com/home/post/p-157251513아래는 번역 해놓은 내용입니다. 인스타그램의 초기 인프라 과제인스타그램이 2010년에 처음 출시되었을 당시에는 엔지니어링 리소스가 제한적인 작은 회사였습니다.하지만 시간이 지나면서 Instagram은 세계에서 가장 널리 사용되는 소셜 미디어 플랫폼 중 하나로 성장했습니다. 사용자 참여의 급속한 증가는 인프라에 엄청난 부담을 주었고, 지속적인 최적화와 확장 노력이 필요했습니다.Instagram의 규모를 강조하는 몇 가지 주요 지표(2017~2018년)는 다음과 같습니다.매일 여러 번 인스타그램을 열고 수십억 건의 상호작용을 생성하는 일일 활성 사용자는 4억 명입니다.하루에 1억 개의 미디어 업로드. 모든 미디어 파일은 다양..

처음 NestJS 실행시 뷰파일 수정을 해도 새로고침을 해도 변경이 안되는 경우가 대부분일겁니다.그럴때 사용하는 방법입니다.NestJS에서 hbs(Handlebars) 뷰 파일을 변경할 때 자동으로 반영(핫리로딩) 되도록 설정하는 방법을 설명하겠습니다.✅ 1. nodemon을 이용한 핫리로딩 설정NestJS에서는 nodemon을 사용하여 핫리로딩을 설정할 수 있습니다. 하지만 기본적으로 hbs 파일 변경을 감지하지 않으므로, 이를 직접 설정해야 합니다.🔹 1) nodemon 설치npm install --save-dev nodemon🔹 2) nodemon.json 설정 추가프로젝트 루트에 nodemon.json 파일을 생성하고 다음과 같이 설정합니다.{ "watch": ["src", "views"],..

Android 13 이상에서는 보안 강화로 인해 BOOT_COMPLETED 등의 브로드캐스트를 받으려면 추가적인 설정이 필요합니다. 다음과 같은 방법을 시도해보세요.1. 권한 선언 (AndroidManifest.xml)먼저, AndroidManifest.xml에 RECEIVE_BOOT_COMPLETED 권한을 선언해야 합니다.2. BroadcastReceiver 등록BOOT_COMPLETED 이벤트를 수신할 BroadcastReceiver를 등록합니다. ⚠ Android 12 이상에서는 android:exported="true"를 사용하면 보안상 문제가 될 수 있으므로 false로 설정해야 합니다.3. BootReceiver 클래스 구현BroadcastReceiver를 구현하여..

Nginx에서 sites-available에 설정 파일을 추가하고 sites-enabled에 심볼릭 링크를 거는 방법을 단계별로 설명할게.1️⃣ 설정 파일 생성하기먼저, /etc/nginx/sites-available/에 새로운 설정 파일을 만든다.sudo nano /etc/nginx/sites-available/myapp아래 내용을 추가하고 저장 (CTRL + X → Y → Enter):server { listen 80; server_name yourdomain.com; location / { proxy_pass http://localhost:3000; proxy_set_header Host $host; proxy_set_header X-Real-I..

Flutter에서 MVVM 아키텍처를 기반으로 Riverpod과 Freezed를 활용하는 폴더 구조를 추천해 드리겠습니다.📂 Flutter MVVM + Riverpod + Freezed 아키텍처 폴더 구조lib/│── main.dart # 앱 진입점│── app.dart # 앱 전체 구성 (MaterialApp)│├── core/ # 공통 유틸 및 설정│ ├── config/ # 앱 환경설정 (API, 라우트, 상수 등)│ │ ├── environment.dart # 개발/운영 환경 구분│ │ ├── app_routes.dart..

Node.js로 인앱 결제 구독 검증하는 방법Google Play 및 App Store의 구독 결제를 검증하려면 서버에서 영수증을 확인하는 API를 호출해야 해.이를 Node.js 기반으로 구현하는 방법을 단계별로 설명할게.---1. 검증이 필요한 이유보안 강화: 클라이언트에서 결제 정보를 조작할 가능성을 방지자동 갱신 확인: 구독이 유지되는지 검증하여 액세스 관리환불 및 취소 확인: 유저가 환불받았는지 체크 가능---2. Google Play 구독 검증Google의 Google Play Developer API를 사용하여 구독 상태를 검증해야 해.(1) Google API 활성화1. Google Cloud Console에서 프로젝트 생성2. Google Play Android Developer API ..

Flutter 인앱 결제 구독 복원(restore) 기능 구현앱을 삭제하고 다시 설치했을 때 구독 상태를 복원하는 방법을 자세히 설명할게.---1. 구독 복원 원리iOS: 사용자는 이미 구독한 상품을 다시 구매할 수 없고, restorePurchases()를 호출하면 기존 구독 정보를 가져올 수 있음.Android: 자동으로 복원되지 않으므로, queryPastPurchases()를 호출하여 과거 구매 내역을 가져와야 함.---2. 구독 복원 코드 구현(1) 과거 구매 내역 조회 (구독 복원)Flutter에서 구독 상태를 확인하려면 queryPastPurchases()를 사용해야 해.Future restorePurchases() async { final QueryPurchaseDetailsRespons..

Flutter에서 인앱 결제 구독(IAP, In-App Purchase)을 구현하는 방법을 단계별로 설명해 줄게.---1. 패키지 설치Flutter에서 인앱 결제를 구현하려면 in_app_purchase 패키지를 사용해야 해.dependencies: flutter: sdk: flutter in_app_purchase: ^3.1.10설치 후 패키지 가져오기import 'package:in_app_purchase/in_app_purchase.dart';import 'package:in_app_purchase/store_kit_wrappers.dart';---2. Google Play 및 App Store 설정구독을 구현하려면 Google Play Console 및 App Store Connect에서..

1. 리눅스 버전 확인리눅스 배포판과 버전을 확인하려면 아래 명령어 중 하나를 실행하세요.# 배포판 및 버전 확인cat /etc/os-release# 커널 버전 확인uname -r# 자세한 시스템 정보 확인lsb_release -a # 일부 배포판에서만 지원됨# 시스템 전체 정보 확인hostnamectl2. Let's Encrypt 인증서 갱신Let's Encrypt 인증서를 갱신하려면 Certbot을 사용해야 합니다. 아래 단계를 따라 진행하세요.(1) Certbot 버전 확인certbot --version버전이 너무 오래되었으면 먼저 업데이트하는 것이 좋습니다.(2) 인증서 갱신 실행sudo certbot renew위 명령어는 설정된 인증서들을 자동으로 갱신합니다.(3) 특정 도메인 인증서 갱신특정..

Qdrant는 고차원 벡터의 효율적인 저장과 검색을 지원하는 오픈 소스 벡터 데이터베이스이자 벡터 검색 엔진입니다. Rust로 개발되어 높은 성능과 안정성을 제공하며, 특히 AI 애플리케이션에서 임베딩된 벡터의 유사성 검색, 추천 시스템, 고급 검색 기능 구현에 유용합니다. citeturn0search6주요 특징:컬렉션과 포인트: Qdrant는 데이터를 컬렉션(Collection)과 포인트(Point)로 관리합니다. 컬렉션은 동일한 특성을 가진 벡터들의 집합이며, 각 포인트는 개별 벡터 데이터를 나타냅니다. 이를 통해 데이터를 체계적으로 분류하고 효율적으로 검색할 수 있습니다. citeturn0search3유연한 API: RESTful API를 통해 다양한 프로그래밍 언어와 쉽게 통합할 수 있..

NestJS에서 Seeder와 함께 Faker를 사용하면, 무작위 테스트 데이터를 쉽게 생성할 수 있습니다. Faker 라이브러리는 랜덤한 이름, 이메일, 주소 등을 자동으로 생성해주므로, 시드 데이터를 보다 현실적으로 만들 수 있습니다.1. Faker 라이브러리 설치먼저, @faker-js/faker를 설치합니다.npm install @faker-js/faker@faker-js/faker는 최신 버전의 Faker.js이며, 기존 faker 패키지는 유지보수되지 않으므로 사용하지 않는 것이 좋습니다.2. TypeORM Seeder에서 Faker 적용하기🔹 기본 TypeORM Seeder + Fakersrc/database/seeds/seeder.ts 파일을 만들고, Faker를 활용하여 더미 데이터를 ..

NestJS에서 Seeder(시드 데이터) 사용 방법Seeder(시드 데이터)는 데이터베이스를 초기화하거나 테스트 데이터를 삽입할 때 유용합니다. NestJS에서는 TypeORM, Prisma, Mongoose(MongoDB) 등 다양한 데이터베이스 라이브러리를 사용할 수 있으며, 각각의 방법에 따라 Seeder를 작성하는 방식이 조금씩 다릅니다.1. TypeORM을 사용하는 경우🔹 설치하기npm install @nestjs/typeorm typeormnpm install --save-dev ts-nodets-node는 TypeScript 파일을 실행하는 데 필요함.🔹 Seeder 파일 생성src/database/seeds/seeder.ts 파일을 만들고, 데이터를 삽입하는 코드를 작성합니다.impo..

NestJS에서 페이징을 구현하는 방법은 여러 가지가 있지만, 일반적으로 Offset 방식과 Cursor 방식이 많이 사용됩니다. 각각의 방식에 따라 장단점이 있으므로, 사용 목적과 성능 요구 사항에 맞게 선택하는 것이 중요합니다.1. Offset 방식 (기본적인 페이징)🔹 개념OFFSET과 LIMIT을 사용하여 특정 페이지의 데이터를 가져오는 방식page와 limit 값을 요청 파라미터로 받아서 데이터 조회✅ 장점구현이 간단하고 직관적대부분의 관계형 데이터베이스에서 지원❌ 단점페이지가 커질수록 성능이 저하됨 (OFFSET N은 N개의 데이터를 스캔해야 하므로)중간에 데이터가 삽입/삭제되면 페이지 불일치 가능성 존재💡 구현 예제 (TypeORM)@Get()async getItems( @Query('..

Story 생태계 톺아보기 ㅡ ABLO ABLO는 본인의 IP가 담긴 굿즈를 만들고 수익을 창출할 수 있는 플랫폼입니다. 파운더가 인터뷰에서 설명한 영상을 보면 들어가는 폰트 하나까지 AI로 본인이 제작할 수 있다는 게 특징이고,나아가서 로열티를 본인이 설정하고 이를 스토리 백엔드에서 처리할 수 있다는 점, 이를 통해 타 브랜드와의 IP 간 협업도 가능하다는 점을 장점으로 꼽고 있습니다 (실제로 컨텐츠 IP에서 빠질 수 없는 부분이 굿즈이기도 함)이렇게 흔한 티셔츠 하나조차도 스토리에서는 펏지, 두들과 같은 NFT처럼 IP 그 자체로서 핵심 자산이 될 수 있다는 것을 잘 설명해주고 있어서 스토리가 대체 어떤 프로젝트고, 무슨 비전을 가지고 있는지 궁금하신 분들에게 쉽게 다가오는 디앱이지 않을까 싶네요 ?..

📌 MkDocs란?MkDocs는 간단하고 빠르게 정적 웹사이트 형태의 문서를 생성하는 Python 기반의 문서 생성 도구입니다. Markdown을 사용하여 문서를 작성하며, 이를 HTML로 변환하여 정적 사이트로 배포할 수 있습니다. 특히 개발 문서화에 최적화되어 있으며, GitHub Pages 같은 서비스에 쉽게 배포할 수 있습니다.🔹 MkDocs의 주요 특징✅ Markdown 기반 → 사용하기 쉽고 가독성이 높음✅ 정적 사이트 생성 → HTML/CSS로 변환되어 빠른 로딩 속도 제공✅ Material for MkDocs 지원 → 강력한 UI 테마 적용 가능✅ 빠른 빌드 속도 → 문서가 많아도 빠르게 로딩됨✅ GitHub Pages 연동 가능 → 간단한 명령어로 쉽게 배포✅ 자동 검색 기능 지원 →..

NestJS와 MkDocs를 함께 사용하여 문서를 관리하고, Docker Compose로 이를 컨테이너화하는 방법을 단계별로 설명하겠습니다.📌 1. 프로젝트 구조다음과 같은 프로젝트 구조를 가정합니다.nestjs-mkdocs/│── backend/ # NestJS 애플리케이션│ ├── src/│ ├── package.json│ ├── Dockerfile│── docs/ # MkDocs 문서│ ├── index.md│ ├── getting-started.md│ ├── mkdocs.yml│── docker-compose.yml📌 2. NestJS 애플리케이션 설정① NestJS 프로젝트 생성NestJS 애플리케이션을 생성합니다.nestjs new bac..

Node.js와 Express를 사용하여 SaaS 형태의 유저 도메인 설정을 처리하는 시스템을 만드는 방법을 단계별로 설명해줄게. 기본적으로 유저가 자신의 도메인을 추가하면 Express 서버가 해당 도메인을 인식하고, Nginx 또는 Express의 미들웨어를 사용하여 트래픽을 라우팅하는 방식으로 진행할 거야.📌 1. 프로젝트 초기 설정1️⃣ Node.js 프로젝트 생성mkdir saas-dnscd saas-dnsnpm init -y2️⃣ 필요한 패키지 설치npm install express body-parser dotenv corsnpm install --save-dev nodemonexpress: 웹 서버body-parser: JSON 요청 처리dotenv: 환경 변수 관리cors: CORS 처리..

SaaS 형태의 플랫폼에서 유저가 자신의 도메인을 사용할 수 있도록(DNS 설정을 받아서 연결) 하려면, 다음과 같은 주요 개념과 기술을 이해하고 적용해야 합니다.1. 유저 도메인 연결 방식SaaS에서 유저가 자신의 도메인을 연결하는 방식은 크게 두 가지로 나뉩니다.✅ CNAME 방식 (권장)사용자가 자신의 도메인을 CNAME 레코드를 통해 SaaS의 서브도메인(예: user.your-saas.com)에 매핑.일반적인 방법이며, 클라우드 기반 SaaS에서 널리 사용됨.단, 루트 도메인(Apex 도메인, 예: example.com)에는 CNAME을 사용할 수 없다는 제한이 있음.설정 예시blog.example.com CNAME user.your-saas.com이 설정을 하면 blog.example.com으..

NestJS에서 추천하는 아키텍처 패턴은 여러 가지가 있지만, 대표적으로 Layered Architecture (레이어드 아키텍처), Hexagonal Architecture (헥사고날 아키텍처), Microservices Architecture (마이크로서비스 아키텍처), CQRS (Command Query Responsibility Segregation) 등의 패턴이 많이 사용돼. 각각의 패턴을 설명할게.1. Layered Architecture (레이어드 아키텍처)개요가장 기본적인 NestJS 아키텍처Controller, Service, Repository (또는 Model) 계층을 분리작은 프로젝트부터 대규모 프로젝트까지 적용 가능구성 요소Controller : HTTP 요청을 처리하고, 적절한 ..