할수있다!긍정왕

vue-way.html 파일 생성

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

개발자 도구을 실행시켜서 해보기

개발자 도구에서 확인

chrome 설치 : https://www.google.com/intl/ko/chrome/

visual studio code설치 : https://code.visualstudio.com/

node.js 설치 (LTS) : https://nodejs.org/ko/

vue.js dev tools  : https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

/****************************************************************************************************************************/

https://github.com/joshua1988/learn-vue-js

/****************************************************************************************************************************/

visual Studio Code 실행

github자료를 다운 받은 후 오픈 하기 file open 

vetur  설치

material Icon Theme 설치

Night Owl 설치

live Server 설치

원하는 파일을 클릭 후 오른쪽을 클릭하여 Open with Live Server를 누르면 OK --> 파일 실행

/****************************************************************************************************************************/

뷰 개잘자 도구소개 및 실행 방법

windows + F12 : 개발자 도구 단축키

/* ************************************************************************************************************************* */

Vue 는 무엇인가?

MVVM 패턴의 뷰모델 레이어에 해당하는 화면단 라이브러리

/***************************************************************************************************************************/

auto close tag를 다운 받으시면 저절로 코드가 닫을 수 있게 불러옴

! + tab 버튼을 누르시면 필요한 html이 나옵니다.

패널 토글 단축키 : ctrl + \

이렇게 변합니다.

이렇게 결과가 나오는 것을 볼수 있습니다.

데이터를 재설정해도 화면이 바뀌지 않는 것을 볼수 있습니다.

 * jQuery 란?

자바스크립트 라이브러리

* 목적 : 웹사이트에서 자바스크립트를 사용하는 것이 훨씬 쉬워지도록 하는 것.

여러줄의 자바스크립트 코드를 필요로 하는 많은 일반적인 작업을 한줄의 코드로 작업할수 있는 메서드로 실현 가능

jQuery 는 Ajax 호출 및 DOM조작과 같은 자바스크립트의 복잡한 작업을 간단히 처리

* 기능

- HTML/DOM 조작 : 특정요소를 쉽게 찾고, 내용변경이 간단하다.

-CSS조작 : 특정요소에 대한 스타일 변경 등의 작업이 간단

-HTML : 이벤트 간단하게 처리

-효과 및 애니메이션 : 웹 페이지 상의 효과나 애니메이션이 가능

-Ajax : 네트워크를 통하여 서버와의 정보 교류를 쉽게 한다.

*jQuery 사용하기

1) 다운로드 받아 사용 하는 방법

2) 사이트를 방문하여 참조하는 방법 

https://developers.google.com/speed/libraries/#jquery

* jQuery의 기초 

jQuery를 사용하여 HTML요소를 선택하고 'action'을 수행한다. 

jQuery 구문은 HTML요소를 선택하고, 그 요소에 대해 몇가지 작업을 수행하기 위해 만들어 졌다.

$ : jQuery를 정의하고 호출하여 사용

selector : HTML요소를 쿼리하는 역할

action : 선택요소가 행하는 동작을 명시

$() 의 괄호 속에는 선택자를 지정하여 요소를 선택하며, 그 요소에 대한 요구되는 기능을 실행

CH02_01.HTML

* 문서준비 메소드 

-document.ready()

jQuery 소스는 document.ready() 내 함수로 작성된다. document.ready()의 일반적인 형식은 다음과 같다.

문서로드가 완료되기 전에 jQuery코드가 실행되지 않도록 하기 위한것.

* 프로시저 

1) 리턴값이 있을수도 없을수도 있다 .(IN 또는 OUT)

2) 리턴값이 여러개 일수 있다.

3) 서버에서 실행이 되기 떄문에 속도가 빠르다

4) CALL프로시저명() 또는 EXECUTE 프로시저명()

* 함수

1) 리턴값이 필수

2) 클라이언트에서 실행이 되기때문에 프로시저보다는 느리다.

4) SELECT 함수명() FROM DUAL;

examples/part2/045.js

어떤 배열의 부분을 다른 배열로 복사하는 방법 

1. for문을 이용하여 배열의 각 오브젝트를 복사하는 방법

2.System클래스 이용하는 방법

System 클래스의 arratcopy 메소드는 자바 언어에서 자체적으로 지원하는 배열복사메소드

arratcopy 메소드의 입력값은 복사하려는 배열, 복사하려는 배열의 시작위치, 저장될 배열, 저장될 배열의 저장 위치, 복사할 배열 크기이며 한가지 알아둘 사항은 복하할 배열의크기가 저장될 배열의 크기보다 크면 ArratIndexOutOfBoundsException오류가 나므로 저장될 배열의 크기 더 늘려줘야함 

* 스코프 체인 히해하기

스코프 체인 : 문자 그대로 스코프가 연결됨 

실행컨텍스트 : 코드가 실행되기 위해 필요한 정보 가지고 있음

examples/part2/043.js

실행 컨텍스트는 렉시컬 환경을 가지고 있는데, 렉시컬 환경은 환경레코드와 외부 렉시컬 환경으로 구성

실행 컨텍스트를 자바 스크립트 객체 형태로 표현

실제 함수와 변수같은 식별자와 그 식별자가 가리키는 값은 키와 값의 쌍으로 환경 레코드에 기록됨.

렉시컬 환경은 환경 레코드 외에 자신의 실행환경을 감싸는 외부 실행환경에 대한 참조를 가지고 있음

/****************************************************************************************************************************/

* 클로저 이해하기

examples/part2/044.js

* 클로저란? 

함수가 정의될때의 렉시컬 환경을 기억하는 함수

let : 변수선언시 변수의 유효범위 블록 범위로 지정

exampels/part2/041.js

examples/part2/041-1.js

let으로 선언한 변수는 블록단위로 일어남. 하지만 var과 다르게 undefined가뵤이 할당되기 보다는 블록 시작이 선언이 이루어진 라인까지 일시적으로 접근을 막음 

if 블록안에 let을 변수로 정의했기 때문에 value는 if블록 안에 위쪽으로 호이스팅되어  실제 let으로 선선이 이루어지기전까지 일시적으로 접근이 안되는 영역을 만들고 그 안에서 접근을 하게되면 에러 발생

/************************************************************************************************************************/

const로 상수 선언  : 선언시 할당해야하고 이후에 재할당이 어려움

examples/part2/042.js

examples/part2/042-1.js

자바스크립트에서는 함수를 선언하기 전에 호출 가능함 ==> 호이스팅

examples/part2/040.js

함수를 선언문이 아닌 표현식을 통해 변수 할당하여 호출 

* 호이스팅은 자바스크립트의 코드를 해석하고 실행하는 방식 때문에 나나탐.

자바스크립트는 코드를 해석하는단계와 실행하는 단계로 나뉘고, 해석하는 단계에서 선언 문장을 초기화하면서 스코프 형성하고 실행하는 단계에서 값을 할당하거나 계산을 하는 행위