👨‍💻🤔 적용 내용 및 참고할만한 내용 - KIMSEUNGGYU/blog GitHub Wiki

🤔 : 적용해볼만한 것
👨‍💻 : 적용한 것

👨‍💻 cypress 에서 sitemap.xml 테스트 방법

• sitemap.xml 파일을 등록했는데.. 개발하면서 해당 파일이 존재하지 않는 것을 확인했다. (테스트 코드의 부재로 인해 몰랐음)
• 현재 프로젝트에는 sitemap.xml 파일을 동적으로 생성하는데 해당 부분을 테스트 해야하는지(의문),
  어떤 방법으로 테스트 할지 고민하다가 cypress 를 이용한 e2e 테스트로 할 수 있다고 생각되어 해당 부분을 적용했다. (현재는 request 로 해당 파일이 있는지 확인)
• cypress 에서 sitemap.xml 테스트 방법
• 💡 해당 부분 적용한 작업 첨부하기

👨‍💻 cypress 에서 router 모킹한 방법

• NextJS Router Mock 헤당 부분을 참고하여 router mocking 한 함수를 만들고 테스트 하는 곳에서 해당 router 를 사용해서 테스트 함.
• nav 메뉴에서 화면 전환을 테스트 하는 등을 위해 해당 방법 사용
• mocking 한 router 사용 방법 참고
• NextJS Router Mocking 한 코드

👨‍💻 vercel 및 github actions 를 활용하여 CI/CD 작성

• vercel 을 이용해서 배포 자동화를 했는데 테스트 코드도 작성했고 안정적인 환경을 유지하기 위해 CI 스크립트 작성했음.
• 하지만 기본적으로 product 브랜치가 push 되면 자동 배포가 일어나 이를 제어하기 위해 vercel-action 을 사용함.
• 실제 커밋 내용 은 과정만 참고하면 좋을 거 같다.
• 구동되고 있는 CI/CD 스크립트 이고 여기서 --prod 옵션은 있는데 환경에 따라 옵션널로 사용할 수 있다. --prod 옵션은 nextjs-env 파일을 develop 등으로 지정해도 product 모드로 빌드되기 때문에 필자는 product 로 빌드해야하는 경우 --prod 를 옵션을 줬고, 그렇지 않은 경우(develop CI/CD) 생략함.
• 자동 배포되고 있는 것을 막기 위해 vercel 설정 파일 을 이용해 enabled: false 를 줌으로서 자동배포되는 것을 막았다. (CI 수행 후, vercel-action 를 이용하여 CD 작업 수행)

🤔 nextjs 와 cypress 테스트 하는 방법

• 현재는 데이터를 하드 코딩해서 cypress 테스트 수행
• 하지만, nextjs 에서 제공하는 __NEXT_DATA__ 를 통해 데이터를 하드 코딩하지 않고 주어진 데이터를 이용하여 테스트 하는 방법 제시
• cypress 환경에서 nextjs 테스트 하는 방법 참고

👨‍💻 nextjs 에서 sitemap 생성 방법

• SEO 를 제공하기 위해 sitemap.xml 파일이 필요했다.
  여러 방법을 찾아본 결과 SSG 방식 과 SSR 방식 을 참고하였고, 현재 SSG 방식으로 적용하였다. (cypress 테스트 할 때 notion-api 요청할 때 token 값이 필요한데.. 이를 mocking 하는 패턴보다 빌드시에 생성하는 방식으로 가도 괜찮다고 생각했다.
• SSR 방식과 SSG 방식 모두 적용했었는데 현재는 SSG 방식으로 sitemap.xml 을 생성한다.