next.js10 Zod로 런타임에서 데이터 무결성을 확보한 경험 안녕하세요 1년차 개발자로 에너지 모니터링 솔루션 웹앱을 만들며 zod를 도입하게 된 배경에 대한 글입니다.어떤 문제가 있었고, 왜 zod를 선택했으며, zod의 어떤 기능을 활용해서 문제를 해결 했는지 위주로 작성했습니다.이하 서술은 반말로 작성한점 양해 부탁드립니다. 목차)1. zod 도입 배경2. zod 활용법 3. zod 도입 시 고민한 부분 (zod + prisma, meta) 1. zod 도입 배경 운영 환경에서 API 응답(DB 데이터)이 가끔 신뢰할 수 없는 상태가 되는 이슈가 있었다. 이로 인해 해당 문제에 대한 대응이 운영 중 반복적으로 논의되었고, 개발자가 직접 일일이 데이터를 확인해야 하는 상황이 발생했다.시간이 흘러 다른 개발자분과 커피챗을 하다가 타입 안정성을 위해 zod를 사.. 2026. 2. 3. Nextjs hydration mismatch error(하이드레이션) 짧은 지식으로 인해 글의 신뢰성이 높지 않습니다. 정확한 내용은 공식문서를 참고해 주세요. 목차)1. 서론2. Nextjs hydration 에러와 해결3. 결론 1. 서론다크모드를 구현하며, 실시간 시계를 추가하며 두번의 hydration에러를 만났고, 해결한 과정에 대한 글입니다. hydration은 무엇일까?수화라는 뜻으로, HTML에, 이벤트를 부착하고 리액트, js코드를 실행해서유저와 interaction 가능한 코드로 만드는 과정이다.조금 더 자세히 말하면,클라이언트에서 서버에서 전달된 HTML과 가상 DOM을 비교(recolciliation)하고 DOM을 업데이트하는 과정.이고 이때 서버에서 전송된 HTML과 클라이언트에서 생성된 가상DOM구조가 일치하지 않을 경우 하이드레이션 에러가 발생한.. 2024. 9. 29. Nextjs 미들웨어 토큰 유효성 검증, 미들웨어 런타임 짧은 지식으로 인해 글의 신뢰성이 높지 않습니다. 정확한 내용은 공식문서를 참고해 주세요. 목차)1. 서론2. Nextjs 미들웨어 작동원리3. 미들웨어에서 토큰 유효성 검증 (미들웨어 런타임에 따른 트러블 슈팅) 1. 서론이 글은 Nextjs middleware에서 토큰 유효성 검증을 하며, 미들웨어에 대해 배운 내용을 공유한 글입니다.미들웨어는 edge runtime에서 실행되고 따라서 jsonwebtoken라이브러리를 직접 사용할 수 없었다.crypto등 일부 노드 모듈을 지원하지 않기 때문이다. 그런데 이 에러가 바로 로그로 찍히지 않고 엉뚱하게 a,b,c,,,기타 모듈이 설치되지 않았다는 에러 로그가 나와 문제 해결에 헤메었던 기억에 이 글을 작성한다. 얼마 전에 reddit에서 "Why We .. 2024. 9. 22. API Route에서 jwt 토큰 유효성검증, next/headers cookies 함수 짧은 지식으로 인해 글의 신뢰성이 높지 않습니다. 정확한 내용은 공식문서를 참고해 주세요. 목차)1. 서론2. API에서 jwt 토큰 유효성 검증3. next/headers cookies함수 1. 서론이 글은 JWT를 활용한 세션관리 중에서도 API에서의 토큰 유효성 검증 중심으로 작성하였습니다. 토큰 유효성검증을 나는 아래 세 가지 방법으로 나누었다.1. 미들웨어2. API 3. 백그라운드에서 주기적 검증 API에서의 토큰 검증은 웹앱에서 가장 보편적으로 사용하는 방법이고,(나의 경우 실시간 웹소켓통신을 해서 세 가지 모두 적용했다) Next.js 에서 미들웨어 토큰 검증 및 토큰 재발급은 다음 글에 작성하였다. 2. API에서 jwt 토큰 유효성 검증API요청,응답에서 토큰을 검증할때 서버와 클라이언.. 2024. 9. 10. NextAuth.js, Lucia auth, 토큰과 세션의 특징, 라이브러리 선택 시 유의할 점 짧은 지식으로 인해 글의 신뢰성이 높지 않습니다. 정확한 내용은 공식문서를 참고해 주세요. 목차)1. 서론2. 토큰, 세션 언제 좋을까3. NextAuth.js 와 Lucia Auth의 특징 4. 결론 1. 서론이번 글은 Next.js 인증 구현과정에서 라이브러리를 선택하며, 느낀 점에 대한 개인적인 감상입니다. Next.js로 인증을 구현해야 하는 상황이었다. 토큰 재발급 로직을 직접 구현할 것인지 라이브러리를 사용할 것인지 찾아보다가 커뮤니티에 질문을 올렸는데, 여러 답변을 보고 라이브러리 선택 시 유의 사항과 토큰과 세션이 적합한 상황에 대해 배울 수 있었다. https://www.reddit.com/r/nextjs/comments/1f31n7z/should_i_use_nextauth_or_imp.. 2024. 9. 5. vercel 배포 느림 해결 (vercel region 지역 설정) 짧은 지식으로 인해 글의 신뢰성이 높지 않습니다. 정확한 내용은 공식문서를 참고해 주세요. 목차)1. 서론2. vercel의 지역설정 2-1 cdn 지역2-2 서버함수 지역3. 느낀 점 1. 서론next.js로 만든 웹을 vercel로 배포했다. 너무 느렸다. 로그인도 느리고 데이터 fetching도 느렸다. 문제를 해결하는 가장 좋은 방법은 테스트코드를 짜는 거겠지만 테스트코드를 짜는 법을 몰랐다.그래서 나름의 가정을 3개 세웠다.1. vercel 설정에 문제가 있다2. 몽고 DB 쿼리가 느리거나 connection이 계속 발생한다3. 미들웨어에서 무거운 작업을 하고 있다. 결론적으로 1번 vercel설정을 바꾸는 것으로 해결했다. 나는 DB는 firebase store만 써보고 백엔드를 (로그인 회원.. 2024. 8. 27. 이전 1 2 다음
