📃구현 CheckList!!
- 홈페이지
- 브랜드 페이지
- 상품 리스트 페이지
- 상품 상세 페이지
- 고객 센터 페이지
| 페이지 이동 | 상품 옵션 선택 |
|---|---|
 |  |
| 사이드바/ 고객센터 페이지 | |
 |
📖회고 내용
SSR, CSR??
이번 과제는 페이지가 많은 것이 특징이었고, 수업에서 NextJS를 배웠기 때문에 NextJS의 가장 큰 특징인 SSR, SSG, CSR방식이 모두 사용해 보고 싶었다. 이전 프로젝트에서는 Next를 활용했지만 CSR위주였기에 SSR, SSG는 익숙하지 않았다. 그래서 이번 과제에 SSR, SSG의 도입이 필요한가를 고민하게 됐다.
첫 번째로는 실제 프로덕트에서 어떻게 서비스하는지 분석했다. 기준은 처음에는 페이지 소스 보기도 하고 알아보기 위해 검색도 했지만 찾는데, 어려움을 겪었다. 현재 페이지에서 다른 페이지로 넘어갈 때 시각적으로 어떻게 렌더링 되는지 확인했다. 그 결과 다른 페이지들은 CSR로 생각이 들었고, 상품 상세 페이지로 넘어갈 때 SSR방식이라고 판단됐다.
두 번째는 API가 어떻게 만들어졌는지 확인 후 렌더링 방식을 정했다. 상품 상세 페이지를 제외한 나머지 페이지들은 기존 페이지에서 API를 호출하면 props를 통해 넘겨주면 다음 페이지에선 이상 없이 잘 출력된다. 하지만 상품 상세 페이지는 이전 페이지에서 정보가 없으므로 따로 API를 호출해야 했다.
첫 번째 두 번째를 고민하고 팀원들과 의견을 조율하여 SSR은 상품 상세 페이지만 하기로 정하게 됐다.
E2E Test with Cypress
프론트엔드 개발하면서 항상 테스트하는 방법은 console.log, element 확인하기가 전부였다. 이는 정확한 방법이지만 비효율적인 테스트 방법이라 생각했다. 그래서 프론트엔드에서 테스트할 수 있는 도구(jest, cypress와 같은)를 사용해 보고 싶었다.
이번 과제에서 cypress를 대단하게 다룬 것은 아니지만, 테스트 화면이 보이는 점과 테스트 코드를 짜는데 생각보다 간편하다고 느꼈다. 처음으로 테스트 코드를 짜서 그런지 몰라도 cypress와 금세 친해질 거 같다는 느낌을 받았다. 확실히 테스트하고 배포를 하니 나의 프로덕트에 신뢰도가 더욱 높아졌다.(테스트케이스를 잘 작성 시..ㅎㅎ)
앞으로도 테스트를 통한 개발과 테스트코드를 어떻게 작성할 것인지 고민하게 되는 좋은 경험이었다.
🌝느낀점
이번 과제를 통해 나의 기술 부채를 해결해보는 경험을 하게 되어 매우 만족스럽다. Next를 활용하여 어떻게 렌더링 할 것인가를 고민하고 실천해 보기와 테스트 도구를 사용해 보기 항상 기술 부채에 넣어두었는데 이해하며 사용했다.
개발자로서 새로운 기술을 배우는 건 언제나 재밌는 흥미로운 일이다. 이번 계기로 프론트엔드에서도 SSR, Test를 할 수 있다고 깨닫게 된 경험이다.