Next.js와 Tailwind CSS를 같이 사용하는 프로젝트가 상당히 많습니다. create-next-app 명령어를 실행하면 Next.js 설치 과정에서 Tailwind CSS를 사용하는지 물어볼 정도 입니다. 이번 글에서는 next-theme을 라이브러리를 활용한 다크 모드 적용에 대해서 글을 써보려 합니다. 작업 환경 설정 npx create-next-app@latest my-project --typescript --eslint cd my-project yarn add -D tailwindcss postcss autoprefixer npx tailwindcss init -p // tailwind.config.js /** @type {import('tailwindcss').Config} */ mo..
최근 포트폴리오 관련 프로젝트를 Vercel로 배포를 하였는데요 예전에 배포할때는 편하게 되었는데 이번에는 규모가 커져서 그런지 문제들에 봉착했습니다. 다음에도 충분히 발생할 수 있는 문제들이기 때문에 글로 남겨보려고 합니다. next.js 프로젝트 배포 시 api 폴더 문제 Next API Routes를 사용하신다면 보통 pages/api 폴더에 Serverless Functions 코드를 작성하게 됩니다. 제 프로젝트의 경우 Next API Routes를 사용하고 프로젝트의 루트에 api 폴더를 작성해서 axios 관련 코드들을 넣어주었습니다. 이 경우 배포할 때 문제에 부딪히게 됩니다. Vercel은 pages/api 와 api 두 개의 경로는 서로 다르지만 배포할 때 모종의 이유로 충돌하게 되어 ..
msw는 Service Worker API를 사용해서 모든 요청을 가로채는 백엔드 API Mocking 라이브러리입니다. REST API와 GraphQL 모두 지원하며 엔드포인트가 준비되지 않았을 때, 인터넷 연결이 느리거나 존재하지 않는 경우에 유용하게 쓰입니다. Mocking은 진짜를 흉내낸다는 뜻을 가지고 있으며 Service Worker API는 PWA(프로그레시브 웹 앱)에도 유용하게 쓰이고 있습니다. 이번 글에서는 msw를 이용하여 get 요청과 getServerSideProps 코드를 작성해보겠습니다. 라이브러리 설치 yarn add -D msw npx msw init public/ msw를 설치 후, 아래 명령어를 입력해주시면 자동으로 public 폴더에 mockServiceWorker.j..
TDD 개발 방식에 대해서 들어보셨나요? 리액트를 개발할 때 보통 컴포넌트 부터 작성하지만 TDD는 '테스팅 코드 작성' -> '컴포넌트 코드 작성' -> '코드 리팩토링' 순으로 개발 절차가 이루어집니다. 이 테스팅 절차를 편리하게 해주는 라이브러리가 있습니다. 요즘 웹 테스팅하면 바로 떠오르는 라이브러리는 Kent C. Dodds라는 개발자분이 만드신 @testing-library가 아닐까 합니다. 실행 환경 설정 yarn add -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event 이번 글에서 쓰일 라이브러리들입니다. jest는 가장 널리쓰이는 필수적인 테스트 ..
전편의 Next.js 쿠키와 JWT 토큰으로 로그인 구현에서 이어집니다. Next.js 쿠키와 JWT 토큰으로 로그인 구현 Next.js로 웹 앱의 인증 기능을 구현하면서 MongoDB, Next API Routes와 Next Auth라는 Hooks로 인증 상태관리가 편리한 라이브러리를 사용했습니다. 하지만 이것만으로는 모든 상황의 인증 로직 구현을 이해 ekard.tistory.com 요즘 웹 사이트나 앱, 게임에서 로그인을 하면 대부분 구글, 애플, 카카오톡, 네이버 같은 편리한 소셜 로그인이 있습니다. 개발자들은 이런 편리한 로그인들을 OAuth 2.0으로 구현한다는 것을 얼핏 들어보신 적이 있을겁니다. 오늘은 OAuth 2.0에 대한 핵심 개념만 짚어보고 저번 글에서 구현한 Next.js 웹 앱에..
Next.js로 웹 앱의 인증 기능을 구현하면서 MongoDB, Next API Routes와 Next Auth라는 Hooks로 인증 상태관리가 편리한 라이브러리를 사용했습니다. 하지만 이것만으로는 모든 상황의 인증 로직 구현을 이해했다 보기 어려워 jwt 토큰과 쿠키를 쓰는 코드를 따로 구현해보았습니다. 쿠키를 도입한 이유는 local storage,session storage가 취약한 csrf 공격은 프론트엔드 개발자 입장에서 막기 힘들지만 xss 공격에 취약한 쿠키는 httpOnly: true 옵션과 access token, refresh token 활용으로 보안상의 이점을 더 누릴 수 있다는 의견이 커뮤니티에서 더 많아 사용하게 되었습니다. 이 글에서는 access token, refresh to..
