[strapi] 🚀 강력한 headless 프레임워크 strapi 사용해보기 [3/3]

https://bin-repository.tistory.com/157

[nodejs/strapi] 🚀 엔티티를 생성해보자 - 2

 

전 포스팅에서 엔티티를 생성해 보았는데 정말 코드를 단 한자도 치지않고 테이블을 생성하고 어드민 패널에 연동까지 해주었다.

지금부터는 잘 닦여진 도로를 달리기만 하면 된다. 🚗

 

#1. strapi documentation 설치하기

앞서 strapi 는 엔티티 생성만으로 crud 까지 다 만들어준다고 말한 바 있다. (장고도 비슷하지만 몇줄의 코드가 필요함)

어떤 라우터들이 만들어졌는지 소스코드를 통해 확인 할 수도 있지만 strapi swagger 를 이용하면 더 한눈에 알아보기가 쉽다.

 

 swagger 너무 조아

1) documentation 설치하기

yarn strapi install documentation

 

공식문서에 보면 access 제한 등 좀 더 자세히 설명이 되어있으니 참고하면 좋다.

https://strapi.io/documentation/developer-docs/latest/development/plugins/documentation.html#installation

API Documentation - Strapi Developer Documentation

 

서버 재 시작후 어드민 패널에 들어가보면 Documentation 이라는 플러그인이 새로 생겨있는걸 확인할 수 있다.

누르고 나오는 화면에서 open 을 누르면 swagger 페이지로 갈 수 있다.

swagger 브라우저가 실행된 모습

 

우리가 만든 엔티티에 여러 엔드포인트가 만들어져 있는 것을 볼 수 있다.

실제 소스코드에서도 api/post/config/routes.json 을 들어가보면 만들어져 있다.

{
  "routes": [
    {
      "method": "GET",
      "path": "/posts",
      "handler": "post.find",
      "config": {
        "policies": []
      }
    },
    {
      "method": "GET",
      "path": "/posts/count",
      "handler": "post.count",
      "config": {
        "policies": []
      }
    },
    {
      "method": "GET",
      "path": "/posts/:id",
      "handler": "post.findOne",
      "config": {
        "policies": []
      }
    },
    {
      "method": "POST",
      "path": "/posts",
      "handler": "post.create",
      "config": {
        "policies": []
      }
    },
    {
      "method": "PUT",
      "path": "/posts/:id",
      "handler": "post.update",
      "config": {
        "policies": []
      }
    },
    {
      "method": "DELETE",
      "path": "/posts/:id",
      "handler": "post.delete",
      "config": {
        "policies": []
      }
    }
  ]
}

 

또 한가지

GET 메소드를 눌러서 펼쳐보면 알텐데 필터링할 수 있는 파라미터들이 자동으로 생성되어있다!!!!!!!!!

 

공식문서에서 더 자세히 확인할 수 있다.

https://strapi.io/documentation/developer-docs/latest/development/plugins/graphql.html#query-api

GraphQL - Strapi Developer Documentation

 

#2. 유저 post 해보기

열어보면 request body 에 많은 키들이 있는데 다 입력할 필요 없고 지금은 회원가입만 하는거니까

username, email, password 세개만 이용해서 post 를 한다.

 

나는 포스트맨을 사용해서 api 테스트를 해보았다.

(포스트맨을 사용해도 되고 어드민 패널을 사용해도 된다.)

따로 jwt 설정을 하지 않았음에도 알아서 토큰까지 주고.. role 도 설정해주고 정말 감동이다 ㅎㅎ 

request body 에 role 관련을 넣지않으면 strapi 에서 default 로 지정한 role 로 유저 레코드를 생성한다.

 

default role 설정은 어드민 패널 settings > advanced Settings 에 가면 할 수 있다.

user role 추가하는 화면

default role 등 추가 옵션 설정하는 화면

 

#3. 로그인 하기

request body 의 key 는 identifier, password 두개로 이루어져 있는데 
이 identifier 에는 username, email 둘 중 어떤 것을 넣어도 상관없이 로그인 할 수 있다.

 

jwt 토큰은 아래 링크에서 decoding 해 볼수 있다.

https://jwt.io/

JWT.IO

 

#4. 게시판 글 작성해보기

이번에는 어드민 패널로 post 해보도록 하겠다.

 

1) Add New Posts 를 클릭

2) 필드 작성

description 과 subject 에 post 할 내용을 넣고 user를 선택해준다.

이 유저는 엔티티 생성 당시에 Relation 을 연결해줬던 유저이고 작성자의 의미를 갖고있다.

 

save 를 누르면 아래와 같은 로그가 뜨고 제대로 post 되었음을 알 수 있다.

 

한가지 또 특이한 점은 strapi 는 publish 를 지원한다는 것인데 publish 를 눌러주어야만 strapi 에서 기본으로 제공하는 get search 메서드를 사용할 수 있다.

 

- publish 전

- publish 후

 

response 를 보면 자동으로 user 테이블과도 join 되어 모든 정보를 가져온다. 진짜 대박

 

하지만 한 depth 더 들어가서 join 하려면 소스코드에 약간의 로직을 추가해야만 한다.

여기까지는 기본적인 세팅, 실행을 다뤘고 다른 챕터로 포스팅을 하도록 하겠다.

 

어때요? 정말 간편하지 않나요?

사실 이외에도 정말 다양한 기능들이 있는데 각설하고 ~

 

내가 strapi 를 사용하게 된 계기는 정말 당장! 프론트엔드에서 api 를 사용해야만 했던 말도 안되는 일정 때문이었다. 백엔드 개발자인 나는 단 한줄의 코드도 없이 이런 기본적인 엔드포인트를 구성해주는 부분에서 굉장히 거부감을 느끼고 허탈한 느낌이 들었었는데 프론트엔드 개발자들은 무지 좋아했었다 ㅎ

 

그리고 실제로 굉장히 짧은 시간안에 api 를 제공하였고 (물론 매우 많은 우여곡절이 있었지만) 빠른 시일내로 서비스를 런칭할 수 있었다.

한참 개발할 때까지만 해도 장점을 그닥 느끼고 있지 못했었는데

출시 전 유저 테스트와  런칭 후 운영적인 이슈를 빠르게 대응 해야할 때 어드민 패널의 존재가 정말 많은 도움이 됐다.

또한, 내가 직접 데이터를 넣거나 삭제하지 않아도 프론트엔드 개발자들이 직접 해볼 수 있었고 기획자나 운영팀에서도 strapi 어드민 패널을 사용해서 데이터를 조회할 수 있었기 때문에 스타트업에 걸맞는 프레임워크라는 생각이 들었다.

 

하지만 가장 치명적인 단점은 아무래도 strapi 제공하는 구조대로 모든걸 맞춰야 한다는 점이었다. (데이터베이스 설계, 관계, api response 등.... (한 프론트엔드 개발자는 에러코드와 response 구조에 대해서 잦은 불만을 가졌었다..)

 

그렇기 떄문에 정말 간단한 서버 작업이 필요한 서비스에서 사용하면 최고의 효율을 낼 수 있을 것이라 생각된다.