0722

스포티파이 크로스페이드 키고 이 플리 들으면 하룰랄라감

Clone Coding

next.js에서의 testing

라이브러리 선택하기

• 공식문서를 보면 unit test에서 jest와 vitest를 추천하고 있음
• https://nextjs.org/docs/app/guides/testing
• jest는 무엇인가?
  • facebook(meta)이 개발한 라이브러리
  • 리액트 뿐만 아니라 다양한 프레임워크와 호환됨
• vitest는 무엇인가?
  • 빠른 번들링과 개발서버를 지원하는 vite가 등장함
  • jest는 es모듈을 commonjs로 변환하기 위해 별도 설정이 필요하지만
  • vitest는 es모듈이 등장했을 때 나온거기 때문에 별도 설정이 불필요함.
  • vite없이도 사용 가능함.
• jest와 vitest의 차이점은 무엇인가?
  • 성능
    • 어떤 사람이 했을 땐 jest가 더 빠르고, 어떤 사람이 했을 땐 vitest가 더 빠르다고 함.
    • jest가 vitest보다 빠르다고 나왔더라도 vitest의 성능을 향상할 수 있는 방법이 있음
    • watch 모드에서는 코드 변경에 영향을 받은 테스트만 다시 실행하기 때문에 vitest가 jest보다 더 나은 성능을 보이는 경우가 많음.
  • 개발자 경험
    • vitest는 es모듈을 기본 지원하지만 jest는 babel을 활용해서 common js를 es module로 변환해야 되기 때문에 대부분의 프로젝트들이 jest에서 vitest로 마이그레이션 중임
• 그래서 뭘로 하는게 좋음?
  • 새로 시작하는거면 vitest가 더 나음
  • es module과 ts를 기본 지원하니까.
• 참고 자료: https://www.speakeasy.com/blog/vitest-vs-jest
• 주의사항
  • components에 대한 ui testing을 하고 싶다면 react testing library가 필요하다
  • 현재 프로젝트에 alias를 사용하고 있기때문에 resolve로 경로 설정이 필요하다
• vitest.config.ts 코드

import { defineConfig } from "vitest/config";  
import path from "path";

export default defineConfig({  
  test: {  
    include: ["src/**/*.test.{ts,tsx}"], // src 디렉토리 내의 모든 .test.ts(x) 파일 포함  
    environment: "jsdom", // React 테스트용으로 jsdom 환경 설정  
    globals: true, // describe, it, expect 등의 전역 사용 허용  
  },  
  resolve: {  
    alias: {  
      "@": path.resolve(__dirname, "./src"),  
    },  
  },  
});

클라이언트 상태관리

Recoil과 zustand 차이

• https://dev.to/hxxtae/jeonyeog-sangtae-gwanri-recoilgwa-zustand-d2k
• https://www.reddit.com/r/reactnative/comments/w6sexg/recoil_or_zustand_and_why/

es module(esm)? common js?

• esm에서 사용되는 import는 비동기 방식
• common js에서 사용되는 require는 동기 방식
• common js는 esm을 지원하지 않지만 esm은 common js를 지원한다
• https://www.reddit.com/r/node/comments/zgred2/common_js_vs_es_modules_and_why/

tsx? ts?

• https://stackoverflow.com/questions/56871384/what-is-the-difference-between-ts-and-tsx-extensions-both-are-used-as-extensi
• ts는 타입스크립트만 작성한거
• jsx 컨테이너가 있으면 tsx
  • jsx는 react elments

type script

type? interface?

• https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces

• 내가 내린 결정

For the most part, you can choose based on personal preference, and TypeScript will tell you if it needs something to be the other kind of declaration. If you would like a heuristic, use interface until you need to use features from type.

• 공식문서를 보면, 인터페이스를 쓰다가 정 안되겠음 타입을 쓰라고 나와있음.
• 그래서 유니온이 필요한거나, api와 같이 구조가 확실한건 타입을 쓰고 다른건 인터페이스를 씀.
• 근데 이 글을 보니까 정말 취향 by 취향인 것 같아서.. 흠