Wijmo 샘플 파일 실행 방법 > FAQ

본문 바로가기

Wijmo

FAQ

제품설치 및 실행 Wijmo 샘플 파일 실행 방법

페이지 정보

작성자 GrapeCity 작성일 20-08-26 08:58 조회 676회 댓글 0건

본문

이번 포스팅은 Wijmo 체험판 파일을 다운 받은 후, 샘플 파일을 실행시키고 싶으신 분들을 위한 글입니다.


차례차례 설명을 진행할 예정이오니 처음부터 끝까지 보신다면 손쉽게 데모 파일을 설치 및 실행을 하실 수 있습니다. 과정이 복잡하지 않으니 걱정하지 않으셔도 됩니다!


이번 포스팅의 주제는 다음과 같습니다.

  • Node.js 설치 방법
  • 평가판 샘플 파일 경로
  • 샘플 파일 npm install & npm start 명령어를 통한 실행
  • AngularJS,React ,Vue.js 프레임워크 실행 방법

먼저 평가판 샘플을 보기 전에 Node.js를 확인해주셔야 합니다.
Node.js는 구글 크롬의 JavaScript 엔진으로 빌드 된 JavaScript 런타임입니다.
Npm은 Node Package Manager의 약자로 node.js에서 사용하는 모듈들을 패키지로 만들어 npm을 통해 관리 및 배포하고 있습니다.
Node.js가 있어야 npm을 이용하여 모듈을 다운 받을 수 있으며 Wijmo 데모 파일을 실행시킬 수 있습니다!

이제부터 본격적으로 글을 시작하도록 하겠습니다.


Node.js 설치 방법

1. Node.js 공식 홈페이지(https://nodejs.org/en/)에 방문하여서 LTS 버전을 다운 받습니다.
fe292ac0fc9b9435ac10dc99fd30adb0_1598579724_2587.png
 
 
2. 다운을 받은 파일을 실행시키면 아래와 같이 설치 관리 창이 나오며 [Next] 버튼을 클릭합니다.
fe292ac0fc9b9435ac10dc99fd30adb0_1598579734_192.png
 
3. 라이선스 동의란에 체크를 하고 [Next]를 눌러줍니다.
fe292ac0fc9b9435ac10dc99fd30adb0_1598579741_6083.png
 
4. Node.js 설치 경로를 설정해줍니다. 기본적으로 C 드라이브 > Program Files 폴더 아래 nodejs 폴더가 생성되고 설치됩니다. 확인 후, [Next] 버튼을 클릭합니다.
dd692e56b537ecbda26cbcf2400b0919_1598406360_2244.png

5. 그 다음, 설치될 항목에 대해서 나오는데 기본적으로 npm package manger가 설치되며 PATH에 기본 경로가 추가됩니다. [Next]를 클릭하여 다음으로 넘어갑니다.
fe292ac0fc9b9435ac10dc99fd30adb0_1598579749_9274.png
 
6. 마지막 설치 전, 윈도우 패키지 관리자인 Chocolately 설치에 대한 유무를 묻습니다. 지금 포스팅과 관련이 없기에 체크하지 않고 [Next]를 눌러 진행합니다.
fe292ac0fc9b9435ac10dc99fd30adb0_1598579763_3801.png
 
7. 이제 설치가 준비 완료가 됐다면 [Install] 버튼을 클릭하여 설치를 시작합니다.
fe292ac0fc9b9435ac10dc99fd30adb0_1598579772_065.png
 
8. 이제 설치가 완료되었습니다. 설치 마법사를 종료하기 위해 [Finish] 버튼을 누릅니다.
fe292ac0fc9b9435ac10dc99fd30adb0_1598579778_4648.png
 
9. cmd 창이나 powershell 창을 열고 node -v 을 입력해 설치가 완료되었는지 확인합니다. 버전의 정보가 나온다면 무사히 설치가 완료된 것입니다!
fe292ac0fc9b9435ac10dc99fd30adb0_1598579785_0516.png
 

평가판 샘플 파일 경로

이제 절반 이상을 하신 겁니다. 이제 이 Node.js를 가지고 어떻게 Wijmo 체험판의 샘플을 설치하고 실행할 수 있는지 보여드리도록 하겠습니다. (본 포스팅은 5.20201.664 버전을 기준으로 합니다.)

1. 다운받으신 체험판 자료를 압축 해제 합니다. 압축 해제한 파일에서 데모 파일을 실행시키기 위해서는 samples 폴더에 접근 해야 합니다.
fe292ac0fc9b9435ac10dc99fd30adb0_1598579791_5536.png

2. Samples 폴더에 들어가면 데모에 나와있는 각종 컨트롤들이 나옵니다. 여기서 원하시는 컨트롤을 찾아서 들어가면 되는데, 지금은 Grid 컨트롤 폴더를 클릭하겠습니다.
fe292ac0fc9b9435ac10dc99fd30adb0_1598579797_6433.png

3. Grid 컨트롤 아래에는 데모와 동일하게 기능들에 대한 샘플 파일들이 있습니다. 여기서 Overview 폴더에 접근하도록 하겠습니다.
fe292ac0fc9b9435ac10dc99fd30adb0_1598579804_5599.png

4. Overview 폴더 아래에는 PureJS 뿐만 아니라 Vue.js, AngularJS, React 등 프레임워크 별 폴더가 있습니다. 현재는 purejs 파일로 이동해주시기 바랍니다.
fe292ac0fc9b9435ac10dc99fd30adb0_1598579811_3405.png

5. Purejs 아래에는 데모 구현을 위한 js, html 파일들이 있습니다. 현재 폴더의 위치에서 Visual Studio Code를 실행해줍니다.
fe292ac0fc9b9435ac10dc99fd30adb0_1598579820_7585.png


데모 파일 npm install & npm start 명령어를 통한 실행

이제 샘플이 어디에 있는지 확인하고 폴더를 열어보았으니 모듈을 설치해보고 실행시켜봅시다!

1. npm install
열린 파일에서 오른쪽을 보시면 샘플의 파일 목록들을 가지고 있습니다.
79a197a2463ca38f45dd7fd175c0b761_1598589750_6596.png

1 - 2. Package.json 클릭하여 설치할 모듈들을 확인하실 수 있습니다.

이제 원하는 모듈을 다운 받기 위해 터미널창(ctrl + `)을 여시고 npm install을 입력하고 Enter 키를 눌러주시면 모듈이 다운 받아집니다.

No matching version found for @grapecity/wijmo.purejs.all@master.min.

만약 위와 같은 에러 메세지가 뜨면서 설치가 되지 않는다면 purejs의 버전이 master.min으로 되어 있는지 확인해주시고 화면에 나오는 5.20201.664 버전으로 바꿔주시기 바랍니다.

79a197a2463ca38f45dd7fd175c0b761_1598589646_4522.png

79a197a2463ca38f45dd7fd175c0b761_1598589658_9007.png


2. npm start

이제 설치를 했으니 파일들을 실행시켜주면 됩니다! 터미널창에 npm start를 입력하세요.

79a197a2463ca38f45dd7fd175c0b761_1598589807_9825.png

3. 그럼 자동으로 다음과 같이 결과물이 화면에 나오게 됩니다!
79a197a2463ca38f45dd7fd175c0b761_1598588934_8901.png

참 간단하죠? purejs를 실행시켜보았으니 이제 다른 프레임워크들은 어떻게 실행해야 할지 알려드리도록 하겠습니다.


AngularJS,React,Vue.js 프레임워크 실행 방법

각 프레임워크 실행 방법에 대해서 알려 드리도록 하겠습니다. 앞서 했던 방법을 그대로 반복하면 되오니 큰 걱정하지 않으셔도 됩니다!

AngularJS

1. 먼저 angular 폴더로 가 해당 위치에서 Visual Studio Code를 실행합니다.
fe292ac0fc9b9435ac10dc99fd30adb0_1598579858_7763.png

2. @grapecity/wijmo.angular2.all@master.min. 에러가 나온다면 버전이 5.20201.664인지 확인하시고 npm install을 터미널에서 입력하여 enter키를 눌러 설치를 시작합니다.
79a197a2463ca38f45dd7fd175c0b761_1598589846_1942.png

3. 설치가 완료되었다면 npm start를 터미널에 입력하여 코드를 실행시킵니다.
79a197a2463ca38f45dd7fd175c0b761_1598589860_535.png


4. 그럼 다음과 같이 grid가 화면에 등장합니다!
79a197a2463ca38f45dd7fd175c0b761_1598588950_0072.png


React

1. 먼저 react 폴더로 가 해당 위치에서 Visual Studio Code를 실행합니다.
fe292ac0fc9b9435ac10dc99fd30adb0_1598579887_7136.png

2. @grapecity/wijmo.react.all@master.min 에러가 나온다면 버전이 5.20201.664인지 확인하시고 npm install을 터미널에서 입력하여 enter키를 눌러 설치를 시작합니다.
79a197a2463ca38f45dd7fd175c0b761_1598589919_8409.png

3. 설치가 완료되었다면 npm start를 터미널에 입력하여 코드를 실행시킵니다.
79a197a2463ca38f45dd7fd175c0b761_1598589928_5438.png

4. 리액트도 간단하게 실행이 완료되었습니다.
79a197a2463ca38f45dd7fd175c0b761_1598588959_1623.png


Vue

1. 먼저 vue 폴더로 가 해당 위치에서  Visual Studio Code를 실행합니다.
fe292ac0fc9b9435ac10dc99fd30adb0_1598579915_5793.png

2. No matching version found for @grapecity/wijmo.vue2.all@master.min. 에러가 나온다면 버전이 5.20201.664인지 확인하시고 npm install을 터미널에서 입력하여 enter키를 눌러 설치를 시작합니다.
79a197a2463ca38f45dd7fd175c0b761_1598589946_1644.png

3. 설치가 완료되었다면 npm start를 터미널에 입력하여 코드를 실행시킵니다.
79a197a2463ca38f45dd7fd175c0b761_1598589955_2863.png

4. 마지막으로 Vue에서도 grid 샘플 데모를 빠르게 확인하실 수 있었습니다.
79a197a2463ca38f45dd7fd175c0b761_1598589002_9776.png

어떠셨나요? 지금 바로 GrapeCity Wijmo 페이지에 방문하셔서 체험판을 다운받으시고 한 번 따라해보시기 바랍니다.


 
라이선싱과 관련하여 문의 사항이 있는 경우, 편하신 방법으로 문의 바랍니다.

* 오류가 발생하는 경우, 화면 스크린샷을 찍어주시거나, 해당 상황에 대해 명확히 설명해주시면 빠른 문제 해결에 도움이 됩니다.

  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

인기글

더보기
  • 인기 게시물이 없습니다.
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2021 GrapeCity inc.