jsfiddle

 

Jsfiddle 사용하기(jsfiddle.net/)

- collaborate 기능: 협업기능으로 실시간으로 여러사람과 코딩을 할 수 있음

 

 

 

소스코드 환경 만들기(시뮬레이션으로 사용하고싶은 코드를 추가)

- 나의 계정 메뉴에서 new fiddle 선택 - 프로그래밍 언어 종류에서 드롭박스를 누르면 타입을 선택할 수 있다.

 

외부라이브러리 링크

- 좌측 메뉴단에서 Resources에 링크 붙여 넣고 플러스 버튼으로 추가한다.

- HTML/ JS  소스 붙여 넣기

 

- sample 데이터값들이 넘어오지 않을 경우 크롬 개발자모드(F12)에 들어가서 'Network'탭에서 'XHR'^[각주:1], 'JS' 등 데이터 타입이 있는데 어느 경로 넘어오는지 확인한다. 

 

오늘 수업의 경우는 개발자 도구의 NETWORK - JS에서  DOC.JS파일에 데이터가 있었다.

그 소스를 복사해서 붙여넣으니 sample과 같이 데이터가 반영되었다.

 

 

JS Code

자바 엔진 실행 순서 컨텍스트 실행순서라고 했었나..가물..ㅎ

선언된 것을 변수를 다 찾는다

문은 선언과 대입이 동시에 일어난다.

function으로 선언 했을 때 대입과 실행이 바로 된다 window.test = function();

window.gridData = (); 신텍스 에러

내가 썼는데 뭐라하는지 모르겠네

 

즉시실행함수를 문을 식으로 바꾼다. 함수에 ()감싸면 즉시실행 함수이다. 이건 좀 기억 난다. 

문과 식이 대입되고 선언되는 순서에 의해 다르게 해석하기 때문에..

 

값을 바인딩..

init() 코드 돔이 함수 밖 안에 선언되있는 경우 차이가 크다.

$(document.body).ready(function() {} (??)

돔이 준비될때까지 대기하고 있다가 해석을 시작한다.

 

돔레이에 실제로 실행하는 코드를 직접적으로 넣으면 좋지 않은 코드이다.

돔이 준비되어야 제이쿼리등을 해석할 수 있다..

돔과 관련된 이벤트 함수를 넣는다. 

암튼 돔이 갑인가...ㅋ

 

---

 

코드가드

값이 null일때를 대비해서 디폴트값을 미리 넣어줘서 확인을 한다. 
데이터 타입 확인을 하는 코드도 넣어주면 더 정확한다.

 

---

딥카피(?)

 

 

링크를 끊는 것 = 참조하는 객체를 새로운 객체를 만들기 위해서.

뭔가 자바의 인스턴스와 비슷하다고 생각이 되네..

객체를 스트링으로 

스트링으로 만들어진걸 객체로.

 

변수 선언을 무조건 함수 위에 하면 혼동이 올 수 있으므로.. 작성 코드에 따라 변수 위치는 달라질 수 있다.

var를 안 붙인 이유는 변수 체크를 계속 할 필요가 없게..(?)

자바스크립트 참조 

원시타입 제외 모두 객체이다.

객체는 참조를 하지.....

ES6문법도 알아야..

---

$.extend 값할당.

ture를주면 상세하게 할당을 한다..

{}빈객체 - 오른쪽부터 오버라이드가 되서 맨 앞에 데이터가 할당이 된다.(별도로 값을 대입?하기 위해서 하는건가)

 

true 선언에 따라서 배열안에 있는 객체자체를 할당하여 id가 없어진다.

 

-헤더 : key안에 컬럼을 만들 수 있다.

 

[body]

- mergeCells: key를 입력하면 merge가 되고 true는 전체적으로 merge가 된다.

- grouping : 속성을 묶어서 데이터 표현

-footSum (footer): 

 

---

콤보박스: 편집가능

오토컴플릿: 자동생성

Input 변경되지 않는 속성..

div 버주얼돔 : 기존 style태그는 원하는 기능이 적용이 안되는경우가 많아서.

스타일을 다시 줘야되는데 경우가 있는데, 별도의 가상돔을 div로 만든다?

---

브라우저 디버깅

 

화면단 - 크롬 개발자도구 - Sources -왼쪽 메뉴에 밑에 사진 경로로 가서 소스코드 라인줄에 클릭을 하고, 화면단에 데이터를 불러오는 조작을 누르면 데이터가 들어오는 것을 확인할 수 있음.

 

개발자 도구에서 소스코드 편집 후 로컬에 저장하는 방식으로 디버깅도 가능

웹브라우저에 개발자 모드에서 코드를 수정한 뒤에 로컬 디렉토리에 소스코드를 저장하기 위해(?) 하는 것 같다.

sources- overrides - C드라이브 제외한 폴더를 선택한다(수업에서는 temp폴더 선택함)  

res.list = []; 를 추가

* 디버깅을 마쳤으면 overrides 이력은 지워줘야함.

 

---

Vscode 디버깅

 

런치chrome버튼에서 새창 옵션을 attacher로 설정

 

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --remote-debugging-port=49222

 

크롬 위치에 가서 크롬 속성 클릭 - 대상에 한칸 띄우고 '--remote-debugging-port=49222'를 추가

 

 

*브레이크 포인트가 

프로젝트 파일의 system - system-config-program.js에서 

1. XMLHttpRequest(XHR) 객체는 서버와 상호작용하기 위하여 사용됩니다.

   전체 페이지의 새로고침없이도 URL 로부터 데이터를 받아올 수 있습니다.

   즉, 전체 페이지와는 독립적으로(비동기적) 데이터를 주고 받을 수 있다는 의미다. 

   XMLHttpRequest 는 AJAX(Asynchronos Javascript And XML)프로그래밍에 주로 사용됩니다. [본문으로]