Frontend/NextJS

Nest.js에 Jest, React Testing Library 설정하기

2023.08.25

Nest.js에 Jest와 React Testing Library를 설정해보자 미뤄왔던 시간이 도래했다. 프로젝트를 시작하면서 애써 외면해왔지만, 여러가지 과정들을 거치면서 결국 테스트의 필요성을 절실히 느끼고 말았다. 그래서 오늘은 Next.js에 Jest와 React Testing Library를 설정해보려고 한다. Jest & React Testing Library Jest는 JavaScript로 만들어진 테스팅 프레임워크다. 테스트 파일을 작성하면 이를 찾고, 테스트를 실행하고, 그 결과를 보여주는 역할을 한다. React Testing Library는 Jest에서 React 컴포넌트를 테스트하도록 도와주는 라이브러리다. 더불어 사용자가 하는 것과 동일한 방식으로 DOM을 쿼리하도록 도와주고 또,..

Frontend/NextJS

Next.js + Tailwind + Storybook 개발 환경 구축하기

2023.07.30

Next 13 + Tailwind + Storybook 치스톡 프로젝트를 Next 13 기반으로 결정한 뒤로 다른 기술 스택들로 Tailwind, Storybook을 골랐다. 그래서 오늘은 Next13 + Tailwind + Storybook 기반으로 공식 문서 설명 따라서 개발 환경을 구축해보려한다. Next.js + Tailwind npx create-next-app@latest 먼저 Next.js 기반으로 설정하기 위해서 create-next-app을 해준다. React에서 CRA처럼 Next.js 보일러 플레이트를 제공해주는건데, 위는 npm 기반 명령어이고 나는 yarn 기반으로 진행했기 때문에 아래 명령어를 입력해주었다. yarn create next-app //create 다음 -가 없다. ..