윤인성 모던 웹을 위한 JavaScript + jQuery 입문 3판 48강 - underscore.js > javascript

윤인성 | 모던 웹을 위한 JavaScript + jQuery 입문 3판 48강 - underscore.js

페이지 정보

조회: 1,075

본문

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

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

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

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

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

되겠구요
이번 강의에서는 팔짱 기본 내장 대책 부들 마무리 하도록 하겠습니다
일단 8 점 10.3 절에 있는 언더 스코 라이브러리에 대해서 함께
살펴보도록 하겠는데요 라이브러리를 어떻게 사용을 하는지 와 관련된 방법에
대해서 알아보도록 하겠습니다
일단 언더 스쿨 js 라이브러리는 자바스크립트의 지 본적인 유틸리티
기능을 모아놓은 라이브러리 라고 할 수 있고요
굉장히 많이 사용되는 라이브러리로 현재 라 잡아 스크립터 관련된
라이브러리 중에 1위를 달리고 있습니다
어쨌거나 이 녀석의 유아 렐은 책에 나와 있구요 누르 시계 되면 언더
스코어 점 js 사이트로 이동을 하게 됩니다
여기에서 디벨롭먼트 버전을 클릭을 해 주셔서 이 녀석을 마우스 오른쪽
클릭을 하고 다른 이름으로 저장 을 눌러서 적당한 위치에 저장을 해주시면
되겠습니다
이때 적당한 펄 덜한 현재 우리는 뭐 라이브러리를 예제 로써 살펴 보는
것이기 때문에 생성을 html 파일과 같은 폴더에 저장을 해 주시는게
가장 편리하다고 할 수 있습니다
어쨌거나 언더 스코어 라는 이름으로 저장을 눌러주시면 파일이 저장됩니다
그럼 라이브러리를 가져오는 방법을 살펴보도록 하겠는데요
뭐 현대는 번 들라 라던지 굉장히 다양한 것들 사용하기 때문에 요
가져오는 방법이 굉장히 많지만 가장 기본적인 방법은 헤드 태그 위쪽에
스크립트 태그를 입력을 해 주시고 이 녀석의 다감 쏘 속성을 주시고
내부의 다가 방금 가져왔던 자바스크립트 라이브러리의 경로를 입력을 해
주는 겁니다
만약 현재 폴더에 있는 다른 폴더 안에 있는 어떠한 파일에 저장을 했다면
요런식으로 입력을 해주시면 되겠구요
그냥 같은 폴더에 저장을 하셨다면 지금 화면 같이 이름만 사용해주시면
사용할 수 있게 됩니다
그리고
중요한 것은 요 스크립트 태그는 위쪽에서 아래쪽으로 차례대로 실행이 되기
때문에 무조건 적으로 라이브러리는 위쪽에 몰아서 적어 주셔야 되구요
우리가 사용할 우리가 입력할 코드 같은 경우에는 가장 아래쪽에 위치하게
만들어주시면 되겠습니다 어쨌거나 언더 스코어 점 js 라이브러리는 뭐
구버전의 인터넷 익스플로러 해서 최신 자바 스크립트 기능을 쉽게 사용하기
위해서도 사용을 하지만 그냥 내장되어 있는 기능 자체가 다양한데요
그 다양한 기능들을 간단하게 몇 개 살펴보도록 하겠습니다
일단 여기에 쓰이는 이름 같은 경우에는 프로그래밍 언어의 9분없이 그리고
언어의 버전 9분 없이 모두 많이 사용되는 이름 드리기 때문에 이 문서를
한번 차근차근 읽어 보시면서 파인드 라는 녀석은 뭔가를 찾아 주는 6기
겠구나
일터 라는 녀석은 뭐 하는 거지 뭐 배열이 있을 때 그 안에서 우리가
원하는 조건에 맞는 것만 뽑아 주는 녀석이구나 라는 것들을 한번씩
읽어보시면 좋은 공부가 될 것이라고 생각을 합니다
그럼 책에 있는 정열을 살펴보면서 언더 스코 점 js 라이브러리를
사용하는 가장 기본적인 방법부터 알아보도록 하겠는데요
예를 들어서 어레이를 입력을 하고 일반적으로 우리는
어레이 에 단순한 숫자만 넣어서 쓰기보다는 뭐 이렇게 객체와 활용을 해서
쓰게 되는데 예를 들어서
이름이 1 그리고 가격이 300원 같은 형식으로 객체 배열이 있다라고
해봅시다
두번째는 뭐 사과 같은거 사실 막 가격이 말도 안 되긴 하는데 이렇게
저렴한 리가 없죠
간단한 예제 힘으로 뭐 예를 해주시면 좋겠습니다
어쨌거나 이렇게 간단한 배열을 만들었구요 강의에서 쉽게 볼 수 있게
조금 갱을 바꾸도록 할게요
어쨌거나 간단한 배열을 만들었고요 이 배열에서 가격순으로 한번 정렬을 해
보도록 하겠습니다
사실 현재 가격 순으로 정렬이 되어 있군요 그러면 뭐 조금 뒤 죽도록
할게요
요러한 형태로 요 일단 언더 스코어 js 라이브러리는 두 가지 방법으로
사용할 겔 사용을 하게 되어 있습니다 첫 번째는 함수 방식이구요 두번째는
객체 방식 되겠는데요
함수 방식 같은 경우에는 언더 스코어 라는 변수 이름이 있는데 요 녀석의
점 을 찍어 주시고 이 내부에 있는 녀석들을 사용해주시면 됩니다
지금 우리는 정렬을 할 건데 정렬은 쏠트 바 이라는 녀석을 사용합니다
소트 바이를 사용을 해 주시고 괄호를 열게 되면 우리가 지금 개발환경
비주얼 스튜디오 를 사용하고 있기 때문에
자동 완성 기능이 자동으로 뜨게 되는데요 첫 번째는 리스트를 넣게 되고
두 번째는 어떠한 여 속으로 정열을 할지 를 지정하게 됩니다
따라서 처음에 어레이를 넣어주시면 되게끔
두번째는 함수를 사용해서
함수에 객체가 하나하나 들어오게 되니까 요소가 하나 하나 들어오니까
요소의 있는
아이템 젊 가격이라는 녀석으로 정열을 하겠다 라고 지정을 해 주시면
됩니다
두번째로는 객체 방식이 있는데요 언더 스코어를 입력을 해 주시고 이
녀석을 함수처럼 사용해서 어레이 로 곧바로 입력을 하는 겁니다
그냥 언더 스코 라는 이름의 함수를 사용한 거기 때문에 뭐 측이 않고 더
라고 생각하지 않으셨으면 좋겠구요
이 다음에 점을 찍고 소트 바이를 입력을 한 다음에 요 뒤에 있는 코드를
입력하는 됩니다 방식의 차이는 전혀 없다고 보셔도 무방 을 하고요
일반적으로 함수 방식을 많이 사용하게 됩니다
참고적으로 우리가 이전에 화살표 염소를 알아 보았을 때 퍼 설피 함수는
리턴이 한줄이 라면 리턴을 생략해도 된다 라고 언급을 했었습니다
따라서 현재 코드를
이와 같은 형태로 간단하게 사용할 수 있다는 것도 기억을 해 주시면
좋겠습니다
현재도 간단한 프론트엔드 개발을 할 때는 위의 코드를 더 많이 보시게 될
거고 머리 액트 같은걸 사용하시게 된다면 아래 코드를 굉장히 많이 보실
때도 많이 보시게 될 것이기 때문에 두 가지 방법을 모두 기억을 해
두셔야 합니다
물론 난 점 어렵다 라고 느끼신다면 위에 코드만 기억을 해 주시면
좋겠습니다
어쨌거나 이렇게 사용하면 리턴 값으로 정렬이 된 어레이 가 나오게 됩니다
요게 b 파괴적 메서드 이기 때문에 b 파괴적 함수 이기 때문에 이전과
같은 방식으로
리턴값을 활용해 주시면 됩니다 그럼 한번 요녀석을 출력해 보도록 할게요
코드를 저장을 하고 실행을 해 보신 다음에 fcb 를 눌러서 콘솔 화면을
띄워 주신 다음에 콘솔 테이블 보시게 되면 어레이 에 세 개의 요소가
나오고 배 바나나 그리고 사과 순으로 출력이 되는 걸 볼 수 있습니다
우리가 가격을 기준으로 정렬을 했기 때문에 300 500 그리고 6 -
나오는 모습을 확인할 수 있습니다 항구적으로 이때 리턴 뒤에다가 수식을
입력하실 수 도 있어요 예를 들어서 아이템 젊 가격 나누기 2를 해주시면
가격 나누기 2를 1 녀석으로 재산은 하게 되거나 하게 되는데요
우리가 예전에 위도 경도를 기반으로 거리를 구하는 방법을 간단하게 살펴
봐 서점 예를 들어서 어레이 에다가 어떤 치킨집의 위치 들을 한
100개정도 꼽아 놓게 된다면 그걸 9분을 할 때 요 쏘 트 바 이
메소드를 사용해서 내부에서 현재 위치와 의 거리를 재산을 하고 그 현재
위치와 의 거리를 기반으로 정렬을 할 수도 있다는 그런 형태도 기억을 해
주시면 좋겠습니다
이외에도 굉장히 편리한 기능들이 많은데요 예를 들어서
여기에서 몇 개만 뽑아 달라 랜덤하게 몇 개만 뽑아 달라고 할 때는
샘플이 라는 녀석을 사용하게 됩니다
샘플의 첫 번째 매개 변수 어레이를 넣고 두 번째 매개 변수에 1
4개만 뽑아 바라고 하고 요건 콘솔 단 로그로 출력을 해 보게 되면 이
어레이 에서 4개만 랜덤하게 뽑아서 리턴 을 해주게 됩니다
마찬가지로 언더 스코 점 촛불 같은 것을 사용을 해 보시게 되면 절에
일을 마음껏 뒤섞어 주게 됩니다
그래서 이러한 식으로 사용을 하게 되면 저어 레일을 마음대로 뒤섞어 준
그런 어레이를 세로 리턴을 하게 됩니다
계속 언급을 하지만 이녀석은 b 파괴적 메서드 이기 때문에 절대 어레이
자체를 변화시키지 않고 욤 리턴값을 활용 해 주셔야 하는 녀석들입니다
여기에선 l 는걸 바로 출력을 했기 때문에 어레이 가 바뀌는게 아니라
바뀌어진 녀석
그렇다 바뀌어 줘서 나온 새로운 어레이 가 출력되는 거라고 생각을 해
주시면 되겠습니다
어쨌거나 이렇게 된 코드를 저장을 하고
다시 실행을 해 보게 되면 첫 번째 샘플은 4개를 랜덤하게 뽑아서
267라고 나오게 되고 두 번째 녀석은 1부터 9의 어떤 녀석을
셔플을 해서 랜덤하게 섞어서 만들었기 때문에
이렇게 8일 고 3 살육 752 같은 녀석이 출력이 됩니다
물론 요녀석은 랜덤하게 뽑고 온 랜덤하게 성능 녀석 이기 때문에 실행할때
마다 지금 값이 변하는 모습을 볼 수 있을 겁니다
어쨌거나 이렇게 편리한 메서드 들 편리한 함수들이 엄청나게 많이 제공이
되기 때문에 꼭 한번 읽어서 활용해 주시면 좋겠습니다 그럼 이어서 292
페이지에 연습문제 도 한번 풀어 보도록 하겠는데요
1번 다음 코드 의 실행 결과를 예측해 보세요 하고 스트링을 만들고 스윙
점 투우 버 케이스 와
스윙 점 투어로 워 케이스를 사용할 때마다 스트링을 출력을 하고 있습니다
사실 모 대학교에서 시험 문제로 굉장히 많이 볼 수 있는 녀석인데요
이녀석과 이 녀석 모두 b 파괴적 메서드 이기 때문에 자기 자신을
변경하지 않고 1턴 된 녀석을 사용을 해 줘야 됩니다
현재 그러지 않고 있으므로 여기에서 또 그냥 같은 문자를 출력을 하고
여기에서도 같은 문제를 출력하게 될 것입니다
이번 을 보게 되면 헬로 월드 와 헬로 월드 작게 출력이 되어 있는데 요
앞에 녀석이 오탈자 인데 수정을 하도록 하겠습니다
어쨌건 헬로 월드 가 대문자로 출력이 되게 하고 두번째 헬로 월드 가
소문자로 출력이 되게 하려면 무엇을 변경해야 할까요 라고 나오게 되는데요
리턴값을 활용해 주면 되겠죠 어쨌거나 그러한 형태로 파괴적 메써드 와 b
파괴적 메서드를 꼭 기억을 해 주시면 좋겠습니다
이어서 3번 다음 배열 메서드에서 이코마 스크립트 파이브 에서 추가된
메서드는 무엇일까요
참고로 이크 음악 스크립트 파이브 에서 추가된 메쏘드는 인터넷
익스플로러의 이 퍼져 니아 에서 실행 되지 않기 때문에 어느정도 기억을
하고 있어야 문제가 발생했을 때 대처할 수 있습니다 라고 되어있는데요
여기에서 보시게 되면 일반 되겠구요 이런 것들은 외워 주셔야 됩니다
우리나라가 지금 액티브 x 나 이런거 때문에 인터넷 익스플로러의 이뻐
전이라도 굉장히 많이 사용되고 있어요
물론 굉장히 빼는 아니에요 근데 열 명 중에 한 명이 사용하고 있다면
어떤 사이트를 개발할 때 인터넷 익스플로러를 버릴 수는 없거든요 그래서
기억을 해 주셔야 되니까 꼭 책을 읽으면서 기억을 해 주시면 좋겠습니다
이어서 문자 에 양쪽에 공백을 제거 를 할 때는 어떤 메소드를 사용할까요
만약 모르겠다면 웹브라우저를 열고 검색해서 찾아보세요 라고 나오는데요
요걸 할 때는 트림 이란 메소드를 사용 하게 됩니다 그리고 5번 브로
끼의 전기 표현식을 읽어보기 바랍니다 라고 되어있는데요
읽어보시면 되겠습니다 어쨌거나 지금까지 의 과정으로 자바스크립트 언어 간
프로그래밍 언어에 있는 기본적인 기능들을 대부분 살펴보았어요 이
다음부터는 브라우저 객체 모델을 배우게 되는데
요거는 자바스크립트의 있는 기능이 라기보다는 브라우저에 있는 기능이 고요
이 다음 장에서 살펴보는 오브 돔 이라는 도큐먼트 오브젝트 모델이라
녀석도 자바스크립트의 기능니라 브라우저의
진 행 이기 때문에 이번 팔짱 까지로 자바스크립트와 관련된 기능은
예외처리를 제외하고 모두 살펴보았습니다
따라서 여기까지 공부를 하시면 프로그래밍 언어를 사용한 알고리즘 문제들을
푸실 수 있을텐데요 음까지 의 개념을 복수 판단한 느낌으로 뭐 차근차근
알고리즘 문제들을 풀어 보셔도 괜찮을 거라고 생각을 합니다
뭐 그거에 너무 열을 올리 시면 이 뒤에 배우는 것을 자주 진행을
못하니까 안되겠지만 간 일주일에 한 개 정도 풀어보면 좋을 것이라고
생각을 합니다
어쨌거나 간단한 문제를 하나 내 보도록 하겠는데요
음 5
베르나르 베르베르 라는 분의
재미 라는 소설을 보시게 되면
잼 입수 10이라는 것이 나오게 됩니다 사실 내부에서 개미 수 열이라고
나오지는 않구요
수열이 나오는데 개미 라는 소설의 나오기 때문에 우리가 그걸 개미 수열이
라고 부릅니다
어쨌거나 잠시만요 대한 게이가 3개 미리 휴 개 3의 1개 일이 한게 뭐
방금 말하듯 어떤거를 못 들으신 분은 아시겠지만 이 수혈의 규칙은 굉장히
간단합니다 일단 처음에는 일로 시작을 하게 되고요
이 다음부터는 이 앞쪽에 있는 녀석의 숫자가 몇 개인지 를 앞더
차례대로 부르는 것입니다
이리 1개 있으니까 1 2 되고요
위쪽을 다시 보면 1위 2개 이점
그래서 1위 두개다 다시 위 쪽을 보고 일이 한 게이가 1개 있으니까
1 2 2 1 2 되고요 위에 있는 걸 또 보고
일이 2재 그리고 2가 1 개
그리고 1위 한계 라고 해서 1211 일이 되고 이 다음 것은 일이 안
개 2 가 2개 1위 3개가 되서 요러한 소율이 나오고
1위 2개 이가 2개 1위 한계 3위 함께라서 이러한 수열이 나오게
됩니다
1 수열의 30번째 있는
해 열을
수열을 찾아주세요 가 문제가 되겠습니다
요게 가끔 면접 문제로도 많이 나오는 그런 문제이기 때문에 한번
풀어보시면 좋은 공부가 될 것이라고 생각을 합니다
사실 함께 풀어 볼까 생각했는데 용 함께 플 의미는 크게 없는 것 같아요
개미 수 열이라고 굉장히 유명하기 때문에 뭐 구글 검색의 재미 수열이
라고 검색을 해보시면 요걸 푸는 답들이 나올 거에요 그래서 한번 직접
풀어보시고 답이 맞는지 도 한번 확인을 해보시면 좋겠습니다
참고적으로 뭐 개발자 스터디를 할 때 m
프로그래밍을 어느정도 하시는 분들 입사 하신 분들을 대상으로 이걸 프라
고프로 보라 그러면 2시간 정도가 되도 못푸는 분들이 굉장히 많더라구요
그래서
문제를 푸실 때 탄 2시간에서 3시간 정도 잡고 풀어 주시면 좋겠습니다
물론 잘하시는 분이라면 몹은 10분이면 풀 겠지만 욤
어쨌거나 오늘 강의는 여기까지 되겠구요 다음 강의에서 뵙도록 하겠습니다
감사합니다.