무한 스크롤에서 사용되는, 스크롤이 맨 아래로 왔을 때 moreData를 호출하는 로직 $(document).ready(function(){ //window는 "#searchPopup"등 으로 스크롤 주체로 변경가능 $(window).scroll(function(){ var scrollTop = $(this).scrollTop(); var innerHeight = $(this).innerHeight(); var scrollHeight = $(this).prop('scrollHeight'); if(scrollTop + innerHeight >= scrollHeight) { moreData(); } }); }); 스크롤 주체가 어떤 영역인지 모를땐, 스크롤을 내리면서 $('#searchPopup').scro..
로그인이 필요한 서비스에 접근 시 비로그인일 경우 로그인 페이지로 이동이 될 것이다. 그리고 사용자 편의를 위해 로그인 후 이전 페이지로 돌아와 원래 하려던 작업을 할 수 있도록 소스 구현이 필요한데 아래와 같은 소스가 자주 사용된다. location.href = "/login?returnUrl="+location.href; 이렇게 사용할 경우 손쉽게 처리가 가능하지만 한 가지 문제를 직면할 수 있다. 만약 location.href의 값이 "/event/view?mbrId=abc&addr=korea&gender=M" 위와같이 되어 있고 위 정보들이 모두 필요하다면 서버에서 returnUrl은 mbrId=abc까지만 받아지고 그 뒤에 주소와 성별은 짤리게 되는 현상이다. 이는 뒤의 값을 다른 파라미터로 인..
이터레이터 이터레이터는 '지금 어디 있는지' 파악할 수 있도록 돕는다는 면에서 일종의 책갈피와 비슷한 개념입니다. 배열은 이터러블 객체의 좋은 예입니다. 책에 여러 페이지가 있는 것처럼 배열에는 여러 요소가 들어 있으므로, 책에 책갈피를 끼울 수 있듯 배열에는 이터레이터를 사용할 수 있습니다. 책과 책갈피의 비유를 계속 사용해 봅시다. book이란 배열이 있고, 이 배열의 각 요소는 책의 한 페이지를 나타내는 문자열이라고 합시다. 지면을 생각해서 루이스 캐럴의 이상한 나라의 앨리스에서 발췌한 '반짝 반짝 작은 박쥐' 원문을 사용하겠습니다. 한 페이지에 문장 하나씩만 들어 있는 어린이용 동화책을 상상해 보세요 const book = [ "반짝 반짝 작은 별", "아름답게 비치네", "서쪽 하늘에서도", "..
Error 객체 자바스크립트에는 내장된 Error 객체가 있고 이 객체는 에러 처리에 간편하게 사용할 수 있습니다. Error 인스턴스를 만들면서 에러 메시지를 지정할 수 있습니다. const err = new Error("invalid email"); 이렇게 인스턴스를 만드는 것만으로는 아무일도 일어나지 않습니다. 이 인스턴스는 에러와 통신하는 수단입니다. 좀더 유효하게 사용하는 예제를 보도록 합시다. function validateEmail(email){ return email.match(/@/)? email : new Error(`invalid email: ${email}`); } const email = 'jane@doe.com'; const validatedEmail = validateEmail..
상속 프로토타입을 이해하면서 우리는 이미 상속의 일면을 봤습니다. 클래스의 인스턴스는 클래스의 기능을 모두 상속합니다. 상속은 한 단계로 끝나지 않습니다. 객체의 프로토타입에서 메서드를 찾지 못하면 자바스크립트는 프로토타입의 프로토타입을 검색합니다. 프로토타입 체인은 이런식으로 만들어 집니다. 클래스의 계층 구조를 만들 때 프로토타입 체인을 염두에 두면 효율적인 구조를 만들 수 있습니다. 즉 프로토타입 체인에서 가장 적절한 위치에 메서드를 정의하는 겁니다. 예를 들어 자동차에는 deployAirbags란 메서드가 있을 수 있습니다. 이 메서드를 운송 수단 클래스에 정의 할 수도 있겠지만, 에어백이 달린 보트는 없으므로 자동차에 정의하는게 맞고 보트나 차는 승객을 태울 수 있으므로 addPassenger ..
배열과 마찬가지로 자바스크립트 객체 역시 컨테이너지만, 크게보면 다음 두 가지 측면에서 배열과 다릅니다. 배열은 값을 가지며 각 값에는 숫자형 인덱스가 있습니다. 객체는 프로퍼티를 가지며 각 프로퍼티에는 문자열 이나 심볼 인덱스가 있습니다. 배열에는 순서가 있습니다. 하지만 객체에는 그런 순서가 보장되지 않습니다. obj.a가 obj.b보다 앞에 있다고 말할 수는 없습니다. 객체를 순회하기 좋은 루프중에 for...in등이 있는데 주의할 점은 일반적인 배열에서는 for루프나 forEach를 사용하는게 더 유용합니다. Object.keys 객체에서 나열 가능한 문자열 프로퍼티를 배열로 반환합니다. 예를 들어 객체에서 x로 시작하는 프로퍼티를 모두 가져온다면 다음과 같이 할 수 있습니다. const o = ..
Learning JavaScript 배열과 배열처리
배열의 기초 배열은 객체와 달리 본질에서 순서가 있는 데이터 집합이며 0으로 시작하는 숫자형 인덱스를 사용합니다. 자바스크립트의 배열은 요소가 모두 같은 타입일 필요는 없습니다. 배열안에 다른 배열이나 객체도 담을 수 있음 배열 리터럴은 대괄호를 만들고, 배열 요소에 인덱스로 접근할 때도 대괄호를 사용합니다. 모든 배열에는 요소가 몇 개 있는지 나타내는 length 프로퍼티가 있습니다. 배열에 배열 길이보다 큰 인덱스를 사용해서 요소를 할당하면 배열은 자동으로 그 인덱스에 맞게 늘어나며, 빈 자리는 undefined로 채워집니다. Array생성자를 써서 배열을 만들 수 있지만 그렇게 해야하는 경우는 별로 없습니다. 위 내용을 숙지하면 자바스크립트의 배열을 더 자유롭게 다를 수 있을 것이다. 배열 요소 조..