성야넷™

1. 개요

전자정부프레임워크 Web Project 생성 시 예제 소스를 포함하여 생성하는 경우, default package 명으로 egovframework.example 라고 생성이 됩니다.

본 가이드에서는 샘플에 명명 된 패키지 명을 변경하는 방법에 대해 설명하고자 합니다.

2. 프로젝트 생성

우선 테스트를 위해 프로젝트를 하나 생성하도록 하겠습니다.

(본 가이드는 전자정부프레임워크 4.0 버전을 기반으로 설명하고 있습니다.)

위와 같이 프로젝트를 생성하는 경우, 아래 이미지와 같이 예제 소스가 포함 된 프로젝트가 생성됩니다.

패키지 명을 일괄로 변경하기 위해서는 가독성이 좋게 변경하는 것이 좋습니다.

우측 상단의 점3개로 이루어진 버튼을 클릭하고 Pacage Presentation > Hierachical 버튼을 클릭하시면 패키지 tree가 다음과 같이 정렬 됩니다.

이렇게 정렬이 변경되었다면, 우선 변경하기 원하시는 패키지 명으로 변경을 진행 합니다.

패키지 명 변경은 윈도우 폴더 변경 하듯이 패키지 명 클릭 후 F2 키를 누르시거나 아래 이미지의 메뉴를 참고하셔서 변경 창으로 진입합니다.

처음 변경 창이 열리면 원래 패키지 명으로 입력 필드가 채워져 있습니다.

해당 부분을 변경하길 원하는 이름으로 입력하시고 OK 버튼을 누릅니다.

잠시 기다리시면 패키지 명이 변경이 되면서 아래와 같이 몇몇 파일에 에러가 표시 됩니다.

모두 기존 패키지 명으로 등록 된 파일들로 해당 파일들의 기존 패키지 명을 변경 된 패키지 명으로 바꿔 주셔야 합니다.

어떤 파일들을 변경해야 하는지 확인을 위해 검색 기능을 사용하도록 합니다.

Ctrl + H 키를 누르시면 검색 창이 나타납니다.

검색창의 여러 탭 중에서 File Search 를 사용하여 기존 패키지 명을 검색 하도록 합니다.

검색이 완료 되는 경우 하단 Search 탭에 검색 결과가 표시 됩니다.

이와 같이 탐색 된 부분을 모두 바꿔 주셔야 합니다.

저는 egovframework.dexter 로 바꾸었기 때문에 해당 파일들을 모두 바꾸도록 합니다.

(검색 결과 창에서 탐색 된 부분을 마우스로 왼쪽 더블클릭 하시면 해당 부분으로 자동으로 이동합니다.)

모든 파일에 대해 변경을 완료 하신 후, 다시 한 번 검색 창을 통해 기존 패키지 명이 남아 있는지 확인해 보도록 합니다.

이렇게 하면 패키지 명 변경이 완료 됩니다 만... 한 가지 주의 하실 점이 있습니다.

필자의 경우 기존 패키지 명의 앞 부분인 egovframework 라는 부분을 살려 둔 상태로 패키지 명을 변경하였기 때문에 검색 창에서 확인 된 부분만 변경하면 되지만, 패키지 명 전체를 변경하시는 경우 추가 작업 하실 부분이 있습니다.

예를 들어 패키지 명을 다시 변경해 보겠습니다.

(egovframework.dexter 에서 dexter.webkit 으로 변경하였습니다.)

패키지 명이 변경 되었기 때문에 위의 과정을 다시 한 번 진행 합니다.

위 과정이 완료 되었으면, 이제 2개의 파일을 열도록 합니다.

열어야 할 파일명은 다음과 같습니다.

src/main/resources/egovframework/spring/context-common.xml

src/main/webapp/WEB-INF/config/egovframework/springmvc/dispatcher-servlet.xml

두 파일을 열어 보시면 상단 부분에 다음과 같이 되어 있습니다.

붉은 박스로 표시 된 부분을 바꾸어 주셔야 합니다.

최종 변경 된 패키지 명이 dexter.webkit 이므로 바꿀 값은 egovframework -> dexter 입니다.

(즉, dot 으로 구분 된 패키지 명에서 제일 앞선 패키지 명을 기입해 주시면 됩니다.)

마지막 2개 작업을 해 주지 않으실 경우, build 에서 문제가 발생하지는 않지만 막상 웹을 실행 시 Controller 를 찾을 수 없어 페이지가 표시되지 않는 문제가 발생하게 됩니다.

이는 전자정부프레임워크로 개발 시 어노테이션 (annotation) 으로 @Controller 를 사용하게 되는데 이 부분을 제대로 찾을 수 있게 설정해 주는 부분이 바로 저 2개 파일이기 때문입니다.

1. 개요

지난 블로그에 이어 ionic 프레임워크 소스를 실제 기기에 빌드하는 법에 대해 알아보도록 하겠습니다.

실 기기에 빌드하여 올리는 것이기 때문에 안드로이드의 경우 Android Studio, ios의 경우 Xcode 가 설치 완료되어 있다는 것을 전제로 합니다.

이전 포스트는 아래 링크를 참조 하여 주세요.

2022.01.27 - [프로그래밍/ionic framework] - ionic framework, 설치 및 프로젝트 생성

2. 모바일 프로젝트 생성

모든 명령어는 cmd 에서 프로젝트 폴더로 이동 후 사용하는 것을 기본으로 합니다.
(필자의 경우 d:/ionic/myApp 폴더까지 이동 후 실행합니다.)

ionic cap add android
ionic cap add ios

명령어는 보시는 대로 직관적입니다.

위 명령어는 안드로이드 기반 모바일 소스를 생성하는 명령어 이고, 아래 명령어는 xcode 기반 소스를 생성하는 명령어 입니다.

각 명령어를 실행하시면, 프로젝트 폴더 내부에 해당 os에 맞는 폴더가 생성 됩니다.

물론 소스코드가 생성이 되기만 한 것일 뿐 해당 소스는 그에 맞는 IDE 를 통해 빌드하여야 합니다.
즉, MacOS 기반 PC가 아닌 경우 ios 소스는 생성만 될 뿐 실행 해 볼 수는 없습니다.

폴더 생성이 완료된 경우, 다음 명령어를 실행합니다.

ionic cap sync

위 명령어는 vue.js 로 작성 된 소스코드를 mobile 소스로 build 하여 주는 명령어 입니다.

ionic 으로 작성 된 vue.js 소스는 실제 모바일 기기에 업로드 시 소스코드 단축이 되기 때문에 모바일 IDE 에서 소스코드를 수정 할 수는 없습니다.

따라서 vue.js 소스 변경이 생길 때 마다 항상 위 명령어를 수행 후, 모바일 IDE 에서 build 하여 기기로 업로드 하셔야 합니다.

위 작업이 완료되면 이제 모바일 IDE 를 실행하도록 명령어를 입력 해 줍니다.

ionic cap open android
ionic cap open ios

각 명령어는 Android Studio / Xcode 를 실행해 주는 명령어 입니다.

해당 명령어로 실행 시 IDE 가 실행되며 각 프로젝트 폴더가 자동으로 open 되기 때문에 편리합니다.
(최초 실행 시 프로젝트 링크 및 gradle build 등에 시간이 걸립니다.)

IDE 실행 후 프로젝트 폴더가 자동으로 open 됩니다.

app 폴더를 제외한 나머지 폴더들은 vue.js <--> 모바일 기기 간 cross-platform 을 지원하기 위한 cordova 소스들입니다.

이후부터는 IDE 의 소스코딩 방법 및 빌드 방법에 따르므로 따로 기술하지는 않습니다.

3. 실행

다음 시간에는 모바일 기기의 카메라를 활용하여 QR코드를 스캔하여 인식하는 앱을 만들어 보도록 하겠습니다.

1. 개요

아이오닉 프레임워크(ionic framework) 는 android, ios 에서 동작하는 앱을 생성하게 도와주는 하이브리드 앱 개발 프레임워크 입니다.

Angular, React, Vue 프레임워크를 사용하여 앱 View 를 구성하는 것을 기본으로 스마트폰 디바이스의 API 를 사용하기 위해 ionic 에서 자체 개발한 capacitor 라는 cross-platform 지원 도구로 이루어져 있습니다.

아이오닉 프레임워크에 대해 더 자세히 알고 싶으신 분은 프레임워크 홈페이지(https://ionicframework.com/) 를 참고 하시면 됩니다.

본 블로그는 ionic framework 의 현재(2022.01.27) 가장 최신 버전인 ionic 6 에 기반합니다.

2. 설치

ionic 을 사용하기 위해서는 우선 npm 이 설치되어 있어야 합니다. (하여 본 블로그는 npm 이 설치되어 있는 것을 전제로 작성되었습니다.)

우선, 아이오닉 프로젝트 생성을 위한 도구를 설치합니다.

npm install -g @ionic/cli@latest native-run cordova-res

설치가 다 끝날 때까지 기다리시면 됩니다.

매우 쉽죠?

3. 프로젝트 생성

ionic framework 를 사용하기 위한 기반 설치가 완료 되었으니, 이제 프로젝트를 생성해 보도록 합니다.
윈도우의 경우, cmd 창을 열고 본인이 프로젝트를 생성하기 원하는 폴더로 이동 합니다. (저는 d:\ionic 이라는 폴더 안에 프로젝트를 생성해 보겠습니다.)

프로젝트 생성 명령어는 다음과 같습니다.

ionic start [앱 명칭] [프로젝트 탬플릿] [option]

각 항목 간에는 공백(스페이스)으로 구분되며 프로젝트 탬플릿은 2가지(탬플릿 명령어는 3가지가 있으나 하나는 있으나 마나 하므로..)가 있습니다.

[프로젝트 탬플릿]

• tabs : 탭 기반 레이아웃
• sidemenu : 사이드 메뉴 기반 레이아웃
• blank : 한 페이지의 빈 프로젝트

옵션은 js탬플릿 선택과 native 선택으로 구성되어 있습니다.

[JS 탬플릿 선택]

• --type 값이 없으면 기본 angular.js 로 시작 됨
• --type vue : vue.js 기반
• --type react : react.js 기반

[Native 선택]

• --cordova : cordova Native API (vue 기반에서는 실행 안됨)
• --capacitor : ionic 에서 만든 Native API

위 명령어 구문을 사용하여 프로젝트를 생성 하도록 합니다.

ionic start myApp tabs --type vue --capacitor

제가 사용한 명령어는 myApp 이라는 프로젝트를 탭 기반 레이아웃(tabs)로 하여, View 를 구성하기 위해 vue.js 탬플릿을 사용하며, cross-platform 으로는 capacitor 를 사용한다고 지정하였습니다.

프로젝트 생성에는 제법 오랜 시간이 걸립니다.

자, 드디어 프로젝트 생성이 완료되었습니다.

4. 프로젝트 실행

프로젝트를 기동하기 위해서는 다음의 명령어를 사용합니다.

ionic serve

해당 명령어를 사용하기 위해서는 cmd 창에서 생성 된 프로젝트 폴더 안으로 들어가야 합니다.
필자의 경우 d:\ionic\myApp 폴더로 이동하여 명령어를 실행하도록 합니다.

제대로 기동이 완료 된 경우 위 이미지와 같은 화면을 볼 수 있습니다.

필자는 tabs 기반 레이아웃을 사용하였기 때문에 하단에 Tab Navigation 이 포함 된 프로젝트가 생성되었습니다.

소스코드는 모두 src 폴더 안에 있습니다.

화면을 구성하는 소스들은 src/views 안에 있으며, 탭 기반 레이아웃 이기 때문에 하단 탭 네비게이션을 구성하는 TabPage.vue 파일과 각 탭의 페이지를 담당하는 Tab1Page.vue 등으로 구성되어 있습니다.

5. 스마트폰에서 구동

지금까지의 과정은 ionic 프로젝트를 생성하기만 한 것일 뿐, 실제 이것만 가지고는 스마트폰에 build 할 수 없습니다.

다음 시간에는 해당 프로젝트를 android / ios 용으로 빌드하여 실제 기기에서 실행하는 법을 알아보도록 하겠습니다.