오늘도 공부

목차모노레포란 무엇인가? 왜 Turborepo인가? 실전: Turborepo 프로젝트 구축 여러 Next.js 앱 동시 관리하기 공유 UI 컴포넌트 라이브러리 만들기 Shadcn UI와 통합하기 성능 최적화 팁 실제 프로덕션 배포 전략모노레포란 무엇인가?여러분이 다음과 같은 프로젝트를 운영한다고 상상해보세요:고객용 웹 앱관리자 대시보드모바일 앱용 API마케팅 랜딩 페이지전통적인 방식(Polyrepo)에서는 각 프로젝트마다 별도의 Git 저장소를 만듭니다. 하지만 공통 UI 컴포넌트를 수정하려면 어떻게 될까요?❌ 기존 방식 (Polyrepo)1. UI 라이브러리 저장소에서 Button 컴포넌트 수정2. npm에 새 버전 배포 (v1.2.3)3. 웹 앱 저장소에서 package.json 버전 업데이트4. 관..

🎯 들어가며SQL(Structured Query Language)은 데이터베이스를 다루는 개발자라면 반드시 마스터해야 할 필수 언어입니다. 오늘은 SQL의 핵심 개념들을 마인드맵 형태로 체계적으로 정리해보겠습니다. 이 포스트를 통해 SQL의 전체적인 구조를 한눈에 파악하고, 각 명령어의 용도와 활용법을 완벽하게 이해할 수 있을 것입니다.📚 SQL 언어의 4대 범주SQL은 크게 4가지 범주로 나뉩니다. 각각의 역할과 특징을 살펴보겠습니다.1. DDL (Data Definition Language) - 데이터 정의어 🏗️DDL은 데이터베이스의 구조를 정의하는 명령어들입니다. 테이블, 뷰, 인덱스 등의 구조를 생성하고 변경하는 역할을 합니다.CREATE - 생성하기-- 데이터베이스 생성CREATE DAT..

⚠️ 참고: MongoDB 공식 문서에는 Ubuntu 24.04에 대한 지원이 명시되어 있으며, Ubuntu 24.04에서 Mongo 8.0 이상 사용 가능함이 나옵니다. (MongoDB)다만 일부 가이드에서는 공식 리포지토리가 24.04에 완전히 최적화돼 있지 않을 수 있다는 언급도 있으므로 환경에 맞게 리포지토리 설정을 확인하시는 게 좋습니다. (NSpeaks)1. 사전 준비터미널을 열고 다음을 실행하세요:sudo apt updatesudo apt install -y gnupg curl software-properties-common apt-transport-https ca-certificates비루트(sudo) 권한이 있는 사용자로 실행하세요.시스템이 최신 상태인지 확인해 두세요.2. 공식 Mong..

실전 프로젝트로 배우는 종합 튜토리얼1. 소개 및 개념1.1 왜 Riverpod + Drift를 함께 사용하는가?현대 Flutter 앱 개발에서 로컬 데이터 영속성과 상태 관리는 핵심 요소입니다. Drift와 Riverpod의 조합은 다음과 같은 강력한 이점을 제공합니다:Drift의 강점타입 안전성: 컴파일 타임에 SQL 쿼리 검증리액티브 쿼리: Stream 기반 실시간 데이터 업데이트마이그레이션 관리: 체계적인 스키마 버전 관리성능: SQLite의 빠른 성능과 최적화크로스 플랫폼: 모바일, 웹, 데스크톱 지원Riverpod의 강점의존성 주입: 깔끔한 아키텍처 구현컴파일 타임 안정성: Provider 타입 체크테스트 용이성: Mock 객체로 쉬운 테스팅상태 관리: 선언적이고 예측 가능한 상태 흐름성능 최..

소개이 튜토리얼에서는 Node.js와 TypeScript를 사용하여 SurrealDB에 연결하고, 간단한 게시판의 CRUD(Create, Read, Update, Delete) 기능을 구현하는 방법을 단계별로 살펴보겠습니다.사용 기술 스택Node.js: v18 이상TypeScript: v5.0 이상SurrealDB: v1.0 이상surrealdb.js: 공식 JavaScript SDK학습 목표SurrealDB를 Node.js 환경에서 연결하는 방법 이해TypeScript를 활용한 타입 안전성 확보게시판 CRUD 기능의 실제 구현SurrealDB의 쿼리 언어(SurrealQL) 사용법 습득환경 설정1. SurrealDB 설치 및 실행먼저 SurrealDB를 설치합니다.macOS/Linux:curl -sSf..

문제 상황Android Studio에서 Flutter 프로젝트를 열었을 때 Android 프로젝트로 인식되어 다음과 같은 오류가 발생하는 경우:"Error: Entrypoint isn't within the current project" 오류 발생Flutter 실행 구성이 나타나지 않음Flutter Device Selection 드롭다운이 보이지 않음프로젝트가 Android SDK로 열림해결 방법1. Flutter 프로젝트 구조 재생성# 프로젝트 디렉토리로 이동cd /mobile# Flutter 프로젝트 구조 재생성flutter create . --project-name xxxx --org com.xxxx2. IDE 캐시 및 설정 초기화# .idea 폴더 삭제 (Android Studio 설정 초기화)r..

Flutter에서 자주 사용하는 디자인 패턴 정리Flutter 개발에서 자주 쓰이는 디자인 패턴을 UI 트리, 상태 관리, 아키텍처, 객체지향 패턴의 네 가지 축으로 정리했습니다.각 패턴은 **왜 쓰는지(Why), 언제 쓰는지(When), 어떻게 쓰는지(How)**를 짧은 예제와 함께 담았습니다.1. UI 트리 패턴1-1. Composite 패턴개념: Flutter 위젯 트리 자체가 Composite. 전체와 부분을 동일하게 다룸.장점: UI를 재귀적으로 구성/관리하기 쉬움.Column( children: [ Text("안녕"), Row(children: [Icon(Icons.star), Text("별")]), ],)1-2. Decorator 패턴개념: 기능을 감싸면서 꾸밈을 추가.예시:D..

flutter analyze는 Flutter 프로젝트의 정적 분석 도구로, 코드에서 오류나 경고, 스타일 문제를 사전에 찾아주는 명령어입니다. Dart의 dart analyze와 동일한 기능을 포함하며, Flutter 프로젝트에 맞게 확장된 형태로 사용됩니다.1. 기본 개념Flutter/Dart 코드에서 타입 오류, 사용하지 않는 코드, 잠재적 버그, 스타일 위반 등을 찾아냄.빌드 전에 코드 품질을 높이고 런타임 오류 가능성을 줄임.분석 기준은 analysis_options.yaml 파일에서 정의함.2. 사용법터미널에서 프로젝트 루트에서 실행:flutter analyze현재 디렉토리 전체를 분석.특정 파일/디렉토리만 지정 가능:flutter analyze lib/main.dart flutter analy..

프로젝트 개요Next.js 15 App Router, NeonDB, Drizzle ORM, tRPC, Better Auth를 활용한 현대적인 풀스택 블로그 애플리케이션 구축 가이드입니다. 이 가이드는 완전한 타입 안전성과 최적화된 성능을 갖춘 프로덕션 레벨의 애플리케이션을 만드는 방법을 단계별로 설명합니다.1. 프로젝트 초기 설정Next.js 15 프로젝트 생성npx create-next-app@latest my-blog-app설정 프롬프트에서 다음과 같이 선택합니다:✔ Would you like to use TypeScript? → Yes✔ Would you like to use ESLint? → Yes✔ Would you like to use Tailwind CSS? → Yes✔ Would you l..

📧 Next.js + Resend를 활용한 이메일 인증 구현 가이드이 글에서는 Resend 이메일 API를 활용해 Next.js 앱에서 사용자 이메일 인증을 구현하는 방법을 소개합니다. 또한 이메일 도메인 설정까지 실전 예제로 설명합니다.✅ 1. 이메일 인증 흐름 개요이메일 인증 로직은 다음과 같은 흐름으로 구성됩니다:사용자가 이메일 주소를 입력 → "이메일 인증 링크 보내기"서버에서 인증 토큰 생성 및 Resend를 통해 이메일 발송사용자가 이메일 내 링크 클릭 → 토큰 검증 → 로그인 or 회원가입 처리추가: 도메인 설정을 통해 스팸함 방지 및 신뢰도 향상🛠️ 2. 프로젝트 세팅2.1 Next.js 프로젝트 생성npx create-next-app@latest email-auth-appcd emai..

✅ 1. 쿠키 (Cookies)목적: 주로 서버와 클라이언트 간에 소량의 데이터를 주고받기 위해 사용.크기 제한: 약 4KB.수명: 만료일 지정 가능 (지정 없으면 세션 쿠키 → 브라우저 종료 시 삭제).특징:매 HTTP 요청 시 서버에 자동 전송됨.도메인, 경로, 보안(HTTPS) 설정 가능.보안에 취약할 수 있으므로 민감 정보는 저장 금지.✅ 2. 로컬 스토리지 (LocalStorage)목적: 브라우저에 영구적으로 데이터 저장.크기 제한: 약 5~10MB (브라우저마다 조금 다름).수명: 수동으로 삭제하거나 클라이언트가 명시적으로 localStorage.clear() 할 때까지 유지됨.특징:같은 도메인 내에서는 모든 탭/윈도우에서 공유.서버로 자동 전송되지 않음.문자열 데이터만 저장 가능 (JSON으..

App Store Changes at WWDC25: What Flutter Devs Must Know | by Deepak Sharma - FreediumWWDC25 wasn't just about flashy AI tools and new UI toys. Behind the main stage, Apple quietly dropped some major shifts in how Flutter apps are submitted, reviewed, and approved. If your app touches the App Store in any way — and especially if you buildfreedium.cfd위 내용을 한국어 정리한 내용입니다.목차WWDC25 이후, Flutter 앱 개발자..

🔑 핵심 개념 요약1. PostgreSQL은 "데이터베이스"와 "스키마"를 분리해서 관리합니다데이터베이스: 전체 컨테이너 (접속 단위)스키마: 데이터베이스 안의 네임스페이스(예: 폴더 같은 것)테이블, 뷰, 시퀀스 등의 객체는 스키마 안에 존재합니다.public 스키마는 모든 PostgreSQL 데이터베이스에 기본으로 하나 생성됩니다.2. 데이터베이스 소유자 ≠ 스키마 권한 보유자CREATE DATABASE mydb OWNER myuser로 생성해도,그 myuser는 그 데이터베이스에 접속할 수는 있지만public 스키마에서 객체(테이블 등)를 자동으로 만들 수는 없음즉, 데이터베이스 접근 권한과 스키마 조작 권한은 별개입니다.🔐 예시로 설명다음처럼 사용자와 데이터베이스를 만들었다고 가정:CREATE..

비밀번호를 변경했을 때 기존 JWT를 **무효화(invalidate)**하는 것은 JWT의 구조상 자동으로 되지 않기 때문에, 다음과 같은 추가적인 서버 설계가 필요합니다.✅ 핵심 원칙**JWT는 기본적으로 stateless(상태 없음)**이기 때문에, 토큰을 발급한 이후에는 서버가 그 토큰을 직접 "무효화"하지 않습니다.🧩 그래서 문제는?사용자가 비밀번호를 바꿔도, 이전 JWT는 여전히 유효기간(exp) 내에서는 사용 가능합니다.공격자가 JWT를 탈취해놨다면, 비밀번호 변경 후에도 API를 호출할 수 있음.✅ 해결 방법: 비밀번호 변경 시 JWT 무효화 구현 전략전략 설명 구현 난이도 장점/단점1. tokenVersion 방식JWT payload에 tokenVersion을 포함하고, DB의 사용자 정..

https://medium.com/flutter/whats-new-in-flutter-3-32-40c1086bab6e What’s new in Flutter 3.32Hot reload on web, native fidelity, and deeper integrationsmedium.com 📋 목차 미리보기Flutter 3.32란?웹(Web)웹에서 핫 리로드 실험 기능VS Code와 터미널에서 사용하는 법DartPad에서 핫 리로드 적용플랫폼별 주요 업데이트Framework: Expansible, RawMenuAnchorCupertino: Apple 스타일 “squircle (곡면 스퀴클)”Material: CarouselController, TabBar, SearchAnchor 등접근성과 텍스트 입력 ..

소개 · HonKitNo results matching ""nodejs-interview-ko.netlify.appNodeJS 면접 인터뷰 모음 98개위 링크를 클릭시 질문과 답을 확인이 가능합니다1. Node.js란 무엇이며 왜 사용하나요?2. Node.js는 자식 스레드를 어떻게 처리하나요?3. Node.js의 이벤트 기반 프로그래밍을 설명해주세요.4. Node.js의 이벤트 루프란 무엇인가요?5. Node.js와 전통적인 웹 서버 기술의 차이점은 무엇인가요?6. Node.js에서 "논 블로킹(Non-blocking)"의 의미를 설명해주세요.7. Node.js를 최신 버전으로 업데이트하는 방법은 무엇인가요?8. "npm"이란 무엇이며 어떤 용도로 사용되나요?9. Node.js 프로젝트에서 패키지를 어..

소개 · Flutter 인터뷰 내용No results matching ""flutter-dev-interview-ko.netlify.app Flutter 면접 인터뷰 내용을 정리했습니다. 자세한 내용은 위 링크 클릭하시면 되세요~1. Flutter란 무엇인가요?2. Flutter가 앱 개발에 사용하는 언어는 무엇인가요?3. Flutter에서 위젯(widget)이란 무엇인지 설명해주세요.4. Flutter 아키텍처에 대해 설명해주세요.5. StatefulWidget과 StatelessWidget의 차이점은 무엇인가요?6. Flutter에서 스크롤 가능한 리스트를 어떻게 만드나요?7. BuildContext 클래스의 중요성은 무엇인가요?8. Flutter 앱 라이프사이클에 대해 설명해주세요.9. Flutte..

Flutter에서 cached_network_image 패키지를 사용할 때 이미지의 **만료 기간(Cache Expiration)**을 설정하는 방법은 여러 가지가 있습니다. 주요 방법은 다음과 같습니다.1. CacheManager를 직접 사용하여 만료 기간 설정기본적으로 cached_network_image는 내부적으로 flutter_cache_manager를 사용합니다. 따라서 CacheManager를 커스텀하여 만료 기간을 설정할 수 있습니다.✅ Custom CacheManager 만들기import 'package:flutter_cache_manager/flutter_cache_manager.dart';class CustomCacheManager extends CacheManager { stati..

Flutter의 IntrinsicWidth 위젯 이해 및 사용법Flutter에서는 다양한 레이아웃 위젯을 제공하여 UI 요소를 원하는 방식으로 배치할 수 있습니다. 그중에서 IntrinsicWidth 위젯은 자식 위젯들의 너비를 최적화하는 데 도움을 주는 중요한 도구입니다.1. IntrinsicWidth란?IntrinsicWidth 위젯은 자식 위젯의 최소 및 최대 고유 너비(본질적인 너비, Intrinsic Width)를 계산한 후, 가장 적절한 너비를 적용하는 역할을 합니다. 이를 통해 가변적인 크기의 위젯을 균형 있게 정렬할 수 있습니다.일반적으로 Column 또는 Row 안에서 위젯들이 각기 다른 크기로 배치될 때, 가장 넓은 위젯의 크기에 맞춰 정렬하고 싶다면 IntrinsicWidth를 사용하..

직접 GeoIP 서비스를 만드는 방법을 안내드리겠습니다.기본적으로 http://ip-api.com/json과 같은 GeoIP API 서비스는 이미 구축된 대형 IP 데이터베이스를 통해 IP 주소를 국가, 지역, 도시, 타임존으로 변환하는 작업을 수행합니다.직접 구현하려면, 공개된 GeoIP 데이터베이스를 다운받아 서버에서 직접 처리하는 방식이 필요합니다. 가장 널리 사용되는 무료 GeoIP 데이터베이스는 MaxMind GeoLite2입니다.✅ [직접 GeoIP 서비스 구축 방법]다음 절차로 진행합니다:1단계 - MaxMind에서 GeoIP 데이터베이스 다운로드하기MaxMind GeoLite2 무료 데이터베이스 다운로드 링크회원가입 및 로그인 후 GeoLite2 City 버전을 다운로드합니다..mmdb 파..

Mcp Server를 이용해서 Figma에 있는 디자인을 커서로 그대로 Flutter 코드로 가져오는 방법을 공유 할려고 합니다. (클론 가능)준비물NodeFigmacursor🚀 MCP(Model Context Protocol)란?MCP는 애플리케이션이 LLM(대형 언어 모델)과 맥락(Context)을 주고받는 방식을 표준화하는 프로토콜이에요. 쉽게 말해, LLM이 원하는 결과를 제대로 생성하도록 정확한 정보(맥락)를 전달하는 기술입니다.💡 비유하자면, MCP는 USB-C와 같아요.하나의 표준 인터페이스로 다양한 기기(LLM)와 연결할 수 있죠.Figma 디자인을 Flutter 코드로 변환하려면, 올바른 맥락을 LLM에 제공해야 해요. 그렇지 않으면 결과물이 완전 엉망이 되거나, 원하는 수준에 도달하..

Vite vs Next.js 비교 및 장단점 분석Vite와 Next.js는 모두 프론트엔드 개발을 위한 인기 있는 도구지만, 목적과 기능이 다릅니다.Vite: 빠른 개발 환경과 빌드 속도를 제공하는 프레임워크 불문 번들러이자 빌드 툴.Next.js: React 기반의 풀스택 프레임워크로, 서버사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원.아래에서 두 도구를 상세 비교하고, 각각의 장점과 단점을 분석하겠습니다.1. 기본 개념 비교비교 항목 Vite Next.js주요 목적프론트엔드 개발 환경 및 번들링 최적화React 기반의 풀스택 웹 프레임워크지원 프레임워크Vue, React, Svelte 등 다수React 전용렌더링 방식클라이언트 사이드 렌더링(CSR) 기본SSR, SSG, ISR, CSR ..

로그(logging)는 개발과 운영에서 매우 중요한 요소야. 로그를 잘 남기면 디버깅, 문제 해결, 성능 분석, 보안 감사 등에 큰 도움이 돼. 여기서는 효율적으로 로그를 남기는 방법을 정리해볼게.🔹 1. 로그의 목적을 명확히 하자로그는 단순한 출력이 아니라 분석과 문제 해결을 위한 기록이야. 따라서 로그를 남길 때는 다음을 고려해야 해.디버깅을 위한 로그: 개발 중 코드의 흐름을 확인하는 용도운영 로그: 실제 서비스에서 발생하는 오류, 사용자 활동 기록보안 로그: 권한 변경, 로그인 시도, 데이터 접근 기록 등목적에 맞게 로그 레벨을 적절히 사용해야 해.🔹 2. 로그 레벨(Level)을 올바르게 사용하자로그 레벨을 잘 구분해야 로그 관리가 쉬워져.레벨 설명 사용 예시DEBUG상세한 디버깅 정보변수 ..

Nginx에서 sites-enabled 디렉터리에 설정 파일을 링크하는 방법은 다음과 같습니다.1. 설정 파일 생성먼저, Nginx의 sites-available 디렉터리에 원하는 설정 파일을 생성합니다.sudo nano /etc/nginx/sites-available/my_website예제 설정 파일 (my_website):server { listen 80; server_name example.com; root /var/www/example; index index.html index.htm; location / { try_files $uri $uri/ =404; }}파일을 저장한 후, CTRL + X → Y → Enter 를 눌러 종료합니다.2. sites-..

🚀 next/image에서 모든 이미지 도메인 허용하기Next.js의 next/image는 보안 및 최적화를 위해 외부 이미지 도메인을 명시적으로 지정해야 합니다."Un-configured Host" 오류는 허용되지 않은 도메인의 이미지를 불러오려고 할 때 발생합니다.1️⃣ 모든 도메인 허용 (next.config.js)Next.js에서는 images.domains 옵션을 설정해야 하지만, 특정 도메인을 모를 경우 와일드카드(* 사용)는 불가능합니다. 대신, remotePatterns 옵션을 사용하여 모든 도메인을 허용할 수 있습니다.📌 next.config.js 설정 (모든 도메인 허용)/** @type {import('next').NextConfig} */const nextConfig = { i..

https://liveblocks.io/ Liveblocks | Ready‑made features for AI & human collaborationThe best products for the AI era aren’t solo experiences—they’re collaborative, like Notion and Figma. Liveblocks provides ready‑made features that make your app multiplayer, engaging, and AI‑ready.liveblocks.io 📌 Liveblocks란?Liveblocks는 실시간 협업(Real-time Collaboration) 기능을 쉽게 추가할 수 있도록 지원하는 서비스입니다.Google Docs의 동..

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..