TekaPicker

회사에서 사용하는 구조와 유사하게 TekaPicker를 MSA + gRPC + Kubernetes 환경으로 구성하기 위한 설계 가이드입니다.역할: HTTPS 통신 처리, 인증 및 라우팅기술스택: NestJS + @grpc/microservices기능: 사원/아내 회원가

TekaPicker 프로젝트 초기 세팅 요약 (음슴체 버전, 프론트/백엔드 분리 모노레포 기준) ✅ 목표 프론트엔드와 백엔드를 서로 다른 모노레포로 구성할 예정 프론트: React + Vite + TypeScript 백엔드: NestJS + 서비스 단위 MSA 구성 각 모노레포는 내부적으로 워크스페이스 구성 (ex. apps, libs 폴더) D...

TekaPicker 프로젝트 내 user-service 개발 진행NestJS 기반의 gRPC 서비스로 회원가입/로그인 기능 구현 목표PostgreSQL + TypeORM + bcrypt + JWT 기반 인증 시스템 설계gRPC 클라이언트로는 BloomRPC 사용개발 중

각 다이얼로그를 페이지 컴포넌트처럼 route에 등록함ex) /login → <LoginDialog /> 렌더링URL을 직접 /login으로 이동하여 다이얼로그처럼 보이게 처리함useLocation()에서 state와 search 등을 통해 데이터 넘겨줌다이얼로그

user.proto에서 nickname 필드를 정의했으나, Nest.js gRPC 서버에서 해당 필드가 계속 누락되어 들어왔음grpcurl과 BloomRPC로 요청해도 nickname이 서버에 전달되지 않았음원인은 Nest.js가 참조하는 proto 파일이 잘못된 경로

TekaPicker 프로젝트의 주요 기능 요구사항을 기반으로 한 DB Entity 설계 정리. User 사용자 정보 저장용 테이블임 회원가입 및 인증 목적 이미 존재하는 테이블 기준으로 작성 Menu 회사에서 제공하는 메뉴 정보 저장용 테이블임 코인 단위 비용,

회원가입 다이얼로그에서 API 호출 필요/user/signup 엔드포인트로 POST 요청 필요API 요청에 react-query의 useMutation 사용요청 baseURL은 .env로 분리하여 관리axiosInstance에 baseURL 지정하여 재사용성 확보sig

기존 user 서비스 외에 menu 서비스를 gRPC 기반으로 추가함user와 menu는 각각 독립적인 database 설정, migration 파일, gRPC 서비스 구조를 가짐nest g app menu 명령어로 NestJS 기반 menu microservice 생

① scrollToCenter: 특정 인덱스의 버튼을 컨테이너 중앙으로 스크롤하는 함수.② 버튼의 중심 위치와 컨테이너 중심 위치의 차이로 스크롤 이동값 계산.③ 실제 스크롤 이동 수행 (smooth 옵션으로 애니메이션 적용).④ 현재 버튼이 화면 중심에 위치했는지 확

목표: 전체 화면이 아닌 특정 내부 컴포넌트(MenuGrid 등)에만 스크롤을 적용하기어떤 요소에 flex: 1과 overflowY: auto를 주고 스크롤이 되게 하려면, 그 요소의 모든 상위 요소들이 아래 조건을 모두 만족해야 한다.내부 특정 컴포넌트만 스크롤되게

state와 action은 명확하게 구분set은 항상 immutable 업데이트get은 특별히 필요한 경우만 사용use할 때는 필요한 값만 selector로 선택action은 의미 있는 단위로 작게 작성

하나의 복잡한 컴포넌트가 있고그 내부에 여러 요소(필드, 토글, 셀렉트 등)가 있다이 컴포넌트 "외부"에서 내부 값들을 깨끗하게 가져오고 싶다그럴 때 가장 좋은 패턴은?복잡한 컴포넌트 안쪽에 여러 필드가 있을 때외부에서 이 컴포넌트의 상태를 가져오는 가장 좋은 방법은?

(1) 터치 시작 Y좌표를 저장한다.(2) 시작할 때의 height를 저장한다.(1) 이동한 거리를 계산한다 (deltaY)(2) 이동에 따라 height를 계산한다 (dragging 방향에 주의)(3) height를 업데이트한다.(1) 터치가 끝나면 초기화한다.(1)

이 문서는 NestJS 모노레포에서 각 앱(app)마다 개별 PostgreSQL 데이터베이스를 사용하도록 분리한 과정을 정리한 것이다.보안 분리: 한 서비스가 다른 서비스의 테이블을 건드리지 않도록 격리유지보수 편의: 도메인 단위로 마이그레이션/테스트/백업이 쉬움스케일

react-hook-form의 Controller를 사용할 때, 컴포넌트 유형별로 field를 어떻게 연결해야 하는지 정리. 기본 MUI 컴포넌트부터 사용자 정의 컴포넌트까지 적용 가능boolean 값을 다루는 컴포넌트는 checked, 나머지는 대부분 valueSli

React에서 ref는 기본적으로 DOM 요소에만 연결할 수 있음컴포넌트 자체에 ref를 연결하려면 forwardRef로 감싸야 함useImperativeHandle은 전달받은 ref에 대해 외부에서 호출할 수 있는 메서드나 값을 정의할 수 있도록 해줌.이 방식은 컴

NestJS API Gateway의 Controller에서 @UseInterceptors(FileInterceptor) 설정storage: diskStorage({...})로 저장 경로 및 파일명 지정destination: join(process.cwd(), 'uplo

ddoachi.synology.me/tekapicker/ 경로를 Vite 기반 프론트엔드 개발 서버로,/tekapicker/api/ 경로를 NestJS 백엔드 API 서버로 프록시 설정함.http://ddoachi.synology.me/tekapicker/ →

이 문서는 NestJS에서 GraphQL 요청에 대해 JWT 인증을 적용하고, 인증된 사용자 정보를 @User('id') 데코레이터 등을 통해 Resolver로 전달하는 전체 흐름을 설명한다. REST와 GraphQL의 인증 흐름 차이점, GqlJwtAuthGuard,

TypeScript에서는 해당 필드를 생략 가능하게 함 (undefined 허용).내부적으로는 coin: number | undefined와 동일.또는GraphQL에서는 nullable: true를 설정해야 클라이언트가 필드를 생략할 수 있음생략된 필드도 자동으로 nu

NestJS 기반 모노레포에서 api-gateway 앱을 npm run build로 빌드하고, Docker를 통해 배포 가능한 상태로 만드는 것이 목적임.import x from "../../../../libs/..." 형태로 작성된 코드가 빌드 후에도 유지되며 오류

로컬 리눅스 서버에 개발용 K8s 환경 구축자체 Docker Registry에 이미지를 Push하고 K3s에 배포외부에서 NodePort로 서비스 접근 (/docs 확인)📌 5000 포트는 registry 기본 포트📌 외부 포트 충돌 시 -p 5001:5000처럼

우분투 환경 기준, Helm CLI 설치 절차는 다음과 같음.설치 확인:NestJS api-gateway용 Helm Chart 생성:helm/api-gateway/values.yaml 파일에서 다음 항목 구성:deployment.yaml 파일에서 .Values.imag

기존 teka-picker-be 프로젝트의 Kubernetes 배포는 앱마다 개별적인 deployment.yaml, service.yaml 파일을 사용하는 구조였음. 이 구조는 중복이 많고 앱 추가 시 반복적인 작업이 발생하여 유지보수성이 떨어졌음. 이를 해결하기 위해

❗ GrpcStatus가 아니라 status를 import해야 합니다:이 필터는 main.ts 또는 컨트롤러 레벨에서 등록해서 사용

RequestMiddleware 또는 Guard에서 req\["user"] = { ... } 로 직접 저장REST API 또는 GraphQL Resolver 내부에서 @Req() 또는 @Context()로 접근req 객체가 존재하지 않는 gRPC 환경에서는 사용할 수

Relay의 fragment는 GraphQL 쿼리 결과 중 필요한 필드만 분리해서 재사용하는 단위컴포넌트 단위에서 필요한 데이터만 선언하고 사용할 수 있게 해줌중간 부모도 데이터를 사용하는 경우 useFragment로 받아서 중간에서 소비 가능각 fragment는 자동

AsyncLocalStorage는 Node.js의 API로, 비동기 작업 간에 컨텍스트(예: 사용자 정보)를 공유하기 위해 사용됨. NestJS에서는 이를 기반으로 요청 단위 사용자 컨텍스트를 유지하려고 사용함.RequestContext.run(user, () => n

내가 설치한 버전은 17.0.0 임.gpt는 호환성 이슈때문에 12버전을 설치하라는데 이것도 개소리.mjs 파일을 직접 import 해야함. (index.js가 없음) 공홈 README.md(https://github.com/jaydenseric/graphq

Kubernetes 환경에서 teka-picker-fe 프론트엔드를 HTTPS로 배포하는 과정에서 다음과 같은 주요 문제들이 발생했고, 이를 해결하기 위한 모든 과정들을 아래와 같이 정리함.증상:nslookup kubernetes.default 명령어가 실패서비스 이름