feat: set up Vitest for Next.js

[hee-suh]

Issue Number

#2

Description

구현 내용 및 작업한 내용

• Next.js에 Vitest를 추가했습니다.
• Page와 util에 대한 샘플 테스트를 작성했습니다.
• Node 버전을 LTS로 변경하면서, Node 버전과 npm 사용을 강제했습니다.
• editorconfig를 추가하여 vscode 세팅을 오버라이딩해서 통일할 수 있게 했습니다.

To Reviewers

PR을 볼 때 주의깊게 봐야하거나 말하고 싶은 점

• 다음 문서를 참고해서 Vitest를 설정했습니다.

  • https://vitest.dev/guide/의 설명 및 Examples
  • https://nextjs.org/docs/app/building-your-application/testing/vitest

• __tests__ 폴더 밑에 테스트할 코드를 모두 넣는 구조로 작성해보았습니다.

  • __tests__라는 이름은 jest의 컨벤션입니다. https://jestjs.io/docs/configuration
  • 테스트 코드가 작성된 파일들을 한 눈에 보기 편하면 좋을 것 같아서, 테스트할 파일 바로 옆에 위치시키지 않았습니다.
    대신 __tests__ 하위 폴더 구조를 src의 폴더 구조랑 같게끔(테스트할 코드가 위치한 폴더만 추가하는 방식) 하면 어떨까 합니다!

• 추가하고 싶은 설정이 있다면 알려주세요!

• Snapshot이나 Mocking 샘플은 차차 올리도록 하겠습니다...!

• Node 버전은 다음 경고 때문에 LTS로 변경했습니다.
  (node:30570) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead.

• editorconfig는 extension을 설치하고 npm install -g editorconfig를 입력하셔야 정상 작동합니다.
  Cf. https://stackoverflow.com/a/48523398/11625302

Checklist

PR 등록 전 확인한 것

• 올바른 타켓 브랜치를 설정하였는가
• PR 제목은 포맷과 내용 둘 다 알맞게 작성되었는가 (e.g., feat: add login page)
• Description에 PR을 구체적으로 설명했는가

[poiu694]

빠른 작업 너무 좋습니다 👍 💯 너무 고생하셨습니다~

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

실행하면 위 오류가 뜨는데 deprecate 된 부분 한 번 신경써주시면 감사하겠습니다~

Issue Number
close: #2
Description

위에서 close 키워드 제거해주시면 감사하겠습니다! 추후 편의를 위해 놔두었는데 이런 경우에는 없는게 더 낫겠다는 생각이 드네요. 없애버리는게 나을까요? 아니면 check list에 추가하는게 나을까요?

[Pridesd]

저도 빨리 해야겠다는 동기부여를 받게 되네요. util 컨벤션만 확인 부탁드려요. 고생 많으셨습니다!

[hee-suh]

@poiu694 꼼꼼한 리뷰 정말정말 감사해요!! 🥹

1. 어이쿠 deprecated 확인하겠습니다!
2. 저도 closed 키워드가 컨벤션인가?_?하는 의문이 있었는데 그냥 없애고 이슈랑 링크되게끔만 하면 좋을 것 같네요!

[hee-suh]

@Pridesd 확인 감사합니다!! 저도 아직 스토리북 세팅 끝내려면 한참 남았어요 ㅋㅋ 유틸 코드 컨벤션 맞춰서 수정해둘게요~!

[poiu694]

고생하셨슴니다~