'panel' 태그의 글 목록

panel

백엔드 프레임워크 - KeystoneJS 2023.07.13 1

백엔드 프레임워크 - KeystoneJS

2023. 7. 13. 00:22

받아보는 메일링 리스트를 통해 알게된 재미있는 Framework가 있어서 한 번 다뤄보려 한다.

나온지 꽤 된 것임에도 잘 몰랐는데,

'노마드 코더'의 극찬 영상으로 인해 호기심을 확 끌었다.

https://www.youtube.com/watch?v=DlyoFFOcPCg

이 framework의 분류를 정확히 뭐라해야할지 애매한데, 구글링을 통해 확인한 여러 별칭은 다음과 같다.

- CMS

- App Framework

- App Backend

- Backend Framework

- Admin Panel

- Library

음... 아직 명확한 naming은 안되어있는 분류인 것이다.

하지만, 뭘 말하고자 하는 것인지는 왠지 알 수 있을 것만 같은 느낌적인 느낌!?

일단, 이번에 다뤄보고자 하는 것은 "Keystone JS"라는 아이이다.

재빨리 설치하고 웹을 띄워보자!!!

[ Environment ]

일단 개발 환경은 다음과 같다.

- 운영 체제: Ubuntu 20.04 LTS

❯ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description: Ubuntu 20.04.6 LTS
Release: 20.04
Codename: focal

[ Node ]

이 아이도 Node.JS 기반이고 npm을 이용하기 때문에 node부터 설치를 해야 한다.

버전 호환성으로 인한 어려움이 종종 발생하기 때문에

우리는 node의 다양한 버전을 다룰 수 있는 방법이 필요하다!

그래서, 나의 선택은 nvm !!!

아래 링크를 통해 nvm, node, npm 설치를 하자 !!!

- https://www.whatwant.com/entry/npm

❯ git clone https://github.com/nvm-sh/nvm.git ~/.nvm
'/home/chani22/.nvm'에 복제합니다...
remote: Enumerating objects: 9051, done.
remote: Counting objects: 100% (1830/1830), done.
remote: Compressing objects: 100% (111/111), done.
remote: Total 9051 (delta 1764), reused 1730 (delta 1719), pack-reused 7221
오브젝트를 받는 중: 100% (9051/9051), 3.28 MiB | 10.09 MiB/s, 완료.
델타를 알아내는 중: 100% (5790/5790), 완료.

❯ cd ~/.nvm

❯ git tag

❯ git switch -c v0.39.3 tags/v0.39.3
새로 만든 'v0.39.3' 브랜치로 전환합니다
3.8.16  chani22@chani22-VBox  ~/.nvm   v0.39.3

❯ nano ~/.zshrc

...
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

- shell 재접속 후

❯ nvm --version
0.39.3

❯ nvm install node
Downloading and installing node v20.4.0...
Downloading https://nodejs.org/dist/v20.4.0/node-v20.4.0-linux-x64.tar.xz...
######################################################################################################################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v20.4.0 (npm v9.7.2)
Creating default alias: default -> node (-> v20.4.0)

❯ node --version
v20.4.0

❯ npm --version
9.7.2

[ Keystone JS ]

npm을 이용해서 keystone-app을 생성할 수 있다.

나의 app 이름을 지어주면 기본적인 boilerplate를 생성해준다.

❯ mkdir keystone

❯ cd keystone

❯ npm init keystone-app@latest
Need to install the following packages:
  create-keystone-app@9.0.1
Ok to proceed? (y)

✨ You're about to generate a project using Keystone 6 packages.

✔ What directory should create-keystone-app generate your app into? · my-app

⠋ Installing dependencies with yarn. This may take a few minutes.
⚠ Failed to install with yarn.
✔ Installed dependencies with npm.

🎉  Keystone created a starter project in: my-app

  To launch your app, run:

  - cd my-app
  - npm run dev

  Next steps:

  - Read my-app/README.md for additional getting started details.
  - Edit my-app/keystone.ts to customize your app.
  - Open the Admin UI
  - Open the Graphql API
  - Read the docs
  - Star Keystone on GitHub

❯ cd my-app/

❯ ls -al
합계 484
drwxrwxr-x   4 chani22 chani22   4096  7월 12 16:28 .
drwxrwxr-x   3 chani22 chani22   4096  7월 12 16:26 ..
-rw-rw-r--   1 chani22 chani22     46  7월 12 16:26 .gitignore
drwxr-xr-x   2 chani22 chani22   4096  7월 12 16:28 .keystone
-rw-rw-r--   1 chani22 chani22   2874  7월 12 16:26 README.md
-rw-rw-r--   1 chani22 chani22   2710  7월 12 16:26 auth.ts
-rw-rw-r--   1 chani22 chani22   1014  7월 12 16:26 keystone.ts
drwxrwxr-x 570 chani22 chani22  20480  7월 12 16:28 node_modules
-rw-rw-r--   1 chani22 chani22 410056  7월 12 16:28 package-lock.json
-rw-rw-r--   1 chani22 chani22    397  7월 12 16:26 package.json
-rw-rw-r--   1 chani22 chani22   9506  7월 12 16:26 schema.graphql
-rw-rw-r--   1 chani22 chani22   1056  7월 12 16:26 schema.prisma
-rw-rw-r--   1 chani22 chani22   5178  7월 12 16:26 schema.ts
-rw-rw-r--   1 chani22 chani22    195  7월 12 16:26 tsconfig.json
3.8.16  chani22@chani22-VBox  /srv/workspace/ks/my-app

❯ nano keystone.ts

❯ npm run dev

> keystone-app@1.0.2 dev
> keystone dev

✨ Starting Keystone
⭐️ Server listening on :3000 (http://localhost:3000/)
⭐️ GraphQL API available at /api/graphql
✨ Generating GraphQL and Prisma schemas
✨ sqlite database "keystone.db" created at file:./keystone.db
✨ Your database is now in sync with your schema
✨ Connecting to the database
✨ Creating server
✅ GraphQL API ready
✨ Generating Admin UI code
✨ Preparing Admin UI app
- warn You have enabled experimental feature (appDir) in next.config.js.
- warn Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

- event compiled client and server successfully in 195 ms (18 modules)
✅ Admin UI ready
- wait compiling /_error (client and server)...
- event compiled client and server successfully in 6.5s (1706 modules)

'npm run dev'를 하면 웹앱을 띄워준다.

크롬으로 접속하면 된다.