[React.js 3] 2장. 자바스크립트 실전

 

구조 분해 할당 : 구조를 분해해 할당하는 문법

• 스프레드 연산자 : 반복이 가능한 객체에서 값을 개별 요소로 분리하는 것배열이나 객체에서 요소를 해체해 개별 변수에 그 값을구조 분해 할당
  
  배열의 구조 분해 할당
  
  • 저장된 요소 값이 순서대로 할당된다.
  • 배열의 길이보다 할당할 변수의 개수가 적어도 오류가 발생하지 않는다
  • 배열의 길이보다 할당 변수의 개수가 많아도 오류가 발생하지 않는다
  • 배열의 길이가 넘는 변수는 undefined가 할당된다.

  //구조 분해 할당 
  let arr = [1,2,3];
  let [one, two, three] = arr; //배열 arr의 값을 순서대로 변수 one, two, three에 할당함.
  
  console.log(one, two, three);
  

   
  객체의 구조 분해 할당
  • 데이터 저장 순서가 아니라 key를 기준으로 한다.
  • 변수 name, age, location에는 person 객체 프로퍼티의 value가 key를 기준으로 할당된다.

  let person = {
  	name: "이정환",
  	age : 25,
  	location : "경기도"
  };
  
  let {name, age, location} = person;
  
  console.log(name, age, location);
  

  
  함수의 매개변수가 객체일 때 구조 분해 할당하기
  • 객체 프로퍼티를 매개변수로 저장하는 함수에서 구조 분해 할당을 한다.

  //함수 func에서는 전달된 객체에서 프로퍼티의 value를 매개변수 name, age, location에 각각 구조 분해 할당한다.
  function func({ name, age, location }) { 
  	console.log(name, age, location);
  }
  
  let person = {
  	name : "이정환",
  	age : 25,
  	location : "경기도"
  };
  
  func(person); //객체를 인수로 전달
  

  • 객체를 전달할 때 이 문법을 함수의 매개변수에 적용하면, 필요한 프로퍼티만 전달 할 수도 있어 코드가 훨씬 유연해진다.
    
    
  • 구조 분해 할당을 하면서 동시에 이름 변경하기
    • 변수 이름 옆에 콜론(:)과 함께 새 변수 명을 쓰면, 새 이름으로 값이 할당된다.

  function func({name : n, age : a, location :l}) {
  	console.log(n, a, l); // 프로퍼티 이름 변
  }
  
  let person = {
  	name : "이정환",
  	age : 25,
  	location : "경기도"
  };
  
  func(person); //객체를 인수로 전달
  

  
  
  스프레드 연산자 
• 스프레드 연산자 : 반복이 가능한 객체에서 값을 개별 요소로 분리하는 것

• ‘…’ 기호로 표기, 전개 연산자라고 부른다.
• 배열, 문자열, 객체 등과 같이 반복이 가능한 객체의 값을 개별 요소로 분리 가능하다.

배열에서의 스프레드 연산자

//스프레드 연산자와 배열 객체
let arrA = [1,2,3];
let arrB = [...arrA, 4,5,6]; //변수 arrB는 첫 번째 요소에 또 다른 배열 ...arrA를 저장한다.
//arrB에는 arrA 요소의 1,2,3 + 뒤에 4,5,6이 할당된다.
console.log(arrB); 

• • …arrA처럼 스프레드 연산자 기호가 변수 앞에 붙으면, 이 배열은 개별 요소로 분리되어 저장된다.
  • …arrA이 아니라 arrA를 다른 배열에 저장하게 된다면?
    • arrB = [[1, 2 ,3], 4, 5, 6] : arrA가 배열로 저장된다. (개별 요소 X)
  
  
  객체에서의 스프레드 연산자함수에서의 스프레드 연산자
  • 함수 호출할 때도 이용한다.
  • 배열 요소를 분리하여 함수의 인지로 전달한다.

  function func(a, b, c) {
  	console.log(a, b, c) //2. 인수 3개의 값 1,2,3을 전달하여 매개변수 a,b,c -> 1,2,3으로 저장된다.(순서대로 저장됨)
  }
  
  let arr = [1, 2, 3];
  func(...arr); // 1. 변수 arr에 저장된 배열을 개별 요소로 분리한다.
  
  

  
  
  rest 매개변수
  • rest 매개변수(= 나머지 매개변수) : 개별 요소를 다시 배열로 묶는 방식
  • 기호 ‘…’ 으로 표기한다.

  function func(...rest) { // rest 매개변수가 된다.
  	console.log(rest);
  }
  
  func(1, 2, 3, 4) // 인수들이 순차적으로 rest배열에 저장된다.
  // rest = [1,2,3,4]
  

  • 다른 매개변수와 함께 사용하는 rest의 예

  function func(param, ...rest) {
  	console.log(param); //parame에는 첫 번째 인수 1이 저장됨.
  	console.log(rest); // rest 배열에는 나머지 인수들이 순차적으로 저장됨.
  }
  
  func(1, 2 ,3 ,4);
  

  • 인수는 순차적으로 왼쪽부터 오른쪽으로 할당된다.
  • 주의 ) rest 매개변수를 사용할 때
    • rest 매개변수를 먼저 선언하면 할당된 인수를 제외하고 나머지를 모두 배열에 저장한다. → rest 매개변수는 마지막에 작성해야한다!

  function func(...rest, param) { **// rest 매개변수는 마지막에 작성해야한다!**
  	console.log(param);
  	console.log(rest);
  }
  
  func(1, 2, 3, 4);
  
  

  
  
  배열과 메서드
  • 배열 메서드 : 배열을 쉽게 다룰 수 있도록 제공되는 메서드
  
  
  push(추가)
  • 배열 맨 끝에 요소를 추가하고 새로운 길이를 반환하는 메서드

  let food = ["짜장면", "피자", "치킨"];
  const newLength = food.push("탕수육", "라자냐"); //요소 추가
   
  console.log(food);
  condole.log(`새로운 배열의 길이 : ${newLength}`);
  
  ----------------------------------------------------------
  ["짜장면", "피자", "치킨", "탕수육", "라자냐"]
  새로운 배열의 길이 : 5
  

  
  
  pop(제거)
  • 배열의 맨 끝 요소를 제거하고, 제거한 요소를 반환하는 메서드

  let food = ["짜장면", "피자", "치킨"];
  const removedItem = food.pop();
  
  console.log(removedItem); //제거 된 것
  console.log(food); //제거되고 남은 것
  
  -----------------------------------------------------------
  "치킨"
  ["짜장면", "피자"]
  

  • 빈 배열에서의 pop() 메서드는 undifined가 출력된다.
  
  
  shift
  • 배열의 맨 앞 요소를 제거하고, 제거한 요소를 반환하는 메서드

  let food = ["짜장면", "피자", "치킨"];
  const removedItem = food.shift();
  
  console.log(removedITem);
  console.log(food);
  
  ----------------------------------------------------------
  "짜장면"
  ["피자", "치킨"]
  

  
  
  unshift
  • 배열 맨 앞에 요소를 추가하고, 새 배열의 길이를 반환하는 메서드

  let food = ["짜장면", "피자", "치킨"];
  const newLength = food.unshift("갈비찜");
  
  console.log(food);
  console.log(`새로운 배열의 길이 : ${newLength}`);
  
  ----------------------------------------------------------
  ["갈비찜", "짜장면", "피자", "치킨"];
  새로운 배열의 길이 : 4
  

  
  
  slice
  • 기본 배열에서 특정 범위를 잘라 새로운 배열을 반환하는 메서드

  const arr = [1,2,3];
  const sliced = arr.slice(0,2); //0~1 인덱스 뽑기
  
  console.log(arr);
  console.log(sliced);
  
  ------------------------------------------------------------
  [1,2,3]
  [1,2]
  

  • arr.slice(m, n) : m ~ (n-1) 인덱스를 추출할 수 있다.
    
    
  • start 인수만 전달

  const sliced = arr.slice(2); //2번째 인덱스 하나만 추출
  
  ------------------------------------------------------------
  [3]
  

  
  
  
  • start만 음수 인덱스 전달
  • 배열 맨 끝부터 전달한 음수의 절댓값 만큼 잘라낸 새 배열을 반환한다.

  const arr = [1,2,3,4,5];
  
  console.log(arr.slice(-1));
  console.log(arr.slice(-2));
  console.log(arr.slice(-3));
  console.log(arr.slice(-4));
  console.log(arr.slice(-5));
  
  -----------------------------------------------------------
  [5]
  [4,5]
  [3,4,5]
  [2,3,4,5]
  [1,2,3,4,5]

  
  
  
  concat
  • 서로 다른 배열을 이어 붙여 새 배열을 반환하는 메서드

  let arA = [1,2];
  let arB = [3,4];
  let arrC = arrA.concat(arrB);
  
  console.log(arrC);
  console.log(arrA);
  
  ------------------------------------------------------------
  [1,2,3,4]
  [1,2]
  

  
  
  • concat 메서드 인수에 객체 전달하기

  let arA = [1,2];
  let arB = { a: 1, b:2 },
  let arrC = arrA.concat(arrB);
  
  console.log(arrC);
  
  ------------------------------------------------------------
  [1, 2, { a:1, b:2 }]

  
  
  
  순회 메서드(forEach)
  • 배열 순회 메서드 제공 : forEach
  📌 fucntion cb(item, index, array) { }
  • item : 현재 순회하는 배열 요소
  • index : 현재 순회하는 베열 요소의 인덱스
  • array : 순회 중인 배열

  fuction cb(item, idx) {
  	console.log(`${id}번째 요소: ${item}`);
  }
  
  const arr = [1,2,3];
  
  arr.forEach(cb)
  
  ------------------------------------------------------------
  const arr = [1,2,3];
  arr.forEach((item, idx) => {
  	console.log(`${idx}번째 요소 : ${item}`);
  });
  
  ------------------------------------------------------------
  0번째 요소: 1
  1번째 요소: 2
  2번째 요소: 3
  

  
  
  
  탐색 메서드
  • 배열 탐색 : 배열에서 특정 조건을 만족하는 요소를 찾아내는 행위
  • indexOf : 배열에서 찾으려는 요소의 인덱스를 반환하는 메서드
  📌 arr.indexOf(item, fromIndex);
  • item : 찾으려는 요소
  • fromIndex : 탐색을 시작할 인덱스 번호(생략 가능 - 0부터 탐색)

  let arr = [1,3,5,7,1];
  
  console.log(arr.indexOf(1,0)); // 인덱스 1을 찾고, 0부터 탐색해라.
  
  -------------------------------------------------------------
  0 // 0번째 인덱스의 값이 1
  ==============================================================
  
  console.log(arr.indexOf(1));
  console.log(arr.indexOf(1, -1));
  ------------------------------------------------------------
  0
  4
  

  • -1 반환
    • 찾으려는 요소가 없을 때
    • fromIndex의 값이 배열의 길이보다 크거나 같은 경우
    • ‘-3’(문자형) 과 -3(숫자형)처럼 자료형이 다를 경우
  • indexOf 메서드로는 객체 자료형의 값을 탐색할 수 없다.
  → findIndex로 해야함.
•  
•  
• Includes
  • 배열에 특정 요소가 있는지 판별
  • 인수로 전달한 요소가 배열에 존재해면 true
  • 존재하지 않으면 false
  📌 arr.includes(item, fromIndex)
  • indexOf와 같은 역할의 매개변수

  let arr = [1,3,5,7,1];
  
  console.log(arr.includes(3));
  console.log(arr.includes("생신"));
  
  ----------------------------------------------------------
  true
  false
  

  
  
  
  findIndex
  • indexOf 처럼 배열에서 찾으려는 요소의 인덱스 번호를 찾아 반환하는 메서드
  📌 arr.findIndex( callback (item, index, array) );
  • callback 함수 : ‘판별 함수’
  • 이 판별 함수를 만족하는 첫 번째 요소의 인덱스 번호를 반환한다.
  • item : 현재 요소
  • index : 현재 인덱스
  • array : 탐색 대상 배열

  function determine(item, idx, arr) { //2. 6이 참이면 탐색 stop!
  	if(item % 2 === 0) {
  		return true;
  	} else {
  		return false;
  	}
  }
  
  let arr = [1,3,5,6,8];
  let index = arr.findIndex(determine); //1. determine의 참인지 판단
  
  console.log(index);//3. index 값에 6의 인덱스 번호인 3 출력!
  
  -----------------------------------------------------------
  3
  

   
• 
  
  • 화살표 함수 + 삼항 연산자

  let arr = [1,3,5,6,8];
  let index = arr.findIndex((item) =>
  	item % 2 === 0 ? true : false
  );
  
  console.log(index);
  

   
• 
  
  • findIndex로 배열에서 프로퍼티 name 값이 “이정환”인 요소의 인덱스 찾기

  let arr = [
  	{ name: "이종원" },
  	{ name: "이정환" },
  	{ name: "신다민" },
  	{ name: "김효빈" }
  ];
  
  let index = arr.findIndex((item) => item.name === "이정환");
  console.log(index);
  
  -------------------------------------------------------------
  1

  • indexOf는 === 엄격한 비교 연산자를 사용하지만, findIndex는 판별 함수를 이용해 배열에서 조건과 일치하는 객체 요소를 찾아낸다.
    
    
    
  find
  • findIndex와 같이 인수로 판별 함수를 전달하고, 배열에서 만족하는 요소를 찾는다.
  • findIndex와 달리 요소를 반환한다.

  let arr = [
  	{ name: "이종원" ),
  	{ name: "이정환" ),
  	{ name: "신다민" ),
  	{ name: "김효빈" )
  ];
  
  let index = arr.find((item) => item.name === "이정환");
  console.log(index);
  
  -------------------------------------------------------------
  { name: "이정환" )

  
  
  
  filter
  • 배열에서 조건을 만족하는 요소만 모아 새로운 배열로 반환하는 메서드
  • find, findIndex와 거의 비슷하다.
  <aside> 📌 arr.filter( callback (item, index, array ) );

  let arr = [
  	{ name: "이종원", hobby: "축구" },
  	{ name: "이정환", hobby: "영화" },
  	{ name: "신다민", hobby: "축구" },
  	{ name: "김효빈", hobby: "노래" }
  ];
  
  let filteredArr = arr.filter(
  	(item) => item.hobby === "축구"
  );
  
  console.log(filteredArr);
  
  -----------------------------------------------------------
  0: Object
  name: "이종원"
  hobby: "축구"
  
  1: Object
  name: "신다민"
  hobby: "축구"

  
  
  
  
  변형 메서드
  • 배열을 변형하거나 요소를 정렬하는 메서드
    
    
  map
  • 배열 각각의 요소에 대한 함수 호출 결과를 모아 새 배열을 만들어 반환하는 메서드
  📌 arr.map( callback (item, index, array ) );

  //배열의 모든 요소에 3을 곱해 얻은 값 새 배열로 만들기
  let arr = [1,2,3,4];
  let newArr = arr.map((item) => item * 3 );
  
  console.log(newArr);
  ------------------------------------------------------------
  [3,6,9,12]
  

  
  
  
  sort
  • 배열의 요소를 정렬할 때 사용하는 메서드
  • 사전순, 오름차순으로 정렬된다.

  let arr = [10, 5, 3];
  arr.sort();
  
  console.log(arr)
  ----------------------------------------------------------
  [10,3,5]

  → 비교함수가 필요하다. (문자열로 취급해 사전순으로 정렬하기 때문에)
  • a는 b보다 크면 뒤로 가고 작으면 앞으로 온다.
  
  
  
  Join
  • 배열 요소를 모두 연결해 하나의 문자열로 반환하는 메서드

  let arr = ["안녕", "나는", "이정환"];
  
  console.log(arr.join());
  console.log(arr.join("-"));
  

  
  
  
  reduce
  • 배열의 모든 요소를 순회하면서 인수로 제공한 함수를 실행하고, 단 하나의 결과값만 반환하는 메서드
  • map과 유사하지만 하나의 결과 값만 반환한다.
   📌 arr.reduce( (acc, item, index, array ) ⇒ {</aside>
  • 첫번째 인수 : 콜백함수(”리듀서”)
    • acc : 이전 함수의 호출 결과를 저장함.(initial) - 필수 X
    • item : 현재의 배열 요소
    • index : 현재의 배열 인덱스
    • array : reduce 메서드를 호출한 배열
  • 두번째 인수 : initial(초깃값)

  let arr = [1,2,3,4,5];
  let result = arr.reduce((acc, item) => acc + item, 0);
   //초기 : 0 + 1 + 2 + 3 + 4 + 5
  
  console.log(result);
  --------------------------------------------------------
  15
  

  • acc와 item 2개의 매개변수를 제공받는다.
•  
•  
• Date 객체와 날

  //현재 날짜 및 시간 출력하기
  
  let date = new Date();
  
  console.log(date);
  

•  
• 협정 세계시
  • UTC는 국제 표준 시간으로 쓰이는 시간이다.
  • 타임스템프 : 특정 시간이 UTC+0시인 1970년 첫날을 기점으로 흘러간 밀리초(ms)의 시간이다.

  // 타임스템프로 출력하기 Date(0)
  let Jan01_1970 = new Date(0);
  

  • 한국 표준시가 UTC보다 9시간 빠르기 때문에 UTC+09:00으로 표현된다.
•  
•  
• 원하는 날짜로 Date 객체 생성하기
•  
• 숫자로 특정 날짜 전달하기
  • year, month, date, hours, minutes, seconds, milliseconds 순서로 Date 객체 만들기

  let date1 = new Date(2000, 10, 20, 0,0,0,0); //11월
  let date2 = new Date(2000, 9, 10); //10월
  

  • 월은 0부터 시작하기 때문에 10은 11월 이다.
•  
•  
• 타임 스탬프로 날짜 생성하기
  • 타임 스탬프는 저장 공간이 적게 차지해서 빠른 비교와 탐색이 가능하다.

  let date = new Date(2000, 9, 10); 
  let timeStamp = date.getTime(); //Date 객체에 저장된 날짜를 타임스탬프로 변환해준다.
  console.log(timeStamp); 
  
  let dateClone = new Date(timeStamp); // 타임스탬프 값을 인수로 전달하면 자동으로 날짜를 반환해 준다.
  console.log(dateClone);

•  
•  
•  
• Date 객체에서 날짜 요소 얻기
•  
• getFullYear
  • 네 자리수의 연도를 반환한다.

  let date = new Date(2000, 9, 10);
  
  console.log(date.getFullYear());
  

•  
•  getMonth
  • 0에서 11로 표현되는 월을 반환한다.

  console.log(date.getDate()); //9
  

•  
• getDate
  • 일을 반환한다.

  console.log(date.getDate()); //10
  

•  
• getDay
  • 0 에서 6으로 표현되는 요일을 반환한다.
  • 0 : 일요일, 6 : 토요일

  console.log(date.getDay); //2 - 화요일
  

•  
• getHours, getMinutes, getSeconds, getMilliseconds
  • 시간, 분, 초, 밀리초를 반환한다.

  console.log(date.getHours()); //0
  console.log(date.getMinutes()); //0
  console.log(date.getSeconds()); //0
  console.log(date.getMilliseconds()); //0
  

•  
•  
•  
• Date 객체의 날짜 요소 수정하기
•  
• setFullYear
  • 연도를 수정할 때

  let date = new Date(2000, 9, 10);
  date.setFullYear(2021);
  

•  
• setMonth
  • 월을 수정할 때

  date.setMonth(10);
  

•  
•  setDate
  • 일을 수정할 때

  date.setDate(11);
  

•  
• setHours, setMinutes, setSeconds
  • 시, 분, 초를 수정할 때

  date.setHours(1);
  date.setMinutes(1);
  date.setSeconds(1);
  

 

 

•  
• Date 객체 출력하기
•  
• toString
  • 현재 저장된 시간을 문자열로 반환한다.

  const today = new Date(2000, 9, 10, 22);
  
  console.log(today.toString());
  
  -----------------------------------------------------------
  Tue Oct 10 2000 22:00:00 GMT+0900 (한국표준시)

•  
•  toDateString
  • 시간을 제외하고 현재의 날짜만 출력하는 메소드

  console.log(today.toDateString());
  ---------------------------------------------------------
  Tue Oct 10 2000
  

•  
• toLocaleString, toLocalDateString
  • ‘현지화’된 날짜와 시간을 반환한다.
  → 현재 우리가 속한 시간대에 맞게 변환한다는 뜻이다.
•  

 

 

• Date 객체 응용하기
•  
• n월씩 이동하기
  
  • 날짜를 n월씩 이동하는 기능을 구현한다.

• function moveMonth(date, moveMonth) { //Date객체, 이동할 월의 수
  	const curRimestamp = date.getTime(); //타임스템프를 변수에 저장
  	const curMonth = date.getMonth(); // 월을 구해 변수에 저장
  	
  	const resDate = new Date(curTimestamp); //date 객체와 동일한 타임스탬프 값이 들어있는 Date 객체가 저장되어있음.
  	reDate.setMonth(curMonth + moveMonth); //reDate에 저장된 Date 객체에서 setMonth를 호촐해 moveMonth 만큼 더한 월을 새로운 월로 지정함.
  	return reDate;
  }
  
  const dateA = new Date("2000-10-10");
  console.log("A: ", dateA);
  
  const dateB = moveMonth(dateA, 1);
  console.log("B: ", dateB);
  
  const dateC = moveMonth(dateA, -1);
  console.log("C: ", dateC);
  
  --------------------------------------------------------------
  
  A : Tue Oct 10 2000 09:00:00 GMT+0900
  B : Fri Nov 10 2000 09:00:00 GMT+0900
  C : Sun Sep 10 2000 09:00:00 GMT+0900
  

  
  
  
  배열에서 이번 달에 해당하는 날짜만 필터링하기
  • 여러 개의 Date 객체를 저장하고 있는 배열에서 이번 달에 해당하는 Date 객체만 필터링 해 새로운 배열을 생성한다.
  • 2가지 작업 필요
    • 이번 달에서 가장 빠른 시간, 가장 늦은 시간 구하기
    • 위에서 구한 시간 내에 포함되는 Date 객체를 필터링하기

  function filterThisMonth(pivotDate, dateArray) {//pivotDate: 필터링할 월이 있는 Date 객체, dateArray: Date객체
  	const year = pivotDate.getFullYear(); 
  	const month = pivotDate.getMonth();
  
  //이번달에 가장 빠른 시간인 10월 1일 0시 0분 0초로 설정한다.
  	const startDay = new Date(year, month, 1, 0,0,0,0);
  //이번달에 가장 마지막인 다음달 0일 23시 59분 59초로 설정한다.
  	const endDay = new Date(year, month+1, 0, 23, 59, 59);
  
  	const resArr = dateArray.filter((it) =>
  		startDay.getTime() <= it.getTime() && //it이 startDat와 같거나 이후인지
  		it.getTime() <= endDay.getTime() //it이 endDay와 같거나 이전인지 
  	);
  	retrun resArr;
  }
  
  const dateArray = [
  	new Date("2000-10-1");
  	new Date("2000-10-31");
  	new Date("2000-11-1");
  	new Date("2000-9-3");
  	new Date("1900-10-11");
  ];
  
  //오늘이 2000년 10월 10일이라고 가정
  const today = new Date("2000-10-10/00:00:00");
  const filterArray = filterThisMonth(today, dateArray);
  
  console.log(filteredArray);
  
  -----------------------------------------------------------
  0 : Sun Oct 01 2000 00:00:00 GMT+0900
  1 : Tue Oct 31 2000 00:00:00 GMT+0900

•  
• 
  
  비동기 처리
  • 비동기 처리의 효과 : 오래 걸리는 작업이 종료될 때까지 기다리지 않고 다음 작업을 수행하는 유연한 프로그래밍이 가능하다.
    
    
    
  동기와 비동기
  • 동기 (Synchronous) : 순차적으로 코드를 실행하는 것.
    • ex) 은행 창구 - 은행 창구에서 한번에 한 명의 고객을 응대한다.
    • 오래 걸리는 작업을 빨리 끝낼 작업보다 먼저 실행하면 지연 문제가 발생한다.
  • 비동기(Asynchronous) : 특정 작업을 다른 직업과 관계없이 독립적으로 동작하게 만드는 것
  setTimeout 을 사용하면 비동기적으로 처리 가능하다.
  • 일이 일찍 끝나는 순서대로 출력된다.
    
    
    
  콜백 함수로 비동기 처리하기
  • 함수 내부에서 출력하지 않으면 타이머 식별 번호가 출력된다.

  function double(num, cb) {
  	setTimeout(() => 
  		const doubleNum = num *2; // 2배를 하고
  		cb(doubleNum); // 콜백함수로 출력해라
  	}, 1000);
  }
  
  double(10, (res) => { //num : 10, cb: res
  	console.log(res);
  });
  
  console.log("마지막"); // 먼저 출력

  
  
  
  프로미스 객체를 이용해 비동기 처리하기
  • 프로미스 : 비동기 처리를 목적으로 제공하는 자바스크립트 내장 객체
  • 프로미스 비동기 작업을 3가지로 나누어 관리한다.
    • 대기 상태 : 작업을 아직 완료하지 않음
    • 성공 상태 : 작업을 성공적으로 완료함 - 해결
    • 실패 상태 : 작업이 모종의 이유로 실패함 - 거부
  • 유튜브로 설명
    • 대기 상태 - 동영상 로딩 중
    • 성공 상태 - 영상 재생 가능(해결)
    • 실패 상태 - 영상 재생 불가(거부)
  
  
  
  프로미스 객체 만들기
  • 인수로 실행 함수를 전달한다.
  • 실행 함수 : 비동기 작업을 수행하는 함수
    • 프로미스 객체를 생성하고, 2개의 매개변수를 제공받는다.

  //프로미스 객체의 실행 함수
  const promise = new Promise(
  	function (resolve, reject) {
  		setTimeout( () => {
  			console.log("안녕");
  		}, 500);
  	}
  });

  • resolve : 비동기 작업의 상태를 성공으로 바꾸는 함수
  • reject : 비동기 작업의 상태를 실패로 바꾸는 함수
    
    
    
    
  • 작업 상태를 성공으로 바꾸는 예
  • then 메서드는 작업이 성공했을 때 실행할 콜백 함수를 설정한다.

  const promise = new Promise(
  	function (resolve, reject) {
  		setTimeout(() => {
  			resolve("성공");
  		}, 500);
  	}
  });
  
  promise.then(function (res) { // then 메서드를 호출하고 콜백함수를 전달한다. resolve를 호출했을때 실행된다.
  	console.log(res);
  });
  

  
  
  
  • 작업 상태가 실패일 때
  • 작업이 실패했을 때 콜백 함수를 설정하려면 catch 메서드를 사용해야 한다.

  const promise = new Promise(
  	function  (resolve, reject) {
  		setTimeout(() => {
  			reject("실패");
  		}, 500);
  	}
  };
  
  promise.then(function (res {
  	console.log(res);
  });
  
  promise.catch(function (err) { //실행 함수에서 reject에 전달된 인수가 매개변수로 제공된다.
  	console.log(err);
  });
  

  
  
  

Quiz

1. 객체의 구조 분해는 데이터 저장 순서가 (key)를 기준으로 한다.
2. 반복이 가능한 객체에서 값을 개별 요소로 분리하는 것을 (스프레드 연산자)라고 한다.
3. 배열 메서드 종류는 (push), pop, (shift), unshift, (slice), concat 가 있다.
4. pop은 배열의 맨 앞 요소를 제거하고, 제거한 요소를 반환하는 메서드다. X
5. 순회 메서드 종류는 forEach이고, 탐색 메서드 종류는 (indexOf), includes, findIndex, (find), (fliter) 이 있다.
6. 변형 메서드는 (map), sort, (join), reduce 가 있다.
7. 프로그램의 특정 작업을 다른 직업과 관계없이 독립적으로 동작하게 만드는 것을 (비동기)라고 한다.

 

<프로그래밍 문제>

1. 현재 날짜, 시간을 변수에 받은 후 달만 출력하시오. (달은 왜 1이 적은지 설명하시오.)

 

 

 

2. 프로미스 객체를 생성할 때 , “성공”하게 만들기 위한 2가지 빈칸을 채우시오.

const promise = new Promise(
	function (resolve, reject) {
		setTimeout(() => {
			_____(1)____("성공");
		}, 500);
	}
});

promise.___(2)___(function (res) {
	console.log(res);
});

---

1. 

let date = new Date();
console.log(date.getMonth());

// 달은 0~11까지 있기 때문에 1이 적다.

2. 

const promise = new Promise(
	function (resolve, reject) {
		setTimeout(() => {
			resolve("성공");
		}, 500);
	}
});

promise.then(function (res) {
	console.log(res);
});

 

 

출처 : 이정환, 『한 입 크기로 잘라먹는 리액트』, 프로그래밍인사이트(2023), p88-128.

Corner React.js 3 

Editor: smurfs