전체목록 보기

  1. U.STRA Java 프레임워크

U.STRA Java 프레임워크

U.STRA 프레임워크 Node Version 3기반의 프로젝트 설정 수행 방법에 대해 안내한다.

기본 프로그램 설치

프레임워크 Node 3은 다음과 같은 프로그램 환경을 기준으로 세팅을 수행한다.

  • node : 18.0.0 이상
  • yarn : 1.22.19 이상

node 설치

다운받은 파일 실행 시 아래의 화면이 나타나며 Next를 눌러 다음 단계를 진행한다.

필요 툴은 자동 설치에 체크 후 다음을 눌러 진행한다.

Untitled

설치가 완료되면 커맨드에서 설치된 Node.js 버전이 확인가능하다.

Untitled

yarn

인터넷 접속이 가능한 환경일 경우는 install 명령어를 이용하여 yarn을 설치한다.

bash Copy 
npm install yarn -g

혹은 아래 사이트로 이동하여 Release 된 패키지 기반으로 설치를 수행할 수 있다.

https://github.com/yarnpkg/yarn/releases

yarn 또한 설치가 완료되면 버전을 확인할 수 있다.

Untitled

git bash

일부 윈도우 상에서 동작하지 않는 command를 지원하기 위한 git bash 프로그램을 다운로드 하여 설치한다.

IDE 설치

Node 프레임워크는 Visual Studio Code를 사용하여 개발을 수행할 수 있다.

  • 다운로드 사이트 : https://code.visualstudio.com/
    위 사이트로 이동하여 각 플랫폼에 맞는 최신 설치본을 다운로드한 후 설치한다.

필수 설치 Extension

Vue Volar extension Pack

Nuxt 및 Vue 기반의 프로그램 언어를 지원하기 위한 확장 프로그램

Untitled

위의 캡처 화면과 같이 Vs Code 내에 Extensions 탭으로 이동하여 “Vue Volar extension Pack” 으로 검색하여 확장 프로그램을 설치한다.

EditorConfig for VS Code

.editorconfig 설정을 VS Code에 적용하기 위한 확장 프로그램

Untitled
위의 화면과 같이 “EditorConfig for VS Code ” 를 검색하여 설치를 진행한다.

프로젝트 세팅

프로젝트 세팅을 위해서는 다음과 같은 파일이 필요하다.

  • package.json
  • .npmrc

package.json

package.json은 node 프로젝트의 기본 설정 파일로 프로젝트의 정보와 의존 모듈의 관리를 수행한다.

프로젝트를 생성할 디렉토리로 이동하여 package.json을 생성하기 위해 아래 명령어를 수행한다.

bash Copy 
yarn init
Untitled

위와 같이 프로젝트 설정을 수행하면 package.json이 생성된다. 생성된 파일은 다음과 같다.

json Copy 
{
  "name": "starter3",
  "version": "1.0.0",
  "description": "U.STRA Nuxt Project",
  "main": "index.js",
  "license": "MIT",
  "private": true
}

생성된 package.json에 다음과 같은 내용을 추가한다.

json Copy 
{
  "name": "starter3",
  "version": "1.0.0",
  "description": "U.STRA Nuxt Project",
  "license": "MIT",
  "private": true,
	"dependencies": {
    "@ustra/nuxt": "3.0.0-stable"
  },
  "scripts": {
    "boot": "yarn install && node ./node_modules/@ustra/core/boot"
  }
}

dependencies

프로젝트의 의존성에 따라 연관된 의존 모듈을 설치한다.

  • @ustra/h3 : h3 server application
  • @ustra/nuxt : nuxt3 application
  • @ustra/nuxt-wijmo : nuxt3 wijmo application

scripts

초기화를 수행하기 위한 스크립트이다. 프로젝트 상황에 따라 node_modules의 위치는 변경될 수 있으므로 node_modules의 @ustra/core가 위치하는 상대 경로를 지정한다.

일반적으로는 “./node_modules/@ustra/core/boot” 위치에 설치된다.

.npmrc

프레임워크 모듈은 npm public repository가 아닌 개별 저장소에 배포되므로 .npmrc 파일을 생성하고 다음과 같이 작성한다.

plain text Copy 
@ustra:registry=https://repo.ustraframework.kro.kr/repository/npm-private/

초기 스크립트를 실행하기 위해 세팅된 정보는 다음과 같이 최종 구성되어야 한다.

Untitled
Untitled

초기 스크립트 구동

다음의 명령어를 입력하여 스크립트를 구동한다.

bash Copy 
yarn run boot
Untitled

위의 영상에서 보듯이 템플릿 선택 화면이 표시되면 세팅을 원하는 템플릿을 설정한다.

Untitled

스크립트 실행이 완료되면 다음과 같은 파일이 추가된 것을 볼 수 있다.

Untitled

어플리케이션 구동

어플리케이션은 다음의 스크립트로 구동 가능하다.

bash Copy 
# 개발서버 구동
yarn run dev

# Type 모듈 설치 (nuxt project)
yarn run prepare
Untitled

위의 명령어 구동 시 다음과 같은 오류가 발생한다면 관련 Dependency를 추가적으로 설치한다.

Untitled
  • @ustra/nuxt-ckeditor5 추가 설치
bash Copy 
yarn add @ustra/nuxt-ckeditor5

IDE Reload

최초 구동 시 모듈이 설치되고 Type Configuration도 추가되므로 IDE 상에서 Type 인식 오류가 발생할 수 있다.

이 경우는 Ctrl + Shift + P 단축키를 입력하고 Developer : Reload Window 항목을 검색하여 IDE를 재구동 한다.

Untitled

Devtools

Nuxt는 Vue 기반으로 개발된 프레임워크이므로 Vue Devtools 설치를 통해 어플리케이션의 모니터링과 디버깅을 손쉽게 할 수 있다.

위의 링크로 이동하여 각 브라우저에 추가 버튼을 클릭한다.

Untitled

설치 후 확장 앱 관리 화면으로 이동하여 Vue.js devtools를 선택한다.

Untitled
상세 설정으로 이동하여 권한 탭에서 “파일 URL에 대한 액세스 허용” 항목을 체크한다.

Untitled
로컬 개발 서버 경로로 접속한 후, 개발자 도구를 오픈하면 아래 이미지와 같이 Vue Tab이 활성화 되어 Vue devtools를 사용할 수 있다.

Untitled