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
vscode를 사용하면서 기본 포맷 옵션으로 prettier를 사용하고 있습니다. 그런데 모든 프로젝트에 prettier가 항상 적용되는 것은 불편하다는 생각이 있어서 찾아서 글로 작성합니다. prettier 설정 파일이 존재할때만 prettier 적용하기 vscode좌측 하단에 보면 설정 버튼(⚙️)이 있습니다. 설정 버튼을 클릭하고 검색창에 requireConfig를 입력하고 검색합니다. 해당 옵션을 체크하면 prettier설정 파일이 있을때만 포맷옵션이 적용됩니다. 감사합니다.