2025_11_17
화면내에서 버튼 같은 요소들을 안 보이게 하고싶을 때
즉 컴포넌트의 기능이나 함수는 사용하고 싶은데 화면에서는 보이고 싶지 않을 때
회색 빛 마이너스 좌표에 두면 실행했을 때 보이지 않는다
아니면 단순하게 안 보이게 하려면 visiable = false 로 넣으면 된다
move(2번째 아이콘) 해놓고 움직이면 마이너스 좌표가 보이게 움직인 후 그 마이너스 부분에 두면 된다
컴포넌트들 정렬 Aline 기능을 이용해서 가능하다
정렬하고 싶은 컴포넌트들을 선택한 후 위에 정렬 표시에서 선택 가능
테두리의 모서리가 진해져있는 게 기준점이 되는 컴포넌트이다
이 때 기준이 되는 컴포넌트를 변경하고 싶다면 ctrl 을 누르고 원하는 대표 컴포넌트를 선택하면
테두리가 진해지면서 대표 컴폰넌트로 바뀐다
정렬은 대표 컴포넌트를 기준으로 정렬된다 .
DIV
Div 는 자기 자신을 포함해서 다른 컴포넌트들을 복사 할 수 있다
Div 안에 들어가는 컴포넌트들은 div 안에 그려넣어야한다
div 안에 들어간 즉 div 안에 생성된 컴포넌트들은 scope (depth) 가 있다
(div.form.button01 이렇게 )
그렇다면 일반 폼에 있던 컴포넌트을 div 안으로 넣고 싶다면?
폼에 있는 컴포넌트를 ctrl c ctrl v 해서 붙여넣기 하는 것
근데 이 때 기본 폼에 있을 때 위치정보와 dvi 에 있는 위치정보를 가 있어서
div 안으로 숨겨지게 된다 스크롤 이 생기게
이 때 div 를 더블클릭하면 숨겨진 요소가 보여진다
Tab 컴포넌트
탭페이지도 똑같다
자기 자신을 포함하여 다양한 컴포넌트를 넣을 수 있다
이때 탭에서도 더블클릭해서 숨겨진 컴포넌트를 찾아서 배치할 수 있다
div 영역과 tap 영역에 있는 컴포넌트의 글씨 같은 요소를 바꿀 때
보통은 this.Button.Set_text 의 형식으로 바꿨었다
하지만 div 와 tap 영역에 있는 컴포넌트는 그 뎁스를 다 적여줘야 한다
div00.form.Button00_01 이렇게
div 안에 div 안에 div 안에 있는 컴포넌트라면 depth 가 너무 길어져서 다 치기 힘들다
그 때
원하는 컴포넌트를 선택한 후 마우스 오른쪽 클릭을 해서 copy ID 를 한다
그러면 현재 선택한 컴포넌트 경로를 WINDOW 클립보드에 복사하게 된다
그리고 클릭 이벤트로 가서
this. ctrl v 하면 경로가 붙여넣기 된다 .
함수선언 시 호이스팅 관련 문제
넥사크로는 자바스크립트 기반으로 되어있기 때문에
함수 선언 시 호이스팅에 주의해야한다.
호이스팅이란 변수 선언과 함수 선언을 코드의 맨 위로 끌어올려지는 현상
(선언한 변수 및 함수가 단순히 코드 최상단으로 올라오는 것을 의미 )
개발자가 어느 라인 위치에 코드를 선언해도 실행되면 최상단으로 끌어올려지고 실행하게 되는 것을 의미한다
호이스팅이 발생되는 원인은 자바스크립트의 변수생성과 초기화의 작업이 분리돼서 진행되기 때문이다 .
console.log(a());
console.log(b());
console.log(c());
function a() {
return 'a';
}
var b = function bb() {
return 'bb';
}
var c = function () {
return 'c';
}
이러한 코드가 있다고 할 때 a()부터 오류가 나야하지만 a는 출력된다 b,c 는 오류
호이스팅에 의해서 살제 자바 스크립트 파일은
function a() {
retrun 'a'; }
var b ;
var c;
// 함수 선언은 위로 강제로 끌어져 올라온다 (호이스팅
console.log(a());
console.log(b());
console.log(c());
b= finction bb () {
return = 'bb';
}
c = finction () {
return = 'c';
}
함수 선언과 변수 선언이 위로 호이스팅 돼서 정의가 되었기 대문에 a 는 출력이 되었던것
b() c() 는 아직 변수 b 와 c 안에 넣어지지 않은 형태이기 때문에
함수 선언문이 아니라서 b와 c는 그냥 변수로 취급하기 때문에 실행 오류가 뜨는 것
함수 선언에는 2가지 방식이 있다
함수 선언식과 함수 표현식
// 함수 선언식
function add (x,y) {
return x + y ;
}
//함수 표현식
const add = function (x,y ) {
return x + y;
}
함수 표현식은 함수를 변수에 할당하므로 유연성이 높다
그리고 호이스팅이 강제적으로 되지 않는다
변수에서도 호이스팅이 발생한다 .
var 키워드를 썼을 때
var num = 10; // num 을 글로벌 전역변수로 선언함
function printNum() {
document.wirte(num);
var num = 20; num 을 지역 변수로 선언
document.Write(num);
}
printNum();
//결과 - undifined, 20
처음 지역변수로 num 을 선언했음에도 불구하고 첫번째 변수 호출값은 undifined 를 내놨다
자바스크립트 내부에서는 함수 호이스팅에 의해 코드가 변경되기 때문이다.
var num = 10;
function printNum() {
var num ; // 함수 호이슽에이 의해 변수의 선언이 함수의 맨 처음 부분으로 이동됨
document.write(num);
num = 20;
document.wirte(num);
}
printNum();
함수 호이스팅에 의해 함수와 변수가 먼저 올라와서 var num 이라고 변수 선언만 먼저 된 것 -값이 없음
함수가 실행될 때 호이스팅은 자바스크립트 엔진이 실행 전에 코드 전체를 스캔하면서 자동으로 스코프(변수 환경)를 준비하기 때문이에요.
즉,
→ “자바스크립트 엔진이 printNum() 코드를 실행하기 전, 내부에 선언된 변수들을 미리 전부 등록해 둔 것이에요.
(1) 코드 전체를 자바스크립트 엔진이 읽을 때
var num = 10;
function printNum() {
var num;
document.write(num);
num = 20;
document.write(num);
}
엔진은 실행 전에 코드 전체를 두 단계로 처리
단계 이름 설명
| 1단계 | Creation Phase (생성 단계) | 스코프 안의 모든 변수와 함수 선언을 “등록”만 해둠. 값은 아직 없음. |
| 2단계 | Execution Phase (실행 단계) | 실제 코드 순서대로 실행하면서 값을 대입하거나 로직을 수행. |
(2) 전역 컨텍스트 생성
엔진이 먼저 전역부터 스캔
- var num 발견 → “전역 스코프에 num이라는 이름의 변수 하나 필요하네”
→ 등록 (값은 undefined) - function printNum() 발견 → “printNum이란 함수가 있네”
→ 함수를 통째로 메모리에 올림 (function declaration은 완전 호이스팅됨) - 이후 실행 단계에서 num = 10 실행 → 전역 num 값이 10으로 변경됨
(3) printNum()이 호출될 때
- 엔진이 새로운 **함수 실행 컨텍스트(Function Execution Context)**를 만듦
- 그 함수의 내부를 다시 스캔해서 선언문을 찾음
→ var num; 발견
→ “이 함수 안에도 num이 있네!”
→ 함수 스코프 안에 지역 num 변수를 미리 등록 (값은 undefined)
이건 document.write(num)이 있기 때문이 아니라,
“자바스크립트 엔진이 코드 실행 전에 내부 선언을 전부 찾아서 미리 등록하기 때문”
(4) 실제 실행
그다음 이제 코드가 한 줄씩 실행돼요.
document.write(num); // 아직 지역 num에는 값이 없음 → undefined
num = 20; // 지역 num에 20 대입
document.write(num); // 20
함수가 끝나면 이 지역 num은 함수 컨텍스트가 사라질 때 함께 메모리에서 제거
전역의 num(=10)은 여전히 전역 컨텍스트에 살아있다
[전역 실행 컨텍스트]
num → 10
printNum → (함수 코드)
└── printNum() 호출 →
[함수 실행 컨텍스트]
num → undefined (호이스팅으로 미리 등록)
↓
num = 20
printNum 끝남 → 지역 num 사라짐
| “var num이 왜 함수 위로 끌어올려져?” | 자바스크립트 엔진이 함수 실행 전에 내부 선언문을 미리 등록하는 단계가 있기 때문 |
| “document.write(num)이 있어서 만든 거야?” | no . 코드를 스캔할 때 자동으로 등록됨. 코드 내용과 상관없음. |
| “전역변수보다 먼저 함수가 호이스팅돼서 그런 거야?” | 함수 자체(printNum)는 전역에서 미리 정의되고, 그 안의 var num은 함수 스코프 안에서만 유효해요. 전역 num(10)과는 별개. |
“호이스팅”은 임의로 변수를 만들어주는 게 아니라,
자바스크립트가 코드 실행 전 단계에서 모든 선언을 미리 스코프에 등록하는 과정
그래서 var num은 실제로 문서 아래 있어도, 실행 전에 이미 스코프에 존재하게 된다.
그래서 넥사크로에서도 함수를 서넌할 때 함수표현식을 사용해야한다.
함수 선언식
Function Button00_onClick(0 { };
함수 표현식
this.Button00_onclick = finction() {
}
Code Snippet
반복되는 코딩을 쉽게 처리하는 것
1. Add Code Sinppet
2. name, ShortCut, Description
3. Code Snippet Source
주석 처리
ctrl ] 블럭 이동
ctrl + shifr + ] 블럭 선택
ctrl / 블럭주석
alt / 주석해제
자동 들여쓰기
auto indent
alt + f8 하기
format 형식 처리하기
--mask Edit
{} 안에 감싸고 shift 엔터 누르면
적용된다 * 처리
1000단위 이상
#,###.00 이렇게 한다 .
EDIT
비밀번호를 설정해서 * 처리 할 때는
Edit 박스에 속성 중 password 에 true 처리 해주기
FORM 에서 공통 요소는 URL 로 가져오기
같은 조회 조건이라든지 공통적으로 쓰일만한 폼은
하나를 잘 작성해두고 URL 로 가져와서 사용하면 편하다
탭 컨포넌트를 사용할 때
다음 탭을 보고 싶으면 우클릭 후 NEXT TAP 선택하기
탭을 url 로 설정해두면 선택한 탭의 컴포넌트들만 불러온다
탭이 2개라면 보고 있는 선택된 한탭만 불러오는 것
그래서 컴포넌트들을 직접 넣은 것보다 url 로 가져오는 게 더 빠르다 .
이 때 다른탭의 내용을 현재 탭에서 참조 할때가 있다
이때 로딩이 되어있지 않기 때문에 undifind 오류가 뜬다
이를 해결하려면 속서에 preload 에 값을 true 로 바꿔주면 로딩이 될 때 탭 페이이지에 연결된 모든 url 이 로드되어야지
페이지가 로드된다. 근데 이 방법을 사용하기보단 개발로직으로 푸는 것이 맞다 .
정렬시에
세로로 3개를 딱 맞게 정렬하려면 distridute Vertically by specifued value 하고 값을 -1 로하고 적용하면 정렬이 된다
데이터 바인딩 시 format #,##0.00 이렇게 1의 자리를 0으로 넣어주면 null 값일 때 0 을 보여줄 수 있다.
화면실습 - 그리드
그리드내에서 컬럼이름 변경하려면 text 를 변경해주면 된다
그리드 컬럼의 형태를 정하려면 cellMaskEdit 에서 maskeditformat 을 바꿔주면 된다 AA-### 이런 형식으루
그리고 dept-id 같은 것도 선택 시 콤보박스가 되게 하기 위해서는
displaytype 을 comnotext 로 바꿔주고서
cellcombo 영여에서 combocodecol 에는 아이디값 combodatacol 에는 dept_name
combodataset 에는 ds_dpet 넣으면 수정시에 목록값이 combo 값으로 바뀐다 .
combotext 로 하면 평상시엔 text 로 보이고 수정시에 combo 값으로 보이고
comboControll 로 하면 평상싱도 콤보 박스로 보인다
checkbox 는 type 을 checkboxcontroll edittpye 도 checkbox 로만 지정해주면 된다