전체 글43 [Next.js] Supabase 타입 Type 설정과 적용 ➜ Supabase를 사용할 때 자동으로 타입 생성하는 방법 최소 필수 버전 v1.8.1. npm i supabase@">=1.8.1" --save-dev supabase 로그인 npx supabase login 로그인하면 아래와 같이 인증 번호 페이지로 이동하고, 이 번호를 복붙 해준다. supabase 초기화 npx supabase init 원하는 경로에 database.type.ts 파일 생성 npx supabase gen types typescript --project-id "$PROJECT_REF" --schema public > src/types/supabase/database.types.ts Project ID는 supabase 페이지 내 해당 프로젝트의 Project Settings - G.. 2025. 2. 14. [Next.js + Supabase 연동] 데이터 가져오기 에러 - 빈 데이터 ➜ 현재 상태 ✅ Next.js + vercel 배포 + supabase db 연결✅ 테이블 생성, 데이터 삽입 완료 이후 특정 데이터를 가져오는 과정에서 계속 빈 데이터를 가져오는 에러가 발생했다.코드 상 문제인 줄 알고 오랫동안 삽질했는데 다른 곳에 해결 방법이 있었다..🙄 처음 시도 때 [] 이렇게 빈 배열이 출력되었다.연동 코드에 문제가 있는 건지, 키 값을 잘못 적었는지 하나씩 살펴보고위 방식 외에 다른 방식으로 한 블로그 글들을 보면서 다 따라 해봤다..🫠 그러다 supabase Reports에서 api 요청이 계속 제대로 들어왔던걸 확인했고, db 설정을 다시 보았다.바로 여기에서 db 접근 제어 기능인 RLS(Row Level Security) 설정으로 인해 나타난 문제였다!! RLS.. 2025. 2. 13. [Next.js] Supabase 연동ㅣ데이터 가져오기 supabase 연동을 위한 기본적인 준비 설치 npm install @supabase/supabase-js npm install @supabase/ssr supabase 클라이언트 라이브러리와 Next.js를 위한 패키지를 설치한다. .env.local 설정 // .env.localNEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URLNEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY .env.local 파일에 SUPABASE_URL, SUPABASE_ANON_KEY 환경변수를 저장한다. 이 키들은 vercel 내 프로젝트 - Project Settings - Environment Variables 에서 볼 수 있다. utils/supab.. 2025. 2. 13. [Next.js 폰트 최적화] 로컬 폰트 Local Font 적용 next/font 는 글꼴을 자동으로 최적화하고 외부 네트워크 요청을 제거하여 개인 정보 보호 및 성능을 향상시킨다. 웹 폰트를 사용할 때, 폰트 파일은 웹 페이지를 처음 로드할 때 네트워크 요청을 통해 다운로드되는데localFont는 사용자 컴퓨터에 이미 존재하는 폰트를 로컬에서 불러오므로 폰트를 다운로드할 필요가 없어 로딩 속도가 빨라진다. ㅣ공식 문서 Optimizing: Fonts | Next.jsOptimize your application's web fonts with the built-in `next/font` loaders.nextjs.org 폰트 다운로드 우선 굵기 등 스타일을 자유롭게 변형할 수 있는 가변 폰트로 PretendardVariable 폰트를 사용했다. PretendardP.. 2025. 1. 17. [프로그래머스/JavaScript] Lv3. 다단계 칫솔 판매 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 내 코드 (시간 초과) function solution(enroll, referral, seller, amount) { const list = enroll.reduce((acc, cur) => { acc[cur] = 0; return acc; }, {}); seller.forEach((name, idx) => { let ref = name; let benefit = amount[idx] * 10; list[ref] += amount[idx] * 100 -.. 2024. 11. 13. [프로그래머스/JavaScript] Lv2. 메뉴 리뉴얼 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr function solution(orders, course) { const ordered = {}; // 각 조합의 주문 횟수 const candidates = {}; // 두 번 이상 주문된 조합 const maxNum = Array(10 + 1).fill(0); // 조합 만들기 (배열, 시작 인덱스, 조합 길이, 생성된 조합) const createSet = (arr, start, len, foods) => { if (len === 0) { ordered[foods] = (ordere.. 2024. 11. 8. [프로그래머스/JavaScript] Lv1. 신고 결과 받기 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 내 코드 function solution(id_list, report, k) { const reportList = {}; const suspendedId = []; const result = Array(id_list.length).fill(0); // 신고 받은 횟수 셋팅 id_list.forEach((id) => { reportList[id] = {reportCnt : 0} }); // id별 신고 받은 횟수, 신고한 id 저장 report.forEach((log) => { .. 2024. 11. 6. 이전 1 2 3 4 5 ··· 7 다음
