다양한 IT 기술에 대한 내용을 공유합니다.
![[JavaScript] ES5 Array.filter](https://susukkekki.kr/wp-content/uploads/2017/02/web.png)
Array.filter메서드는 배열의 각 요소를 순회하며 콜백 함수를 실행하며 특정 조건에 맞는 요소만 모아 배열로 리턴한다. 특정 케이스만 필터링해서 추출할 때 유용하다.
var arr = [1, 3, 5, 6, 7, 9, 11];
// 배열 요소중에서 모두 7보다 작은 요소만 모아 배열로 리턴
var val = arr.filter(function (item, index, array) {
return item < 7;
});
console.log(val);
// [1, 3, 5, 6]
[JavaScript] Array 객체에서 놓치기 쉬운 6개의 메서드
Array.prototype.filter()
| 명령어 | 동작 |
|---|---|
| # systemctl status nginx | 상태 확인 |
| # sudo systemctl stop nginx | 웹서버 정지 |
| # sudo systemctl start nginx | 웹서버 재시작 |
| # sudo systemctl reload nginx | 설정 리로드 |
Array.some메서드는 배열의 각 요소를 순회하며 콜백 함수를 실행하며 하나의 요소라도 조건을 만족할 때 true를 반환하며, 만족하지 않을 때 false를 반환한다. 특정 조건을 만족하는지 알고 싶을 때 적합한 메서드다.
var arr = [1, 3, 5, 6, 7, 9];
// 배열 요소중에서 짝수가 있으면 메서드 수행을 중단하고 true를 리턴
var val = arr.some(function (item, index, array) {
return item % 2 === 0;
});
console.log(val);
// ture
[JavaScript] Array 객체에서 놓치기 쉬운 6개의 메서드
Array.prototype.some()
| 명령어 | Windows 커맨드 | Mac OS 터미널 |
|---|---|---|
| 현재 디렉토리 | cd | pwd |
| 현재 디렉토리 파일 리스트 보기 | dir | ls |
| 디렉토리 이동 | cd | cd |
| 디렉토리 생성 | mkdir | mkdir |
| 디렉토리 삭제 | rmdir | rmdir |
| 화면 클리어 | cls | clear |
| null 파일 생성 | type NUL > | touch |
| 파일 삭제 | del | rm |
| 파일 이동 | move | mv |
| 디렉토리 이름 바꾸기 | ren | mv |
| Explorer/Finder 에서 열기 | start | open |
Array.every메서드는 Array.some와 비슷하지만 모든 요소가 조건을 만족해야 true를 반환한다.
var arr = [1, 3, 5, 6, 7, 9, 11];
// 배열의 모든 요소가 10보다 작아야 true를 리턴
var val = arr.every(function (item, index, array) {
return item < 10;
});
console.log(val);
// false
[JavaScript] Array 객체에서 놓치기 쉬운 6개의 메서드
Array.prototype.every()
윈도우에서는 Putty라는 프로그램으로 ssh접속을 하였지만 맥에서는 터미널로 바로 접속이 가능하다.
$ ssh [ID]@[HOST]
예를들어 webapp이 아이디이고 127.0.0.1가 호스트 번호 라면
$ ssh webapp@127.0.0.1
라고 입력한 뒤 패스워드를 입력하면 된다.
Array.reduce메서드는 배열의 각 요소를 순회하며 콜백 함수를 실행하며 이전 리턴값을 넘겨 받는다. 이전 값을 넘겨 받아 현재 값과 어떠한 작업을 수행하고 싶을 때 적합한 메서드이다. 인자 값이 다른 메서드와 약간 다르며, 콜백 함수 뒤에 인자를 하나 더 줄 수 있다. 이 인자는 첫 콜백함수의 이전 값으로 주입된다.
var arr = [1, 2, 3, 4, 5];
// 각 콜백 마다 리턴값을 previousItem로 넘겨받아 어떤 작업을 수행
var val = arr.reduce(function(previousItem, currentItem, index, array) {
// 콜백의 리턴 값을 받아 현재의 값과 더하려 다시 리턴
return previousItem + currentItem;
// 첫번째 콜백의 previousItem값
}, 0);
console.log(val);
// 15
// 위 결과를 수식으로 나타내면 0 + 1 + 2 + 3 + 4 + 5 이다.(0부터 5까지의 합)
[JavaScript] Array 객체에서 놓치기 쉬운 6개의 메서드
Array.prototype.reduce()
크롬 개발자 도구의 Sources패널로 디버깅을 할 수 있다.
function hello() {
return 'hello';
}
function world() {
return 'world';
}
function greetinf() {
var h = hello();
var w = world();
document.getElementById('msg').setAttribute('value', h + w);
}
<input type="text" id="msg" />
<button type="button" onclick="greetinf()">click</button>
버튼을 클릭하면 greetinf함수가 실행되며, h, w변수에 차례대로 값이 할당된 후 인풋 태그에 결과 값(helloworld)이 출력되는 구문이다.
크롬 개발자 도구의 소스탭을 들어가면 아래 처럼 확인할 수 있다.
개발자 도구는 특정 라인이 아닌 글로벌한 이벤트에 대해 중단점을 만들 수 있다. 좌측 하단의 Event Listener Breakpoints탭으로 들어가 Mouse > click를 체크해준다. 화면으로 넘어가 버튼을 클릭하면 이벤트가 실행되면서 이벤트가 실행된 코드를 소스탭에서 확인할 수 있다.
중단점을 이용하면 실행이 중지된 시점에 변수가 어떤 값을 담고 있는지 알 수 있다. 또한 실행이 중지된 시점을 기준으로 명령어를 실행할 수도 있다.
압축 파일(min)을 보기 좋게 정렬하여 볼 수 있다.
스크립트 실행을 다시 시작한다. 추가 중단점이 없는 경우, 실행이 쭉 이어지고 디버거는 동작하지 않는다.
다음 명령어를 실행한다. Step버튼을 계속 누르면 스크립트 전체를 문 단위로 하나하나 실행할 수 있다.
다음 명령어를 실행하되, 함수 안으로 들어가진 않는다. Step과 유사하지만, 다음 문이 함수 호출일 때 Step과는 다르게 동작한다.(alert 같은 내장함수에는 해당하지 않고, 직접 작성한 함수일 때만 동작이 다르다.) Step은 함수 내부로 들어가 함수 본문 첫 번째 줄에서 실행을 멈춘다. 반면 Step over next function call은 보이지 않는 곳에서 중첩 함수를 실행하긴 하지만 함수 내로 진입하지 않는다. 함수 호출 시 내부에서 어떤 일이 일어나는지 궁금하지 않을 때 유용하다. 실행은 함수 실행이 끝난 후에 즉시 멈춘다.
Step과 유사한데, 비동기 함수 호출에서 Step과는 다르게 동작한다. Step은 setTimeout(함수 호출 스케줄링에 쓰이는 내장 메서드)같은 비동기 동작은 무시한다. 반면 Step into next function call는 비동기 동작을 담당하는 코드로 진입하고, 필요하다면 비동기 동작이 완료될 때까지 대기한다.
현재 실행 중인 함수의 실행을 계속 이어가다가 함수 본문 마지막 줄에서 실행을 멈춘다. 실수로 Step을 눌러 내부 동작을 알고 싶지 않은 중첩 함수로 진입했거나 가능한 한 빨리 함수 실행을 끝내고 싶은 경우 유용하다.
모든 중단점을 일시적으로 활성화/비활성화한다.(실행에는 영향이 없음)
활성화되어 있고, 개발자 도구가 열려있는 상태에서 스크립트 실행 중에 에러가 발생하면 실행이 자동으로 멈춘다. 실행이 중단되었기 때문에 변수 등을 조사해 어디서 에러가 발생했는지 찾을 수 있게 된다. 개발하다가 에러와 함께 스크립트가 죽었다면 디버거를 열고 이 옵션을 활성화한 후, 페이지를 새로고침하면 에러가 발생한 곳과 에러 발생 시점의 컨텍스트를 확인할 수 있다.
현재 정의된 모든 변수를 출력한다. Local은 함수의 지역변수를 보여준다. 지역 변수 정보는 소스 코드 영역에서도 확인(강조 표시)할 수 있다. Global은 함수 바깥에 정의된 전역 변수를 보여준다. Local 하위 항목으로 this에 대한 정보도 출력된다.
표현식을 평가하고 결과를 보여준다. Add watch expression 버튼을 클릭해 원하는 표현식을 입력한 후 Enter를 누르면 중단 시점의 값을 보여준다. 입력한 표현식은 실행 과정 중에 계속해서 재평가된다.
코드를 해당 중단점으로 안내한 실행 경로를 역순으로 표시한다.
Chrome으로 디버깅하기
Chrome DevTools에서 자바스크립트 디버깅 시작하기
크롬 개발자 도구를 이용한 자바스크립트 디버깅
생활코딩 – Sources
웹사이트를 운영중 이미지 및 css 또는 js를 수정해도 반영이 안되어있을 때가 있다. 브라우저 내에 저장되어 있는 캐시 때문인데, 이를 해결하려면 사용자가 직접 캐시를 지우거나 강력 새로고침을 해야하는 번거로운 상황이 있다. 이를 방지하려면 작업자가 수정된 파일의 url 뒤에 ?ver=1라고 쿼리스트링을 붙여주면버전 정보를 적어주면 브라우저가 새로운 파일로 인식하고 파일들을 다시 다운로드 한다.
html
<link type="text/css" href="./common.css?ver=1" />
위 방법은 수정될 때 마다 쿼리스트링을 변경해줘야되는데, 이것도 번거롭다면 자바스크립트를 이용하여 동적으로 랜덤한 쿼리스트링을 생성하여 붙여주는 방법이 있다.
javascript
var bust = Math.floor((Math.random() * 1000));
document.write('<link type="text/css" href="./common.css?bust=' + bust + '" />');
이 방법은 브라우저가 로딩될 때 마다 쿼리스트링 값이 다르기 때문에 항상 파일을 새로 불러오게 된다.
자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 콜백 패턴은 가독성이 나쁘고, 비동기 처리 중 발생한 에러의 예외처리가 곤란하며, 여러개의 비동기 처리 로직을 한꺼번에 처리하는 것도 한계가 있다. ES6에서 비동기 처리를 위한 또 다른 패턴으로 프로미스(Promise)를 도입하였다. 프로미스는 비동기적으로 요청한 결과(성공/실패)를 나타내는 객체로서, 콜백 패턴이 가진 단점을 보완하며, 비동기 처리 시점을 명확하게 표현한다.
기존의 비동기 처리 방식은 콜백 패턴을 이용하는 방법이였으며 코드는 아래와 같다.
function findUser(id, callback) {
setTimeout(function () {
const user = {
id: id,
name: 'my name is ' + id
};
callback(user);
}, 1000);
}
findUser('foo', function (user) {
console.log(user); // { id: 'foo', name: 'my name is foo' }
});
user객체의 정보를 받아오는 구조다. getUser() 함수를 호출할 때 두번째 인자로 콜백 함수가 할당된다. setTimeout()함수로 인하여 1초 뒤 user객체의 정보를 담는 로직이 실행되며 결과물이 두번째 인자로 들어간 콜백 함수의 인자에 할당되어 콜백 함수가 호출된다.
상단의 비동기 처리 방식을 프로미스를 이용하면 아래와 같이 작성할 수 있다.
function findUser(id) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
const user = {
id: id,
name: 'my name is ' + id,
};
resolve(user);
}, 1000);
});
}
findUser('foo').then(function (user) {
console.log(user); // { id: 'foo', name: 'my name is foo' }
});
위 코드는 콜백 함수를 인자로 넘기는 대신에 프로미스 객체를 생성하여 리턴을 하고, 리턴받은 프로미스 객체의 then()메서드를 호출하여 실행할 로직을 인자값으로 넣어줬다. 실행할 로직은 resolve 메서드에 할당되어 user객체의 결과값을 콘솔창에 출력하고 있다. resolve()와 then()가 생소하다. 아래에서 천천히 알아보도록 하겠다.
프로미스는 3가지의 상태(states)를 가지며, 여기서 상태란 프로미스의 처리 과정을 의미한다. new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 가진다.
아래처럼 new Promise()생성자를 호출하면 대기 상태가 된다. new Promise() 생성자를 호출할 때 인자로 콜백 함수를 선언할 수 있고, 콜백 함수의 인자는 resolve, reject이다.
const promise = new Promise(function (resolve, reject) {
// ...
});
실제로는 변수에 할당하기 보단 어떤 함수의 리턴값으로 많이 사용되며, 생성자의 인자로 화살표 함수를 많이 사용한다.
function returnPromise() {
return new Promise((resolve, reject) => {
// ...
});
}
넘겨 받은 인자에서 resolve를 함수로 실행하면 이행(완료) 상태가 된다.
function returnPromise() {
return new Promise((resolve, reject) => {
resolve();
});
}
이행 상태에서 아래와 같이 then()메서드를 이용하면 결과값을 받을 수 있다.
function returnPromise() {
return new Promise((resolve, reject) => {
const data = 'my name is foo';
resolve(data);
});
}
returnPromise().then((data) => {
console.log(data); // my name is foo
});
넘겨 받은 인자에서 reject를 함수로 실행하면 실패 상태가 된다. 실패 상태가 되면 실패 처리의 결과값을 catch()메서드를 통해 받을 수 있다.
function returnPromise() {
return new Promise((resolve, reject) => {
reject(new Error('Request is failed'));
});
}
returnPromise()
.then()
.catch((err) => {
console.log(err); // Error: Request is failed
});
아래는 응답값에 따라 결과를 출력하는 예제이다.
function getData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = 'my-data'; // data 값이 있다면 data 값을 출력
// const data = ''; // data 값이 없다면 에러를 출력
if (data) {
resolve(data);
}
reject(new Error('Request is failed'));
}, 1000);
});
}
getData()
.then((data) => {
console.log(data); // my-data
})
.catch((err) => {
console.log(err); // Error: Request is failed
});
setTimeout()함수로 1초 뒤 data값을 받아오며, data값이 있을 경우 then()메서드를 호출하고, data값이 없을 경우 catch() 메서드를 호출한다.
프로미스의 특징으로 여러개의 프로미스를 연결하여 사용할 수 있다. then()메서드를 호출하면 새로운 프로미스 객체가 반환된다. 아래처럼 각 프로미스를 연결하여 사용할 수 있다.
function getData() {
return new Promise((resolve, reject) => {
setTimeout((data) => {
const data = 10; // data 값이 10일 경우
if (data) {
resolve(data);
}
reject(new Error('Request is failed'));
}, 1000);
});
}
getData()
.then((data) => {
console.log(data); // 10
return data + 10;
})
.then((data) => {
console.log(data); // 20
return data + 10;
})
.then((data) => {
console.log(data); // 30
})
.catch((err) => {
console.log(err); // Error: Request is failed
});
setTimeout()함수에서 data값이 10으로 왔다고 가정해 본다. 첫번째 then()메서드의 data에 10을 더하여 리턴하고 두번째 then()에 더한 data를 인자로 넣어 호출한다. 이와 같은 방법으로 then()함수를 연결하여 사용할 수 있다.
[자바스크립트] 비동기 처리 2부 – Promise
자바스크립트 Promise 쉽게 이해하기
JavaScript 비동기 처리를 위한 promise 이해하기
Promise
프로미스