앜스토리 | 호기심 많은 개발자의 보물창고

웹 사이트에 접속하기 위한 사이트 주소 정보는 노드에서 URL 객체로 만들 수 있다.예를 들어, 구글 사이트에서 영화배우 정보를 찾기 위해 키워드로 actor를 넣고 [검색] 버튼을 누르면, 다음과 같은 주소 문자열을 만들어 검색 요청을 하게 된다. https://www.google.co.kr/?gws_rd=ssl#newwindow=1&q=actor 그런데 이렇게 만들어진 주소 문자열은 단순 문자열이므로 서버에서 이 정보를 받아 처리할 때는 어디까지가 사이트 주소인지, 그리고 어떤 내용이 요청 파라미터인지 구별해야 한다. 이 구별을 위해서 ? 기호를 기준으로 앞에 있는 문자열과 뒤에 있는 문자열을 분리하는 경우가 많다. 이 작업을 쉽게 할 수 있도록 노드에 미리 만드어 둔 모듈이 url 모듈이다. URL..

자바스크립트의 객체를 만들 때는 중괄호를 이용한다고 했다. 그런데 자바스크립트 객체는 함수를 이용해서 만들수도 있다. 그 이유는 함수도 객체이기 때문이다. 함수에 여러가지 기능과 속성이 추가되면서 객체 지향(Object oriented) 언어에서 객체의 원형(Prototype)인 클래스를 만들고, 그 클래스에서 새로운 인스턴스 객체를 여러 개 만들어 내듯이 자바스크립트에서도 객체의 원형을 정의한 후 그 원형에서 새로운 인스턴스 객체를 만들어 낼 수 있다. ▲ 프로토타입 객체를 정의한 후 프로토타입에서 인스턴스 객체 만들기 Person 프로토타입 객체는 데이터를 넣어 두려는 목적보다는 하나의 틀로 사용하기 위해 만든다. 붕어빵 틀에서 실제 붕어빵을 만들어 내듯이 실제 사람을 여러 명 찍어 내기 위한 틀을 ..

지금까지 함수를 호출했을 때 또 다른 함수를 파라미터로 전달하는 방법에 대해 포스팅한다. 그러면 함수 안에서 값을 반환할 때 새로운 함수를 만들어 반환하는 방법도 살펴보자. ▲ 함수에서 반환하는 값이 함수 객체인 경우 어떤 함수를 실행했을 때 또 다른 함수를 반환받으면 반환받은 함수를 그대로 실행할 수 있다. 이렇게 만들면 하나의 함수를 실행했을 때 추가적인 결과를 얻거나 또는 추가 작업을 할 수 있다. 그러면 더하기 함수를 실행했을 때 그 기록을 남겨 두었다가 출력하는 기능을 가상으로 만들어보자. ch03_test16.js 파일을 만든 후 다음과 같이 입력한다. function add(a, b, callback) { var result = a + b; callback(result); var histor..

함수를 파라미터로 전달하는 경우는 대부분 비동기 프로그래밍(Non-Blocking Programming) 방식으로 코드를 만들 때이다. 예를 들어, 더하기 함수를 실행한 후 결과 값이 반환될 때까지 기다리지 않고 그 다음 코드를 실해앟려면 비동기 방식으로 코드를 만들어야 한다. 즉, 더하기 함수를 실행하는 데 시간이 걸릴 수 있기 때문에 그 다음 코드를 바로 실행한다. 그리고 연산이 끝났을 때 파라미터로 전달한 함수가 실행될 수 있다면 그 시점에 결과를 처리할 수 있으므로 효율적인 프로그램을 만들 수 있다. 이 때 파라미터로 전달되는 함수를 콜백 함수(Callback function)이라고 한다. 콜백 함수는 함수가 실행되는 중간에 호출되어 상태 정보를 전달하거나 결과 값을 처리하는 데 사용된다. ch0..

자바스크립트의 변수에는 숫자나 문자열 같은 데이터, 그리고 중괄호를 이용해 만든 객체뿐 아니라 함수도 할당할 수 있다고 했다. 이렇게 변수에 함수를 할당할 수 있다는 특징은 함수를 호출할 때 다른 함수를 파라미터로 전달하거나 함수 안에서 또 다른 함수를 만들어 반환할 수 있다. ▲ 함수를 파라미터로 전달하기

slice() 메소드는 배열의 일부 요소들을 복사하여 새로운 배열을 만들어준다. ▲ slice() 메소드를 이용해 배열의 일부 요소를 복사하여 새로운 배열을 만들기 slice() 메소드에 전달하는 파라미터는 두 개이다. 첫 번째는 복사할 요소의 시작 위치이며 두 번째는 끝 위치이다. ch03_test14.js 파일을 새로 만들고 다음 코드를 입력하자. var Users = [{name:'소녀시대', age:20}, {name:'걸스데이', age:22}, {name:'티아라', age:23}, {name:'애프터스쿨', age:25}]; console.log('배열 요소의 수 : %d', Users.length);console.log('원본 Users');console.dir(Users); var Use..

splice() 메소드를 호출할 때 전달하는 첫 번째 파라미터는 인덱스 값으로 배열의 몇 번째 요소부터 처리할 것인지를 지정한다.두 번째 파라미터는 삭제할 요소의 개수를 지정한다. 만약 다섯 개의 객체가 들어 있는 Users 배열에서 세 번째와 네 번째 요소를 삭제하고 싶다면 다음과 같이 호출한다. ▲ splice() 메소드를 이용해 배열 요소를 추가하거나 삭제하기 세 번째 요소의 인덱스 값이 2이므로 첫 번째 파라미터의 값은 2가 되고 두 개의 요소를 삭제할 것이므로 두 번째 파라미터의 값도 2가 된다.만약 값을 추가하고 싶다면 두 번째 파라미터의 값을 0으로 입력한 후 추가하려는 객체들을 파라미터로 전달한다. splice() 메소드를 이용해 배열에 요소들을 추가했다가 삭제하는 기능을 만들기 위해 ch..

배열에 값을 추가하거나 삭제하는 방법을 알아보자.배열에는 다음과 같은 메소드가 포함되어 있어 그 요소 값을 확인하거나 추가 또는 삭제할 수 있다. 속성/메소드 이름 설명 push(object) 배열의 끝에 요소를 추가한다. pop() 배열의 끝에 있는 요소를 삭제한다. unshift() 배열의 앞에 요소를 추가한다. shift() 배열의 앞에 있는 요소를 삭제한다. splice(index, removeCount, [Object]) 여러 개의 객체를 요소로 추가하거나 삭제한다. slice(index, copyCount) 여러 개의 요소를 잘라내어 새로운 배열 객체로 만든다. 먼저 배열의 끝에 요소를 추가하거나 삭제할 때는 push()와 pop() 메소드를 사용한다. 배열에 객체를 추가하는 경우가 많기 때문..

배열 안의 모든 요소를 확인하는 가장 간단한 방법은 for문을 사용하는 것이다. 파일 ch03_test10.js를 만들고 다음과 같이 입력하자. var Users = [{name:'소녀시대', age:20}, {name:'걸스데이', age:22}, {name:'티아라', age:23}]; console.log('배열 요소의 수 : %d', Users.length);for(var i=0; i

배열은 여러 개의 데이터를 하나의 변수에 담아 둘 수 있어서 자주 사용되며, 배열 안에 들어 있는 요소(또는 원소, Item)들은 대괄호 []를 이용해서 접근할 수 있다. 배열이 만들어지는 모양은 다음과 같다. ▲ 배열이 만들어지는 모양 만약 다섯 명의 사용자 정보를 관리하기 위해 다섯 개의 객체를 만들고 각각 다른 이름의 변수에 할당했다면 매번 다섯 개의 변수에 접근하고 관리해야 한다. 그런데 Users 변수를 하나만 만들고 그 안에 다섯 개의 사용자 객체를 넣어 한꺼번에 관리할 숭 ㅣㅆ다면 각각을 따로 관리하는 것보다 훨씬 편리해진다. 이렇게 여러 개의 데이터를 편리하게 다룰 수 있기 때문에 배열을 자주 사용한다. 배열에 추가되는 요소들은 0부터 시작하는 인덱스(Index) 번호로 접근할 수 있다. ..