JSFiddle 이용,, 실시간으로 코드 공유도 가능하다. 프론트엔드 개발에 유용하다.
새로운 Fiddle을 만들고 ax5ui의
주소를 복사해서 Fiddle의 Resources에 추가해준다.
샘플코드 데이터가 나오는데 개발자도구에 network-xhr에 노출이 안된다면 js코드일 확률이 높다. network-js에서 샘플코드가 있을만한 파일을 찾아 샘플코드를 가져온다.
ax5ui-grid
ax5ui 셈플 코드
- ax5ui-01-grid-basic : https://jsfiddle.net/davids5x/019wedfc/1/
- ax5ui-02-grid-edit : https://jsfiddle.net/davids5x/9sxfyph2/1/
- ax5ui-03-grid-tree-basic : https://jsfiddle.net/davids5x/6hq9vo2L/471/
- ax5ui-01-grid-tree-edit : https://jsfiddle.net/davids5x/7gb1ha36/37/코드설명
HTML
컨테이너가 전체 컨테이너 사이즈 fluid를 주면 100%
타이틀 영역 - 추가적인 스타일 정의가 가능하다. CSS 확인
버튼영역
grid 범위 지정
CSS설정 형식은 Positioning, Box-model, Typography를 먼저 설정하고 나머지를 설정하는게 좋다.
중요
$(document.body).ready(function() {
init();
});코드가드 : 잘못된 데이터가 들어왔을 때 그걸 캐치해서 에러가 발생하지 않도록 해준다.
len 값이 없을 때 len을 기본값 100으로 지정해준다. parameter 받은 것에 대한 코드가드를 하는걸 습관화 하는게 좋다.
자바스크립트를 탄탄하게 만들려면 타입까지 지정해줘야하지만 일단은 간단한 코드니까 넘어간다.
$.extend()
자바스크립트는 원시타입을 제외하고는 모두 객체다. 대입이 원시데이터로 되면 참조가 안되고 대입이 객체로 되면 참조가 된다. 참조는 어딘가에서 수정했을 때 메모리의 값이 바뀐다.
$.extend()는 새로운 메모리를 할당해서 참조를 끊는 역할을 한다.
objA와 objB 모두 결과값이 jeff가 된 것을 볼 수 있다.
var objB = $.extend({}, objA[0]);
var objB = JSON.parse(JSON.stringify(objA[0]));두 가지 방법으로 코드를 수정하면 원시데이터로 대입이 되어 참조를 끊기 때문에 메모리 값이 바뀌지 않는다.
javascript 디버깅하기
- 브라우저를 통한 디버깅
개발자도구 - Sources 경로에서 사진상의 경로를 따라가면 이 브라우저를 열때 썼던 자원들이 존재한다.
system-config-program.js 파일을 열고 4번줄처럼 선택을 하면 Breakpoints가 생성된다.
조회 버튼을 눌렀을 때 브레이크 포인트를 만나서 디버깅 모드가 실행된다.
브라우저에서도 코드를 수정할 수 있다. Overrides에서 폴더를 선택하고 민감한 정보 노출을 허용한다.
코드를 수정하고 저장(ctrl+s)을 하면 수정한 파일이 해당 폴더에 다운로드 된다.
VS Code에서 디버깅하기
디버깅모드를 선택하고
Run - Chrome 을 선택한다
Add Configuration을 누르고 Attach to Chrome을 선택하면 아래처럼 설정된다.
크롬의 파일 위치 - 크롬 속성 - 대상 에 아래 경로를 추가한다.
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --remote-debugging-port=49222
해당 포트번호와 launch.json의 포트번호를 맞춰주어야 에러없이 실행된다.
열려있는 브라우저창을 모두 닫고 작업표시줄의 바로가기도 제거한다. 크롬 바로가기를 끌어다 작업표시줄에 추가하고 실행을 해야 디버깅 모드가 정상적으로 작동한다.
다시 AXBoot를 실행하고 VS Code의 Run and Debug 버튼을 클릭한 후 조회버튼을 클릭하면 디버깅 모드가 실행된다.
