메모 앱에 회원가입, 로그인, 로그아웃, 메모 저장 기능 더하기

v0에 접속하여 로그인하고 다음과 같이 요청해서 간단히 메모 앱을 만듭니다.

밝은 분위기의 메모 앱 화면을 만들어줘.

 

 

만든 메모 앱 화면 오른쪽 위의 · · ·  버튼에 있는 [Download ZIP] 버튼을 눌러 다운로드 한 후 my-awesome-memoapp 폴더를 만든 후 폴더에 압축을 풉니다.

 

이제 커서가 작업할 수 있도록 my-awesome-memoapp 폴더를 엽니다.

작업할 프로젝트 폴더가 가장 맨 위에 있는 상태에서 새 채팅창을 열고 다음과 같이 요청합니다.

현재 프로젝트에 데이터베이스를 추가하고 회원가입, 로그인, 로그아웃을 구현해줘.

 

커서는 아마 프리즈마라는 도구를 설치하여 데이터베이스와 프로젝트를 연결하는 설정을 하겠다고 할 겁니다. [Run]을 눌러 실행합니다.

 

프리즈마는 데이터베이스와 프로젝트를 연결해주는 중간 매개체 역할을 하는 ORM이라는 도구입니다. 

 

이후 등장하는 명령어에 대해서 [Run]을 누르다 보면 어느새 회원가입, 로그인, 로그아웃을 구현하는 단계까지 도달합니다. 프리즈마는 Next.js 프로젝트에 어울리는 ORM이므로 크게 문제 없이 작업이 진행될 겁니다. 프리즈마는 스키마 설정 단계에서 schema.prisma라는 파일을 생성하는데, 이 파일은 데이터베이스에 어떤 정보를 저장할지 미리 설계하는 도면 같은 역할을 합니다.

 

계속해서 [Run]을 눌러 작업을 진행하고, 필요한 파일이 나타날 때는 [V]를 눌러 작성합니다. 그렇게 진행하다 보면 모든 기능이 자연스럽게 구현되며, 마지막에 커서가 npm run dev를 실행해서 애플리케이션을 실행합니다.

 

Next.js 서버로 실행한 후 오류가 발생하면 오류 메시지를 복사해 커서에 그대로 붙여넣은 다음 Enter를 누르면 커서가 알아서 오류 원인을 분석하고 해결해줍니다.

 

오류를 해결했다면 이제 터미널에 실행 중인 웹 서버를 Ctrl + C를 눌러 강제 종료합니다. 그런 다음 터미널에서 다시 npm run dev를 입력해서 서버를 재시작하세요. 커서는 자동으로 서버를 실행해주기도 하지만 기존에 이미 실행 중인 서버의 상태를 고려하지 못합니다. 때문에 중복해서 같은 프로젝트를 실행하는 오류가 발생할 수 있어서 이 과정은 직접 수동으로 처리해야 합니다.

 

이제 웹 브라우저에서 localhost:3000에 접속합니다. 앞서 발생했던 오류 메시지는 사라졌을 것이고, [회원가입] 버튼을 눌러 회원가입을 진행하고, [로그인]을 눌러서 로그인도 해보세요.

 

이제 메모 기능만 추가하면 됩니다. 커서에게 '회원'이라는 개념이 생겼으므로 요청할 때 '로그인한 사용자만 사용할 수 있도록'이라는 조건을 붙여야 합니다. 또한, 커서가 자동으로 웹 서버를 실행하지 않도록 '개발한 후에는 서버를 실행하지 말라'는 요청도 함께 하겠습니다.

로그인한 사용자가 사용할 수 있는 메모 작성, 메모 수정, 메모 삭제, 메모 검색 기능을 추가해줘, 개발 후 서버는 실행하지마.

 

모든 개발이 완료되면 화면 위에 보이는 [Keep All]을 눌러서 만들어진 내용을 모두 허용합니다. 그러면 브라우저 화면이 자동으로 새로고침되며, localhost:3000에 접속한 상태에서 개발한 화면을 확인할 수 있습니다. 하나씩 기능을 눌러보면 꽤 완성도 높은 앱이 만들어졌음을 확인할 수 있습니다.

 

로그아웃 후 다시 로그인해도 기록한 메모가 그대로 보일 것입니다. 여러분이 만든 회원 기능과 메모 기능이 데이터베이스에 연결되어 잘 동작하고 있다는 뜻입니다.