'📝 Study/🩺 Testing' 카테고리의 글 목록

본문 바로가기

📝 Study/🩺 Testing

🛑 Storybook Error : useLocation() may be used only in the context of a <Router> component. 이 에러는 메세지에서도 알 수 있다 싶이 컴포넌트 내에서 useLocation() 메서드를 사용할때 이건 Router 컴포넌트 내에서만 사용 할 수 있다고 경고하는 에러다. 원래는 이 에러를 storybook-react-rouer 를 설치해 해결 할 수 있는거 같은데 최근 업데이트 된 React Router v.6 랑 호환이 안되는건지 뭔지 나는 적용이 잘 안됐다...ㅠ 그래서 이리저리 방법을 찾아보다 임시방편으로 아래와 같이 우선 해결했다. function TestRouter({ children }) { return ( ); } 이런 아무 역할도 안하는 Router 를 하나 만들고 export const decorators = [ Story => ( ), ]; .storybook/preview.js 파.. 더보기

Storybook Chromatic 으로 배포해보기! + 번외 Netlify Storybook은 단순한 테스팅 툴을 넘어 협업 & 문서화 툴이다. 그러기 위해선 당연히 공유할 수 있도록 배포도 할 수 있고 Storybook을 배포하기 위한 전용 서비스까지 있다. 그것이 바로 Chromatic! Chromatic 과 함께라면 배포는 물론 그 이후의 build 관리까지 Storybook 맞춤으로 손쉽게 할 수 있다! 준비물은 Storybook을 적용한 프로젝트 Github 레포지토리만 있으면 된다! 1. 가입 먼저 Chromatic 사이트에 접속해 Github 계정으로 가입을 해주자! 2. 프로젝트 생성 아마 최초 회원가입을 해서 로그인을 하면 위의 화면이 뜰 것이다. 여기서 Choose from GitHub을 선택! 만약 안뜬다면 화면 Projects 탭에 있는 add projec.. 더보기

React 프로젝트에 Storybook 일단 사용해보기! with TS 💡Storybook에 대한 이해와 학습보다 빠른 적용을 목적으로 정리한 글입니다! ☠️ Storybook 학습 중에 작성한 글이므로 내용에 오류가 있을 수 있습니다! 컴포넌트의 props 값을 편하게 수정하면서 어떻게 렌더링 되는지 쉽게 테스트 할 수 있는 스토리북은 써보면 정말 편하고 좋다. 그렇기에 컴포넌트 단위로 개발을 할 수 있고 또 일종의 프로젝트 문서화 작업도 할 수 있다. 그런데 경험상 처음 써보려고 할때 스토리북이 정확히 뭔지도 모르겠고 어떻게 시작해야 할지 감이 잘 안 오는데 무엇보다 스토리 테스트 코드를 따로 작성을 해야 한다는 부담감에 선뜻 시작하기가 어려운 거 같다. 하지만 막상 한번 적용해서 이거저거 건드려보며 어느 정도 적응하고 나면 그냥 공장처럼 찍어낼 수 있다! ^-^)ㅎ 아.. 더보기

이전 1 다음

티스토리툴바