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..
storybook은 작성한 리액트 컴포넌트를 독립적으로 개발하고, 관리하고 테스팅하며, 문서화 할 수 있게 해줍니다. 쉽게 생각하면 현재 작성하고 있는 프로젝트의 Button 컴포넌트를 부트스트랩 공식 문서처럼 누구나 컴포넌트의 코드, 외형을 파악하고 문서화해서 관리하게 해줍니다. 때문에 협업에서 뛰어난 효율성을 가집니다. 아쉬운 점은 높은 러닝 커브와 모듈이 자주 충돌하는 번잡한 환경 설정이 있었습니다. 최신 버전에는 Interaction Tests로 실제로 테스팅 과정에서 개발자가 직접 button을 누르거나 input을 입력하면서 테스팅할 필요가 없이 jest, testing-library 함수를 자동으로 상호작용해서 테스팅해줍니다. 예전에는 콘솔로만 확인했던 테스트가 아닌 화면에 상호작용해주면서 ..
Styled Components에서 폰트를 적용하다 ttf 파일 폰트가 적용이 안되서 해결법을 검색해보고 적어보려합니다. import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` * { @font-face { font-family: 'GmarketSansMedium'; src: url('./fonts/GmarketSansTTFMedium.ttf') format('truetype'); font-weight: normal; font-style: normal; } } 5번째 줄 url은 public 폴더가 루트 경로입니다. format을 format('ttf')로 해도 반영이 안 됐는데 간단한 답은 ..
오늘 글에서는 React Query hooks를 테스팅하고 해당 hooks를 사용하는 컴포넌트까지 테스팅 해보려 합니다. 프로젝트 준비 테스팅을 위해 필요한 라이브러리를 설치해보겠습니다. yarn add @tanstack/react-query axios yarn add -D jest jest-environment-jsdom msw @testing-library/react @testing-library/jest-dom npx msw init public/ 라이브러리 설치 후, 아래 명령어를 입력해주시면 자동으로 public 폴더에 mockServiceWorker.js 파일이 생성됩니다. // pages/_app.tsx import { QueryClient, QueryClientProvider } from ..
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는 가장 널리쓰이는 필수적인 테스트 ..
오늘은 일회성 초기화에 관해서 글을 써보려합니다. 예제 // ✅ 정적 인스턴스가 한번만 생성됩니다. const resource = new Resource() const Component = () => ( ) Redux나 React Query를 사용하시는 분들은 앱 수명당 한번만 초기화 되는 변수가 필요합니다. 보통 컴포넌트 외부에서 인스턴스를 초기화합니다. 위 코드의 const resource는 자바스크립트 번들이 evaluated(평가)될 때 한번만 생성되고 ResourceProvider를 통해서 App컴포넌트에서 사용가능합니다. 하지만 컴포넌트를 여러번 렌더링해서 렌더링마다 자체 resource가 필요한 경우에는 어떡할까요? resource를 컴포넌트 안에 입력하는 방법을 사용할 수도 있습니다. co..
오늘은 useState를 다룰때 미세한 차이지만 좋은 코드 작성에 도움이 되는 것들을 알아보겠습니다. 1. The Functional Updater import { useState } from "react"; const [count, setCount] = useState(0) // 🚨 다음 값을 계산할 때 현재 값에 의존하게 됩니다. setCount(count + 1)}>Increment // ✅ previousCount를 사용해서 다음 값을 계산합니다. setCount(previousCount => previousCount + 1)}>Increment 새로운 값을 setter(setCount)에 전달하지 않고 대신 함수를 전달하는 방법이 있습니다. 리액트는 우리가 함수를 호출한다면 이전 값(previo..
React로 개발을 하다보면 useState hook을 가장 많이 사용하게 됩니다. 오늘은 컴포넌트가 props를 받아와서 state(상태)를 초기화 할때 쉽게 함정에 빠지는 경우를 소개하려합니다. 먼저 오늘의 핵심 코드를 보고 시작하겠습니다. 핵심 코드 import { useState } from "react"; interface IDetailViewProps { initialColor: string; } const fruits = [ { id: 1, name: "banana", color: "yellow", }, { id: 2, name: "apple", color: "red", }, ]; const Pratice: React.FunctionComponent = () => { const [select..
전편의 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 웹 앱에..
