프로젝트 설정 및 Strapi사용하기 - React, Strapi v4, MySQL을 이용한 메모앱 만들기

React, Strapi v4, MySQL을 이용한 Todolist 만들기 시리즈 

• 2022.05.05 - [프로그래밍 언어/웹 프론트엔드] - 프로젝트 설정 및 Strapi사용하기 - React, Strapi v4, MySQL을 이용한 메모앱 만들기
• 2022.05.06 - [프로그래밍 언어/웹 프론트엔드] - React와 Strapi 연동 - React, Strapi v4, MySQL을 이용한 Todolist 만들기
• 2022.05.07 - [프로그래밍 언어/웹 프론트엔드] - Strapi란? - React, Strapi v4, MySQL을 이용한 Todolist 만들기

여는글

최근, Strapi라는 Headless CMS 툴을 알게 되었습니다. 저는 보통 뱌텀 업(Bottom-Up) 방식의 글을 좋아하지만, 이번에는 탑 다운(Top-Down) 방식의 블로그 글을 적어보려고 합니다. 그럼 바로 시작해 보겠습니다.

Node 설치

Node.js

위 링크에 접속하여 LTS 버전의 node를 설치해 주세요 Strapi는 기본적으로 Node를 사용하며 v14 버전을 가장 권장하지만, 테스트 결과 v16도 충분히 잘 동작합니다.

그리고 dmg 파일이 설치되면 계속 > 동의 > 계속 > 설치 로 node.js를 설치합니다. 다 설치가 완료되면 아래 커맨드를 입력하여 잘 설치가 되었는지 확인하면 됩니다.

node --version

npm --version

프론트엔드 프로젝트 생성 및 실행

기본적으로 프론트엔드는 제목에서도 알다시피 React를 사용합니다. 따라서 React의 기본적인 지식이 있는 분이 보면 더 이해가 쉽지만, 모르셔도 차근차근 따라가다보면 느낌적으로 이해할 수 있도록 모든 코드를 작성했습니다. 만약 모르는 부분이 있다면, 댓글을 달아주시면 알려드리도록 하겠습니다.

프로젝트 생성

npx create-react-app todolist-front

프로젝트 실행

cd todolist-front
npm start

Database 설치

Strapi v4 기준으로 지원하는 DB는 SQLite, PostgreSQL, MySQL입니다. 따라서 입 맛에 맞게 설치하면 됩니다. 다만 이 프로젝트에서는 MySQL을 사용할 예정입니다. 또한, 및 맥 기준 설명이므로 Windows와는 상이 할 수 있습니다. Windows 운영체제를 사용하시는 분은 아래 링크를 통해서 설치해 주시기 바랍니다.

How to install MySQL database server 8.0.19 on Windows 10

MySQL 설치

MySQL Community Downloads 접속

MySQL :: Download MySQL Community Server

각 Mac 운영체제에 맞게 OS를 설정한 후 DMG를 다운로드 합니다.

DMG가 다 다운로드 되었다면 기존 프로그램 설치하듯이 설치하시면 되지만, 중간에 root 비밀번호를 설정하라는 부분이 나옵니다. 비밀번호는 꼭 기억하고 있어야 합니다.

시스템 환경설정에 MySQL 아이콘이 생긴것을 확인할 수 있습니다.

그럼 MySQL 아이콘을 클릭하면

요렇게 Active Instance가 된 상태면 설치가 정상적으로 완료된 것입니다.

만약 Active Instance가 안된 상태면 우측에 Start MySQL Server를 클릭해 주세요

MySQL 접속 및 Database 생성

아래 커맨드를 터미널에서 입력해 줍니다.

cd /usr/local/mysql/bin
./mysql -u root -p

그럼 패스워드를 묻는데, 아까 설정한 root 패스워드를 입력해주면 MySQL에 접속이 되는것을 확인할 수 있습니다.

이제 todolist에서 사용할 데이터베이스를 만들어줍니다.

아래 커맨드를 mysql 콘솔창에서 입력해 줍니다.

CREATE DATABASE todolist;
USE todolist;

그럼 잘 만들어 졌는지 확인해 볼까요?

SHOW DATABASES;

Strapi 프로젝트 생성

새로운 터미널을 열어서 아래 커맨드 입력

yarn create strapi-app todolist-back

그럼 아래 사진과 같이 진행될 것 입니다.

그럼 아래처럼 입력해 주세요, Database name은 꼭 todolist로 해야합니다. todolist-back이 아닙니다. Password는 아까 우리가 설정한 MySQL root 비밀번호로 해주세요

? Choose your installation type Custom (manual settings)
? Choose your default database client mysql
? Database name: todolist
? Host: 127.0.0.1
? Port: 3306
? Username: root
? Password: <mysql root 비밀번호>
? Enable SSL connection: Yes

참고로 아래와 같은 에러가 발생할 수도 있습니다.

Connection test failed: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client

그러면 MySQL에서 아래 커맨드를 실행시켜주세요

ALTER user 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '기존 root 비밀번호';

그런 다음 다시 Strapi 프로젝트를 만들면 정상적으로 동작하는 것을 확인할 수 있습니다.

Strapi 프로젝트 실행

아래 커맨드 입력

cd todolist-back
yarn develop

그럼 프로젝트가 실행되고 아래 사진처럼 웹 페이지가 나오게 됩니다.

해당 페이지는 strapi를 사용하는 super 계정을 만드는 과정입니다. 적절히 입력해 준 후 Let’s Start를 클릭하면 아래와 같이 Strapi에 접속이 가능해 집니다.

Strapi를 이용하여 Todolist 테이블 생성하기

Content-Type Builder 메뉴 클릭

Create new collection type 클릭

Create a collection type이라는 모달이 하나 뜨는데 아래와 같이 입력해 주세요 Display name은 mysql에 테이블이 됩니다. 또한 복수형으로 적성하지 않고 단수형으로 작성해 주셔야 합니다.

Continue를 클릭해 준 후 필드를 만들수 있는 모달이 나오고 아래와 같은 방식으로 진행해주세요

이렇게 하면 데이터 베이스의 테이블과 필드가 생성됩니다. 나머지 필드도 생성해 봅시다.

이렇게 하면 기본적인 todolist의 테이블 구조가 생성이 된것입니다. 그럼 mysql에서 진짜 테이블이 생성되었는지 확인해 볼까요?

DESC todos;

여기서 저희가 생성하지 않은 필드도 존재합니다. 하지만 이건 Strapi에서 자동으로 생성하는 필드 이므로 신경쓰지 않으셔도 됩니다.

Strapi를 이용하여 Todolist Mock 데이터 생성하기

사이드 바에 Content Manager 메뉴를 클릭 후 Collection Types에 todo 클릭 후 create new entry 클릭

그런 다음 아래와 같이 입력 후 Save 버튼을 클릭

그럼 이렇게 데이터가 저장이 됩니다. 이건 생성이 아니라 단순한 저장이라 아래 사진처럼 Draft로 남아 있게 됩니다. 아직 Draft가 무엇인지는 알 필요가 없습니다. 간단히 임시 저장 상태라는것 만 이해해 주면 됩니다. 그럼 이 데이터를 발행하여 상태를 바꿔 봅시다. 첫번째 할 일 임시 데이터를 클릭 후 아래와 같이 게시를 해봅시다.

상태를 보면 상태가 Published로 변경되어 있습니다. 이제 진짜 데이터가 된겁니다. Mysql에서 한번 확인해 볼까요?

select * from todos;

저는 미리 한번 확인해 보아서 위의 처럼 published_at이 Draft상태에서는 null, published 상태에서는 published 날짜가 들어간 것을 확인할 수 있습니다. 자 이렇게 첫번째 Mock 데이터를 생성하였습니다.

Strapi에서 API를 생성해 Mock Data 가져오기

Strapi에서는 보안상 문제로 인해 API를 처음에 만들어 주지 않고 Setting에서 특정한 설정을 통해 만들어 줍니다. 아래 사진과 같이 Settings - Roles - Public 필드 수정 순으로 이동합니다.

그 후 Permissions - Todo - find 순으로 클릭 하면 Bound route to api ::todo.todo 에 API가 나오게 됩니다.

Save를 클릭하면 이제 API를 호출할 수 있는 상태가 된 겁니다. 크롬 브라우저에서 새탭을 열어준 후 아래 URL을 주소창에 입력해 줍니다.  http://localhost:1337/api/todos

그럼 위 처럼 데이터가 나오게 됩니다. 여기서 우리가 아까 Mock데이터를 만들떄 보았던 Published와 Draft를 알 수 있습니다. 한번 더 아래와 같이 데이터를 만들어 볼까요?

이 상태에서 다시 우리가 아까 열었던 텝인 http://localhost:1337/api/todos 탭을 새로고침 하면 변화가 없습니다.

그럼 두번째 할 일 Mock 데이터를 발행 후 다시 새로고침을 해봅시다.

두번째 할 일이 생겼습니다. 이제 좀 차이를 아시겠죠? 즉 데이터를 만든다고 해서 데이터를 즉각적으로 publish를 하면 실수했을 때를 잡아낼 수 없습니다. 일종의 보안장치 이죠. 돌아가서 Strapi는 Permission을 통해 기본적인 CRUD를 만들 수 있습니다. 참 간편합니다. 방금은 리스트를 가져오는 기능을 개발한거구요 Strapi는 기본 기능에서는 3개의 권한을 만들수 있습니다. 권한을 3개 이상 추가하려면 무료 버전이 아닌 돈을 지불하여 늘릴 수 있습니다.

마무리

오늘은 Strapi를 간단하게 다뤄 봤습니다. 다음 시간에는 React와 Strapi의 연동하는 방법에 대해서 알아보도록 하겠습니다. 감사합니다.