javascript canvas를 사용해서 룰렛 만들기 위한 과정을 단계별로 정리해보았습니다. 이 글에서는 제가 룰렛을 어떻게 만들었는지 설명합니다. 룰렛 만들기 과정 배경 원 그리기: 룰렛의 기본 틀을 형성하는 배경 원을 그립니다. 룰렛 화살표 그리기: 룰렛이 멈췄을 때 당첨 아이템을 가리킬 화살표를 그립니다. 룰렛 아이템 그리기: 룰렛에 표시될 각종 아이템을 그립니다. 룰렛 회전하기: 룰렛을 회전시킵니다. 이징 함수: 회전의 … Read more
준비물 Assets 다운로드 링크 https://pixel-boy.itch.io/ninja-adventure-asset-pack 위 사이트에서 다운로드 받은 에셋 중 그린 닌자를 사용 스프라이트 추가 다운로드한 Assets을 드래그 앤 드랍으로 추가할 수 있음 스프라이트 설정 추가한 에셋 중 Walk를 선택하고, Sprite Mode를 multiple로 선택 그다음 Sprite Editor를 클릭 > Slice를 클릭 > Grid By Cell Size를 이미지처럼 설정 후 > Slice 클릭 > Apply … Read more
오류가 발생하는 원인 아래 코드에서는 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
HTTPS 깃 연동 깃 설치 sudo apt update sudo apt install git 깃 사용자 정보 등록 git config –global user.name "Your Name" git config –global user.email "your_email@example.com" 저장소 Clone git clone https://github.com/your_username/your_repository.git SSH 방식 설치는 https와 같음 SSH KEY 생성 공개키 생성: https://git-scm.com/book/ko/v2/Git-%EC%84%9C%EB%B2%84-SSH-%EA%B3%B5%EA%B0%9C%ED%82%A4-%EB%A7%8C%EB%93%A4%EA%B8%B0 ssh-keygen -t rsa -b 4096 -C "your_email@example.com" SSH 에이전트 시작 및 키 … Read more
nginx 설치 패키지 업데이트 sudo apt update nginx 설치 sudo apt install nginx 방화벽 설정 UFW(Uncomplicated Firewall)는 Ubuntu 및 Debian 기반 시스템에서 제공되는 방화벽 관리 도구 sudo ufw app list Nginx Full: HTTP와 HTTPS를 모두 허용. Nginx HTTP: HTTP 트래픽만 허용. Nginx HTTPS: HTTPS 트래픽만 허용. OpenSSH: SSH 원격 접속 허용. sudo ufw allow 'Nginx … Read more
아래 이미지처럼 인식이 안되서 방법을 찾아봄 Preferences 파일 열기 Edit -> Preferences Editor VSCODE 설정 및 프로젝트 인식시키기 External Tools 이동 Extenral Script Editor Visual Studio Code 설정 Regenerate project files 버튼 클릭 그러면 이렇게 에러가 뜨지 않습니다.
OPEN JDK (Java Development Kit) 설치 https://jdk.java.net/java-se-ri/17-MR1 왼쪽에는 버전을 선택할 수 있고 선택했으면 해당 페이지에서 os에 맞게 선택해서 설치하면 된다. 설치한 zip 파일 압축 풀기 환경변수 등록 윈도우 환경 변수 검색 -> 환경 변수 편집 환경 변수 버튼 클릭 설치한 jdk 파일 경로 복사 사용자 변수 추가 -> 새로 만들기 -> 파일 경로 붙여넣기 시스템 … 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