본문 바로가기

I LOVE WHAT I DO

0과 1 사이, 새로운 시작!

코드 한 줄이 세상을 바꾼다.

부족하지만 최선을 다하면 된다.

전체 글

총 43개

0과 1 사이에서
입문자를 위한 Supabase + Next.js + Prisma 시작하기 (P1001 에러까지 천천히 해결해보기) 2026. 1. 27. 10:38 Next.js로 프로젝트를 만들다 보면“백엔드는 최대한 간단하게 쓰고 싶다”라는 생각이 들 때가 많습니다.저도 같은 이유로 Supabase를 선택했고,데이터베이스 관리는 Prisma로 하면서 개발을 진행했습니다.그런데 처음 설정하는 과정에서많은 입문자들이 겪는 에러를 직접 만나게 되었고,해결 과정이 꽤 헷갈렸기 때문에 정리해두려고 합니다.1️⃣ Supabase는 뭐고, 왜 쓰는 걸까?Supabase는 쉽게 말하면:“PostgreSQL 기반의 백엔드 올인원 서비스”입니다.Supabase 하나만 있으면:데이터베이스 (PostgreSQL)로그인/회원가입(Auth)파일 업로드(Storage)실시간 데이터(Realtime)를 서버 없이 바로 사용할 수 있습니다.Next.js 같은 프론트엔드 프레임워크와 아주 잘 ..
Next.js 16 업데이트 핵심 정리 + 기능별 간단 코드 예시 2025. 11. 18. 10:14 안녕하세요, 여러분! 프론트엔드 개발자들에게 큰 소식이 도착했습니다. 바로 Next.js 16이 정식 출시되었는데요 😊이번 업데이트는 정말 대규모 변화가 많아서, 실제 프로젝트에 적용해보며 저도 놀란 점이 많았습니다. 특히 Turbopack이 기본 번들러가 되면서 체감되는 빌드 속도 향상은 정말 압도적이었어요. 지금부터 Next.js 16의 핵심 기능과 마이그레이션 체크포인트를 정리해드릴게요.📊 Next.js 16, 무엇이 달라졌나?1. Turbopack이 기본 번들러로 전환 ⚡가장 큰 변화는 바로 Rust 기반 번들러인 Turbopack이 기본 채택되었다는 점입니다.실제 성능 향상:프로덕션 빌드: 2.6배 빠름Fast Refresh: 최대 10배 빠름대규모 프로젝트 초기 실행: 5~10초 → 0.6..
React + NAS(WebDAV) 환경에서 HLS(m3u8) 스트리밍 재생하기 2025. 10. 2. 17:34 1. 배경프로젝트에서 Synology NAS에 저장된 HLS 영상(.m3u8 + .ts)을React(Vite) 프론트엔드에서 재생해야 했습니다.처음에는 NAS의 FileStation API (SYNO.FileStation.Download) 를 사용했는데,이 방식은 다운로드 전용 API라 브라우저에서 HLS.js가 순차적으로 .m3u8과 .ts를 불러오는 스트리밍 환경에는 적합하지 않았습니다.결국 502 Bad Gateway 에러가 반복적으로 발생했죠.2. 문제점CORS 문제NAS는 기본적으로 CORS 허용을 하지 않기 때문에 브라우저에서 직접 접근 불가.보안 문제NAS 계정/비밀번호를 프론트엔드에서 직접 Basic Auth로 요청하는 것은 위험.스트리밍 부적합FileStation Download API는..
2025-08-12 개발일지 2025. 8. 12. 17:29 🚀 Next.js + NextAuth 세션 관리 & 레이아웃 시스템 구축 기록오늘은 NextAuth를 사용해서 세션 관리 시스템을 구축하고,기존에 React Router를 사용하던 Header / SideMenu 컴포넌트를 Next.js 환경에 맞게 개선했습니다.🎯 오늘의 작업 목표NextAuth 세션 관리 시스템 구현Header / SideMenu 컴포넌트 Next.js 호환성 개선이미지 경로 문제 해결 + TypeScript 타입 안전성 확보✅ 오늘 해결한 문제들1. NextAuth 세션 관리 시스템 구축문제useSession 훅을 사용하려면 로 감싸야 하는데, 적용이 안 되어 오류 발생.해결_app.tsx에서 SessionProvider로 전역 감싸고, 인증 관련 로직은 AppShell로 분리...
Next.js에서 Prisma를 이용해 REST API를 만들어 보자 2025. 7. 22. 16:26 Prisma Clientprisma를 코드 상에서 사용하기 위해서는 prisma에서 제공하는 prisma client 라는 도구를 사용해야 합니다.❗ 보안 등의 이유로 브라우저는 prisma client를 실행할 수 없게 되어 있습니다!여기서는 api route를 제공하는 /api 폴더 안에서만 prisma client를 사용할 것입니다.자세한 내용은 prisma client 공식 문서를 참고해 주시면 됩니다.모델 만들기prsima client를 사용하기 위해서는 모델이 정의된 스키마 파일이 필요합니다. 스키마 파일을 다음과 같이 작성합니다.generator client { provider = "prisma-client-js"}datasource db { provider = ..
React Native CLI로 Android APK 만들기 (WebView 앱 예제) 2025. 7. 2. 18:04 React Native 프로젝트를 Expo 없이 CLI로 직접 구성하여 Android APK를 빌드하는 가장 일반적인 방법을 소개합니다. WebView 앱을 예제로 사용합니다.✅ 1단계: React Native 프로젝트 생성 npx react-native init WebViewAppcd WebViewApp✅ 2단계: WebView 라이브러리 설치 npm install react-native-webviewnpx pod-installnpx pod-install은 iOS용 설정이지만, cross-platform을 고려해 함께 설치해두면 좋습니다.✅ 3단계: App.js 수정 (WebView 앱 구현) import React from 'react';import { View, StyleSheet, Platform..
웹 접근성(WA인증), 프론트엔드 개발자가 꼭 알아야 할 체크리스트 2025. 7. 2. 10:18 1. 대체 텍스트 제공 (img 태그)장애인이 이미지 정보를 이해할 수 있도록 alt 속성을 반드시 사용해야 합니다.※ alt="" 는 장식용 이미지에 사용 (스크린 리더 무시)2. 레이블 연결 (label + input)폼 요소에 명확한 라벨을 연결해야 합니다.이메일※ 시각장애인 사용자에게 입력 항목을 정확히 안내합니다.3. 키보드만으로 조작 가능하게 하기onclick, onmouseover만 사용하는 대신 button, a 요소를 사용하고 키보드로 접근 가능하도록 처리해야 합니다.클릭하세요클릭하세요또는 tabindex="0"을 추가하여 포커스 가능하도록 처리:클릭4. 색상 대비 확보글자 색상과 배경 색상 간의 대비 비율이 최소 4.5:1 이상이어야 합니다.예: 흰 배경(#ffffff)에 검정 글씨(#..
🧠 VS Code도 좋지만, 이제는 Void? 2025. 6. 5. 10:22 🚀 Void? 이게 뭐야?Void는 최근에 오픈소스로 공개된 AI 기반 코드 에디터예요.쉽게 말하면 VS Code처럼 생긴 에디터인데,여기에 로컬에서 실행되는 AI 코딩 어시스턴트가 붙어 있다고 보면 됩니다.GPT처럼 AI한테 코드 수정해 달라고 하고, 문서 요약해 달라고도 하고,근데 그걸 클라우드 말고 내 컴퓨터에서 바로 처리한다는 거죠.Cursor, Copilot 같은 상용 AI 코딩툴을 써봤다면 익숙한 느낌일 거예요. 🔄 Cursor랑 뭐가 달라? 항목VoidCursor모델 실행 방식로컬에서 직접 실행 (ex. Ollama, Mistral 등)클라우드 기반 OpenAI API 사용보안/프라이버시로컬 처리, 외부 전송 없음OpenAI 서버로 코드 전송 가능성 있음비용완전 무료 (자체 모델)Ope..

티스토리툴바