Next.js + MySQL로 간단한 TODO list 앱 만들기 - 1

Next.js 공부도 할 겸 간단한 TODO list 앱을 만들며 CRUD 구현을 해보려 한다.

 

# 요구 사항

원하는 앱의 동작은 다음과 같다.

• mysql DB에서 저장된 todo list를 불러와 보여준다.
• 새로운 todo를 추가하거나 기존 todo를 삭제, 수정하여 DB에 저장한다.
• todo list의 변경사항을 실시간으로 화면의 todo list에 보여준다.

 

# 설계

- Frontend

Next.js 13을 사용하는 만큼 server component로 프로젝트를 구성하고 싶었으나, 3번째 요구사항에서 걸려 client component를 사용하기로 하였다.

server component를 사용하는 경우 todo list의 변경이 있을 때 server component를 새로 렌더링 할 수 없고, 새로고침을 하는 경우에도 caching된 server component가 출력되기 때문에 DB의 변경이 곧바로 적용되지 않는다. (두 번째 문제는 revalidating을 통해 해결할 수는 있으나 첫 번째 문제는 해결이 불가해 보인다.)

 

- Backend

server는 Next.js의 기본 내장된 것을 사용하고 route handler 기능을 이용해 request를 처리한다.

DB는 mysql을 사용한다. (로컬 환경에서 모든 것을 처리하고 싶었을 뿐 별 다른 이유는 없다.)

 

# 프로젝트 생성 및 기본 설정

우선, 아래 명령어를 실행하여 Next.js 프로젝트를 생성하고 여러 설정을 진행한다.

npx create-next-app@latest

프로젝트에서 mysql과 typescript를 사용하기 위한 @types/mysql를 설치한다.

npm install mysql
npm install @types/mysql

Top-level 폴더에 .env 파일을 추가하여 기본 환경변수를 선언한다.

NEXT_PUBLIC_URL='http://localhost:3000'
DB_HOST='127.0.0.1'
DB_USER=user_id
DB_PASSWORD=user_psw
DB_SCHEMA=schema_name

'NEXT_PUBLIC'은 client side에서 URL을 사용하기 위한 prefix이다. (기본적으로 환경변수는 server 단에서 사용하기 위한 것으로 prefix가 없으면 client에서는 사용 불가이다.)

 

DB는 mysql로 ( id INT, todo VARCHAR ) 형태의 간단한 table을 생성해 사용하였다.

mysql을 typescript로 사용하기 위해 두 가지 패키지를 설치해 사용하였다.

npm install mysql
npm install @types/mysql