javascript 관련된 공부한 내용을 작성합니다.
오류가 발생하는 원인 아래 코드에서는 MIME_TYPE_MAP 부분에서 오류가 발생함, 왜냐하면 MIME_TYPE_MAP[file.mimetype]로 접근할 때, file.mimetype은 일반적으로 string 타입으로 추론 import multer from "multer"; const MIME_TYPE_MAP = { "image/png": "png", "image/jpg": "jpg", "image/jpeg": "jpeg", }; const ext = MIME_TYPE_MAP[file.mimetype]; MIME_TYPE_MAP의 키 타입 TypeScript는 이 객체 MIME_TYPE_MAP의 키를 "image/png" | "image/jpg" | "image/jpeg"로 제한, TypeScript는 MIME_TYPE_MAP이 리터럴 유니온 … Read more
NextJS 프로젝트에 NextAuth를 사용하면서 5버전에서는 분명 편하지만 몇가지 마음에 안드는 부분들 때문에 Lucia Auth를 사용해보기로 했습니다. 저는 https://www.udemy.com/course/nextjs-react-incl-two-paths/ 이 강의와 document https://lucia-auth.com/getting-started/nextjs-app 를 보면서 구현 했습니다. auth.ts 작성 import { prisma } from './prisma'; import { Lucia, TimeSpan } from 'lucia'; import { cookies } from 'next/headers'; import { PrismaAdapter } from '@lucia-auth/adapter-prisma'; const adapter … Read more
NextJS를 사용해서 채팅 웹을 구현하려고 SocKetIO 예제를 보다가 Custom Server를 알게 되었습니다. SocKetIO 글: https://socket.io/how-to/use-with-nextjs NextJS Custom Server 글: https://nextjs.org/docs/pages/building-your-application/configuring/custom-server NextJS Custom Server 예제: https://github.com/vercel/next.js/tree/canary/examples/custom-server Custom Server를 사용하면 middleware, NextAuth, LuciaAuth를 사용해서 구현 했던 로그인 코드를 수정해야 하고, 따라서 가능하면 Custom Server를 구축하기 보다는 가능하면 NextJS를 그대로 사용하는게 좋다고 생각했습니다. 저의 경우에는 채팅 서버를 구축하기 … Read more
공식 사이트 https://eslint.org/ Eslint 설치 설치 전 npm init 명령어를 사용해서 package.json 파일을 생성해야 아래 명령어를 사용할 수 있음 npm init @eslint/config@latest 명령어를 입력했으면 여러가지 물어보는데, 프로젝트에 맞게 설정 설치가 완료 되었으면 eslint.config.mjs 파일이 생성이 됩니다. files는 ESLint가 어떤 파일에 규칙을 적용할지 정의합니다. js: 일반 JavaScript 파일 mjs: 모듈 기반의 JavaScript 파일 cjs: CommonJS 모듈을 … Read more
Prettier를 사용하면 코드를 보기 좋게 정리해주기도 하지만, 협업시 팀원 간 스타일을 통일하게 하여 사소한 충돌을 줄여서 협업의 효율성을 높임 import 순서 일관성 유지하기 @ianvs/prettier-plugin-sort-imports npm i -D prettier @ianvs/prettier-plugin-sort-imports prettier config 파일 수정 .prettierrc { "trailingComma": "es5", "tabWidth": 2, "semi": true, "singleQuote": true, "printWidth": 120, "plugins": ["@ianvs/prettier-plugin-sort-imports"], "importOrder": [ "^react$", "^react-dom$", "^react-router-dom$", "", "^react(.*)$", "", … Read more
달력은 windows 컴퓨터 하단 시계 부분을 클릭하면 나오는 달력과 비슷하게 만들었습니다. 윈도우 달력 위젯의 구성 윈도우 달력 위젯의 구성은 이렇습니다. 년과 월을 표시 이전달, 다음달 이동 버튼 이전 달, 현재 달, 다음 달을 6주(42일)로 표시 표시되어 있는 년월이 현재년월이라면 오늘 날짜를 달력에 강조 표시 특정 날짜를 클릭할 수 있고 클릭한 경우 강조 표시 개발 환경 … Read more
대시보드 페이지에서 폴더를 불러와 웹 사이트 파일들을 트리 구조로 보여주는 기능을 본 적이 있습니다. 이 글은 React를 이용해 폴더 및 파일 목록을 트리 구조로 보여주는 것을 구현한 내용을 공유하고자 합니다. 환경 구성 빌드 도구: 이번 프로젝트에서는 Vite를 사용했습니다. Vite는 빠른 개발 환경 설정과 빌드를 제공하여 편리하게 사용할 수 있습니다. 데이터: 서버로부터 배열 형태로 데이터를 받는다고 … Read more
javascript canvas를 사용해서 룰렛 만들기 위한 과정을 단계별로 정리해보았습니다. 이 글에서는 제가 룰렛을 어떻게 만들었는지 설명합니다. 룰렛 만들기 과정 배경 원 그리기: 룰렛의 기본 틀을 형성하는 배경 원을 그립니다. 룰렛 화살표 그리기: 룰렛이 멈췄을 때 당첨 아이템을 가리킬 화살표를 그립니다. 룰렛 아이템 그리기: 룰렛에 표시될 각종 아이템을 그립니다. 룰렛 회전하기: 룰렛을 회전시킵니다. 이징 함수: 회전의 … Read more