Frontend/Next.js

이번 글에서는 Mac 환경에서 최신버전의 Next.js 프로젝트를 생성하는 방법과 프로젝트 구조에 대해 설명한다. 프로젝트는 TypeScript, App Router, Tailwind CSS를 사용하는 환경으로 구성했다. 1. 프로젝트 생성 Next.js는 npx create-next-app@latest 이라는 명령어로 쉽게 시작할 수 있다. 먼저 작업할 경로로 이동한 다음 터미널에서 명령어를 실행한다. 그럼 아래처럼 프로젝트 세부사항을 커스터마이징 할 수 있는 프롬프트가 나온다. $ npx create-next-app@latest ✔ What is your project named? … nextjs-backoffice ✔ Would you like to use TypeScript? … Yes ✔ Wou..

1. Next.js로 백오피스 만들기를 시작하게 된 배경 최근 생산성이 높은 백오피스 시스템을 만드는 방법을 연구하고 있다. 내가 경험했던 백오피스 환경은 주로 서버 템플릿 엔진으로 만들어져 있었는데 HTML, Vanilla JS, jQuery, Boot Strap을 기반으로 구성되어 있었다. 백오피스 작업은 컴포넌트를 재사용하는 일이 많아서 허겁지겁 다른 메뉴를 참고해서 필요한 컴포넌트를 Copy & Paste를 하고 짜깁기하는 식으로 작업을 했었다. 초반에는 빠르게 개발할 수 있었지만 시간이 지날수록 중복코드가 많아졌고 컴포넌트가 일관되게 동작하지 않는 문제가 발생했다. 결국 재사용성이 떨어지고 유지보수비용이 증가해 생산성이 떨어졌다. 이런 문제를 해결할 방법을 찾던 중 모던 프런트엔드에 대한 관심을..