Learn

nexacrostudio 잘쓰는 방법 - 1.개발툴 편의기능 code snippet

투비대원 2019. 11. 27. 09:26

Intro.

snippet이란 사전적으로 “ 1. (작은) 정보   2. (대화·음악 등의) 한 토막 “ 을 의미합니다. 프로그래밍 용어로는 재사용 가능한 소스 코드, 기계어, 텍스트의 작은 부분을 일컫는 뜻을 의미합니다.

nexacro platform17의 code snippet은 자주 사용하는 코드를 지정하여 스크립트 편집 시 사용할 수 있는 개발편의 기능입니다. 코드 단축키 기능이라고 생각하면 이해가 쉬울 것 같습니다.

 

What will help?

code snippet은 더 빠르고 쉬운 스크립트 작성을 위하여 새롭게 추가된 개발 툴 기능입니다.

저는 nexacro platform을 많이 사용하고 익숙하지만 처음 접하는 개발자분들께 위 문장은 큰 도움이 되지 않아 보입니다. 그러면 무엇 때문에 이 기능이 쉽고 빠른 개발을 하게 한다고 말할 수 있을까요?

이번 주제는 새로 추가된 code snippet의 장점과 활용방법을 공유하고자 합니다.

1. 바로 가기 문구를 사용하여 코드를 자동완성 합니다.

화면 개발 시 사용하는 동일한 양식이나 자주 사용하는 함수들을 code snippet으로 등록하여 쉽고 빠르게 적용합니다. 등록 시 shortcut(바로 가기 문구)를 지정하면 해당 문구가 스크립트 상에 입력 될 경우 작성된 내용이 자동으로 반영됩니다.

code snippet 기능 – shortcut 사용방법

프로젝트 진행 시 보통 개발화면 상단에 파일헤더 주석을 작성합니다. 또한 nexacro platform의 경우 스크립트 라이브러리를 include하여 화면에 적용합니다. 이와 같이 매 화면마다 반영되는 스크립트를 code snippet을 사용하여 빠른 스크립트 작성이 가능합니다.

2. 예약어를 사용하여 스크립트 작성을 줄여줍니다. (insert reserved string)

code snippet 예약어를 통해서 지정된 구문을 자동으로 입력할 수 있습니다. 예를 들어 파일 헤더 주석에 작성되는 날짜와 파일정보를 예약어로 지정하여 별도의 정보 입력 없이 자동 완성할 수 있습니다.

code snippet 기능 – selected 예약어 사용방법

object의 유무를 확인하는 함수를 code snippet을 통하여 적용하였습니다. 사용된 예약어는 현재 선택된 항목을 지정된 위치에 대입하는 selected 예약어입니다. 이 외 커서 위치나 탭 항목과 같은 일반 정보와 file 정보 및 시간, 날짜 정보가 예약어로 제공됩니다.

3. 프로젝트 별 code snippet을 등록하여 관리합니다.

code snippet 목록을 XML파일로 관리 할 수 있습니다. 또한 code snippet의 Import/Export기능을 사용하여 목록을 그룹으로 관리합니다. (Import/Export 사용방법 하단 참고)

code snippet 기능 – Import 사용방법

프로젝트의 공통개발 역할의 담당자가 템플릿(즉, 자주 사용하는 함수를 저장한 code snippet 목록)을 XML파일로 배포하여 각 개발자들이 자신의 환경에 Import하여 사용합니다. 이 기능을 통하여 프로젝트의 스크립트 표준을 기대합니다.

4. 스크립트뿐만 아니라 CSS 속성에도 사용합니다.

화면개발 script뿐만 아니라 퍼블리싱을 위한 CSS에도 code snippet기능을 제공합니다. 개발툴에 사용되는 모든 코드에 code snippet 적용이 가능합니다. code snippet 편집창에서 script 또는 XCSS를 선택하여 사용할 Category를 지정합니다. 별도의 수정이 없었다면 XCSS category에 기본적으로 반영되어있는 리스트를 확인 할 수 있습니다.

code snippet 기능 – XCSS 사용방법

Static 컴포넌트 class를 code snippet을 통하여 작성하는 예제화면입니다. 이와 같이 컴포넌트에 여러 개의 class를 작성할 경우 사용될 css속성을 사전에 code snippet으로 등록하여 사용할 수 있습니다.

 

How to CodeSnippet?

투비소프트에서 제공하는 넥사크로플랫폼 17 개발도구 가이드에는 code snippet 사용방법이 잘 정리되어 있습니다. 사용방법 및 예약어 목록은 하단의 URL 링크를 따라 메뉴얼을 참고하시기 바랍니다.

nexacro studio(전용 개발 툴)에서 사용되는 code snippet 정보는 xml 파일로 저장됩니다.

만약 nexacro studio가 실행된 상태에서 xml 파일을 editor로 수정할 때, 종료 후 재실행을 해야 반영된 결과를 확인할 수 있습니다.

code snippet 정보 저장 위치

위에서 설명한 프로젝트 별 code snippet을 관리하기 위해선 Import/Export 기능을 사용합니다.

Import/Export 과정의 순서는 다음과 같습니다.

1. Export code snippet으로 파일 저장하기

  • 편집창의 Export code snippet 버튼을 클릭하여 폴더 위치와 파일명을 지정하여 저장합니다.
  • 저장된 파일명은 Import 시 그룹 명으로 생성됩니다.
  • 내문서의 nexacro 폴더의 경우 nexacro platform 엔진 외 기타 사용되는 log 및 개인 기능 정보들이 저장되는 위치 입니다.

Export code snippet 실행화면

2. xml 파일 편집하기

  • code snippet은 그룹 단위로 Import/Export 할 수 없습니다. 즉, 현재 목록의 전체 리스트가 Import 되거나 Export 됩니다.
  • 저장된 xml 파일은 text editor를 통하여 리스트를 편집할 수 있습니다. 이 과정은 조금 더 효과적인 목록 관리를 도와줍니다.

code snippet xml 편집화면 – 구조 설명을 위해 상세내용 삭제

Snippet xml 문서의 구조는 전체 리스트 목록을 <Snippets></Snippets>로 구성하며 하위의 리스트는 <Snippet></Snippet>형식으로 나열되며, 지정된 그룹 목록은 <Group></Group>으로 정의됩니다.

Import시의 하위 그룹을 지정하지 않을 경우 해당 <Group>태그를 삭제해 줍니다.

3. Import code snippet으로 목록 불러오기

  • 편집창의 Import code snippet 버튼을 클릭하여 파일을 선택합니다.

Import code snippet 실행화면

4. Import 된 목록 확인하기

  • Import한 파일명이 그룹으로 지정되어 code snippet 목록이 생성됩니다.
  • xml상 하위 Group이 지정될 경우 생성된 그룹 하위에 그룹목록이 추가됩니다.

Import code snippet 목록화면

 

참고 자료

넥사크로플랫폼 17 개발도구 가이드 - Code snippet 바로가기

 

플레이넥사크로 바로가기

https://www.playnexacro.com/

 

play nexacro

A community of nexacro platform.

www.playnexacro.com