1. Swagger 설치 swagger-ui-express, swagger-autogen를 설치한다. swagger-ui-express는 서버 구동 시 API 문서를 볼 수 있게 해 주고, swagger-autogen는 API 문서 정보를 담고 있는 swagger-output.json을 자동으로 생성해 준다. npm install swagger-ui-express swagger-autogen 2. ES Modules ES Modules 방식은 아래와 같이 Swagger json 파일을 import 하면 된다. 이때 주의할 것은 assert { type: "json"}을 추가하지 않으면 TypeError가 발생한다. // app.js import swaggerFile from "./swagger/swagg..

섹션 5: 클래스 & 인터페이스 📌 OOP(Object-oriented Programming) 코드에서 실제 사물과 최대한 유사한 객체를 사용해 코드를 이해하기 쉽도록 만드는 것! 📌 class == blueprint 청사진: 아키텍처 또는 공학 설계를 문서화한 기술 도면을 인화로 복사하거나 복사한 도면 🤔 class와 instance의 관계에 대한 내 생각 붕어빵틀과 붕어빵, 필름과 사진, 도장과 도장 찍기 📌 this class Department { name: string; // 필드라고 함. 객체가 아님. // 생성자: 생성하는 객체(인스턴스)의 초기화 작업 constructor(n: string) { this.name = n; } describe() { console.log("Department..

섹션 3: TypeScript 컴파일러(및 구성) 📌 하나의 타입스크립트 파일의 변경 감시 모드 tsc app.ts -w(또는 tsc app.ts -watch) 📌 여러 타입스크립트 파일의 컴파일 tsconfig.json 파일 생성 명령어 : tsc --init js 파일 일괄 컴파일 명령어 : tsc 📌 tsconfig.json 옵션 { "compilerOptions": { // "target" 옵션은 컴파일된 코드를 지원하는 브라우저를 정의. "" 안에서 ctrl+space를 누르면 자동완성을 선택할 수 있음. 참고로 es6는 es2015 // "sourceMap" 옵션은 개발자 도구 Sources에서 js파일 뿐만 아니라 ts 파일도 다룰 수 있게 해준다. 따라서 ts파일을 이용해 디버깅(브레이크 ..

섹션 1 📌 타입 무시 아래 코드를 추가하면 타입스크립트에서 타입을 무시한다. // @ts-ignore 📌 모듈 CSS 모듈 CSS의 경우 page.module.css라는 파일이 있다면 module이라는 키워드 때문에 클래스명이 다른 모듈과 동일하다 하더라도 겹치지 않는다. CSS의 dvw, dvh는 모바일의 경우 페이지에서 주소창이 생기기도 사라지기도 하는데 거기에 맞게 페이지의 사이즈를 맞춰주는 역할을 한다. width: 100dvw; height: 100dvh; 📌 children의 타입 layout.tsx에서 children의 타입은 ReactNode이다. // layout.tsx import { ReactNode } from "react"; type Props = { children: React..

1. 왜 데이터 생성, 수정 시간이 9시간 전이지?! Next.js에서 MySQL을 이용해 데이터 영속성 관리를 하고 있다. 이때 prisma ORM을 사용하였는데 MySQL의 시간(time_zone)은 'Asia/Seoul'인데 9시간 전인 UTC로 데이터가 저장되는 현상을 발견했다. 살펴보니-글을 쓰는 시점인 2024년 1월 18일 까지도-prisma의 경우 local time을 지원하지 않는다고 한다. 2. dbgenerated()를 이용해 DB의 시간을 저장 Prisma Schema를 작성할 때 default values에 dbgenerated()를 이용하여 DB level에서 시간 정보를 처리하도록 하면 된다. 작성 예는 아래와 같다. model Example { create_at DateTim..

1. 업로드한 이미지 로드 안 되는 문제사용자가 업로드한 이미지를 public 폴더에 저장되도록 했고, DB에는 해당 파일명이 누적되도록 했다. 이 기능들은 순조롭게 잘 동작했다. 하지만 업로드한 이미지를 브라우저에서 보려고 리스트를 열었을 때는 엑박만 보였다. 2. public 폴더의 내용은 빌드 시점에 결정Next.js의 public 폴더의 내용은 빌드 시점에 결정된다. 즉, 빌드 이후에 추가된 내용은 사용하 수 없다. 개발 모드에서는 이런 현상이 발생하지 않았는데, 그 이유는 프로젝트의 코드가 변경되면 프로젝트를 다시 실행하기 때문이다. 서버에 빌드하여 배포한 경우에도 이미지 업로드 후 해당 서버를 죽이고(나의 경우 pm2 delete 명령) 다시 구동하면 업로드한 이미지가 정상적으로 로드되는 것을..

1. 한 페이지에 하나의 GLTF만 렌더링 되는 문제 페이지에 하나의 GLTF 파일을 이용해 여러 개의 모델을 렌더링 하고자 하였다. 이미지 태그를 이용하는 방식처럼 당연히 가능할 거라 생각했는데 현실은 [그림 2]와 같이 마지막 하나의 구성만 적용되었다. 여러 테스트 중에 GLTF의 복사본의 만들어 이름을 달리하여 로드했더니 원하는 결과를 얻을 수 있었다. 하지만 렌더링 모델의 개수만큼 동일한 내용을 담고 있는 GLTF 파일을 무수히 만들 수는 없는 일이었다. 2. Clone으로 문제 해결 react-three-fiber에서 Clone 컴포넌트를 제공하고 있었다. 이 기능을 이용하여 [그림 2]와 같이 하나의 GLTF를 통해 2개 이상의 모델을 화면에 렌더링 할 수 있었다. 해당 코드는 아래와 같다. ..

1. App Router Next.js 13 이상은 App Router를 지원한다. src/app 폴더 아래에 원하는 경로에 해당하는 폴더를 생성하면 URL의 Path가 된다. 이때 폴더 안에는 반드시 page.tsx 컴포넌트가 존재해야 한다. 이점을 이용해서 VSCODE에서 라우터 정보를 한눈에 확인할 수 있다. App Router 방식은 폴더가 경로가 되기 때문에 별도의 라우터 코드가 존재하지 않는다. 이 점은 매우 편리하지만 프로젝트의 규모가 커지면 라우터를 한눈에 확인하기가 어렵다. 2. 라우터 한눈에 보기 VSCODE에서 Ctrl + p 키를 누르면 상단에 검색창이 활성화된다. page를 입력하면 [그림 1]과 같이 라우터 정보를 한눈에 확인 가능하다. 프로젝트의 크기가 커질수록 라우터가 복잡해..