이런개발

수파베이스를 사용해서 간단한 토이 프로젝트를 만드려고 하다가 수파베이스 키가 포함된 코드를 깃헙에 올려버렸다. 괜히 불안해서 프로젝트 새로 따고 테이블을 복사해보려고 한다. 1️⃣ pg_dump 설치하기Mac:brew install postgresql Windows: 이 링크에서 PostgreSQL 설치하고 환경변수에 bin 경로 추가 ( 사실 여기서 하기 싫어졌다. 윈도우면 뭘 설치하라고? 벌써 귀찮다. 나는 프로젝트 초반이라 테이블이 두 개뿐이라 다른 방법으로 했다. 그건 맨 밑에서... )2️⃣ 기존 프로젝트 DB URL 확인Supabase Studio 들어가기Settings > Database 메뉴로 이동PostgreSQL Connection string 복사 (예: postgres://u..

이번에는 또 Next 프로젝트로 로그인 화면 및 로직을 만들어 보라신다. 참고 블로그 https://01exsilver.tistory.com/59 [NEXT] 3. 로그인, 회원가입 구현하기 / Next-Auth, Prisma / `NextRouter` was not mounted 에러 해결🚀 Next-Auth로 로그인, 회원가입 구현 모든 걸 나 혼자 정해야하니까 어떤 라이브러리로 해야 좋을지 고민하는 시간만 한 세월.. 열심히 찾아보다가 next-auth가 일반 이메일 가입뿐만 아니라 구글,01exsilver.tistory.com 위 블로그에 자세히 나와있어서 열심히 따라 만들다가, DB 연동까지 한 후, 실제 데이터베이스에는 존재하지 않는 User Model을 하나 넣어보았다. 그리고 그..

MySQL을 사용할 때 여러 쿼리를 하나의 작업으로 묶어 처리하고 싶을 경우 트랜잭션을 사용한다. 트랜잭션을 사용하면 중간에 에러가 발생했을 때 이전 작업을 모두 취소할 수 있어 데이터 정합성을 보장할 수 있다.Node.js 환경에서 MySQL 커넥션을 사용한 트랜잭션 처리의 핵심 메서드는 다음과 같다.1. beginTransaction()트랜잭션의 시작을 선언하는 메서드이다. 이 시점부터 실행되는 쿼리들은 commit()을 호출하기 전까지 실제로 DB에 반영되지 않는다.await conn.beginTransaction();2. commit()트랜잭션 내에 실행한 모든 쿼리를 실제 DB에 반영하는 메서드이다. 이 명령이 실행되면 트랜잭션은 종료되고, 데이터는 확정적으로 저장된다.await conn.com..

개발 중프론트는(nuxt3) localhost:3000, 백엔드는 (node.js) localhost:5000에 띄워져 있는 상황. 위처럼 작성 시 post 방식의 api는 잘만 호출이 되는데.get 방식은 상대경로를 써주니 405 Method Not Allowed 에러가 자꾸 떠버린다. 이제야 알게 된 nitro.devProxy.... ✅ nitro.devProxy란?nitro.devProxy는 Nuxt 3에서 제공하는 개발 모드 전용 프록시 기능입니다.개발 중 클라이언트가 Nuxt 서버(localhost:3000)로 API 요청을 보내면, 해당 요청을 백엔드 서버(localhost:5000 등)로 자동으로 중계(proxy) 해주는 역할을 합니다.⚙️ 사용 예시nuxt.config.ts에 다음..

🛠️ node-schedule이란?node-schedule은 Node.js에서 크론(Cron)처럼 정해진 시간에 작업을 실행할 수 있게 해주는 모듈.크론만 사용해 봤지 노드 스케쥴러는 처음이다.  📦 설치 방법npm install node-schedule🧪 기본 사용법const schedule = require('node-schedule');schedule.scheduleJob('*/5 * * * * *', () => { console.log('5초마다 실행됩니다!');});'*/5 * * * * *': 매 5초마다총 6자리: [초 분 시 일 월 요일]⏰ 예제 모음✅ 1. 매일 오전 9시 정각에 실행schedule.scheduleJob('0 0 9 * * *', () => { console.lo..

서버에 저장된 로그 파일을 로컬 PC로 다운로드해야 할 일이 생길 때가 있습니다. 예를 들어, Nginx, FastAPI, Django 등에서 쌓이는 로그를 분석하거나 보관용으로 백업하고 싶을 때 말이죠.이럴 때 유용하게 사용할 수 있는 명령어가 바로 scp입니다.📌 scp란?scp는 Secure Copy Protocol의 줄임말로, SSH 기반의 안전한 파일 복사 명령어입니다.즉, 원격 서버와 로컬 PC 간에 파일을 복사할 수 있는 리눅스 기본 명령어입니다.✅ 기본 사용법scp [옵션] 사용자명@서버주소:원격파일경로 로컬저장경로 📂 예제: 로그 파일 다운로드하기서버에서 /var/log/myapp.log 파일을 내 컴퓨터의 Downloads 폴더로 받고 싶다면 아래처럼 입력합니다:scp ubuntu@..

퍼블리셔가 있어도 간간히 개발자들이 고쳐야하는 부분이 있다. 3년차지만 .. . 이제와서 궁금해진 rem ... 단위기준점특징예시결과 (기준 font-size: 16px)px고정 픽셀값가장 직관적이고 정확함margin: 16px;16픽셀em부모 요소의 font-size중첩 시 크기 계산 복잡margin: 1em;보통 16px (부모 기준)rem최상위 html의 font-size항상 기준이 일정해서 예측 쉬움margin: 1rem;16px (html 기준)%부모 요소의 크기 비율반응형에 자주 사용width: 50%;부모의 절반 크기📌 예시 코드 em 예시 rem 예시 1em → 20px (div가 기준)1rem → 16px (html이 기준)🧠 언제 어떤 걸 쓰..

Nuxt3 프로젝트를 진행하며 사용자 알림용 소리나 효과음을 넣을 일이 종종 생깁니다. new Audio('/alarm.mp3')처럼 간단히 구현할 수 있지만, 한 가지 문제가 있습니다:✅ 버튼을 여러 번 누르면 이전 오디오가 겹쳐서 동시에 재생되는 현상!이 글에서는 이 문제의 원인과 해결 방법, 그리고 오디오 관련 속성인 preload, load()의 개념까지 정리해보겠습니다.📌 문제: 오디오가 겹쳐 재생된다?다음과 같은 코드가 있다고 가정해봅시다:const audio = new Audio('/alarm.mp3')audio.play() 이 코드를 버튼 클릭 시마다 실행하면, 매번 새로운 Audio 인스턴스가 생성되어 각각 따로 재생됩니다. 그래서 버튼을 여러 번 누르면 소리가 겹쳐 들리게 됩니다.✅ ..

cat, vi, nano, less, more 사용법 및 차이점✅ 1. cat (concatenate)기능: 파일 내용을 출력하거나 새 파일을 생성할 때 사용주요 사용법:cat filename.txt # 파일 내용 출력cat > newfile.txt # 새 파일 생성 (입력 후 Ctrl + D)cat file1 file2 > all.txt # 파일 병합장점: 빠르고 간단단점: 긴 파일은 불편 (스크롤 불가, 수정 불가)✅ 2. vi (Vim 에디터)기능: 터미널 기반 강력한 텍스트 편집기주요 사용법:vi filename.txt # 파일 열기i # 입력 모드 진입Esc # 명령 모드 복귀:w ..

웹 페이지를 만들다 보면 태그를 자주 보게 됩니다. 특히 Nuxt3나 Vue 기반 프로젝트에서 useHead를 사용할 때 meta 속성 안에 name과 property를 혼용하게 되는 경우가 많죠. 그런데 이 두 개, 정확히 어떤 차이가 있을까요?오늘은 meta 태그의 name과 property 속성이 어떻게 다르고, 언제 각각을 사용하는 게 맞는지 쉽게 정리해볼게요.✅ meta 태그란?먼저 간단히 짚고 넘어가자면, 태그는 HTML 문서의 "메타데이터"를 정의하는 태그예요. 페이지의 설명, 키워드, 작성자, 뷰포트 설정 등 눈에 보이지 않는 중요한 정보를 담고 있어요.예시:🔍 name vs property 차이점1. name: HTML 표준 메타데이터용도: 일반적인 페이지 정보 설정사용 예: 검색 ..