에디터 토큰 발급하기

안녕하세요.

셀렉트 클라우드를 이용하면서 한가지 아쉬웠던 점은
로컬 환경에서 나의 편집기(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.