윤인성 모던 웹을 위한 JavaScript + jQuery 입문 3판 46강 - 정확한 자료형 확인 > javascript

윤인성 | 모던 웹을 위한 JavaScript + jQuery 입문 3판 46강 - 정확한 자료형 확인

페이지 정보

조회: 636

본문

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

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

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

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

안녕하세요 모던 웹을 위한 자바스크립트 제이쿼리 먼 3탄 46강 되겠구요

이번 강의에서는 238 페이지에 있는 8.2 절 오브젝트 객체 부분에서
뒤쪽에 있는 자료용 확인 부분에 대해서 살펴보도록 하겠습니다
메서드와 관련된 자세한 설명은 책을 봐 주시면 되겠고
그렇다고 그냥 간단하게 넘어가면 또 그러니까 책에 있는 내용과 함께
실제로 활용되고 있는 라이브러리를 분석을 함께 진행을 하면서 내용을 보강
하도록 하겠습니다
일단 오브젝트를 생성하는 방법 객체를 생성하는 방법은 지금까지 간단하게
살펴 보아 썼는데요
그냥 요렇게 꼽 어려운 가로 컬리 불을 기술 사용을 해서 선언을 해
주시면 됩니다
마찬가지로 뉴 키워드를 사용해서 오브젝트 라는 녀석을 호출 해도 객체를
생성할 수 있습니다
두 가지 방법 중에 어떤 것이 더 많이 사용된 야 고 물으면 당연히 위의
것이 게 되고요
일반적으로 우리가 그런거에 대한 답을 얻을 때 에어비앤비 에
자바스크립트 코딩 컨벤션 이라는 것을 살펴 보게 됩니다
뭐 가이드라인 이라고 되어 있는데 요 녀석을 살펴보게 되면 최근
자바스크립트를 어떻게 작성하면 되는지 와 관련된 내용이 나오게 되거든요
여기에서 내용을 보시게 되면 객체를 선언을 할 때는 위의 것은 납부 9
아래 것으로 선언을 해 달라고 하고 있습니다 지금까지의 내용을 진행을
하셨다면 이제 이런 코딩 컨벤션 을 보실 수 있을 거에요
그래서 틈틈이 내어 bmb 자바스크립트 코딩 컨벤션 을 확인을 하면서
내용을 보시면 좋겠습니다
이와 관련된 링크 낸 유튜브 아래쪽에 올리도록 할게요
어쨌건 오브젝트 객체 같은 경우에는 자바스크립트의 내장되어 있는 모든
기본 객체들의 부모라고 보시면 됩니다
따라서 부모 라는 말은 오브젝트가 가지고 있는 기능들을 다른 모든
객체들이 상속을 받았다는 뜻입니다
그림 8 다시 5와 8 다시 6을 보시게 되면 왼쪽에 있는건 오브젝트
객체 메서드 9
오른쪽에 있는건 넘버 객체의 속성과 메소드가 되겠는데요 오브젝트 객체가
가지고 있는 컨스트럭터 라든지 해 좋은 프로퍼티 라던지 2주 프로토타입
오브 라던지 하는 모든 메서드 들을 넘버 객체도 가지고 있는 것을 확인할
수 있습니다
따라서 오브젝트 객체가 가지고 있는 기본적인 메소드를 알게 되시면 다른
녀석들이 가지고 있는 메써드 들도 일부 알 수 있게 되는 것입니다
다만 책의 언급했던 것처럼 오브젝트 기치가 가지고 있는 메소드를 그렇게
많이 사용하지는 않아요 그래서 그냥 오브젝트 객체가 모든 자바스크립트
기본 내장 직지 의 부모 기체 라고 기억만 해주시면 되겠습니다
그럼 곧바로 아래쪽에 있는 팔짱 2.3 절 자룡 9분에 대해서 살펴보도록
하겠는데요
우리가 지금까지 자룡 9분을 할 때는 타입 5부 라는 것을 사용한다. 라고
설명을 했었습니다
타입 오브 뒤에다가 어떠한 값을 넣게 되면 이 값에 대한 자료형을 출력을
해 준다고 했구요
참고적으로 타입 오브 같은 경우에는 연산자 우선순위를 알기 힘들기 때문에
꼭 괄호 를 사용해서 사용해 주자 라는 말도 했었습니다
간단하게 숫자와 문자열 그리고
불 그리고
객체 정도를 출력해 보도록 하겠습니다
코드를 저장하고
실행을 해 보게 되면 첫 번째 권 넘버 두 번째 권 문자열 세 번째 권
불리한 네번째 거는 오브젝트 라고 출력하는 모습을 확인할 수 있습니다
그런데 여기까지는 문제가 없는데 우리가 지금 되었던 객체를 사용하게 되면
약간의 문제가 발생하는 부분이 있어요
우리가 넘버를 선언을 할 때
프리미티브 넘버 라는걸 살펴보았고 프리미티브 넘버 라는 6 같은 경우에는
그냥 숫자를 입력하는 거 라고 언급을 했었구요
오브젝트 넘버 라고
뉴 를 사용해서 넘버 생성자 함수를 호출해서 숫자를 만드는 경우도
있습니다
그래서 이 두가지의 경우에 타입 오브를 살펴보게 되면 값이 달라져요
그래서 간단하게 요 프리미티브 넘버와 오브젝트 넘버를 출력해 보도록
하겠습니다
코드를 저장을 하고 실행을 해 보게 되면 첫번째 출력은 프리미티브 넘버
이기 때문에 넘버 라고 나오는 것을 확인할 수 있지만
두번째는 생성자 함수를 사용해서 추출해서 생성한 녀석이 때문에 오브젝트
라고 나오는 모습을 확인할 수 있습니다
그런데 일반적으로 자바스크립트 개발자들은 이 오브젝트 넘버 라는 녀석도
그냥 숫자로 취급을 해서 자료형을 비교 하고 싶어 합니다 따라서 이 자료
용을 비교를 할 때는 타입 오브를 사용을 하면 안되고 다른 방법을
사용해야 합니다
굉장히 다양한 해결 방법이 있는데 일단 가장 기본적인 방법은 컨스트럭터
라는 늦 객체를 활용하는 겁니다
컨스트럭터 는 자바스크립트의 모든 객체가 가지고 있는 메소드를 오서 자기
자신을 생성할 때 사용한 그러한 생성자 함수를 나타나게 됩니다
현재 오브젝트 넘버 같은 경우에는 요 넘버를 나타내게 되는 데요
프리미티브 넘버 같은 경우에는 사실 생성자 함수가 없지만 지난 강의에서
우리가 일회용 모세 개념을 설명을 했죠 그래서 프리미티브 넘버 뒤에다
점을 찍는 순간 자동으로 넘버 객체로 변환 이 되기 때문에 이 내부에
있는 컨트랙트 라는 녀석을 활용할 수 있게 됩니다
그래서 한번 간단하게 두 녀석의 컨스트럭터 를 출력해 보도록 하겠습니다
코드를 저장을 하고 실행을 해주시면 첫번째 녀석은 펑션 넘버를 출력을
하게 되고 두 번째 녀석도 펑션 넘버를 출력을 하게 됩니다 그럼 이거 립
운용을 해서 펑션 이즈 넘버 라는걸 정리해보도록 할게요
이즈 넘버 라는 녀석은 매개 변수로 값을 넣게 되고 이 녀석이 넘버 인지
확인을 해서 넘버 라 멘 트 로 를 리턴하고 넘버가 아니라며 펄스를
리턴하지 만들도록 하겠습니다
만드는 법은 굉장히 간단한데요 벨즈 점 컨스트럭터 가
넘버 인지 비교를 해 주시면 되겠습니다 확실하게 비교를 하려면 이 컬을
세계 써 주는게 좋겠죠
그래서 이렇게 구성을 하게 되면 이즈 넘버를 구현할 수 있으며 eg
넘버를 사용을 하게 되면
프리미티브 넘버와 오브젝트 넘 법 두가지의 자료임을 한꺼번에 비교할 수
있게 됩니다
코드를 요렇게 구성을 하고 저장을 한 뒤에 실행해 보도록 할게요
실행을 뽑게 되면 첫 번째 커트 투르 를 출력하고 두번째 것도 트롤을
출력하는 모습을 확인할 수 있습니다
참고적으로 요 것만 확인하면 조금 그러니까 다른 문자열 도 문자를
입력했을 때는 벌써 가 나오는지 그리고 불을 입력했을 때는 펄스가
나오는지도 확인을 해보도록 하겠습니다
저장을 하고 7 행을 하면 문자 일도 펄스가 나오고 불도 설 수가
나오니까 이즈 넘버가 정확하게 구현된 것을 확인할 수 있습니다
그럼 이어서 다른 사람들은 이제 넘버를 어떻게 구현을 하는지 잘 만들어진
라이브러리를 보면서 분석해 보고 거기에 사용된 요소를 하나하나 짚어보도록
하겠습니다
일단 우리가 살펴볼 것은 언더 스코 점 js 라는 녀석인데요
자바스크립트의 기본적인 기능을 모두 구현하고 있는 녀석이라고 하겠습니다
자세한 내용은 이후에 조금 더 나아가기 위해서 살펴 보도록 하겠 고요
이녀석을 보시게 되면 굉장한 다양한 기능을 쉽게 활용할 수 있게 구현이
되어있습니다
여기에서 잠시 확대를 하고 왼쪽을 보시게 되면
곧 너무 확대를 했는데 확대를 하고 요 목록을 보시게 되면 내부의
있질 넘버 라는 녀석이 있습니다 이 이즈 넘버 라는 걸 사용하는 방법은
밑줄이 언더 스코 js 에 식별자 거든요 그래서 뭐 특수한 기회가 아니라
그냥 변수 이름 이라고 기억을 해 주시면 되겠구요
이 언더 스코 js 가 가지고 있는 객체 중에 그 이지 넘버 라는
메소드가 있는데 eg 넘버는 매개변수로 어떤 값을 넣게 되고 이 값이
넘버 라면 트롤을 l 내주게 되는 녀석입니다 참고적으로 난 2 잉크
로딩을 해서 난 일 경우에도 트롤을 리턴 을 해주게 됩니다
어쨌거나 이 녀석이 어떻게 구현 됐는지 함께 살펴보도록 하겠습니다
일단 요 언더 스코어 js 위쪽을 보시게 되면 다운로드 라는 부분이
있는데요 디벨롭먼트 버전 을 클릭해주시면 되겠습니다 디벨롭먼트 버전은
개발을 할 때 사용된 쉽게 들여쓰기 가 되어 있는 버전이라고 할 수
있겠구요 프로덕션 버전 같은 경우에는 요거를 배포할 때 용량을 최소한으로
줄이기 위해서 띄어쓰기 와 들여쓰기를 모두 삭제하고 변수 이름 도모
abc 라던지 애니 라던지 이라던지 그런 한 글자로 변경을 해서 용량을
줄여 놓은 파일이라고 할 수 있습니다
어쨌거나 디벨롭먼트 버전을 선택을 하고
전체를 복사를 해서 가져 온 뒤에 2매 부에서 이제 넘버가 어떻게
구현되어 있는지 확인해보도록 할게요 자 붙여 나오니까 1548 줄이
나오게 되는데요
뭐 주석 등의 설명도 있고 하기 때문에 뭐 실제로 내용 이렇게 많지는
않습니다
어쨌건 이 안에서 이즈 넘버를 검색을 해 주시면
이지 넘버에 구현 부분이 나오게 됩니다 요 구현 부분만 따로 떼서
살펴보도록 하겠습니다
복사를 하고 주석을 보게 되며 있어 미 측 타임 메쏘드 라고 되어있고
이지 악기 먼트 이즈 성산 일제 스트링 기지 넘버 이즈 데이트
이제 레귤러 x 패션 이지애 러를 확인하는 메소드를 만드는 코드입니다
일단 밑줄 요걸 이지언 더 스코어 라고 부르도록 할게 엄 그냥 요게 정말
처음 보시면 당황하실 수 있는데 그냥 var 로 언더 스코어를 선언을
하고 여기에 객체를 놓고 언더 스코 점 모모 를 사용하는 것이 전부이기
때문에 뭐 특별한 기호라고 생각을 하지 않으셨으면 좋겠습니다
어쨌거나 요녀석을 사용하면 반복을 돌게 되는 데요 반복을 2 대상은 바로
요 배열 아기 먼 체 펑션 스트링 넘버 데이트 레귤러 익스프레션 에러
되겠구요
이녀석이 1 1 요 함수로 들어가면서 밑줄 그리고 요 녀석은 문자 일로
객체를 지정 하는 거죠
요걸로 삼수를 하나하나 선언을 하고 있습니다
요걸 좀 풀어서 서비스 덕에 써 보게 되면 밑줄
이제 아교 많지
에다가 펑션 을 넣고 펑션 내부의 뭔가를 하는 거고요
뭐 이외에도 이제 빵 산
이제 스트링
이제 남 법
이제 데이트 이제 레귤러 x 플스 1
그리고 이지 에러를 한꺼번에 만드는 코드 라고 생각해주시면 좋겠습니다
요런 코드를 보다보면 아 요렇게 메소드를 한꺼번에 추가하는 방법도
있겠구나 반복문을 적용을 해서 객체의 다가 요거 끈과 룰을 사용을 하게
되면 여러 메서드를 한꺼번에 추가를 하는 것도 가능 하겠구나 하는
방법론도 이해하실 수 있기 때문에 코드를 살펴 보시면 좋겠습니다
그럼 이제 내부에 있는 코드가 중요 해주도록 하겠는데요 리턴투 스팅 점
콜 오브젝트 u 오브젝트는 매개변수로 받은 거죠
그리고 이 녀석이 같은지 오브젝트에 네임과 같은 지 확인하고 있습니다
우리가 지금 이즈 넘 번만 만들고 있기 때문에 요 이제 넘버 만 한 번
확인을 해서 사용해보도록 할게요
내부적으로 요러한 코드를 사용하고 있는데요
요 네임 같은 경우에는 넘버가 들어 오게 되겠죠
그래서 초 스트링 점 콜 오브젝트 라는 녀석이 오브젝트 넘버 인지
확인하는 게 바로 언더 스코 점 js 라이브러리가 제시하는 2주 넘버
메서드를 구현하는 방법입니다
그럼 일단 투 팅 점 콜로 오브젝트가 무엇을 의미 하는지 알아야 겠는데요
콜 메쏘드 부터 살펴보도록 하겠습니다 코리 라는 것은 모든 함수가 가지고
있는
메서드 라고 생각해주시면 되겠는데요 이렇게 테스트 라는 녀석을 선언을
하게 되면 테스트하고 점을 찍었을 때 쿼리 라는 녀석을 확인할 수
있습니다
코레 매개 변수에는 g2 를 사용할 객체를 넣게 되고 그 이후에는 이
함수를 사용할 때 지정할 매개 변수를 넣게 되는데요 이때 디스 라는 것이
무엇을 의미하는지 알기 위해서 얼얼 2d 쓰루 디 스 를 출력해 보도록
하겠습니다
한번 테스트 점 컬을 그냥 출력해 보도록 하겠 구요 두번째는 매개변수의
다 10을 넣고 세번째는 그냥 문자를 간단하게 넣어서 실행해 보도록
하겠습니다
실행을 해보면 첫 번째 오브젝트 윈도우 라는 것을 출력하는 걸 볼 수
있는데요
매개 변수를 지정하지 않으면 오브젝트 윈도우를 출력한다. 고 기억을 해
주시면 되겠습니다
어쨌거나 두 번째는 10을 출력을 하고 세 번째는 문자를 이라는 글자를
출력을 해서 내부에서 지수가 의미하는게 콜의 첫 번째 매개 변수에 의해서
바뀌었다고 기억을 해 주시면 좋겠습니다
일반적으로 커리 라던지 아니면 테스트 점을 했을 때 어플라이 라던지
바인드 라던지 모두 함수 내부에서 디스 키워드가 의미하는 바를 변경을 해
버릴 수 있습니다
여기에서도 투 스트링이 의미하는 바를 변경해 버린 거라고 할 수 있는데요
다른 기체에 메소드가 가지고 있는 메서드를 자기 자신의 것으로 가져와
가지고 사용할 수 있는게 바로 요 코리 라는 녀석이 라고 생각해 주면
되겠습니다
어쨌거나 어떠한 객체 토 스트링을 사용을 하고 여기에다가 컬을 것인
다음에 12 라던지 를 넣게 되면 이 객체가 가지고 있는 투 스틱
메서드를 자기 자신의 것으로 만들어서 사용할 수 있습니다
어째거나 그럼 10 또 한번 넣어보고
문자 일도 한번 넣어보고 뭐 뉴 데이트를 해서 데이트도 넣어 보도록 하고
이걸 출력해 보도록 하겠습니다
저장을 해 주시고
실행을 하게 되면 첫 번째 권 오브젝트 더 넘버 두 번째 권 오브젝트
스트링 세 번째 권 오브젝트 데이트 를 출력하는 걸 볼 수 있습니다
원래 객체의 다가 투 스트링을 찍고 실행을 하게 되면
오브젝트 오브젝트 라고 출력하는 게 기본적인 객체가 가진 투 팅 메소드의
진흥 인데요
1 지능을 자기 자신의 것으로 바꿔서 내부의 컨스트럭터 이름을 출력하게
만드는게 바로 요 스킬이라고 할 수 있습니다
간단한 스킬인데 사실 보지 않으면 이 걸 알 수가 없어요 그래서 코드를
많이 보면서 이러한 스킬도 있다라고 기억을 해 주시면 좋겠습니다
어쨌거나 현재 코드에서는 투 스트링을 그냥 사용을 했는데요
요건 우리가 이후에 브라우저 객체 모델 봄을 배울 때 살펴보겠지만 앞쪽에
윈도우가 생략되어 있는 형태라고 할 수 있습니다
윈도우 점은 생략을 할 수 있기 때문에 윈도 5.2 스트링 점 콜
오브젝트를 해서 오브젝트에 넘버에 형태로 만들어 주는 것입니다
뭐 나중에 살펴보겠지만 한번 짚고 넘어가면 나중에 이해할 때 도움이 되기
때문에 윈도우 점을 입력을 하고 내부에서 사용할 수 있는 녀석을 보겠는데
용 우리가 어려울 때 같은 녀석도 지금까지 그냥 사용을 했었는데 사실이고
또 앞에 윈도우 점이 라는게 생략한 채로 사용하던 거고 클리어 인터벌 뭐
컨펌 이라든지 아니면 3 인터벌 이라던지 프롬프트 라던지 등등 모두
윈도우 라는 객체가 가지고 있는 속성 일 뿐입니다
어쨌거나 요건 눈도장을 찍어 보시면 나중에 브라우저 객체 모델을 할 때
조금 더 이해가 쉬울 거라고 생각을 하고요
오늘은 언더 스코어 js 가 가지고 있는 요 이지 넘버도 함께 분석을
해보았는데
이외에도 다양한 것을 분석하시오 수 있을 거예요 그래서 다른 것들도 한번
심심하면 차근차근 읽어 보시면서 다른 사람들은 코드 개발을 어떻게 하는지
특히 다른 사람도 그냥 다른 사람니고 굉장히 잘하는 다른 분들이죠
그래서 굉장히 잘하는 다른분들은 코드를 어떤 식으로 사용하고 어떤 식으로
스킬이 있는지 그런 것들을 한번 공부를 해 주시면 좋겠습니다
어쨌건 오늘 강의는 여기까지 되겠고요 다음 강의에서 뵙도록 하겠습니다
감사합니다.