공부기록

개발방법론  

절차지향 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 : 상수. 안의 데이터를 바꿀 수 없다

- 바꾸려면 오류.

반복문 each

여러개의 태그가 선택되었을 때 각 태그 하나하나 돌아가면서 설정한 기능을 실행하는 것.

(jQuery에서만 가능한 반복문이다)

each(function(실행되고 있는 태그의 순서를 나타내는 매개변수){

....})

ex)

<HTML>

이렇게 10까지.

<js, OWL 이용 >

위의 슬라이드 기능의 ani 함수를

이런식으로 나타낼 수 있다.

API

플러그인을 우리가 조작할 수 있게 만들어 놓은 것.

open API ex) 네이버지도, sns로 로그인하기, 타 사이트에서 sns 좋아요 누르기 등

owl carousel에 옵션, 메소트, 콜백이 있다.

1. option

owl-carousel 함수 실행에 객체형태로 매개변수로 들어가 여러가지 선택사항들을 마음에 드는 대로 바꾸는 것.

https://owlcarousel2.github.io/OwlCarousel2/ 접속 -> 상단의 Docs -> API의 option

많은 종류의 옵션이 있다.

{해당 옵션의 이름 : 원하는값 , 해당 옵션의 이름 : 원하는 값 .. } 의 형태로 사용한다  

(예)

*responsive : 반응형. 사이즈마다 원하는 옵션을 넣을 수 있다.

1000~

600 ~ 1000

~ 600

2. event

class owl-carousel 과 상관없는 태그를 이용하여 owl carousel을 조작하는 것

or

어떤 이벤트가 일어났을 때의 값을 반환하는 것

or

해당 이벤트가 일어 났을 때 할 행동을 설정하는 것  

(+) call back

Owl Carousel 홈페이지 -> 상단의 Docs -> API -.> event

- 맨 아래에 많은 종류의 이벤트들이 있다

parameter, callback, type 이 나와있다.

ex)

type :

callback :

parameter :

1) 이벤트 감지하기

2) 상관 없는 태그로 이벤트 실행시키기

( 매개변수 형태 지켜야 한다 )

* 특정 기능 가진 슬라이드 만들면서 callback, event data 익히기 *

<HTML & CSS 변경 >

아래의 내용으로 10페이지 만들었다.

opacity : .1

<화면>

callback과 data 사용하며

페이지를 넘길 때마다 숫자가 순서대로 연이어 선명해 지면서 내려오게 하기.

3. 데이터 받아오기 (call back)

함수에서 매개변수 event를 이용하여 현재 상황에 대한 이벤트를 받을 수 있다.

* 사용해서 함수 만들기 *

4. callback

owlCarousel 함수 호출 할때 매개변수로 옵션을 넣은 것 처럼 callback을 이용하여 함수를 실행 할 수 있다 .

owl carousel event 페이지 맨 아래에 여러가지 이벤트가 나와 있는 곳에 callback 형태가 나와 있다.

callback (감지할 이벤트) : 실행할 함수

<js>

Owl Carousel : 슬라이드 플러그인  

https://owlcarousel2.github.io/OwlCarousel2/

사용하기

1. 홈페이지 접속

https://owlcarousel2.github.io/OwlCarousel2/

2. 다운로드

- 다운로드된 폴더

필요한 파일들을 모아서 정리하기.

-> docs로 들어가기

-> asset

-> owlcarousel

-> js파일 복사해서 원하는 폴더에 넣기

-> assets

-> css, theme.css 파일 외에 원하는 것 골라 파일에 넣기.

3.파일 연결하기

-Docs

- Installation

- 아래의 내용 따라서 파일 연결하면 된다.

4. HTML, CSS 설정하기 , owl-carousel 실행

아래의 내용 따라 HTML, CSS 설정, owl-carousel 불러온다.

<HTML>

버튼 테그를 추가하고 원하는 형태로 변형시켰다.

<CSS>

-> 여기까지는 화면에 CSS 가 나타나지 않는다 ( class 가 owl-carousel인 태그)

- owlCarousel 함수 실행

커서로 드래그 하면 옆으로 돌아가는 슬라이드.

* bxslider *

(http://bxslider.com/)

1. 반응성이 좋다

2. 수직의, 수평의, 사라지는 모드의 애니메이션 제공

3. 슬라이드는 이미지, 비디오, 단순HTML을 가질 수 있다

4. touch와 swipe( 터치디바이스에서 옆으로 미는 것) 제공

5. CSS의 transition을 사용한다 ( 반응성 높음)

6. 충분한 callback API과 방법들

7. 파일사이즈가 작고, 테마가 많고, 시행하기 간단하다

8. Firefox, Chrome, Safari, IOS, Anderoid, IE7+지원

9. 환경설정 가능하다.

사용하기

1. 홈페이지 접속

http://bxslider.com/

* 홈페이지 메인화면 맨 아래에 사용방법 나와있음*

2. 다운로드

- 다운로드한 파일

- 필요한 파일만 골라서 원하는 폴더에 정리해둔다

3. 파일 연결하기

(jQuery가 설치되어 있어야 한다. 없으면 설치해서 연결하기 )

맨 위의 줄은 jQuery를 연결하는 코드이다

아래의 두 줄 복사해서 index.html에 옮기기

css연결코드는 어디에 있어도 관계 없으나 js파일은 jquery파일 연결코드보다 아래에 넣어야 한다.

4. HTML, CSS파일 만들기

-아래의 내용 복사하여 원하는 형태로 정리한다

< ul class="bxslider"> 과 li태그이면 된다.

<HTML>

<CSS>

<여기까지 했을 때 화면>

5. bxslider 불러오기

- 아래의 내용 복사하여 js 파일에 넣기

옵션

: 적용할 수 있는 선택사항

1. 홈페이지의 상단메뉴에서 Option

2. 원하는 옵션의 원하는 옵션값으로 객체 형태로 매개변수로 보내면 된다.