전체 글 (51) 썸네일형 리스트형 zuStand로 상태관리되고 있는 이력을 브라우져에서 시각화하여 보는 방법 - Redux Devtools 크롬 확장 프로그램 활용 현재 나는 Zustand로 프로젝트에서 클라이언트 컴포넌트 단에서 주로 상태관리로만 저장하고서 서버와의 통신없이 UI들이 작동하다가 영구적 저장이 필요할 경우만 서버에 저장하는 방식을 사용하고 있다. 그때서야 DB에 해당 정보를 저장하는데 우선 zuStand에 잘 저장되고 있는지를 확인을 해가며 개발을 해야되니 zuStand DevTools를 사용해서 시각화하여 보면서 디버깅 개발해나가보자.✅ Redux Devtools란?Redux Devtools는 Zustand 상태를 브라우저 개발자 도구에서 트리 구조로 시각화하고, 상태 변경 히스토리까지 추적할 수 있는 디버깅 도구입니다.* 시도해보니 중계 역활의 확장 프로그램 Zusty devTools로 같이 설치되어 있어야 Redux가 로그를 읽어낼 수 있는거 .. Prisma로 마이그레이션 초기화 방식 #01 - 데이터 모두 필요없는 개발 초기 상태일때 테이블 수정되었을때 목표DB에 있는 데이터 + 스키마 구조 전부 삭제기존 migrations/ 폴더도 삭제깨끗한 상태에서 migrate dev로 새롭게 마이그레이션 이력 시작* 아래 방식 예시는 multi schema 사용중인 예시입니다.다중 스키마 사용상에서는 하나의 db에 스키마를 분리하여 env에서 두개의 URL변수로 분리하여 스키마별 datasource에 url을 개별적으로 적용해주어 사용합니다.1단계: DB 초기화 (스키마 삭제)PostgreSQL에 접속해서 아래 명령으로 각각 스키마 삭제:-- core 스키마 삭제DROP SCHEMA core CASCADE;-- video 스키마 삭제DROP SCHEMA video CASCADE;주의: CASCADE를 붙여야 하위 테이블/데이터도 모두 삭제돼. 2단계: migra.. AWS Lambda에 패키지 배포 준비 및 업로드 방법 이번엔 말 그대로 람다함수 정의 파일을 AWS에 올려 배포할 준비를 해보는걸 기록해본다. ✅ 1. 압축(zip) 파일 만드는 명령zip -r function.zip index.js node_modules이 명령어의 뜻:부분 의미zip압축 명령어 (Windows에서는 Git Bash, WSL, or PowerShell + Compress-Archive 추천)-r하위 폴더까지 재귀적으로 압축 (node_modules 포함)function.zip만들어질 ZIP 파일 이름index.js node_modules압축할 파일/폴더 목록만약 zip명령이 기본 터미널에서 하게되면 아래처럼메세지가 뜨고 안되는데 powershell같은데서 해야되는데 이것도 안되면 그냥 알집같은 프로그램으로 이 폴더내에 index.js와 n.. Mermaid 다이어그램을 chatGPT로 쉽게 그리기 - 코드를 GPT에게 분석해 Mermai 다이어그램 형식으로 만들기 AI가 발전함에 있어 여러 활용법을 익혀야하는 현실에서 또 하나 간단하면서도 괜찮은 개발 편이를 위한걸 알아왔다.우리가 개발한 코드 또는 오픈소스의 코드를 분석하여 시각적으로 다이어그램을 그려놓으면 협업 또는 개인의 이해도를 도울 수 있게 되는데 이걸 예전에는 코드 분석하며 일일이 그려야했지만 이젠 chatGPT와 Mermaid 다이어그램에 마크업 형식의 도식화 사이트를 이용하면 빠르고 쉽게 구현해볼 수 있다.1. GPT에게 코드 분석 요청 + Mermaid 다이어그램 마크업 작성 요청2. Mermaid.live 접속3. Code에 해당 마크업 코드 복사 붙여넣기4. 확인 1. GPT에게 코드 분석 요청 + Mermaid 다이어그램 마크업 작성 요청다이어그램으로 그리고 싶은 나의 코드 일부나 전체, 또.. Prisma CLI 데이터베이스 스키마 관리 명령문 모음 Prisam CLI는 데이터베이스 스키마 관리, 마이그레이션, 클라이언트 생성 등 다양한 작업을 수행할 수 있는 강력한 도구입니다. 아래는 Prisma CLI에서 자주 사용되는 명령어들을 정리한 목록입니다.💡CLI (Command Lien Interface) 란?터미널(명령 프롬프트, 콘솔)에서 텍스트 명령어로 프로그램을 조작하는 방식1. 설치 및 초기화npm install prisma -- save-devPrisma CLI를 프로젝트에 설치합니다. npx prisma initprisma 디렉토리와 기본 schema.prisma 파일을 생성합니다.npx prisma init --datasource-provider postgresqlPostgreSQL을 데이터 소스로 지정하여 초기화합니다.2. 스키마 및.. NextAuthProvider로 웹페이지 전체 Session관리 및 하위 컴포넌트에 useSession 환경 구축 *본 개발 정보는 Nextjs 13+ 에 기반한 정보입니다.목차서론Next.js App Router란?NextAuth.js Provider 패턴서버 컴포넌트 (route.ts)클라이언트 컴포넌트 (NextAuthProvider.tsx)컴포넌트 간 역할 분담layout.tsxpage.tsx비교 표: 서버 vs 클라이언트 컴포넌트결론1. 서론Next.js 13부터 도입된 App Router는 기존 페이지 기반 라우팅을 대체하면서, 파일 시스템에 따라 서버/클라이언트 컴포넌트를 명확히 구분할 수 있는 새로운 구조를 제공합니다.이 구조에서 인증(Authentication)과 세션(Session)을 관리하려면, NextAuth.js와 같은 라이브러리를 이용한 Provider 패턴이 필수적입니다.이번 포스팅에서는 .. Nextjs 14버전이상부터 JWT사용시 getServerSession() 그대로 사용시 문제 발생에 대해 Nextjs 14 버전부터는 NextAuth에 getSeverSession을 서버컴포넌트에서 그대로 사용할 시에 세션을 DB 세션 방식으로 해놨으면 괜찮지만 만약 JWT로 쿠키저장방식의 클라이언트 취급 방식으로 해놨다면 아래와 같이 객체를 만들어 전달해줘서 그 방식에 대해 명확히 객체를 전달해야줘야한다. 1. 서버 컴포넌트 = 클라이언트 쿠키 접근 불가Next.js의 서버 컴포넌트는 브라우저가 아니라 Node.js 런타임에서 실행이 말은 = 브라우저 쿠키 직접 접근 불가능JWT는 브라우저의 쿠키에 저장되기 때문에, 서버 컴포넌트는 그걸 알아서 가져올 수 없음 2. getServerSession(authOptions)가 해주는 역할authOptions를 넘겨주면, NextAuth는 서버 쪽 쿠키(head.. 멀티 스키마 (multi schema) 사용 개발시 폴더 구조 및 flow 설계 우리는 단일 서비스가 아닌 하나의 웹 도메인에 여러개의 서비스를 두고서 하나의 유저가 이것저것 다 사용할 수 있도록 구현을 해둘려면 멀티 스키마로 데이터베이스를 구축 해둘 필요가 있다.하여 멀티 스키마에 대해 nextjs로 구성하는 법을 기록해보자.✅ 멀티 스키마 Prisma 아키텍처 구성 가이드📦 1. 전체 폴더 구조아래와 같이 폴더 구조를 우선 만들어보았다.prisma/├── core/│ ├── schema.prisma # 공통 유저 스키마├── video/│ ├── schema.prisma # 영상서비스 전용 스키마├── generated/│ ├── core/ # prisma generate 결과물 (공.. 이전 1 2 3 4 ··· 7 다음
