공부기록

개발방법론  

절차지향 vs 객체지향

*객체지향 프로그래밍 *

1.

- 객체 : 하나의 완성되어 있는 형태 ( 눈에 보이는것 vs 눈에 보이지 않는 것)

ex) 핸드폰 ( 객체 ) : 통화, 메세지, 인터넷, 어플 ..

2.

기능의 구조에 대한 이해

함수 -> 기능 ( 메소드 ) -> 클래스 (틀) -> 인스턴스

*붕어빵과의 비유*

메소드 : 팥, 슈크림..

클래스 : 붕어빵 틀

인스턴스 : 붕어빵

3.

1) 추상화 : 눈에 보이지 않는 것을 추상적으로 만들기. (객체,  개발구조 만들기, 기능단위 만들기.. )

2) 캡슐화 : 데이터나 기능을 보호하기 위한 방법.

3) 상속 : 재활용 할 수 있는 것을 분리하는것. 상위개념 (class)

4) 합성 : js에서는 표현하기 힘들다. 기능을 합치는 것

5) 다형성 : 한가지 기능이 여러가지 결과를 만들어 주는 것

*절차지향 프로그래밍*

객체 없이 기능만 절차대로 프로그래밍 하는 것.  

* es6 class / 상속 *

1. ES6 class

ES5 이전 버전 : 객체지향프로그래밍을 그럴듯하게 표현하기 위해 함수를 클래스처럼 사용한 것.

원래 js 에는 클래스 개념이 없다.

1. 리터널클래스 ( 객체. 자체로 인스턴스) 객체지향프로그래밍에 맞지 않다. 상속x

2. 함수방식 클래스 ( 함수, new로 인스턴스화) 객체지향 프로그래밍에 맞지 않다. 상속x

3. 프로토타입 방식 클래스 (함수, new로 인스턴스화, .prototype으로 변수, 메소드 생성) 상속 o

-> 객체지향프로그래밍에 맞다

4. ES6 (ECMA script2015)(==프로토타입클래스) : 상속 o  

class 클래스명 {

constructor(매개변수){

...

}

...

}

으로 구성된다.  

constructor는 new연산자로 인스턴스화할때 ( 객체로 리턴할 때 ) 실행되는 부분. 매개변수 사용 가능하다.

2) 인스턴스화하기.

constructor 실행됨.

3) 멤버변수, 함수 실행하기.

2. 상속  : 갖고있는 데이터를 가져오는 것.

class 클래스명 extends 상속받을 클래스명 {

...

}

1) 클래스 만들기

2) 인스턴스화

: constructor 실행

이렇게 바꿨을 때

3) 멤버변수, 메소드실행 출력

* 클래스 *

함수(메소드) 와 변수( 멤버변수 ) 의 집합

1) 리터널방식 ( literal ) : 객체형태. 자체가 인스턴스이다 ( 일회용 )

2) 함수방식 클래스 : 함수형태. new연산자 사용하여 인스턴스 만듬 ( 확장성 )

3) 프로토타입방식 클래스 :  함수형태.

- new연산자 사용하여 인스턴스 만들고(확장성) .prototype을 이용하여 데이터를 추가한다.

- 상속 가능( 관리 용의성 )

1. 전역변수, 전역함수는 협업할 때 합리적이지 않다 ( 이름이 겹치면 곤란해짐 )

-> 클래스 이용

- 전역변수와 전역함수로 이루어진 코드

- 위의 코드를 클래스(리터널클래스) 로 만들었을 때

* this *

현재 속해있는 객체, .. 영역

상황에 따라 다르다.

- 전역에서의 this

*

: 100의 값을 줬는데도 200으로 바꼈다.

(전역에서의 this == window)

1. 리터널방식 클래스 ( literal class)

: 객체로 나타낸다.

- 사용할 땐 . 을 사용해서 불러옴.

* 안의 this는 속해있는 객체 Exam이다.

2. 함수방식 클래스 ( 객체 아님 )

paramenter를 이용해 재활용 가능.

틀( 함수 )을 만들어서 인스턴스로 계속 찍어냄 .

1) 클래스 Func

- this.num 을 console에 찍으면

- 함수로 실행해서 Func안의 this가 어딘지 console을 찍으면

: window이다.

2) 연산자 new로 인스턴스 만들기

: 함수가 객체로 바뀐다. 객체로 바꼈기 때문에 Func안의 this는 윈도우가 아닌 Func가 된다.

Exam2, Exam3는 각각의 데이터 공간을 가진다.  

* new연산자로 바꾸는 순간 Func가 한번 실행된다. this콘솔에 찍힘 -> Func*

3) 멤버변수와 메소드 실행시키기.

3. 프로토타입 클래스.

상속이 가능하기 때문에 객체지향 프로그래밍을 사용하기에 좋다.

1) 본체 - 초기화

2) 변수, 메소드 등 생성하기

클래스이름.prototype.메소드/변수이름 = ..

3) 인스턴스로 만들어내기.

( 한번 실행된다. )

* Cal을 아래처럼 바꾸고 나서 new연산자를 이용해 인스턴스 만들 경우 *

- 한번 실행되면서 찍힌다. num, sum도 같이 찍힌다.

4) 인스턴스 멤버변수, 메소드 실행 출력하기

1. 스코프체인

: 스코프가 계속 연결됨. ( 중첩 ) 스코프 안에 스코프 만들기

* 타 언어에서는 안된다 *

- outFunc 안의 inFunc

outFunc 호출 하면 outFunc를 실행하면서 inFunc의 호출명령을 읽으면서 inFunc가 실행된다.

inFunc 는 전역의 a, outFunc의 b 이용.

2. 클로져 (closure) : private ( != public)

 스코프 체인을 만들었을 때, 내부함수를 반환하여 저장하면

외부함수에 있는 변수가 보호, 유지 되는것.

여러개의 클로져를 만들어도 각각 별도로 저장된다.

- 일반적인 스코프 체인 실행하기.

: 외부함수 open을 호출하고, open을 실행하면서 inner함수의 선언을 읽고 inner함수의 호출문을 읽으면서 inner함수를 실행한다.

실행한 외부함수 open의 매개변수 x, 지역변수 z, inner함수의 매개변수 y이용하여 z+y+z 결과값 구함.  

여러번 실행해도 결과는 항상 같다. 함수를 실행할 때 마다 변수가 다 새롭게 만들어지므로.

- 클로져

내부함수 innerFunc를 반환하도록 함수 close를 만든다.

변수에 close의 반환값을 저장한다 ( 내부함수 innerFunc )

* 저장하는 동시에 외부함수의 변수값들도 같이 저장한다. 클로저 생성.

따로 저장되는 데이터공간이 생긴다. *

- 저장한 값(close의 반환값) 자체를 console에 찍으면

- innerFunc가 반환되어 저장된 변수 sum을 호출하면, 외부함수를 읽지도 않았는데 함수가 잘 실행된다

( return값 저장하는 과정에서 외부함수의 변수도 같이 저장되었기 때문에)

이때 함수를 실행하기 위해 위에 찾아가서 close안에 저장된 innerFunc를 실행하는 것이 아니라 별도로 저장된 클로져 sum을 실행한다.  

- 여러번 실행했을 때

: 값이 달라진다.

실행할 때 마다 z값이 1씩 늘어나므로.

클로저가 아닌 일반 스코프체인을 실행 했을 때는 결과값이 항상 같았다

( 항상 외부함수를 실행하면서 z값을 10으로 초기화 했기 때문에)

클로저를 실행할때는 외부함수를 실행하지 않는다. 즉 z 값의 초기화 없음.

대신에 클로저생성시 저장된 z 값을 항상 이용한다. 

따라서 함수를 실행 할 때마다 z값이 1씩 늘어난 값이 저장됨.  

- close의 반환값 innerFunc를 같이 저장한 변수 total 실행하기 

변수sum의 z는 벌써 5나 커져서 40의 결과값을 보이는데 total의 z값은 한번 실행의 결과로 1만 커져있다.

즉 여러개의 변수에 같은 함수의 반환값으로 같은 내부함수를 가지더라도 별도의 데이터 공간을 가진다.  

+)

setInterval(function(){},시간)은

var setInterval = function (~~~ ) 임

스코프 (scope)

: 제한된 영역. {} 로 영역을 표시한다

1. 전역과 지역

- 전역변수 global과 지역변수 local

- local host(내 PC)와 remote(서버)

1) 전역변수 global  : 전체 영역에서 사용될 수 있는 변수

2) 지역변수 local : 제한된 영역에서 사용될 수 있는 변수.

(number함수 내에서 사용되는 num1이 지역변수이다 )

3) 전역변수와 지역변수

* 같은 이름의 변수이지만 함수 number 지역에서는 다른 변수를 가진다.

2. 호이스팅 (Hoisting)

:   스코프에서 생성된 변수. ( 전역도 해당하긴 한다) 에서 일어남.

끌어올리다. 라는 뜻으로 변수를 스코프 내에서 선언하면 스코프의 가장 상단에서 변수의 존재를 인식한다.

하지만 변수의 값은 선언되는 라인에서 들어옴.

ex 1 ) var

: 호이스팅이 없다면 전역변수인 num1 = 10이 console.log에 의해 찍히겠지만 

같은 스코프 아랫줄에서 num1=30으로 변수를 선언 했기 때문에 스코프의 가장 상단에서 존재를 인식한다.

따라서 undefined 가 찍힘.  

->. 변수를 맨 위에서 선언했을 때

: 지역변수 num1=30이 잘 찍힌다.

ex 2) let (es6 개선사항)

위의 var에서 undefined가 찍힌 것을 개선하기 위해 let을 사용하면,

호이스팅으로 인해 num1의 선언은 상단에서 인식 되나 undefined 대신에 오류가 뜬다.

- 상단에 let으로 변수 선언하기.

아주 잘됨 !

* 따라서 변수를 선언할 때는 맨 위에 쓰는게 좋다 !  *

ex 3 ) 전역에서의 호이스팅

- var

: 지역에서와 마찬가지로 undefined

-let

: 지역에서와 마찬가지로 오류,

3. 스코프에서 let과 var의 차이점

 : let이 스코프에 대해서 더 엄격하다.  

- var로 for문의 i를 선언했을 때.

: 전역의 변수에도 영향을 준다

for문 소괄호에서 var로 변수를 호출하는 것은 전역으로 사용된다.

- let으로 for문의 i를 선언했을 때

: 전역의 i 에게 영향을 주지 못한다

for문의 소괄호 안에서 let으로 변수를 선언하는 것은 지역으로 사용된다.

+)

- const로 for문 소괄호 안의 변수를 선언했을 때

: const는 바뀔 수 없는 변수이므로 for문의 실행 자체가 오류가 난다.

*

- 가급적으로 let과 const를 사용하는 것이 낫다.

- 서비스 목적이라면 var를 사용하는 게 낫다( let과 const를 사용하는 사람이 아직은 많지 않기 때문에)

변수 선언할 때 쓰는 let 과 const, 변수명만으로 선언하기

1. let (ie 11이후부터 사용 가능)

: 유일한 변수. 같은 이름으로 또 만들 수 없다

- 같은 이름으로 변수 선언하기

- 오류

- 같은 이름 선언 없애면

- 오류 안남

- 안에 들어가는 내용 바꿀 수 있다

- 오류 x

2. 변수명만으로 선언하기

: 오류 x. 지역에서 선언해도 전역변수로 선언된다.

3. const : 상수. 안의 데이터를 바꿀 수 없다

- 바꾸려면 오류.

* 자바스크립트를 활용한 애니메이션 * 

- setInterval(함수,시간) : 매 '시간'마다 '함수'를 실행시킨다 

(~시간에 한번 함수 실행)

-setTimeOut : '시간'이 경과하면 '함수'를 한 번 실행시킨다. 

-clearInterval(변수) : interval을 없애준다 

* 시간단위 : 1ms (1000ms = 1s)

*순서대로 개발하는것 : 절차지향 프로그램이 (<-> 객체지향 프로그래밍)

<HTML>

(+) CSS의 transition과 비교할 때 사용할 태그

<CSS>

<화면>

* setInterval을 이용해 1초마다 숫자가 바뀌는 초시계 만들기 * 

1. 변수 지정해놓기 

2. 초시계의 시간을 나타낼 num 변수 

3. setInteval 

1초에 한번 clock의 innerHTML을 1씩 늘린다.

(F5누르면 바로 실행)

4. 시작 버튼을 눌렀을 때 실행하도록 addEventListener 안에 넣어준다.

-> 버튼을 누를수록 Interval이 중첩되므로 숫자가 커지는 속도가 점점 빨라진다. 

5. 속도가 빨라지는 것을 방지하기 위해 버튼을 누를 때마다 이전에 실행되고 있던 Interval을 지우도록 clearInterval 

clearInterval은 변수가 필요하므로 변수를 만들었다. 

저렇게 변수에 넣으면서 setInterval을 해도 실행된다

move를 setInterval을 실행하면서 만들면 clearInterval 에서 오류가 나므로 밖에 미리 만들어 두었다. 

6. 정지를 눌렀을 때 시계가 멈추는 동작

clearInterval

7. num=1으로 초기화 해주면 정지하고 다시 시작할 때 초시계가 처음부터 돌아가게 된다. 

*응용 : 이동 버튼을 누르면 시계가 오른쪽으로 200px 이동하게 하기*

* 이동 응용을 css transition으로 나타냈을 경우 * 

<CSS>

<JS>

훨신 간단하다 ^.^ 

4. input form 관련 이벤트 

focus : 해당 태그가 포커싱(클릭) 될때 

blur : 해당 태그가 포커싱이 취소될때 

change : input form 안의 내용이 바뀔때 

(blur되는 순간 작동함)

*var doc=document; 를 통해 document를 변수 doc에 넣어놨다.*

<HTML>

<CSS>

<화면>

1) 

태그 선택해 변수에 넣기

focus와 blur

2) change

더 다양한 이벤트 : https://www.w3schools.com/js/js_events_examples.asp

3. 스크롤에 의한 event 

scroll

scrollTop : 스크롤을 내린 정도. 

*var doc=document; 를 통해 document를 변수 doc에 넣어놨다.*

<HTML>

<CSS>

<스크롤이 많이 생긴 화면>

1) window에 scroll event가 생길 경우의 실행. 

2) 

- body를 기준으로 얼마만큼 내려갔느냐가 판단되어야 한다.

- scrollTop : 현재 내려온 정도.  

- 보통 스크롤 한번에 100px 내려온다. 따로 설정할 수 있다. 

↓ console에 찍힌 scrollTop

*내려온 정도마다 배경색 다르게 하기*

다시 올라가도 원상복귀 되지 않는다. 

더 다양한 이벤트 : https://www.w3schools.com/js/js_events_examples.asp

2. 키보드에 의한 event

-keyup : 키보드를 누르고 뗄 때 

-keydown : 키보드를 누를 때 

-keypress

*var doc=document; 를 통해 document를 변수 doc에 넣어놨다.*

<HTML>

<CSS>

<화면>

1) input태그 변수에 넣기

2) keyup

키보드를 누르고 떼는 순간. popup창 띄운다 (어떤 키든 상관없음)

↓ 팝업창

3) 매개변수 

-매개변수 event : 어떤 키를 눌렀는지에 대한 정보

- 함수의 첫번째 매개변수 : 해당 이벤트에 대한 정보. (e나 event를 변수명으로 많이 사용한다)

-자동으로 변수가 들어온다. 

- event console 출력

↓ 누르는 키가 뜨고 키에 대한 정보가 뜬다

(한글을 눌러도 영어로 뜸)

4) key code : 키보드 값마다 갖고있는 특정 숫자. 

위의 console창을 늘려 정보를 보면 다음과 같이 key code가 나와있다. 

- console창에 key code도 띄우기

*key code값은 google에 검색하면 쉽게 얻을 수 있다. *

*keycode vs ASCLL code*

1) keycode는 대소문자 구분 x, ASCLL code는 구분

2) key code는 F1, F2.. 등의 값이 있음. ASCLL code는 없음 

* key code를 이용해 누른 키보드 값에 따라 원하는 행동을 실행할 수 있다 *

엔터의 key code : 13

↓ 실행 결과

- input에 막 치다가 엔터를 누르면 위의 nemo 태그에 내용 넣기. 

(nemo 태그는 미리 nemo 변수에 넣어놨다. ) 

↓ 실행결과

5) 방향키 (좌우) 를 누르면 누르는 방향으로 nemo 태그를 이동하게 하기

* window : 어디서든지 누르면 이동

*-> 의 key code : 39

*<- 의 key code : 37

연속해서 방향키 누르기. 

 *key down : 누를 때 실행된다. *

계속 누르고 있다가 뗄때

keyup : 뗄 때 실행이 되므로 끊어지고 조금씩 간다

keydown : 누를 때 실행이 되므로 계속 간다. 

더 다양한 이벤트 : https://www.w3schools.com/js/js_events_examples.asp