셀렉트 뉴스레터 2025년 12월

새로운 어드민 컴포넌트 추가 및 기능 개선 안내

이번 업데이트에서는 기존 스펙을 유지하면서도, 화면을 구성하는 방식을 더 다양하게 선택할 수 있도록 새로운 방식의 컴포넌트들을 추가했습니다.

사용하실 때 참고하실 수 있도록 간단한 안내도 함께 제공합니다.


새로운 컴포넌트 추가

데이터나 API가 없이도 화면을 완성하도록 방식을 개선했어요. 신규 컴포넌트는 화면을 구성하는 단위를 명확하게 구분합니다.

추가된 항목:

  • 테이블 기반 UI
  • 정보 표시 블록
  • 탭 기반 구분
  • 모달 기반 화면 구성
  • 검색 입력 블록
  • 파라미터 전달 블록

관련 내용은 아래 글에서 확인하실 수 있습니다.

어드민 컴포넌트 개편
안녕하세요 셀렉트팀 이진혁입니다. 셀렉트어드민은 YAML 입력으로 다양한 화면을 만들어주는 제품으로 다양한 팀, 회사의 어드민과 내부 운영툴, 파트너센터, 대시보드 역할을 하고 있습니다. 초기에는 SQL 쿼리 실행 결과, API 실행 결과를 시각화하는 방향으로 고안되어 모든 스펙에 type: http type: query 가 필요한 방식을 이어왔습니다. 그러나 다양한 화면구성, 정교한 어드민 구현을 하다보면 많은

가능/불가능한 조합은 하단에서 간단히 안내합니다.


로컬 API 사용 지원: fetchFn

드디어 셀렉트 클라우드를 거치지 않고 사내망, 로컬환경 API를 바로 이용합니다.

기존 방식은 API 연동을 위해 클라우드의 IP를 열거나 별도 인증키를 관리하는 불편함이 있어 이를 개선합니다.

ENV 액세스 토큰보다 안전한 방식의 세션 인증키를 지원합니다. API 서버는 별도의 키발급, 키관리 과정이 없어도 안전하게 제공 가능합니다.

JS 코드 실행 가능: 화면을 빠르게 만들때 mock json을 return하도록 구성 가능합니다.

이를 통해 화면을 먼저 구성하고 API를 나중에 붙이는 방식도 자연스럽게 지원합니다.


신규 컴포넌트 조합 가능한 구조 안내

신규 컴포넌트는 fetchFn을 핵심 데이터 흐름으로 사용합니다. 같은 페이지에서 기존 컴포넌트와 함께 사용할 수는 있으나 내부 옵션을 서로 섞어 쓰는 형태는 지원하지 않습니다.

가능

  • 새로운 컴포넌트끼리 조합
  • fetchFn을 중심으로 데이터 흐름 공유
  • 기존 컴포넌트와 같은 페이지에 존재하는 것 자체는 가능

불가능

  • 새로운 컴포넌트 값(type: search)을 기존 컴포넌트(type: query)에 사용
  • 기존 type: query 컴포넌트가 제공하는 동작(openModal 등)을 새로운 컴포넌트에 적용

조합 패턴은 Recipes 형태로 정리해 제공합니다.


YAML 하이라이팅 추가

SQL 쿼리와 Fn 안 JavaScript 코드를 더 알아보기 쉽게 하이라이팅을 추가했습니다.


기타 개선사항

아래 기능들은 모두 기존 컴포넌트에서 이어진 개선 작업입니다.


마무리

이번 업데이트는 기존 스펙을 바꾸거나 대체하는 것이 아니라, 선택지를 넓히기 위한 새로운 컴포넌트 추가와 사용성 개선 작업에 초점을 맞추었습니다.

앞으로도 새로운 조합 방식이나 실전 예제를 제공​더 쉽게 화면을 구성할 수 있도록 지원할 예정입니다.

도움이 필요하시다면 셀렉트 팀에게 문의주세요.

감사합니다.
셀렉트 팀 드림