윤인성 모던 웹을 위한 JavaScript + jQuery 입문 3판 41강 - 객체 지향 기본[2] - 프로토타입 > javascript

윤인성 | 모던 웹을 위한 JavaScript + jQuery 입문 3판 41강 - 객체 지향 기본[2] - 프로토타입

페이지 정보

조회: 561

본문

※ 영상을 선명하게 보기 안내

유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
팝업목록에서 "품질" 선택하세요.
원하는 해상도를 선택해주세요.

※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.

윤인성님의 javascript강의 청각장애인을 위한 자막

안녕하세요 모던 웹을 위한 자바스크립트 제이쿼리 입만 3판 41강

되겠구요
이번 강의에서는 프로토 타입에 대해서 알아보도록 하겠습니다
일단 조금 더 나아가지 같은 부분을 쭉 건너 뛰도록 하겠구요
곧바로 7장 에 대해서 나아가 보도록 하겠습니다
우리가 지난 강의에 작성했던 코드를 보게 되면 크리에이트 실런트 라는 걸
사용해서 객체를 만들게 되고 이 객체 개 썸 개 바라진 투 스트링 이라는
메소드를 하나 하나 꼽아 주었습니다
현재 코드를 살펴 보게 되면 213 페이지 7 다시 2절 프로토 타입의
있는 그림 7 다시 숨 과 같은 구조라고 할 수 있습니다
이름 국어 수학 영어 과학 개 섬 개발 아직 포스팅이 각각이 즉 제가
모두 갖고 있게 되는 거죠
근데 자바스크립트 개발 저를 생각을 해보니 이름 국어 수학 영어 과학 은
따로 따로 가지고 있어야 되는데 개성 게 데브라 주트 링은 모두 같은
내용인데 이걸 따로 따로 선 하나라는 것은 조금 비율 적이지 않냐 라고
생각을 한 거죠
물론 지금은 메모리가 넘쳐나는 시대지만 한 20년 전만 해도 메모리가
굉장히 기 했으니까요
어쨌거나 이 내용을 생각을 하다보니까 그림 7 다시 4
요러한 형태론 구성을 하면 어떻냐고 개발자들이 생각을 했습니다
이름 국어 수학 영어 과학 은 각각의 개체가 가지고 이때 이 객체들이
모두 공유하는 공간을 따로 만들어서 이 공유하는 공간에 개 섬 갤에 브라
g2 스트링 이라는 것을 공유해서 넣으면 어떻겠냐
이렇게 되면 이전에 있던 코드 보다 메모리를 조금 사용 하지 않겠냐 라고
생각을 하게 된 것이죠
어쨌거나 지금 상태를 보게 되면 우리가 객체라는 것을 위주로 생각을 하고
있습니다 객체라는 것을 따로 만들기 위 함수를 만들었고 객체라는 것을
배워 레 쉽게 만들어서 넣기 위해서 요러한 형태를 무언가를 사용했고
그리고 객체를 사용해서 반복을 해서 출력을 하게 되는데요
이처럼 객체를 기반으로 무언가를 하는 것을 우리가 객체지향 프로그래밍
이라고 합니다
객체지향 프로그래밍의 는 여러가지 종류가 있는데요
요게 가장 목 가장 간단한 구조의 구시대적인 객체지향 프로그래밍 이라고
할 수 있습니다
근데 아까 말했던 이유로 함수가 중 보게 되면 약간 메모리 낭비가
발생하게 되죠 그래서 그 문제를 해결하기 위해서 수많은 개발자들이 여러
가지 개념을 생 생각하게 되는데요
가장 첫 번째로 생각하게 된 개념이 바로 클래스라는 개념이고 두번째로
생각하게 된 개념이 프로토 타입 이라는 개념입니다
그래서 클래스를 집안으로 객체를 한번 다루어 보자 라는 이념을 가지고
만들어진 프로그래밍 언어를 우리가 클래스 기반의 객체지향 프로그래밍 언어
라고 부르게 되고요
프로토 타입을 가지고 객체로 뭘 해 보자 라는 이념을 가지고 만들어진
프로그래밍 언어를 프로토타입 기반의 객체지향 언어 라고 부르게 됩니다
우리가 자바스크립트 같은 경우에는 프로토타입 기반의 객체지향 프로그래밍
언어라고 보시면 되겠구요
최근에 클래스 라는 기능도 추가가 되서 클래스 기반의 개최지 않고
로 그 래 밍 언어의 속성도 가지고 있게 되었습니다 어쨌거나 우리가
대부분 알고 있는 10불 잡아 라던지
시샵 이라던지 루비 라던지 파이썬 이라던지 php 라던지 하는 프로그래밍
언어는 대부분 클래스 기반의 객체지향 프로그래밍 언어 구요
자바스크립트 많이 거의 많이 사용되는 프로토타입 기반의 객체지향 언어
입니다
사실 이념 싸움에서 졌다고 할 수 있죠 그래서 최근 자바스크립트가 그
이념을 옮겨서 클래스 기반의 객체지향 언어로 변화를 하고 있는 것입니다
어쨌거나 이념을 중간에 출 기는 했지만 그래도 뭐 근본을 바꿀 순 없는
문제점
그래서 프로토타입을 알게 되면 자바스크립트에서 클래스를 어떻게 다루게
되는 지도 쉽게 알 수 있을 것입니다
추가적으로 자바스크립트에서 는 인터넷 익스플로러로 전 버전에서는 프로토
타입만 사용할 수 있구요
최신 웹 브라우저에서는 프로토 타입과 클래스를 모두 사용할 수 있습니다
따라서 인터넷 익스플로러가 대부분 지배하고 있는 우리나라 시장 같은
경우에는 어쩔 수 없이 프로토 타입만 을 프론트엔드 게 말을 사용해야
하는 상황입니다
따라서 프로 포토 타입을 사용한 개발을 어떻게 하는지 살펴보도록
하겠습니다
일단 지금까지 작성했던 코드는 주석 처리를 하도록 하겠구요
프로토타입을 어떻게 활용하는지 간단한 구문을 살펴보고 현재 코드의 적용을
해 보도록 하겠습니다
일단 프로토타입을 활용하게 되는 함수를 우리가 생성자 함수 라고 부르게
됩니다
컨스트럭터 펑션 이라고 부르게 되는데요 다른 프로그래밍 언어는 그냥
생성자 라고 부르는 경우가 많은데
자바스크립트 같은 경우에는 꼭 생성자 함수 라고 생성자 뒤에 함수를
붙여서 표현을 하게 됩니다
그런데 그냥 함수를 선언하는 방법과 갖게 선언을 해 버리면 생성자 함수와
그냥 암수를 9분할 수 없겠죠
그래서 대부분의 자바 스크립트 개발자들이 우린 딱 보고 9분하는 걸
원한다. 해서 생성자 함수는 꼭 앞글자를 대문자로 시작하기를 추천을 하고
있습니다
사실 우리가 지금까지 살펴보았던 함수 중에 앞 글자가 대문자 어떤 녀석이
있어요
넘버도 그렇고 스트링 도 그렇고 불 2 그렇고 뭐 어레이 도 그렇고
이러한 대부분의 녀석들은 앞 글자가 대문자로 시작을 하죠 그래서 생성자
함수 라는 것을 알 수 있습니다
그래도 간단하게 스튜던트 라는 생성자 함수를 만들게 되면 이러한 식으로
선언을 하게 됩니다
앞쪽에 있는 s 를 대문자로 선언을 한다. 는 것이 포인트 되겠습니다
어쨌거나 이렇게 만들어진 스튜던트 라는 생성자 함수는 내부의 속성을
선언을 할 때 기존과 약간 다른 방법을 쓰게 되는데요
디스 점 속성 이름에
값을 입력을 하는 형태로 사용하게 됩니다
예를 들어 우리가 현재 만들었던 크레이트 트렌트 함수 라는걸 생성자
함수로 옮기게 된다면
스튜던트 라는 생성자 함수를 선언을 하고 디스 점 이름의 다가 이름을
넣고 디스 점 국어 에다가 국어를 넣고 t 점수 아 게다가
수학을 넣고 디스 점 영화 에다가 영어를 넣고 디스트 점 과 아 게다가
과학을 넣는 형태로 코드를 작성하게 됩니다
우리가 이전에 사용했던 코드와 의 차이점을 9분을 하시면서 보시면
좋겠습니다
어쨌거나 속상한 이와 같은 상태로 선언을 한다. 고 기억을 했으니까
지우도록 하겠구요 이제 메소드를 어떻게 선언 할 거냐는 되요
여기에다 디스 점 개 섬 디스 점 개 데브라 짓 2.2 스트링을 만들게
되면 기존에 사용하던 방법과 차이가 없게 되요 그래서 자바스크립트
개발자들이 생각했던 프로토 타입 이라는 것을 활용해 주셔야 됩니다
스튜던트 점 프로토 타입 이라는 녀석이 자동적으로 들어 있게 되는데요 이
프로토 타입을 사용하고 내부의 다가 갯 섬 등을 사용해서
요 값으로 옮겨 주시면 됩니다
마찬가지의 방법으로 다른 녀석도 옮겨 보도록 할게요
개 대 바라지도 옮기고
투 스 팅 돔 기고 내부에 있는 코드도 쭉 옮겨 주도록 하겠습니다
어쨌거나 이전에는 오브젝트 점 바로 개 썸 이라던지 오브젝트 점 제대 벌
아주 오브젝트 5.2 스트링을 활용을 했었는데
현재 코드에서는 유우 녀석들은 각각의 객체의 선영이 되지만 제 썸 제대
바라 g2 스트링은 공유하는 공간에 선언을 하게 된다고 생각을 해 주시면
좋겠습니다
그럼 어쨌거나 플레이트 스튜던트 함수를 생성자 함수로 구현하면 지금 현재
코드와 같이 된다고 기억을 해 주시면 되겠구요
두번째로 이렇게 만들어진 생성자 함수를 사용해서 객체를 선언을 할 때는
어떻게 아냐 가 두번째 포인트 되겠습니다
선언을 할 때는 우리는 이전에 크리에이트 트렌트 라는 녀석을 썼지만
이번에는
요녀석을 쭉 선택을 해 주시고
뉴 스튜던트 라는 형태로 사용하게 됩니다
스튜던트 라는 생성자 함수 앞에는 뉴 를 붙여서 사용을 하게 됩니다
한마디로 뉴 뒤에 입고 s 가 대문 짜인 첫 번째 글자가 대문 짜인
함수는 모두 생성자 함수 라고 생각을 해 주시면 됩니다
이렇게 선언을 하게 되면 아까와 마찬가지 코드가 됩니다 뭐 를 간단하게
다시 정리해 보도록 하면 욤
요렇게 첫 번째 글자가 대문 짜인 녀석을 우리가 생성자 함수 라고 부른다
함수의 형태를 가지고 있으니까 그리고 생성자 함수를 호출 할 때는 앞에
뉴 라는 키워드를 붙여서 사용을 한다.
요게 두번째 되겠구요 이렇게 만들어진 변수
요걸 이렇게 변수에 닫게 되면
요 생성자 함수에 리턴된 변수는 인스턴스 라고 부른다 라고 기억을 해
주시면 좋겠습니다
책의 차근차근 내용이 나오게 되니까 책과 함께 읽어주시면 좋겠습니다
따라서 현재 스튜 앉혀 라는 배열에 는 인스턴스가 10 개 들어 있게
되는 거죠
어쨌거나 요렇게 구현을 하게 되면 사용하는 방법은 똑같습니다
그냥 내부의 초 스트링을 호출하거나 가지고 있는 다른 녀석을 호출하거나
아니면 속성을 사용해주시면 됩니다
반골 코 왜 아까부터 오류가 뜨나 했는데 성전에 알파벳을 잘못 입력해
썼네요
어쨌거나 요런 식으로 사용하면 요게 바로 생성자 함수로 객체를 만드는
함수 가 되고 그 객체는 뉴 키워드를 사용해서
요러한 형태로 선언으로 생성을 하고 뭐 사용 방법은 이전과 같다 라고
기억을 해 주시면 좋겠습니다
저장을 하고 실행을 하고 콘솔 화면을 보시면 이전과 완전히 같은 형태로
출력되는 모습을 확인할 수 있습니다
사실 내용을 보시다보면 점도 여러개 찍히고 프로토 타입이라는 이상한게
등장해서 프로토타입을 처음 보시는 분들이 굉장히 당황을 하는 내용
그냥 객체를 조금 더 효율적으로 선언하기 위한 방법을 만든게 바로 프로토
타입이라고 생각을 해 주시면 됩니다
뭐 그 이상도 이하도 없기 때문에 그렇게 기억을 해 주시면 되겠습니다
어쨌건 오늘 강의는 여기까지 되겠구요 다음 강의에서 뵙도록 하겠습니다.