javascript
[ JavaScript ] 자바스크립트 프로미스 Promise
프로미스(Promise)란? JavaScript 에서 코드가 순차적으로 일어나는 처리를 동기 처리라 하며, 특정 코드가 처리될 때 까지 기다리지 않고 다음 코드를 먼저 처리하는 걸 비동기 처리라 한다. 이러한 비동기 처리에서 콜백 지옥(Callback Hell) 등의 문제를 해소하기 위해 사용하는 객체, 즉 비동기 처리에서 순차적 처리를 행하기 위해 사용되는 객체가 프로미스(Promise)이다. Promise 를 꼭 사용해야 하는가? 꼭 그런 건 아니다. 굳이 따지면 비동기 처리 때 Promise 를 사용하지 않는 사용자가 대부분일 것이다. 하지만 앞서 언급했 듯 비동기 처리는 순차적으로 처리하지 않는다는 특징이 있는데, 경우에 따라 비동기 처리를 사용함에도 이를 순차적으로 처리해주어야 할 때가 있다. ..
[ JQuery ] 제이쿼리 함수 ( attr, val, data 등 )
JQuery 는 태그 등 엘리먼트에서 값이나 스타일, 또는 속성 등을 조작하기 위한 함수들을 정말 많은 방법으로 지원하는데 어떤 함수들이 있는지 살펴보도록 하자. attr ( ) attr 은 엘리먼트의 속성 값을 가져오거나 변경할 수 있는 함수이다. 하나의 인자를 주면 해당 속성 값만을 조회하고 두 개를 주면 해당 속성 값을 변경한다. . . TestContent prop ( ) 엘리먼트의 속성 값을 가져오거나 변경한다는 점에서 attr ( ) 와 유사하지만, 아무 속성 값이 아니라 true 와 false 값 만을 가지는 속성 값을 관리한다. . . TestContent addClass ( ) 클래스가 없는 엘리먼트에 class 속성을 추가한다. . . TestContent removeClass ( ) ..
[ JavaScript ] 자바스크립트 비구조화 할당
만약 [ 10, 20, 30 ] 값을 가지고 있는 arr 이라는 배열이 있고, 이를 각각 a, b, c 라는 변수에 담아 콘솔로 찍고자 한다면 아래와 같이 수행할테다. const arr = [ 10, 20, 30 ]; const a = arr[0]; const b = arr[1]; const c = arr[2]; console.log(a); //10 console.log(b); //20 console.log(c); //30 또는 name, age, addr 필드 명을 가지고 있는 obj 라는 객체에서 각각 변수에 할당에 콘솔로 찍고자 한다면 아래와 같을 것이다. const obj = { name: '홍길동', age: 20, addr: '서울' }; const name = obj.name; const a..
[ JavaScript ] 자바스크립트 indexOf( ) 함수
이전 포스팅에선 여러 값을 가지고 있는 배열에서 특정 조건을 주어 값을 걸러내는 방법을 다뤘다. 이번엔 배열이 여러 문자열을 가지고 있고, 이를 조건을 주어 문자열을 뽑아내보도록 하자. indexOf( ) 함수 indexOf( ) 함수는 문자열을 실시간으로 검색해주는 기능을 가졌다. 검색 방향은 제일 첫 인덱스부터 시작되며 왼쪽에서 오른쪽으로 향한다. 검색 도중 조건에 만족하는 문자열을 찾지 못했다면 -1 을 return 해준다. 바로 예제 코드를 보도록 하자. 문자열 배열중에 "고"를 가진 문자열을 찾는 코드이다. const arr1 = [ '고구마', '감자', '사탕', '고단백', '고기']; const txt = '고'; //-1은 찾지못했다는 것 -> !== -1 은 찾지 못하지 아니하면(찾았..
[ JavaScript ] 자바스크립트 filter( ) 함수와 find( ) 함수
저번 포스팅에서 배열에서 map( ) 함수로 값을 빼오는 법을 다루었다. 그럼 배열에서 특정 조건만 주어 조건에 해당하는 값들만 걸러내려면 어떻게 해야 할까? 이럴 때 사용하는 것이 주로 filter( ) 함수, find( ) 함수이다. 예제를 보며 이해해보도록 하자. filter( ) 함수 영어 뜻 그대로 배열의 값들 중 특정 조건이 true인 값들을 다 걸러내준다. 아래의 코드를 보자. const arr1 = [10, 20, 30, 40, 50]; //값이 30 이상인 값 구하기 const result1 = arr1.filter(item => item>30); console.log("값이 30 이상인 값 구하기"); console.log(result1); //값이 40 인 값 구하기 const res..