어드민 개발의 기본 기능은 무엇일까요? 저는 데이터 목록 보기, 데이터 생성하기, 자세히 보면서 수정하기, 삭제하기, 이 4가지 기능을 꼽을 것 같습니다. 오늘 블로그 글에서는 가장 많이 사용되는 데이터베이스중 하나인 PostgreSQL로 이 기능을 갖춘 관리자 페이지를 제작해 보겠습니다.
위에 언급한 기능은 잘 아시겠지만 대부분 소프트웨어의 기본 기능인 CRUD 라고도 불리는 기능이기도 합니다. 어드민을 만들 때 주로 사용하는 데이터베이스나 REST API에서도 제공하는 기능인데요. 홉스에 데이터베이스를 바로 연결해서 어드민을 만들면 프론트엔드 프로그래머의 인력 비용 없이 데이터 관리 페이지를 개발할 수 있습니다.
PostgreSQL 서버 데이터 소스를 연결하여 CRUD 기능을 갖춘 어드민 페이지를 만들어보겠습니다.
예시 데이터 소개
샴푸, 비누, 칫솔 등의 생활 용품을 파는 서비스를 예로 어드민을 구성해 보도록 하겠습니다. 가장 중요한 데이터인 고객의 정보를 관리 할 수 있는 어드민 페이지들을 구성해 보겠습니다. 아레 데이터들은 홉스에서 제공해 드리는 샘플 데이터로 데모를 시작하시면 사용해 보실 수 있는 데이터이기도 합니다.
오늘 사용할 데이터의 구조는 아래와 같습니다.
고객 테이블
| 컬럼 이름 | 설명 | 비고 |
|---|---|---|
| id | 고객의 고유 ID | 테이블의 기본키 |
| name | 고객의 이름 | |
| 고객의 이메일 | ||
| phone_number | 고객의 핸드폰 번호 |
상품 테이블
| 컬럼 이름 | 설명 | 비고 |
|---|---|---|
| id | 상품의 고유 ID | 테이블의 기본키 |
| name | 상품의 이름 | |
| price | 상품의 가격 | |
| category | 상품의 종류 | |
| description | 상품의 설명 | HTML로 저장됨 |
주문 테이블
| 컬럼 이름 | 설명 | 비고 |
|---|---|---|
| id | 주문의 고유 ID | 테이블의 기본키 |
| customer_id | 주문을 한 고객의 고유키 | 고객 테이블과 외래키로 연결됨 |
| product_id | 주문한 상품 ID | 주문 테이블과 외래키로 연결됨 |
| quantity | 주문 수량 | |
| delivered_date | 배달 날짜 | 배달되지 않은 주문은 null로 비어있음 |
| order_date | 주문 날짜 |
데이터 목록 보기
고객 데이터를 위주로 보기 위해서 고객 목록을 먼저 만들어보겠습니다. 데이터 소스는 PostgreSQL 서버를 연결해 둔 "온보딩 샘플 데이터베이스"를 선택하겠습니다. SQL을 작성 후 쿼리를 실행하면 쿼리의 결과를 바로 확인할 수 있습니다.
데이터를 목록으로 보기 위해선 테이블 컴포넌트를 추가하고 쿼리의 결과값을 데이터에 적어주면 됩니다. listCustomers라는
쿼리 이름으로 변경했으니 listCustomers.data.data 코드를 입력한 후 컬럼 재설정을 누르면 바로 데이터가 출력됩니다.
쿼리의 결괏값을 가지고 올 수 있는 속성 이름은 .data인데, 관계형 데이터베이스의 데이터 소스는 { data: object[] } 타입의 값을 반환하므로
listCustomers.data.data로 결괏값을 가지고 옵니다.
데이터 테이블을 사용하면 페이징, 필터링, 정렬 기능을 바로 사용할 수 있습니다. 테이블 종류를 데이터 테이블로 변경합니다. 그리고 컬럼 설정을 통해 바로 컬럼의 이름을 변경할 수 있습니다. 컬럼 제목 옆 설정 버튼을 클릭한 후 컬럼 세부 설정에서 컬러 이름을 설정합니다.
데이터를 1개씩 상세하게 보고 수정할 수 있도록 테이블에서 바로 버튼을 추가합니다. 모달을 열어 데이터를 보고 싶기 때문에 모달을 열도록 설정했습니다.
데이터 수정하기
모달에서는 [텍스트 필드][componet-text-field]를 통해 테이블에서 선택한 데이터를 표시합니다. table1.selectedRow 속성을 사용하면 테이블에서
선택된 행의 데이터를 가지고 올 수 있습니다.
데이터 수정을 위해 쿼리를 작성합니다. 템플릿 기능을 사용하면 SQL에서도 컴포넌트, 쿼리 값을 바로 사용할 수 있습니다. SQL UPDATE문을 통해 고객의
데이터를 수정할 수 있습니다.
이제 만들어둔 쿼리를 버튼에 연결하면 수정 기능은 모두 완성입니다.
데이터 삭제하기
데이터 삭제 버튼은 테이블에 직접 추가해서 바로 사용할 수 있도록 해보겠습니다. 삭제는 데이터를 삭제하는 민감한 액션이기 때문에
스위치를 켜야 삭제할 수 있도록 만들어보겠습니다. 테이블 바로 윗줄에 deletionEnabled라는 이름의 스위치
컴포넌트를 추가했습니다.
그리고 확인 모달 팝업을 활성화하고 컴포넌트 비활성화에 !deletionEnabled.checked를 입력해 스위치가 켜져 있을 때만 삭제 버튼이 활성화 되도록 합니다.
그리고 테이블 버튼의 테마를 neutral, filled로 설정하여 삭제 버튼이 상세 보기 버튼과 확연하게 구분될 수 있도록 만들었습니다.
템플릿을 이용해 쿼리를 작성합니다.
삭제된 데이터가 테이블에서 보이지 않도록 테이블에 연결된 쿼리를 다시 실행하도록 만듭니다. 이벤트 핸들러에서 실행 성공 시 "고객 목록" 쿼리를 실행하면 고객 데이터가 삭제된 후 테이블에 연결된 "고객 목록" 쿼리가 실행되며 삭제된 데이터가 자연스럽게 없어집니다.
데이터 추가하기
데이터 추가하는 버튼을 역시나 테이블 위에 만들고 다단으로 배치하겠습니다. 하위 페이지로 고객을 추가할 수 있는 페이지를 만들고 버튼을 통해 고객 추가 페이지로 이동하도록 설정했습니다.
데이터 수정 페이지와 비슷하게 텍스트 필드로 값을 입력받을 수 있도록 만들었습니다. 플레이스홀더에 예시 데이터를 입력해 사용자가 알맞은 데이터를 쉽게 알 수 있도록 했습니다.
역시나 템플릿을 이용해서 INSERT 문을 구현한 쿼리를 작성하고 버튼에 연결하면 추가 페이지도 구현이 완료됩니다.
데이터를 추가했다면 바로 목록 쿼리로 돌아가도록 하는 것이 자연스럽습니다. 고객 생성용 쿼리의 이벤트 핸들러에서 실행 성공 시 페이지 이동하도록 설정합니다.
마무리
간단하고 빠르게 만든 PostgreSQL 어드민 페이지로도 많은 일을 수행할 수 있습니다. 신사업을 위해 빠른 어드민 개발이 필요하거나 이미 유지보수하기 어려운 어드민의 기능을 대체해야 한다면 지금 바로 홉스로 어드민을 만들어야 할 때입니다.
홉스로 어드민을 개발하면 낭비되고 있는 인력 비용을 10배까지 절약할 수 있습니다. 프론트엔드 프로그래머의 인력 비용을 아끼는 데 관심이 있으시다면 홉스 팀으로 언제든지 연락주세요.
정보 설계부터 화면 구성까지 어드민에 관한 고민이라면 무엇이든 이야기 나누고 싶습니다.
이 링크에서 일정을 잡아주세요.