타코딩

multer 라이브러리 써서 이미지 업로드하기 - 기존에는 presigned url 방식으로 aws s3 나 cloudflare 저장소에 업로드했는데 서버단에 이미지를 저장하는 방법으로 multer라이브러리 사용을 해보겠음 - 프론트단 const avatarChange = watch("user_avatar"); useEffect(() => { if (avatarChange && avatarChange.length > 0) { const file = avatarChange[0]; setAvatarPreview(URL.createObjectURL(file)); } }, [avatarChange]); // submit 함수 안 if (avatarChange && avatarChange.length > 0) {..

타입스크립트(TypeScript)에서 인덱스드 시그니처(indexed signature)는 객체의 속성 이름과 값의 타입을 동적으로 지정할 수 있는 강력한 기능입니다. 이 기능은 특정 형태의 속성 이름이나 값의 타입을 사전에 정확히 알 수 없을 때 유용합니다. 인덱스드 시그니처를 사용하면, 객체가 다양한 키를 가질 수 있으며, 각 키의 값이 특정 타입을 만족해야 함을 명시할 수 있습니다. 인덱스드 시그니처의 기본 구조 인덱스드 시그니처는 다음과 같은 형태를 가집니다: interface SomeObject { [key: KeyType]: ValueType; } KeyType은 인덱스의 타입으로, string 또는 number를 사용할 수 있습니다. ValueType은 해당 키에 할당될 값의 타입을 나타냅니..

타입스크립트(TypeScript)에서 {}와 Object 타입은 종종 혼동을 일으키는 주제입니다. 이 두 타입은 모두 자바스크립트 객체를 설명하는 데 사용되지만, 그 사용법과 의미에는 중요한 차이가 있음 null과 undefined를 제외한 모든 타입이라고 보면됨 (포함하면 unknown) const x: {} = "hello"; const y: Object = "hi"; //대문자 Object와 {} 는 모든타입 (null과 undefined 제외) //unknown = {} | null | undefined {} 타입 타입스크립트에서 {}는 "빈 객체 타입"을 나타냅니다. 하지만 "빈"이라는 말이 혼란을 줄 수 있는데, 이는 속성이 전혀 없는 객체만을 의미하는 것이 아닙니다. 실제로 {} 타입은 모든..

const fs = require('fs').readFileSync('예제.txt').toString().trim().split(" ").map(Number) console.log(fs[0]+fs[1]); */ const fs = require('fs').readFileSync('예제.txt').toString().trim().split(" ").map(Number) console.log(fs[0]+fs[1]) console.log(fs[0]-fs[1]) console.log(fs[0]*fs[1]) console.log(Math.floor(fs[0]/fs[1])) console.log(fs[0]%fs[1]) */ const fs = require('fs').readFileSync('예제.txt').toS..

메타데이터 추가 export const metadata: Metadata = { title:'CODING-STORY - HOME', description:'코딩커뮤니티 홈입니다' } 동적 메타데이터 추가 export async function generateMetadata({ params }: Iprops){ const issue = await prisma.issue.findUnique({ where: { id: Number(params.id) }, }); return { title: issue?.title, description : '상세 페이지' + issue?.id } }

필터링 적용하기 'use client' import { Status } from '@prisma/client' import { Select } from '@radix-ui/themes' import { useRouter } from 'next/navigation' import React from 'react' const statuses:{label:string,value?:Status}[]= [ {label:'All'}, {label:'open',value:'OPEN'}, {label:'IN_PROGRESS',value:'IN_PROGRESS'}, {label:'CLOSED',value:'CLOSED'}, ] interface IProps{ values : string } const StatusFilte..

nextauth npm i next-auth 파일및 폴더 추가 (공식문서시키는대로) 구글,깃헙,페북등 소셜로그인이용가능 https://console.cloud.google.com/apis/credentials 프리즈마와 사용할거면 adapter 꼭 다운받아야함 adapter 받으면 db도 추가해야함 추가하고 마이그레이트 기본적으로 jwt방식임 이렇게하면 바로 작동잘되고 쿠키에 토큰확인할수있음 로그인 로그아웃 url 공식문서에서 확인할것 import NextAuth from "next-auth" import prisma from '../../../prisma/client' import { PrismaAdapter } from "@auth/prisma-adapter" import GithubProvider ..

tailwind 스피너 추가 https://tw-elements.com/docs/standard/components/spinners/ 로딩스켈레톤 추가하기 npm i delay 로딩테스트를위해 추가 npm i react-loading-skeleton https://www.npmjs.com/package/react-loading-skeleton

Radix Radix-UI npm install @radix-ui/themes npm i @radix-ui/react-icons https://www.radix-ui.com/ Radix-UI Button Component https://www.radix-ui.com/themes/docs/components/button import '@radix-ui/themes/styles.css'; 전역 layout.tsx에붙이기 마크다운에디터추가 npm install --save react-simplemde-editor easymde npm i react-markdown npm i -D @tailwindcss/typography (플러그인에써야함) import SimpleMdeReact from "react-simp..

프리즈마 세팅 mysql 깔려있어야함 npm i prisma npx prisma init prisma파일에서 mysql로 변경 .. .env파일에서 mysql로변경/아디/비번/포트번호/워크벤치명 모델생성 model Issue { id Int @id @default(autoincrement()) title String @db.VarChar(255) description String @db.Text status Status @default(OPEN) createAt DateTime @default(now()) updateAt DateTime @updatedAt } enum Status { OPEN IN_PROGRESS CLOSED } npx prisma format npx prisma migrate dev ..