제품설치 및 실행 Wijmo 샘플 파일 실행 방법
추천0
페이지 정보
작성자 MESCIUS
작성일 2020-08-26 08:58 조회 1,988회
댓글 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 설치 방법
2. 다운을 받은 파일을 실행시키면 아래와 같이 설치 관리 창이 나오며 [Next] 버튼을 클릭합니다.
3. 라이선스 동의란에 체크를 하고 [Next]를 눌러줍니다.
4. Node.js 설치 경로를 설정해 줍니다. 기본적으로 C 드라이브 > Program Files 폴더 아래 nodejs 폴더가 생성되고 설치됩니다. 확인 후, [Next] 버튼을 클릭합니다.
5. 그 다음, 설치될 항목에 대해서 나오는데 기본적으로 npm package manger가 설치되며 PATH에 기본 경로가 추가됩니다. [Next]를 클릭하여 다음으로 넘어갑니다.
6. 마지막 설치 전, 윈도우 패키지 관리자인 Chocolately 설치에 대한 유무를 묻습니다. 지금 포스팅과 관련이 없기에 체크하지 않고 [Next]를 눌러 진행합니다.
7. 이제 설치가 준비 완료가 됐다면 [Install] 버튼을 클릭하여 설치를 시작합니다.
8. 이제 설치가 완료되었습니다. 설치 마법사를 종료하기 위해 [Finish] 버튼을 누릅니다.
9. cmd 창이나 powershell 창을 열고 node -v 을 입력해 설치가 완료되었는지 확인합니다.
버전의 정보가 나온다면 무사히 설치가 완료된 것입니다!
평가판 샘플 파일 경로
이제 절반 이상을 하신 겁니다. 이제 이 Node.js를 가지고 어떻게 Wijmo 체험판의 샘플을 설치하고 실행할 수 있는지 보여 드리도록 하겠습니다. (본 포스팅은 5.20201.664 버전을 기준으로 합니다.)
1. 다운받으신 체험판 자료를 압축 해제 합니다. 압축 해제한 파일에서 데모 파일을 실행시키기 위해서는 samples 폴더에 접근 해야 합니다.
2. Samples 폴더에 들어가면 데모에 나와있는 각종 컨트롤들이 나옵니다. 여기서 원하시는 컨트롤을 찾아서 들어가면 되는데, 지금은 Grid 컨트롤 폴더를 클릭하겠습니다.
3. Grid 컨트롤 아래에는 데모와 동일하게 기능들에 대한 샘플 파일들이 있습니다. 여기서 Overview 폴더에 접근하도록 하겠습니다.
4. Overview 폴더 아래에는 PureJS 뿐만 아니라 Vue.js, AngularJS, React 등 프레임워크 별 폴더가 있습니다. 현재는 purejs 파일로 이동해주시기 바랍니다.
5. Purejs 아래에는 데모 구현을 위한 js, html 파일들이 있습니다. 현재 폴더의 위치에서 Visual Studio Code를 실행해줍니다.
데모 파일 npm install & npm start 명령어를 통한 실행
이제 샘플이 어디에 있는지 확인하고 폴더를 열어보았으니 모듈을 설치해보고 실행시켜봅시다!
1. npm install
열린 파일에서 오른쪽을 보시면 샘플의 파일 목록들을 가지고 있습니다.
Package.json 클릭하여 설치할 모듈들을 확인하실 수 있습니다.
이제 원하는 모듈을 다운 받기 위해 터미널창(ctrl + `)을 여시고 npm install을 입력하고 Enter 키를 눌러주시면 모듈이 다운 받아집니다.
No matching version found for @grapecity/wijmo.purejs.all@master.min.
만약 위와 같은 에러 메세지가 뜨면서 설치가 되지 않는다면 purejs의 버전이 master.min으로 되어 있는지 확인해주시고 화면에 나오는 5.20201.664 버전으로 바꿔주시기 바랍니다.
2. npm start
이제 설치를 했으니 파일들을 실행시켜주면 됩니다! 터미널창에 npm start를 입력하세요.
3. 그럼 자동으로 다음과 같이 결과물이 화면에 나오게 됩니다!
참 간단하죠? purejs를 실행시켜보았으니 이제 다른 프레임워크들은 어떻게 실행해야 할지 알려드리도록 하겠습니다.
AngularJS, React, Vue.js 프레임워크 실행 방법
각 프레임워크 실행 방법에 대해서 알려 드리도록 하겠습니다. 앞서 했던 방법을 그대로 반복하면 되니 큰 걱정하지 않으셔도 됩니다!
AngularJS
1. 먼저 angular 폴더로 가 해당 위치에서 Visual Studio Code를 실행합니다.
2. @grapecity/wijmo.angular2.all@master.min. 에러가 나온다면 버전이 5.20201.664인지 확인하시고 npm install을 터미널에서 입력하여 enter키를 눌러 설치를 시작합니다.
3. 설치가 완료되었다면 npm start를 터미널에 입력하여 코드를 실행시킵니다.
4. 그럼 다음과 같이 grid가 화면에 등장합니다!
React
1. 먼저 react 폴더로 가 해당 위치에서 Visual Studio Code를 실행합니다.
2. @grapecity/wijmo.react.all@master.min 에러가 나온다면 버전이 5.20201.664인지 확인하시고 npm install을 터미널에서 입력하여 enter키를 눌러 설치를 시작합니다.
3. 설치가 완료되었다면 npm start를 터미널에 입력하여 코드를 실행시킵니다.
4. 리액트도 간단하게 실행이 완료되었습니다.
Vue
1. 먼저 vue 폴더로 가 해당 위치에서 Visual Studio Code를 실행합니다.
2. No matching version found for @grapecity/wijmo.vue2.all@master.min. 에러가 나온다면 버전이 5.20201.664인지 확인하시고 npm install을 터미널에서 입력하여 enter키를 눌러 설치를 시작합니다.
3. 설치가 완료되었다면 npm start를 터미널에 입력하여 코드를 실행시킵니다.
4. 마지막으로 Vue에서도 grid 샘플 데모를 빠르게 확인하실 수 있었습니다.
어떠셨나요? 지금 바로 MESCIUS Wijmo 페이지에 방문하셔서 체험판을 다운받으시고 한 번 따라해보시기 바랍니다.
라이선싱과 관련하여 문의 사항이 있는 경우, 편하신 방법으로 문의 바랍니다.* 오류가 발생하는 경우, 화면 스크린샷을 찍어주시거나, 해당 상황에 대해 명확히 설명해주시면 빠른 문제 해결에 도움이 됩니다.
- 포럼 : Wijmo - Q&A | 토론 게시판
- Tel : 1670-0583
댓글목록
등록된 댓글이 없습니다.
