-
Notifications
You must be signed in to change notification settings - Fork 2
WEEK 2 팀 회의록
eVe68 edited this page Aug 10, 2024
·
7 revisions
-
.storybook/main.jsstorybook의 애드온, 중요설정 등이 담겨있는 설정파일입니다. -
.storybook/preview.jsstorybook의 컴포넌트 표시에 대한 설정이 담겨있습니다. -
.stories.tsx컴포넌트를 표시하기 위한 파일입니다. 이 파일을 통해 컴포넌트를 스토리북에 등록하게 됩니다. -
.stories.mdx문서를 작성하기 위한 파일입니다. 마크다운 기반이며, JSX/TSX 컴포넌트를 넣을 수 있습니다.
- JS에서 지원하지 않는 형태
- 참고: Blog
- 이미지를 읽어오지 못하는 이슈
- Webpack에 Image-Loader설치
- 이미지에 type 부여
tailwind에서 자주 사용하는 스타일 모아서 Custom Plugin으로 사용
- 클래스에 직접 조건문 사용 ⇒ 편하지만 너무 길어짐⇒ 안그래도 가독성 별론데 더 별로임
- 객체로 만들어 원하는 key값으로 가져와 사용하는 방식 ⇒ 훨씬 깔끔함
- 버튼 hover시 자식 요소의 img가 움직여야 함
- group/peer 이용 하여 해결
- npx sb init
- 우리가 사용한 명령어
- npx -p storybook sb init
- 특정 패키지를 지정하고 해당 패키지를 사용하는 명령어를 실행할 때 사용
- yarn dlx storybook
- dlx: 특정 패키지를 일시적으로 다운로드하고 실행 (설치 없이 실행)
- 기본적으로 tailwind 가 적용되지 않음
- import 필요
-
story 코드와 test코드 어디에 둘 것인지
- 컴포넌트와 같이 두기로 결정
-
Section 컴포넌트의 위치
- Page의 한 단위로서 page와 같은 폴더에 두기로 결정
- jest와 storybook이 중복되어 테스트하는 부분을 어떻게 할 것인가
- jest에서 랜더링을 검증하는 테스트 코드를 제외함
- 8/2 피드백 참고
- jest에서 랜더링을 검증하는 것은 의미가 있음
- storybook에서 라우터 관련 함수를 사용했다면 테스트할 컴포넌트를 MemoryRouter로 감싸 주어서 컴포넌트가 라우터 내부에 있다는 것을 명시해 주어야 함
- import 순서
- react
- RTL
- storybook
- router
- utils
- components
- image
- 외부에서 데이터를 받아오는 것이 쉽지 않음
- mock 폴더 사용
- userEvent는 Promise를 반환함으로 무조건 async/await 를 사용해야 함
- `fireEvent.click(event)` 보다 `userEvent.click(element)`를 사용하는 것이 더 좋은 방법
- 실제 사용하는 유저가 보기에 실제 버튼을 클릭하는 행위가 더 잘 표현되기에 userEvent를 사용하는 게 좋다.
-
role="progressbar"처럼 role을 직접 지정해서 똑같이 사용 가능
- jest가 tailwind를 읽어 들이지 못하는 것 같음
- class요소로 pointer-events-none은 가지고 있는 것은 확인함
- 이 부분은 최대한 스타일을 이용한 기능 제어는 하지 않는 것으로 해결
- 프로토파이에서 유형 테스트 시, 선택지에 호버하면 글씨가 사라짐
- 피그마는 그렇지 않음
- 디자이너에게 피드백 받아서 해결
- msw를 jest에 사용하기 위해 setupTests.ts 파일을 생성하고 이를 jest.config.ts 에서 사용하도록 명시하였다. 이 과정에서 cannot find msw/node 라는 오류가 발생하여 다음과 같이 해결했다. 👨🏻💻 WEEK 2 개인 회고록 강준우
- ex)
- 오답을 제출하면 오답을 알리는 토스트가 표시된다. <— RLT
- 정답을 제출하면 결과를 알려주는 화면으로 전환된다. ←- RLT
- 선택지를 클릭하면 투명도가 달라진다. ←— storybook
- 버튼을 호버하면 자동차가 이동되는 애니메이션이 발생한다. ← storybook
- jest에서 getByRole을 사용할 시, 다양한 role을 설정할 수 있다. aria-label등을 통해서 다양한 정보를 전달이 가능하다. 👨🏻💻 WEEK 2 개인 회고록 강준우
- 비슷하지만 후자가 역할이 분리되어 있어 더 많은 제어가 가능함
- 테스트 결과 waitFor + GetByText가 예상대로 작동하지 않는 문제가 있음
- 라우팅 테스트 시 url주소를 이용한 테스트를 시도함
- 이유는 모르겠지만 어떤 조작을 가해도 결과값이 "/" 경로로 이동함
- 기회가 되면 이유 탐색 예정
- 다른 페이지의 요소를 테스트 하는 방식으로 변경
- 이유는 모르겠지만 어떤 조작을 가해도 결과값이 "/" 경로로 이동함
- 이벤트 1, 2 페이지 마무리
- Template을 이용해서 랜더링 요소의 중복 작성을 최소화할 수 있다
- 테스트 케이스들은 Template을 바인딩하여 사용
- 이를 이용해 스토리북에서 라우팅 테스트까지 가능
- 스토리북의 args는 내부 상태에 접근할 수 없었음
- 2개의 url 화면을 동시에 한 url에서 구현 필요
- 비효율적 + 복잡한 구현
- 현재 url화면을 제거하는 애니메이션 실행 이후 다음 화면 생성하는 애니메이션 실행
- jest에서 router가 제대로 동작하지 않고 있는 문제가 발생하였다.
-
BroserRouter외에MemoryRouter설정을 통해 테스트를 해야한다.
React Router | Testing Library
- 다음글을 참고하여 jest utils에 renderWithRouter를 만들어 주었다. → 그래도 실패해서 일단 구현 후, 주말에 다시 확인해하는걸로 정했다.
- border에 gradient를 넣으려면 border image를 사용해야 하는데, 그럼 radius가 적용이 안된다.
- 다음과 같이 해결했다.
- torybook은 디자이너랑 협업할 때 주로 쓰임. UI 확인하고 깨지는지 안깨지는지 확인하는 용도
- jest는 build시 test 하는 용도
- 둘이 완전 다르다
- test Coverage
- 전체 테스트 케이스 중 실행된 테스트 케이스의 비율
- Given-When-Then 형식
- Given: 테스트에서 구체화하고자 하는 행동을 시작하기 전에 테스트 상태를 설명하는 부분
- When: 구체화하고자 하는 그 행동
- Then: 어떤 특정한 행동 때문에 발생할거라고 예상되는 변화에 대한 설명
- CVA로 과도하게 길어지는 클래스를 줄일 수 있다. cva로 재사용 가능한 UI 만들기
- 🛠️ 테스트 코드 작성
- 워드 클라우드
- 컴포넌트 설계
- 스토리북 적용
- useAnimation Hook
- 룰렛 컴포넌트
- 토스트 컴포넌트
- useInView Hook
- 색상 영역 컴포넌트
- msw
- webpack
- 컴포넌트 동시에 띄우기