[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..
[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 ..
[nextjs+ts]( 번외) tailwindCSS peer와 group을 활용하여 다른 객체의 상태값 받아오기 / peer와 group의 차이 #[같은 점] peer와 group은 각각 등록을 한 후 등록된 그룹내에서 다른 곳에서 해당 객체들을 부를 수 있다 #[다른 점] peer는 동일 수준의 객체 group은 하위 객체(자식) 를 각각 접근 가능하다. #[peer]의 예 - 아래와 같이 input에 peer를 등록하고, span에서 input 값에 따른 예외 처리를 진행한다. 단 peer가 먼저 등록 후 하위에 이벤트처리를 해줘야한다 아이디 아이디를 입력해주세요 #[gorup]의 예 - details에 그룹을 등록하고, 자식인 details의 상태에 따라 summary 콘텐츠를 변경한다. 모니터링 ..
[nextjs+ts]( 번외) tailwindCSS form 플러그인(plugin) 설치 및 테스트 #[설치] npm i @tailwindcss/forms #[설정] tailwind.config.js module.exports = { content: [ "./pages/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [require("@tailwindcss/forms")], }; #nextjs #ts #TailwindCSS #css #js #react #join #func #form
[nextjs+ts]( 번외) join과 tailwind를 활용하여 동적 css 구현 #join 함수를 활용하여 손쉽게 조건문을 적용 가능하다. #조건을 위한 스테이츠 생성 const [loginState, setLoginState] = useState("email"); #함수생성 function changeclass(...classnames: string[]) { return classnames.join(" "); } #조건 적용 클릭 #nextjs #ts #TailwindCSS #css #js #react #join #func #change view