최근 쇼핑몰을 공부해보고 싶어서 리액트로 간단하게 쇼핑몰을 만들었는데, 이를 고도화시키고 싶은 욕심이 있었다.
고도화를 하면서 기존에 쇼핑몰을 어떻게 만들었는지 기억이 가물가물하기도 해서 이를 Next.js로 마이그레이션하면서 쇼핑몰에 대해 다시 복기하고 기능을 고도화시키고자 하였다. 또, 리액트로 사이트를 만들고 나서도 그랬듯이 최종적으로 다 만들고 기억이 안 날수도 있기에 이에 대해 공부도 하고 기록으로 남기고자 한다.
최초 프로젝트를 마이그레이션하고자 결심하고 뭔부터 해야할 지 막막해 검색을 하고 사이트[링크]를 참고해 프로젝트를 시작했다.
참고사이트에서는 먼저 Next.js를 CRA로 시작하라고 돼있었지만 처음 시작부터 참고하고 싶어서 새로운 깃헙 프로젝트를 파서 거기에 기존 프로젝트를 기록으로 올리고 이후 삭제한 후에 Next.js를 CRA로 시작했다. CRA로 Next.js를 시작하면서 tailwindCSS 설정도 물어보기에 기존 프로젝트에 적용됐던 SCSS를 걷어내고 싶었는데, 자주 사용했던 Emotion에 경우 CSS-in-JS는 서버사이드렌더링 과정에서 오류가 자주 발생한다고 해서 이번에는 tailwindCSS로 퍼블리싱은 간단하게 작업하기로 했다. 또 Next.js에서 세팅과정에서 tailwindCSS를 물어보는 거 보면 "호환을 고려해서 제작하지 않았을까"라는 신뢰가 생겨서 tailwindCSS로 설정하기로 했다.
세팅 완료 후 우선 기존에 컴포넌트와 페이지를 차례대로 옮기기. 이제부터 난항이 예상된다.