에디터 토큰 발급하기

안녕하세요.

셀렉트 클라우드를 이용하면서 한가지 아쉬웠던 점은
로컬 환경에서 나의 편집기(vim, emacs, vscode등)을 이용할 수 없다는 점 입니다.

폴더, 이름정렬, 여러개 복사붙여넣기, 잠깐 묻어두기(비활성화)등 작업에 불편함이 있어서 해결하고자 여러가지 방법을 팀에서 고민했습니다.

작년에 출시한 셀렉트 설치형 CLI가 있지만, 내부 제작팀에서는 이미 클라우드를 잘 쓰고 있기에 편집 용이성 때문에 꼭 설치형으로 갈 이유는 없었던 것 같습니다. 당연하게도 클라우드가 비용, 확장성, 간편함이 컸죠.

Git, VSCode, Vercel(deployment, rollback)등 여러 컨셉을 다시 스터디하고 셀렉트 클라우드에서도 이용가능하도록 준비를 했습니다.

내 컴퓨터에서 편집하기

편집 화면 맨 아래에 메뉴를 클릭합니다.

'새로운 에디터 토큰 만들기' 클릭

토큰을 발급해주세요.

이제 에디터 토큰으로 로컬에서 편집 가능합니다.

이제 CLI를 설치합니다.

npm i -g @selectfromuser/cli

자유로운 방법으로 설치 (로컬, yarn 모두 가능)

로그인 합니다. 아까 발급한 토큰을 입력해주세요.

slt login

CI/CD에서 이용하기위해 slt login -t <TOKEN> 형식으로도 로그인 가능합니다.

로그인 되었습니다.

해당 폴더 .select/project.json에 토큰이 저장됩니다.

편집을 시작합니다.

slt dev

폴더가 비어있는 경우 샘플 추가를 선택할수있습니다. (slt init 으로도 가능)
샘플을 추가한 모습

사용법

모든 YML 파일은 순서대로 로드됩니다.

  • 셀렉트 클라우드와 동일한 스펙을 가지고 있습니다.
  • 폴더, 파일 이름 순서대로 메뉴와 페이지가 정렬됩니다.
title, layout, menus를 한 파일에 넣거나 분리하여도 됩니다.

위의 결과물은 아래와 같이 표시 됩니다.

/pages 폴더의 파일들은 directory-based routing 적용됩니다.
폴더-파일이름으로 path가 자동으로 만들어집니다.
파일에 바로 page block을 입력합니다. (type: query로 시작)

마치며

  • 개발용 데이터베이스를 셀렉트 클라우드에 연결하면 실제로 SQL Query, API 이용 가능합니다.
  • 프로덕션/운영/개발/테스트 환경 구분을 지원합니다.
  • 배포/롤백에 대해서 다음 글로 내용을 이어가겠습니다.
샘플로 완성된 화면

@selectfromuser/cli
Local editor for selectfromuser.com. Latest version: 1.0.7, last published: 27 minutes ago. Start using @selectfromuser/cli in your project by running `npm i @selectfromuser/cli`. There are no other projects in the npm registry using @selectfromuser/cli.
GitHub - selectfromusercom/cli
Contribute to selectfromusercom/cli development by creating an account on GitHub.

Read more

LLM 시대, 로우코드는 어떤 의미가 있을까?

LLM 시대, 로우코드는 어떤 의미가 있을까?

ChatGPT 3.5 출시 이후, Copilot, Cursor 같은 AI 코딩 도구가 개발자 손에 들어오면서 많은 질문이 생겼습니다. 그중 생각해볼만한 질문은 바로 이것입니다. “이제 운영툴 같은 건 다 AI가 대신 짜줄 수 없을까?” 초기 boilerplate 세팅, 버튼 하나 추가, 컬럼 노출 조건 변경 같은 요청들을 진행하면 LLM이 금방 코드로 만들어줄 수

By Hakbeom Kim
우리도 이렇게 시작했어요 – 실사용 영상 보러가기

우리도 이렇게 시작했어요 – 실사용 영상 보러가기

안녕하세요. 셀렉트 어드민 사용 동영상을 공유합니다. Listing 데이터 조회 페이지를 만드는 모습입니다. Data Entry 데이터 수정 페이지를 만드는 모습입니다. API Integration 해외 API를 호출하여 모달(팝업)창을 띄우는 모습입니다. Visualize 데이터베이스 쿼리(SQL)로 바로 차트, 대시보드를 구성합니다. 셀렉트 어드민 로그인 후 템플릿에서 예제 코드를 확인 가능합니다. 감사합니다.

By 셀렉트 팀