이전 글에서 사용자 시나리오 & 테스트 코드 작성에 대해 이야기하였다, 이 글에서는 3번 테스트 코드를 활용하여 코드 리팩토링을 한 경험에 대해 써보고자 한다! 기존 코드 & 기획서를 참고하여 사용자 시나리오를 작성한다. 테스트 코드를 작성한다. 테스트를 돌려보며 안전하게 코드 리팩토링를 한다. 총 3개의 테스트 파일이 있고, 이는 시나리오대로 나눈 것이다. 모든 파일에 대한 테스트를 돌려보면 아래와 같이 나온다 (all passed!) 2개 이상에서 똑같이 쓰이고 있는 코드가 있는데, 이를 공통 컴포넌트로 빼서 코드 리팩토링을 하려고 한다. 원래 같았으면 코드수정을 한 뒤, 하나하나 눌러보며 UI 테스트를 했었는데, 간단한 화면이면 테스트도 금방 끝나겠지만 이번엔 유저 이벤트에 따라 체크해야 하는 사항..

계기 개발하고 있는 화면에서 유저의 이벤트에 따라 체크를 해야 하는 케이스들이 점점 늘어남에 따라 테스트 코드에 대한 필요성을 느꼈다. 화면 내부는 위처럼 크게 4개 컴포넌트로 구성되어 있다. 그리고 컴포넌트 내부에서 발생하는 유저의 이벤트에 따라 다른 컴포넌트에 영향이 간다. 예를 들어, component 1에 있는 내용에 따라 component 3에 있는 셀렉박스 선택지가 바뀌는 등.. 유저의 시나리오가 많아지면서 코드를 수정할 때마다 직접 일일이 테스트해야하는 케이스들이 늘어났다. 🥲 (하나하나 눌러보느라 아픈 내 손가락..) 테스트 코드 작성에 대한 필요성을 느껴질 때쯤, 아래의 글을 보게 되었다. https://techblog.woowahan.com/8942/ 단위 테스트로 복잡한 도메인의 프론..

https://nextjs.org/docs/pages/api-reference/functions/get-static-paths#fallback-pages Functions: getStaticPaths | Next.js Using Pages Router Features available in /pages nextjs.org next/router → router.isFallback으로 렌더링 인지 가능 const router = useRouter() if (router.isFallback) { return Loading... } 화면 처음 진입 시, getStaticProps 함수가 끝날 때까지 isFallback=true이기 때문에 이때 로딩바를 보여준다. 새 로고침해서 화면 진입 시 router.isFa..

에러페이지를 서버에서 제공하는 경우 비용이 증가되고, 서버에서 가져오기 때문에 느리다. 👉🏼 next.js에서는 static 파일로 에러페이지를 제공하고 있고 커스텀도 가능하다. 404 에러 페이지 커스텀 pages 하위에 404.tsx 생성 : export default () => { return 🤯404에러🤯 } 빌드를 하면 404 페이지가 정적으로 생성된다. server 에러 페이지 커스텀 404와 같은 client 에러는 static으로 만들어서 불필요한 서버 호출 막는 게 좋다. 하지만, 500에러와 같은 server 에러는 보통 정적으로 제공하지 않는다. 에러가 났을 때 서버에 로그를 찍는 등 서버로 에러를 보내는 경우가 많기 때문이다. 이에 맞춰 error 컴포넌트로 server 에러 페이지..

pre-rendering Next.js의 모든 페이지는 기본적으로 사전 렌더링을 한다. 👉🏼 더 좋은 퍼포먼스 👉🏼 검색 엔진 최적화 (SEO) pre-rendering의 2가지 렌더링 방식 둘의 차이는 = 언제 html 파일을 생성하는가? 1) 정적 생성 (static generation) - 프로젝트 빌드하는 시점에 html 파일 생성 - 모든 요청에 파일들을 재사용함 - 퍼포먼스 이유로 next.js는 정적 생성을 권고함 - 정적 생성된 페이지들은 CDN에 캐시 됨 - 주요 함수 : getStaticProps, getStaticPath 2) server side rendering (SSR, dynamic rendering) - 매 요청마다 html 생성 - 항상 최신 상태 유지 - 주요 함수 : g..

Github Actions를 사용하기 앞서 세팅해줘야하는 내용은 이전 포스트 참고 2023.09.07 - [🔴 ETC/CICD] - [CI/CD적용기2] Docker + Github Actions으로 배포 자동화 [CI/CD적용기2] Docker + Github Actions으로 배포 자동화 목표 : - Github Actions를 사용하여 CI/CD를 구축한다 - workflow : - build my project -> login to my Docker hub -> build and push my Image - 즉, 빌드한 결과물을 Docker Image로 만들어서 내 Docker Hub으로 push 하는 일련의 작 kkangdda.tistory.com Github Action 코드를 짜다 보니, 프..