[nextjs/typescript] 파일업로드 구현(backend/frontend) #필요 라이브러리 multer next-connect axios #라이브러리 설치 $npm i axios multer next-connect os # pages/api/upload/index.tsx - config:bodyParser를 false로 지정함으로써 stream을 허용한다. - next-connect를 활용하여, 미들웨어수준에서 file정보를 명시하여준다. import nc from "next-connect"; import multer from "multer"; import path from "path"; import { NextApiRequest, NextApiResponse } from "next"; imp..
[nextjs/ts/react] 로그인 페이지 [완성] -기본 구성 설명- -react-hook-form을 활용하여 간편하게 form 예외처리 및 데이터 처리 구현 -Input / Button 등을 컴포넌트 처리하여 깔끔하게 구현 -useMutation hook을 만들어서 api 데이터 처리를 명료하게함 -useEffect를 활용하여, useMutation을 통하여 결과값을 비동기적으로 받아서 처리함 -nextjs(서버사이드) 수준에서 nextjs의 api기능을 활용하여 서버/클라이언트 일원화함 -withHandler라는 함수를 통하여, middleware를 구현하여 각 예외처리를 구현 -tailwindCSS를 활용하여 직관적으로 UI를 구현 추 후 추가 -cookie token을 활용한 session ..
[nextjs+ts]프로젝트 06. api request middleware 만들기(nextjs) nextjs의 장점은 서버와 클라이언트를 모두 한곳에서 운용이 가능하다는 것이다. nestjs혹은 spring이나 asp.net에서 제공하는 middleware 기능을을 nextjs에서 또한 구현할 수있다. #useMutation 구현(api 호출을 hook으로 구현) import { useState } from "react"; interface UseMutationState { loading: boolean; data?: object; error?: object; } type UseMutationResult = [(data: any) => void, UseMutationState]; export defau..
setSate((data) => ({ ...prev, data:data })); 의 의미 #풀소스 import { useState } from "react"; interface UseMutationState { loading: boolean; data?: object; error?: object; } type UseMutationResult = [(data: any) => void, UseMutationState]; export default function useMutation(url: string): UseMutationResult { const [state, setState] = useState({ loading: false, data: undefined, error: undefined, }); f..
[nextjs+ts]프로젝트 05.로그인 페이지 react-hook-form을 활용한 리펙토링 react-hook-dom을 활용하면 간편하게 form을 수정할 수 있다. #react-hook-form 설치 //일반적인 버전 설치 $ npm i react-hook-form //rc버전 설치 $ npm i react-hook-form --legacy-peer-deps #Input Component 구현 -interface를 정의하여 property 넘기기 -UserFormRegisterReturn 파라미터로 활용하여 react-hook-form에 있는 정보를 넘겨 받기 import { UseFormRegisterReturn } from "react-hook-form"; interface InputProps{..
[prisma+nextjs] api 서비스 개발하기
[prisma+nextjs] api 서비스 개발하기 nextjs와 prisma가 설치된 환경에서 api 서비스 개발하는 방법을 알아본다. 만약에 nextjs 설치 및 prisma 설치부터 풀로 진행과정이 궁금하시면 댓글로 달아주시면 블로깅을 진행하겠습니다. #prisma client 설치 -설치 시 현재 시점에선 collection is not iterable 버그가 존재하기때문에 최신버전이 아닌 3.9.2 버전을 설치하여준다. $ npm i @prisma/client@3.9.2 #client 객체 생성 및 관리를 위한 client.ts 작성 import { PrismaClient } from "@prisma/client"; export default new PrismaClient(); #scheme.p..
[prisma+PlanetScale]스크립트 작성하여 DB(PlanetScale)에 동기화하기
[prisma+PlanetScale]스크립트 작성하여 DB(PlanetScale)에 동기화하기 # pscale에 연결하기(shell) $ pscale auth login # pscale에 있는 DB에 연결하기(shell) //pscale connect [db명] $ pscale connect admin-cms #scheme.prisma 편집하여 테이블과 동기화 할 스크립트 작성하기 model User{ id Int @id @default(autoincrement()) phone Int? @unique email String? @unique name String avartar String? createAt DateTime @default(now()) updateAt DateTime @updatedAt } ..
[prisma+PlanetScale]database connect 데이터베이스 구성 및 접속하기 primsa 셋팅 - https://gofogo.tistory.com/133 [prisma/orm] prisma 설치 및 테스트 [prisma/orm] prisma 설치 및 테스트 기존에 typeORM을 쓰다가 좀 더 효율적인 ORM으로 교체를 위해 시도해보았다. #설치 및 초기화 npm install prisma -D npx prisma init #db를 선택하여 넣는다. generator.. gofogo.tistory.com PlanetScale(cli) 셋팅 - https://gofogo.tistory.com/135 [PlanetScale/scoop/windows]윈도우에서 PlanetScale cli ..
[PlanetScale/scoop/windows]윈도우에서 PlanetScale cli 설치(scoop) #1.power shell ISE 실행 #2.권한 얻기 $ Set-ExecutionPolicy RemoteSigned -scope CurrentUser #3.Scoop 설치(https://scoop.sh/) $ Invoke-Expression (New-Object System.Net.WebClient).DownloadString('https://get.scoop.sh') $ scoop install curl #pscale 설치(https://docs.planetscale.com/concepts/planetscale-environment-setup) $ scoop bucket add pscale htt..
macOS업데이트 한 후로 home brew 루트권한 시도 시 다음과 같은 오류 발생 해결 방법은 간단하다. #bew 소유권을 모두 변경 $ sudo chown -R $(whoami) $(brew --prefix)/* #root 권한으로 업데이트 $ sudo brew upgrade 이 후 사용이 가능하다.