부담없이 간단한 어드민 만들기 - Serverless

LEE JINHYUK -

안녕하세요. 셀렉트 팀의 이진혁입니다.

제 주변에도, 커뮤니티를 지켜보아도 세상에 많은 분들이 멋진 프로덕트를 만들고 계신데요. 직접 개발하거나 여러가지 노코드툴을 활용하여 웹이나 앱 형태의 프로덕트를 빠르게 만드는 모습이 너무나 대단하게 느껴집니다.

모든 프로덕트와 서비스는 .. 처음에는 간단하게 시작하지만 사용자가 늘어나고 기능이 늘어나며 관리할 포인트가 점점 늘어나게 된다고 이야기를 종종 듣습니다.

조회나 수정 업무가 있을때마다 1인 개발자 프로그래머분이 매번 데이터베이스 직접 들어가서 처리해도 무리는 없지만 하루하루 반복되고 실수도 생기다보면 여럿이 다같이 쓸 안전하고 빠른 관리자 페이지로 만들어야겠다 생각이 들기 시작합니다.

현실적으로는 바쁘고 시간이 없거나 메인 프로덕트도 아닌데 어드민, 운영툴에 별도 서버를 띄우고 프론트(webpack, vite) 프로젝트 셋팅하다보면 이게 맞나 싶은 생각이 여러번 들게 되더라구요.

UI 어드민 템플릿을 가져와도 배포나 셋업 시간은 똑같이 들고, 메인 프로덕트가 웹이면 페이지 어딘가에 끼워넣을 수 있지만, 웹이 아닌 경우에는 아예 새로운 스택을 만들어야하니 작업 범위가 갑자기 늘어나는 고민스러운 상황이 생깁니다.

오늘 글에서 소개드리는 방법이 도움이 되리라 믿습니다.

오늘의 주제

  • 배포 없이 테이블 조회 페이지 만들기
  • 클릭해서 수정 만들기
  • 로그 남기기
  • 우리 회사 컬러 넣고, 도메인 주소 발급받기

완성 화면 (전체코드는 맨 아래에 있습니다)

먼저 서비스에 로그인합니다. https://app.selectfromuser.com/
(5인까지는 무료. 구글이나 네이버에 셀렉트 어드민 검색)

새로운 팀을 만듭니다. 저는 배너 수정으로 해보겠습니다.

그러면 팀이 만들어지고 비어있는 어드민이 바로 보입니다.
[관리자]를 클릭하여 수정해봅니다.

관리자에 들어가면 데이터 연결 안내가 뜨는데요.

셀렉트 방식이 데이터베이스, API를 한번 연결해 놓으면 그 후로 편리하게 끌어다 쓸 수 있도록 해주고 있습니다.

로컬 데이터베이스나 API의 경우 ngrok.io 를 활용하여도 됩니다.

저는 개인 프로젝트에 쓰는 AWS RDS MySQL를 연결해보도록 하겠습니다.
(IP는 이미 열어두었습니다)

Form/YAML 둘 중에 편리한 방식으로 연결 정보를 입력합니다.
설정 값 그대로 복사붙여넣기 가능합니다.

 

연결이 잘 되는지 테스트를 해봅니다.

그리고 저장합니다.

연결을 하면 여러가지 안내가 뜨는데요. 저는 새로 만들기 위해 창을 닫았습니다.

편집 화면은 복잡해보이지만 이렇게 구성되어있습니다.

  • 왼쪽에 파일목록
  • 가운데 설정, 코드 에디터 (vscode)
  • 가운데 아래에 실행 로그
  • 오른쪽에 미리보기 (저장시 새로고침)
  • 오른쪽 아래에 채팅 문의

원하는 메뉴와 페이지 만들기

새로운 파일을 만듭니다.

이름을 입력하고 엔터로 저장을 합니다.

기본 추가되어있는 메뉴 이름을 바꿉니다.

그리고 쿼리를 입력하면 바로 오른쪽에 내용이 보입니다.

테이블 항목 이름을 바꾸거나 원하는 표기로 바꿉니다.
저는 날짜를 오전오후 표기로 바꾸고 수정일을 생성일 아래에 표시했습니다.
label: 생성일

이제 수정을 추가해보겠습니다.

"배너 이미지 url을 제가 직접 바꿀 수 있나요?" 문제를 해결하기 위해 이 부분을 적습니다. updateOptions 설정을 적으면 셀렉트가 필요한 UI, API를 만들어서 채워줍니다.

image_url 아래에 설정을 적습니다. 위와 동일하게 query, mysql, sql 조합 입니다.

그러면 해당 부분이 이렇게 클릭 가능한 형태로 변합니다.

클릭하면 원하는 부분을 수정하도록 만들고 싶었습니다.
저장시 저장

toast: 수정완료 코드를 추가합니다.

게시여부도 수정 가능하게 합니다. dropdown 을 이용하려다가 선택지가 적어서 radio 로 적용했습니다.

게시예약 부분은 published_at 시점 이후만 조회하는 방식으로 처리 중이어서
해당 값을 바꾸는 것으로 팀원이 게시일 예약 가능하도록 구현했습니다.

이렇게 살짝 복잡한 부분도 원하는대로 쿼리를 넣었습니다.

추후 담당자가 원하는 게시일로 계속 추가 예정 (내일오전, 다음주 월요일 등등...)

결과물 확인

이제 [화면 열기] 버튼을 누르거나 미리보기 하단에 주소로 결과물 페이지에 접속해봅니다.

검색이 필요해보여서 이것도 추가합니다. searchOptions 를 넣으면 알아서 해줍니다.

안전하게 해당 내역만 보면서 수정합니다.

모달(modal), 팝업, 사이드바 등등 여러가지 UI를 제공하지만 이 글에서는 간단하게 클릭하여 수정으로 해결했습니다. (템플릿 참고)

이제 원하는 기능은 끝냈고 다같이 쓰기전에 마무리 작업을 해보겠습니다.

Tip!

업데이트나 중요한 쿼리가 실수로 날아갈까봐 확인이 필요하면 sqlConfirm: true 를 이용합니다. 원본 쿼리 확인 후 실행하도록 안전장치가 있어요.

로그

배너 수정은 과거내용도 저장해야해서 로그를 남기도록 합니다.

log: 배너관리_이미지수정 id={{id}} before={{image_url}}

로그를 보기 위해서는 모니터링-조회 권한이 필요합니다.
모니터링 탭 클릭하고, 조회 체크

그러면 모니터링 > 사용자 활동 메뉴에서 위에서 적은 로그를 볼 수 있습니다.

어드민 주소 만들기

더 짧고 기억하기 쉬운, 공유하기 좋은 URL 주소로 바꾸도록 합니다.

https://4de436e3-f262-4857-a099-2775c8f4fdae.selectfromuser.com 이 주소에서 위 주소로 변경

이제 접속하면 아예 분리된 형태로 어드민 화면이 제공됩니다. (셀렉트 팀 선택이나 다른 부분이 뜨지 않아요)

이제 우리 팀원들을 초대합니다.

전체 코드

title: APRIL 서비스 어드민

layout:
  style:
    backgroundColor: "#629F6E !important"
    
menus:
- path: banners
  name: 🎉 배너 관리
  placement: menu-only
  
pages:
- path: banners
  blocks:
  - type: query
    resource: mysql
    sql: > 
      SELECT * FROM AppBannerList
    searchOptions: 
      enabled: true
      placeholder: 검색
    columns:
      created_at:
        label: 생성일(수정일)
        formatFn: datetimeA
        subtitle: updated_at
      updated_at:
        hidden: true
      image_url:
        label: 이미지URL
        updateOptions:
          type: query
          resource: mysql
          sql: > 
            UPDATE AppBannerList 
            SET image_url = :value
            WHERE id = :id
          log: 배너관리_이미지수정 id={{id}} before={{image_url}}
          toast: 수정완료
      active:
        label: 게시여부
        radio:
          - Y
          - N
        updateOptions:
          type: query
          resource: mysql
          sql: > 
            UPDATE AppBannerList 
            SET active = :value
            WHERE id = :id
          toast: 수정완료
      published_at:
        label: 게시예약
        dropdown:
          - 미노출
          - 즉시노출
          - 내일노출
        updateOptions:
          type: query
          resource: mysql
          sql: > 
            UPDATE AppBannerList 
            SET published_at = :value
            WHERE id = :id
          params:
            - key: value
              raw:
                미노출: NULL
                즉시노출: NOW()
                내일노출: NOW() + INTERVAL 1 DAY

마무리

  • 배포없이 이미 있는 DB, API만 연결하면 어드민 프론트랑 백엔드를 알아서 만들어 준다.
  • 설정이 생소하지만 샘플을 보면서 복사 붙여넣기 하면 빠르게 익힐 수 있다.
  • 당장 필요한 어드민의 80% 정도는 (조회, 수정, 권한, 로그) 직접 만들 필요 없다.

저 또한 디비 클라이언트(Sequel Ace, DBeaver, DataGrip, MySQL Workbench, Postico)나 포스트맨(Postman) 대신에 그때그때 필요한 조회/수정 페이지를 이 곳에 채우고 있습니다.
(예시 화면)
(템플릿 화면)

감사합니다.

(공식문서) https://docs.selectfromuser.com/
(홈페이지) https://www.selectfromuser.com/
*슬랙 커뮤니티에서도 질문과 답변 가능합니다.