Cafe POS를 개발하면서 프론트엔드 코드는 React.js을 기본으로 해서, SSR 기능이 있는 Next.js와 코드의 안정성을 위한 TypeScript을 함께 사용해 작성하고 있다. 특히 React.js가 여러 컴포넌트를 조합해서 동적으로 UI를 만드는 특징을 갖고있는 만큼 파일이 많아질 수밖에 없어서 여러 파일들을 쉽게 관리하기 위해서 다음과 같이 폴더를 구조화했다. /my-app |-- /src |-- /components |-- /MenuPanel |-- MenuPanel.tsx |-- MenuBlock.tsx |-- Category.tsx |-- /NavBar |-- Clock.tsx |-- NavBar.tsx |-- MenuEditorForm.tsx |-- MenuOrderForm.tsx ..

cafe에서 흔히 사용하는 pos 프로그램을 만들면서, 화면에 현재 시간이 보일 수 있도록 new Date()로 useEffect를 사용해 처음 화면이 rendering되었을 때에만 현재 시간을 가져오게끔 의존성 배열도 [] 빈 배열로 만들어두었다. 다른 코드를 쓰다가 쓴 코드를 확인하려고 브라우저에서 실행해둔 페이지를 확인했는데 뜬 에러를 보고 "아까까지 잘만 되던 게 왜 안 되지?" 하고 당황해서 에러 메시지를 잘 읽어봤다. 이유인 즉슨, SSR를 기본적으로 지원하는 Next.js과, CSR을 기본적으로 지원하는 React.js 간의 차이 때문에 충돌이 발생했던 것..! Next.js와 React.js를 함께 쓰게 되면, 처음에는 Next.js로 SSR 된 HTML을 클라이언트로 가져와서, 그 다음부..