St991Cup's Blog

Steelcup, St991cup, steelcup


TypeScript

  • NestJS(bad-goose)를 상시구동 서버에서 Vercel 서버리스로 옮기기

    기존 Docker 환경에서 상시 구동되던 NestJS 크롤링 및 API 백엔드 서버를 Vercel Serverless Functions 환경으로 전환하면서 해결한 구조적 제약 사항과 트러블슈팅 내역을 다룬다. 1. 개요 및 배경 bad-goose는 주요 음원 차트 데이터를 주기적으로 수집하여 Redis에 적재하고 API를 통해 데이터를 제공하는 NestJS 기반 백엔드 애플리케이션이다. 기존에는 docker-compose 환경에서 app.listen(4000) 형태로 상시 구동되었으며, @nestjs/schedule의 @Cron 데코레이터를 활용해… Continue reading

  • TypeScript의 인터페이스 선언 병합(declaration merging)

    핵심 개념 같은 이름의 interface를 여러 번 선언하면 하나로 합쳐짐. 같은 속성에 서로 다른 타입을 주면 에러. 메서드 오버로드는 “나중에 선언된 것이 먼저” 정렬됨. type alias는 병합 불가. 모듈(파일) 스코프를 넘는 확장은 “모듈 보강(module augmentation)” 필요. 기본 예시 // a.tsinterface Person { id: string;}// b.tsinterface Person { name: string;}// 결과: Person = { id: string;… Continue reading

  • TypeScript의 유니온(|)과 교차(&) 타입

    간단 요점 유니온 A | B: A 또는 B 중 하나. 교차 A & B: A와 B를 모두 만족(속성 합집합). 예제 1) 간단 리터럴 유니온 type Status = ‘idle’ | ‘loading’ | ‘success’ | ‘error’;function setStatus(s: Status) { if (s === ‘loading’) { // … }} 예제 2) 판별 유니온(객체) type Product = { kind:… Continue reading

  • NextJs 13에서 GraphQL 클라이언트 사용

    내용 원본 https://www.apollographql.com/blog/apollo-client/next-js/how-to-use-apollo-client-with-next-js-13/ 패키지 설치 npm install -S @apollo/client@rc @apollo/experimental-nextjs-app-support 클라이언트 코드 구현 // lib/client.js(or client.ts)import { HttpLink } from "@apollo/client";import { NextSSRInMemoryCache, NextSSRApolloClient,} from "@apollo/experimental-nextjs-app-support/ssr";import { registerApolloClient } from "@apollo/experimental-nextjs-app-support/rsc";export const { getClient } = registerApolloClient(() => { return new NextSSRApolloClient({ cache: new NextSSRInMemoryCache(), link: new HttpLink({ uri: "https://main–time-pav6zq.apollographos.net/graphql", }), });}); Continue reading

  • VS Code Tailwindcss + NextJs Prettier formatter 셋업 가이드

    VS Code 환경 설정 Visual Studio Code 설치 https://code.visualstudio.com/download Next, Tailwindcss 관련 플러그인 설치 참고 https://tailwindcss.com/docs/editor-setup#intelli-sense-for-vs-code VS Code Extension https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss Prettier 플러그인 설치 https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode 프로젝트 셋업 프로젝트 생성 “npx create-next-app@latest” 커맨드를 실행하면 가이드가 나온다. 아래와 같이 Typescript + Tailwind + Eslint를 사용한다. $ npx create-next-app@latest✔ What is your project named? … project-name✔ Would you like… Continue reading

  • Prisma Client 배열 타입 create/update 정리

    Prisma Client create 정리 https://www.prisma.io/docs/concepts/components/prisma-schema/relations/many-to-many-relations#querying-mongodb-many-to-many-relations https://www.prisma.io/docs/concepts/components/prisma-client/crud#create sql INSERT에 해당 일반적인 타입에는 INSERT 쓰듯이 사용 가능 const user = await prisma.user.create({ data: { email: ‘elsa@prisma.io’, name: ‘Elsa Prisma’, },}) Array 타입은 약간 특이한 방식으로 사용 1-n / m-n 관계 테이블을 만들 경우 아래와 같이 Array 타입으로 스키마에 정의함 model Post { id Int @id @default(autoincrement()) categories… Continue reading

  • nestJs + prisma + postgresql

    nestJs + prisma + postgresql

    nestJs + prisma + postgresql nest, prisma 설치, postgresql 환경 설치 nest n 프로젝트 디렉토리 진입 PrismaClient 설치 npm install @prisma/client https://docs.nestjs.com/recipes/prisma#set-up-prisma npx prisma init ./.env DATABASE_URL 편집 database 생성 필요 https://www.postgresql.org/docs/current/sql-createdatabase.html CREATE DATABASE jointest WITH OWNER = kyi TEMPLATE = template0 ENCODING = ‘UTF8’ LC_COLLATE = ‘en_US.UTF-8’ LC_CTYPE = ‘C’ TABLESPACE = pg_default CONNECTION… Continue reading

  • prisma seed 정리

    prisma seed 정리

    https://www.prisma.io/docs/guides/migrate/seed-database#how-to-seed-your-database-in-prisma seed.ts 생성(위치는 아무데나 상관 없음), 기본 틀은 아래와 같음 import { PrismaClient } from "@prisma/client"const prisma = new PrismaClient()async function main() { const data = await prisma.content1.create….}main() .then(async () => { await prisma.$disconnect(); }) .catch(async (e) => { console.error(e); await prisma.$disconnect(); process.exit(1); }); package.json에 아래 추가 "prisma": { "seed": "ts-node prisma/seed.ts" } 아래 둘… Continue reading

  • Javascript, Typescript 수열 만들기

    Javascript, Typescript 수열 만들기

    js 수열 만드는 법 Array 사용 > var arr = Array.from(Array(5).keys(), (value, index) => value)undefined> arr[ 0, 1, 2, 3, 4 ]> var arr = Array.from(Array(5).keys(), (value, index) => value *2)undefined> arr[ 0, 2, 4, 6, 8 ] lodash(https://lodash.com) 사용 https://lodash.com/docs/4.17.15#range _.range(4);// => [0, 1, 2, 3] _.range(-4);// => [0, -1, -2, -3] _.range(1, 5);//… Continue reading

  • [js, ts] string 값으로 object 멤버 이름으로 사용하기

    string 값을 object 멤버 이름으로 사용하기 > var a = 'name'undefined> var obj = { [a]: 'value' }undefined> obj{ name: 'value' } Continue reading

워드프레스닷컴으로 이처럼 사이트 디자인
시작하기