윤인성 모던 웹을 위한 JavaScript + jQuery 입문 3판 40강 - 객체 지향 기본[1] - 객체를 만드는 함수 > javascript

윤인성 | 모던 웹을 위한 JavaScript + jQuery 입문 3판 40강 - 객체 지향 기본[1] - 객체를 만드는 함수

페이지 정보

조회: 709

본문

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

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

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

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

안녕하세요 모든 애플 미안 자바스크립트 제이쿼리 입문 3판 40강 개

있구요
이번 강의 부터는 이제 185페이지 의 객체와 배열을 사용한 데이터 관리
부터 6장 7장 의 내용을 스트레이트로 나가보도록 하겠습니다
일단 객체를 사용하면 우리가 지금까지 왜 어떤 문자를 이라던지 숫자
라던지 불이 라던지 를 합쳐서 조금 더 큰 형태의 데이터를 만들 수 있게
됩니다
예를 들어서 코드 6 다시 19 를 보시면 지금 화면과 같이 나오게
되는데요
객체를 사용해서 사람의 이름과 국어 수학 영어 과학 이라는 성적을
나타냈습니다
참고적으로 사람은 굉장히 다양한 속성을 가지고 있죠 이름도 있을 수 있고
나이도 있을 수 있고 성별 돼 있을 수 있고 뭐 아주 깊게 들어가면 은
눈의 크기 라던지 코의 크기 라던지 더 깊게 들어가면 융 털의 갯수
라던지 융 털의 길이 하나 하나를 전부다 데이터 라스 데이터로 나타낼 수
있을 것입니다
하지만 실제로 우리가 프로그램을 만들 때는 프로그램에 필요한 것들이 따로
이점
예를 들어서 성적 관리 프로그램을 만든다면 우리가 융 털의 길이까지
알아야 할 필욘 없어요 그래서 이름 국어 수학 영어 과학 등의 성적 정보
라던지 학생 와 관련된 정보만 가지고 있음 될텐데요
이렇게 현실에 있는 객체에서 우리에게 필요한 것들만 뽑아내는 걸 추상화
라고 부르게 됩니다
프로그램을 만들 때 가장 기본적으로 되는 것은 우리가 아주 예전에
언급했던 것처럼 우리가 무슨 데이터를 사용할 지 않은 것입니다
우리가 무슨 데이터를 사용을 할지 생각을 하게 되면 그 데이터에 무엇이
필요한지 속성을 1 1 10 하게 되는데요 그 과정 전체가 추상 하려고
할 수 있습니다
어쨌거나 이렇게 객체 하나하나를 만들게 되도 우리가 프로그램을 사용할
때는 잭 체 하나하나를 사용하지 난점 우린 일반적으로 이 개체에 뭉치를
사용을 하게 됩니다
그래서 예를 들어서
배열을 만들 게 되구요 접 배열에 다 강
풀씨 등을 사용할 해성
데이터를 집어 넣게 됩니다 이렇게 만들게 되면 치던 체 라는 배열에 는
학생 1명 2명 3명 4명 5 6 7 8 9 10
10명의 정보가 가지고 된 것 좀 그래서 이러한 식으로 데이터를 추장
하고 그 데이터를 모아서 활용하게 되는 것이 일반적입니다
그럼 한번 이 학생들의 성적 총점 과 평균을 출력해 보는 예제를 만들어
보도록 할게요 엄
가장 기본적으로는 반복문을 돌릴 수 있게 점 단 선포 반복문을 돌려서
스튜 단 7을 랜스 만큼 돌리면 되겠고 용 출력을 할 때는 성적에 총합
그리고 평균을 출력해 보도록 하겠습니다
그럼 일단 총 합을 구해 보도록 하겠습니다
변수 이름은 썸 이라고 작구요 못써 머리라고 잡고 스턴트 아이의
좀 구가 그리고
수와 아아
영어 그리고
과학 성적을 더 하면 되겠죠 사실 입력할 때 큰 문제는 없지만 코드
보기가 2 만약 귀찮으시다면 이전에 배웠던 위드 구문을 활용해 주시면
됩니다
쓰던 차 아이를 넣으면 되겠고 이 내부에는
요 점 찍기 앞에 있는 녀석을 제거해 주셔도 됩니다
어쨌거나 요런 식으로 사용하면 전체 앞이 구해 주게 되구요
평균 같은 경우는 서머 를 한국어의 나누기 를 해주면 되겠죠
요런 식으로 하면 총 합과 평균을 구할 수 있습니다
그럼 출력을 위해서
이름과 아
총합 그리고 평균을 한번 출력해 보도록 하겠습니다
요렇게 구성을 해 주신 다음에
아웃풋 에다가
+ 고려해서
각각의 위치해 성
이름과
써 말과 마지막으로
에버 라지 를 출력해 주면 되겠죠 참고적으로 몸 이 크마 스크립트 최신
버전에서 나온 템플릿 문자를 같은걸 활용하면 요코 들 조금 더 쉽게
작성을 하실 수 있을 겁니다
어쨌거나 이렇게 주르르 출력을 1 물자 를 만들고 콘솔 단 로그를 사용을
해서 출력을 해 보도록 하겠습니다
굉장히 간단한 코팅되어 한번 정리하고 넘어가면 쓰던 출하는 배열을 만들고
내부의 다가 데이터를 삽입을 합니다
이어서 아웃풋이 라는 문자를 만들고 내부에서 이름과 써멀 그리고 앱 어랏
이를 출 문자의 레더 해준 다음에
최종적으로 콘솔에 출력하는 예제 되겠습니다
그래서 저장을 한 다음에 실행을 해보면 화면은 아무것도 안 나오지만
f12 키를 눌러서 개발자 도구를 뛰어 주신 다음에 콘솔 탭에서 내용을
보시게 되면 지금 화면과 같이 이름 종아 평균이 순서대로 나오는 것을
확인할 수 있습니다
어쨌거나 개발자들이 개발을 하면서 요러한 속성과 함께 메써드 로서 진행이
같이 붙어 있으면 조금 더 편리할 것이라는 생각을 하게 되었는데요
그래서 이러한 서머리 나 에버 라지 라는 기능을 객체 내부의 삽입을 해면
어떨까 라는 생각을 하게 됩니다
그럼 한 번 객체 내부의 삽입을 해 보도록 하겠는데요 여기다가 쉼표를
찍고 서머리 라는 메소드를 만들고 에 버러지 라는 메서드를 하나하나
만드는 것은 약간 귀찮기 때문에 마찬가지로 반복문을 적용을 해서 반복문
내부의 만들도록 하겠습니다
반복문을 돌려서 스튜 단체 i 번째 서머리 라는 함수를 만들도록 하겠구요
서머 레슨 은 자기가 가지고 있는 국어 수학 영어 과학 성적 을 합해서
l 는 하는 녀석을 만들도록 하겠습니다
뭐 이렇게 구현을 해 주면 서머리 간단하게 구현을 하겠고요
마찬가지로
뭐 이름을 갯 섬이라고 만들도록 할게요 동사 형태 를 붙여 아주 조금 더
메써드 같은 느낌은 아닐까요
그리고 게 네버 라지 라는 이름을 붙여 성
디스 점
갯 선 켓 썸을 실행을 한 다음에
여기에 출력 결과를 4로 나눈 값을 리턴 을 해 주도록 하겠습니다
이렇게 코드를 작성하면 스틸 관철하는 배열 내부에 있는 기체 하나 하나는
자신의 이름 국어 수학 영어 과학 이라는 성적을 가지고 있는 것은
물론이고
갯 섬과 개 대 보라지 라는 기능을 가지게 됩니다
추가적으로 스 간츠 i 번째 초 스트링을 추가를 해서
이투 스트링 에서는 자신이 가진
이름 이라던지 등을 출력할 수 있게 만들겠습니다
앞에다 디스를 부처에게 점 디스 짬 이름 그리고 티스 점
객 썸 그리고 마지막으로 디스 점 에 버러지 까지 실행을 해서 차례차례
실행을 해서 문자를 만들게 만들겠습니다
이어서 출력을 하는 부분에서는
코드가 간단해 지겠죠 그냥 간단하게
9조제 다가 + 고를 한 다음에
스튜던트 i 번째 투 스트링을 실행을 해서 붙여 주기만 하면 됩니다
이렇게 만들 경우 까 만들 경우에 차이가 무엇이냐 하면 데이터를
나타내는 녀석이 따로 분리가 됐습니다
코드를 보았을 때 데이터를 나타내는 부분과 메인 프로세스를 처리하는
부분이 나누어 지기 때문에 사람과 사람이 협업을 할 때도 좋고 나중에
스튜던트 라는 개체를 다른 곳에서도 활용할 수 있게 됩니다
그런데 사람들이 생각하기에 u 객체를 하나 하나 만들고 메서드를 따로따로
추가하는 것은 약간 귀찮고 복잡한 과정닌가 라는 걸 생각을 하게
됩니다
그래서 이러한 것을 펑션 크리에이트 m
스튜던트 라는 함수를 사용해서 매개변수 룸 이름 국어 수학 영어 과학
성적 을 전달하고 객체를 만들어서 리턴할 수 있게 하기 코드를 구성을
하게 됩니다
이렇게 코드를 구성을 하게 되면 지금 요렇게 구성되어 있던 것을
지금 화면과 같이 수정을 할 수 있게 되는데요
객체를 하나 만들고 이 객체를
곧바로 리턴을 해줍니다 지금 이름과 이름 국어와 국어 수학 가수 앞
영어와 영어 그리고 과학과 과학 이 따로 따로 나뉘어져 있어서 조금
코트를 이야기 힘들 수 있는데요
이름과 국어 수학 영어 과학 이라는 유우 왼쪽은 키가 되고 요 오른쪽에
있는 것은 매개변수로 넘어온 값입니다
따라서 유 왼쪽과 오른쪽에 같은 것이 들어 간다고 생각을 해 주시면
안됩니다
어쨌거나 이렇게 코드를 구성을 하고 아까 메서드를 추가하는 부분까지 요
내부의 추가를 해 주게 되면 크레이트 스튜던트 라는 함수를 사용하면
함수의 속성과 기능을 가진 녀석을 한꺼번에 만들어서 리턴을 하게 됩니다
이렇게 코드를 구성하면 요트 전체를 생성하는 부분이 훨씬 간단해 지죠
크레이트 스튜던트 라는 녀석을 사용하고 첫 번째 매개변수로 이름을 전달을
하고 두 번째로 각각의 성적을 전달하면 될 겁니다
간단하게 전부다 80 을 입력해 보도록 할게요
지금 매개 변수의 자동완성 기능으로 쭉 나오니까 쉽게 보고 이해를 할 수
있을 거라고 생각을 합니다
그럼 잠시 코드를 수정 해 주도록 하겠습니다
일단 요 앞부분은 모두 크리에이트
스튜던트 라는 이름으로 변경을 해주면 되겠구요
요기 국어 라던지 녀석을 모두 지울 수 있게 되겠죠
그리고 아래쪽에 있던 뽀 반복문을 쥐어주면 되겠구요
이러한 측으로 코드를 구성을 하게 되면
커리 에이트 스튜던트 라는 객체를 구현하는 부분과 객체의 다가 데이터를
넣는 부분 그리고 실질적으로 화면에 무언가를 출력하기 위해서 사용되는
메인 프로세스의 부분이 하나하나 분리되게 됩니다
따라서 코드를 조금 더 분할해서 협업할 수 있게 되는 효과가 가져오며
추가적으로 딱 각가지 부분들이 모여 있기 때문에 나중에 코드를 작성할
때도 각각의 부분만 확인을 하고 무언가를 진행할 수 있겠죠
참고적으로 여기가 리턴이 되어야겠죠 그래서 이런 식으로 코드를 작성하게
되면 분할도 되고 각각의 코드 관리도 훨씬 더 쉬워진다 고 기억을 해
주시면 되겠습니다
추가적으로 나중이 파일을 하나하나 분리하는 형태로서 사용해 보게 될텐데요
예를 들어서 스크립트 태그를 지금 화면과 같이 나 누구
이 각각의 스크립트 태그를 다른 파일로 빼서 사용을 하게 된다면 코드가
훨씬 더 정리되는 그런 모습을 볼 수 있을 겁니다
그래서 개발자들이 이러한 식으로 개발하면 좋겠다라는 생각을 하게
되었는데요
현재 코드에서 문제가 하나 있다면 크리에이트 스튜어트를 만들때마다 개의
썸 게 데브라 g2 스트링 이름 국어 수학 영어 과학 이라는 것을 계속
반복해서 생성을 하게 된다는 것입니다
물론 이름 국어 수학 영어 과학 이라는 녀석은
각각 이녀석들의 각각 갖추고 있어야 되는 속성이 게 점
그래서 이 녀석들은 따로 따로 존재하는 게 맞는데 개의 썸 갤에 브라
g2 스트링은
모두 같은 녀석이 들어가게 됩니다 따라서 이 녀석을 여러번 중복해서
사용할 하게 된다는 것은 메모리의 낭비가 된다고 할 수 있습니다
그래서 자바스크립트 개발자들은 이를 해결하기 위해서 프로토 타입 이라는
개념을 사용하게 되었는데요
프로토타입의 개념에 대해서는 다음 강의에서 곧바로 내용을 이어서
알아보도록 하겠습니다
어쨌건 오늘 강의는 여기까지 되겠구요 다음 강의에서 뵙도록 하겠습니다
감사합니다.