You are currently viewing AdminJS 시작하기

AdminJS 시작하기

AdminJS에 대해 공부한 내용을 정리하고 누구나 따라할 수 있게 블로그에 글을 남깁니다. AdminJS에 대한 설치 시 오류러 다른 NodeJS 기반 관리자 게시판 관련 다른것을 추천하고 싶습니다.

해당 경고 메시지는 npm을 사용하여 패키지를 설치하거나 업데이트할 때 나타나는 경고입니다. 각 경고의 의미를 설명해드리겠습니다.

  1. inflight@1.0.6 모듈에 대한 경고: npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
    • 경고 내용: inflight 모듈의 버전 1.0.6은 더 이상 지원되지 않으며 메모리 누수 문제가 있습니다. 따라서 이 모듈을 사용하지 않는 것이 좋습니다. 대신에 lru-cache 모듈을 사용하는 것을 권장합니다. lru-cache는 키 값을 기반으로 비동기 요청을 묶어 처리하는 더 좋은 방법을 제공하며, 테스트도 잘 되어 있습니다.
  2. glob@7.2.3 모듈에 대한 경고:
    npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
    • 경고 내용: glob 모듈의 7.2.3 버전은 v9 이전 버전으로 더 이상 지원되지 않습니다. 최신 기능이나 보안 업데이트를 받기 위해서는 glob 모듈의 최신 버전으로 업그레이드하는 것이 좋습니다.

요약

  • inflight@1.0.6: 더 이상 지원되지 않으며 메모리 누수 문제가 있으므로 사용하지 마세요. 대안으로 lru-cache 모듈을 고려하세요.
  • glob@7.2.3: v9 이전 버전은 더 이상 지원되지 않으므로, glob 모듈을 최신 버전으로 업그레이드하세요.

따라서, 이 경고들을 해결하기 위해서는 관련 모듈들을 최신 버전으로 업그레이드하는 것이 좋습니다.

AdminJS 생태계에 대한 개요와 빠른 설명을 제공합니다. AdminJS 애플리케이션을 설정하고 데이터베이스에 연결하는 방법에 대한 자세한 지침은 별도의 가이드에 설명되어 있습니다. 설정 섹션에서 빠른 링크를 확인하실 수 있습니다.

개요

AdminJS 애플리케이션은 다음 요소들로 구성됩니다:

  • 핵심 패키지
  • 선택한 프레임워크용 플러그인
  • 선택한 ORM/ODM용 어댑터

ESM 및 CJS 지원

버전 7부터 AdminJS는 ESM만 지원하며 CommonJS 문법과는 호환되지 않습니다. 프로젝트를 설정할 때 Node.js 문서의 지침을 따라야 합니다. 자세한 내용은 Node.js 문서를 참조하세요.

기본적인 설정 단계

  1. package.json 파일에서 type을 “module”로 설정합니다.
  2. require 대신 명시적인 .js 확장자를 사용한 import/export 문법을 사용합니다.
  3. Typescript를 사용하는 경우, tsconfig.json에서 moduleResolution과 module을 “nodenext”로 설정하고 target을 “esnext”로 설정합니다.

Note: 만약 @adminjs/nestjs를 사용하는 경우, ESM으로 업데이트하지 마세요. NestJS는 2023년 4월 기준으로 ESM을 지원하지 않습니다. 대신 CJS NestJS 앱에 AdminJS 패키지를 가져올 수 있도록 업데이트된 NestJS 플러그인 가이드를 참조하세요.

빠른 시작

AdonisJS(및 Lucid) 통합은 Adonis CLI를 사용하여 설치해야 합니다. 자세한 가이드는 Adonis 플러그인 문서를 참조하세요.

@adminjs/cli는 adminjs create 명령을 제공하여 AdminJS 애플리케이션을 빠르게 생성할 수 있습니다.

설치

NPM을 사용하여 설치하려면 다음 명령을 실행하세요:

$ npm i -g @adminjs/cli

Yarn을 사용하려면 다음 명령을 실행하세요:

$ yarn global add @adminjs/cli

사용법

$ adminjs create

나머지 문서를 따라 AdminJS 애플리케이션을 수동으로 설정할 수도 있습니다.

패키지 설치

먼저 핵심 패키지를 설치합니다:

$ yarn add adminjs

다음으로, 프레임워크용 플러그인을 설치합니다:

$ yarn add @adminjs/express                # Express 서버용
$ yarn add @adminjs/nestjs                 # Nest 서버용
$ yarn add @adminjs/hapi                   # Hapi 서버용
$ yarn add @adminjs/koa                    # Koa 서버용
$ yarn add @adminjs/fastify                # Fastify 서버용

마지막으로 어댑터를 설치합니다:

$ yarn add @adminjs/typeorm                # TypeORM용
$ yarn add @adminjs/sequelize              # Sequelize용
$ yarn add @adminjs/mongoose               # Mongoose용
$ yarn add @adminjs/prisma                 # Prisma용
$ yarn add @adminjs/mikroorm               # MikroORM용
$ yarn add @adminjs/objection              # Objection용
$ yarn add @adminjs/sql                    # raw SQL용, 현재 Postgres만 지원

설정

AdminJS 종속성을 설치한 후, 다음을 진행하세요:

  • 플러그인 섹션에서 프레임워크와 함께 AdminJS를 설정하는 방법에 대한 지침을 확인하세요.
  • 어댑터 섹션에서 AdminJS 인스턴스를 데이터베이스에 연결하는 방법에 대한 지침을 확인하세요.

프론트엔드 번들링

AdminJS는 자체 프론트엔드를 생성해야 합니다. 프로덕션 환경에서는 배포 과정의 빌드 단계에서 모든 프론트엔드 파일을 번들링해야 하지만, 이는 개발 중에 다소 번거로울 수 있습니다.

이런 이유로, 모든 플러그인과 어댑터를 설정한 후에 adminJS.watch() 함수 호출을 추가해야 합니다. 이는 개발 환경(process.env.NODE_ENV === 'development')에만 영향을 미치며 백그라운드에서 별도의 번들링 프로세스를 시작합니다.

import AdminJS from 'adminjs'

const adminJS = new AdminJS({
    // ...
})

adminJS.watch()

이 단계를 거치지 않으면 개발 중 AdminJS가 시작되지만 브라우저에 유용한 내용을 표시하지 않습니다. 대신 콘솔에 일부 구문 분석 오류만 표시될 것입니다.

답글 남기기