Nexacro Studio 개념

업무 CMS 프로그램 관리에 있어 프론트로 넥사크로를 사용함에 있어 공부 + 정리 목적으로 작성함

출처 : https://www.playnexacro.com

Nexacro

Nexacro는 2014년 투비 소프트가 출시한  프론트엔드 개발용 프레임워크이다.

넥사크로 스튜디오라는 툴을 제공하며 GUI로 배치 가능 하다.

GUI(Graphic User Interface)란

그래픽 유저 인터페이스유저가 편리하게 사용할 수 있도록 입력 출력 기능을 보이는 아이콘을 이용해 그래픽으로 나타낸것

쉬운 의미로 이 아이콘들도 gui에 속한다고 생각하면 된다!

 

Interface란

inter(상호간,사이) + face(얼굴,면)

다른 시스템, 장치, 소프트웨어를 서로 이어주는 부분 = 매개채라고 생각하면 쉽다.

2개 이상의 장치나 소프트웨어 사이에 정보, 신호를 주고 받는데 매개체의 역할을 함 

인터페이스는 하드웨어가 될수도 소프트웨어가 될 수도 있다.

 

컴퓨터와 인간이 상호 작용할 수 있게 하는 사용자 인터페이스 = UI

인간과 컴퓨터가 쉽게 주고 받을 수 있도록 해주는 수단

EX) 입력장치: 키보드,스마트폰터치, 출력장치: 모니터,스피커,스마트폰화면

하드웨어 장치간에 상호 작용할 수 있게 하는 하드웨어 인터페이스가 존재한다.

 

넥사크로는 프론트단을 구성함에 있어 마우스 클릭과 드래그 앤 드랍을 사용하여 구성할 수 있다.

그로 인해 프론트엔드 화면 구성을 하는데 있어 개발자에게 편리함을 제공한다.

 

Nexacro 구성 요소

넥사크로에서 작성하는 코드는 Javascript 기반

폼 = 화면 (캔버스)

컴포넌트 = 폼을 그리는데 있어 사용할 수 있는 다양한 도구

(html = body (폼,화면,캔버스), table,button = (컴포넌트,도구))

  넥사크로의 컴포넌트(컨버스 그림 그리는데 도구 역할) 부분

 

저 버튼 클릭하면 브라우저로 열 수 있음 (Launch)

 

회사 프로젝트가 들어 있어서 아래쪽 편집할수 있는 부분만 확인

넥사크로는 하나의 폼에서 Design, Source, Script를 나눠서 편집할 수 있다.

넥사크로의 화면단 폼 파일은 xfdl 확장자를 가짐

컴파일이 진행되면 .xfdl → .js로 변경된다.

Design 모드에서는 시각적 컴포넌트 설정 해 화면 생성과 위치를 잡을 수 있다.

(마우스 이용해서 화면을 만들 수 있음)

Source 모드에서는 시각적 컴포넌트의 소스를 가지고 있다 (html 코드라고 생각하면 편함)

Script 모드는 폼에 있는 컴포넌트 들을 활용하기 위한 코드 작성 부분 ( 함수 등 작성 가능)

 

컴파일이 진행되면 .xfdl → .js로 변경된다.

넥사크로의 Generate 기능을 통해 xfdl 확장자 파일이 js로 컴파일이 진행된다.

폼에 작성된 기능, 디자인, 화면을 포함해 이 코드들이 자바스크립트 파일 하나로 변환 진행 (generate)

generate가 진행되면서 js파일을 읽어 웹에서 보여지게 된다.

 

화면 테스트 기능

넥사크로 위쪽에 존재하는 Launch 테스트 기능

 

넥사크로의 자체 브라우저 Launch 기능을 통해 화면 테스트 기능을 사용할 수 있다.

 

폼 간 이동 가능 url 기반 x

화면과 화면 이동은 가능하지만 url 기반이 아니라서 경로상 이동이 진행 되지 않음

사용하는 url은 1개 뿐이다.

화면간의 변경만 가능하다. 버튼 클릭을 해서 화면 간의 이동을 할 뿐이지 url을 타고 가지 않음

보통 웹사이트의 상세페이지에서 뒤로가기를 누르면 홈페이지로 이동 되는데 넥사크로는 url기반이 아니여서

새로고침, 뒤로가기 기능 사용 할 수 없음