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..
요즘 개발 프로세스의 자동화가 유행하고 있습니다. 그 대표 주자들 중 하나가 CI/CD인데요, 오늘은 가장 널리 쓰이는 Github Actions에 대해 알아보고 사용해보려 합니다. CI/CD란? CI CI는 Continuous Integration(지속적인 통합)의 약자입니다. 버그 수정이나 새로 만드는 기능들이 메인 리파지토리에 빌드되고 테스트 되어서 머지되는 기능을 합니다. CI에서 중요한 기능은 2가지입니다. 1. 코드 변경 사항을 주기적으로 빈번하게 머지(Merge) : 2명의 개발자가 오랜 기간 코드를 작성하고 같은 리파지토리에 머지를 하려고 할 때, 서로 다른 코드에서 반드시 충돌이 일어납니다. 이 충돌을 해결하는 시간이 많이 걸릴 가능성 역시 높습니다. 위의 문제점을 방지하기 위해 최대한 ..
실제로 공들여 만든 웹 앱을 배포했을 때, 개발자들은 최적화가 잘 되었는지 고민하게 됩니다. 저 역시 웹 앱을 배포하고 이제 실제 서비스 운영을 하려하는데 최적화가 고민이 되었습니다. React의 useCallback, useMemo, memo 같은 최적화 외에도 많은 최적화 이슈들이 있습니다. 크롬 브라우저에서는 Lighthouse 기능을 지원하는데요, 이 기능을 이용하면 배포한 웹 페이지를 분석하고 최적화를 해야 할 문제가 무엇인지 분석해줍니다. 주의하셔야할 점이 있는데요, localhost:3000 같은 개발 서버는 성능 퍼포먼스가 낮은 점수를 받을 수 밖에 없기 때문에 정확한 수치를 알고 싶으시다면 프로덕션으로 배포를 하고 시크릿 탭으로 확인한 후에 최적화하시는 방법을 추천드립니다. 먼저 제가 배..
storybook은 작성한 리액트 컴포넌트를 독립적으로 개발하고, 관리하고 테스팅하며, 문서화 할 수 있게 해줍니다. 쉽게 생각하면 현재 작성하고 있는 프로젝트의 Button 컴포넌트를 부트스트랩 공식 문서처럼 누구나 컴포넌트의 코드, 외형을 파악하고 문서화해서 관리하게 해줍니다. 때문에 협업에서 뛰어난 효율성을 가집니다. 아쉬운 점은 높은 러닝 커브와 모듈이 자주 충돌하는 번잡한 환경 설정이 있었습니다. 최신 버전에는 Interaction Tests로 실제로 테스팅 과정에서 개발자가 직접 button을 누르거나 input을 입력하면서 테스팅할 필요가 없이 jest, testing-library 함수를 자동으로 상호작용해서 테스팅해줍니다. 예전에는 콘솔로만 확인했던 테스트가 아닌 화면에 상호작용해주면서 ..
최근 포트폴리오 관련 프로젝트를 Vercel로 배포를 하였는데요 예전에 배포할때는 편하게 되었는데 이번에는 규모가 커져서 그런지 문제들에 봉착했습니다. 다음에도 충분히 발생할 수 있는 문제들이기 때문에 글로 남겨보려고 합니다. next.js 프로젝트 배포 시 api 폴더 문제 Next API Routes를 사용하신다면 보통 pages/api 폴더에 Serverless Functions 코드를 작성하게 됩니다. 제 프로젝트의 경우 Next API Routes를 사용하고 프로젝트의 루트에 api 폴더를 작성해서 axios 관련 코드들을 넣어주었습니다. 이 경우 배포할 때 문제에 부딪히게 됩니다. Vercel은 pages/api 와 api 두 개의 경로는 서로 다르지만 배포할 때 모종의 이유로 충돌하게 되어 ..
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..
