[2024 여름방학 React.js study] 이가인 #2주차

1.  js 최신 문법
2.  모듈화 구문
3.  비동기 처리

---

1.  js 최신 문법

• 템플릿 리터럴 - 백틱(`)

let a ='hi' ;
let message = a + '안녕'; 
//백틱 사용 : 변수를 문자열 안에 바로 연결 가능
let message =`${a} 안녕`; // 'hi 안녕'

• 구조 분해 문법 (Destructuring)

// 배열에 있는걸 변수에 넣고 싶을 때
let arr= ['apple',10]
let [fruit, myNum] = arr;
// let fruit =arr[0]; 보다 훨씬 쉬움

// 객체에 있는걸 변수에 넣고 싶을 때
let josh = {
skill : 'js'.
age:21 }

let [skill, age] = josh;
// var mySkill = josh.skill; 보다 쉬움

// 객체에 별칭 붙이기
let {skill:mySkill , age: myAge} =josh;
//let mySkill = josh.skill;
//let myAge =josh.age; 와 같음

• 스프레드 오퍼레이(펼침 연산자) ... 

// obj 객체를 newObj 객체에 복제
var obj = {
  a: 10,
  b: 20
};
var newObj = {...obj};
console.log(newOjb); // {a: 10, b: 20}

// arr 배열을 newArr 배열에 복제
var arr = [1,2,3];
var newArr = [...arr,4];
console.log(newArr); // [1, 2, 3, 4]

 

---

2.  모듈화 구문

모듈화 : 다른 파일에 있는 자바스크립트의 기능을 특정 파일에서 사용할 수 있는 것을 의미

// export : 다른 파일에서 쓸 변수나 함수의 앞에 붙임. export된 파일은 import로 불러와 사용 가능
export 변수, 함수
import { 불러올 변수 또는 함수 이름 } from '파일 경로';

// math.js
export var pi = 3.14;

// app.js
import { pi } from './math.js'; // ./는 현재 파일경로를 의미

console.log(pi); // 3.14

예시 )math.js라는 파일에서 pi를 익스포트하고 app.js 파일에서 임포트하여 콘솔에 출력하는 코드

 

// ES6의 기본적인 문법들이 최신 브라우저에서 지원되는데 반해 import, export는 아직 보조 도구가 있어야만 사용 가능

---

3.  비동기 처리

비동기 처리:  특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미

특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것

--> 특정 로직이 끝나기 전 다른 동작(원하지않는 동작)이 실행될 수 있음

----> 이런 비동기 처리의 문제를 해결하기 위해 콜백 함수 이용

function getData(callbackFunc) {
	$.get('https://domain.com/products/1', function(response) {
		callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
	});
}

getData(function(tableData) {
	console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});

 

콜백지옥 ( 비동기 처리 로직을 위해 콜백 함수를 연속해서 사용할 때 발생하는 문제)

-> 이를 해결하기 위해 Promise나 Async를 사용

 

Promise

프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용함.  데이터를 받아오기도 전에 마치 데이터를 다 받아온 것 마냥 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜨는데 이와 같은 문제점을 해결하기 위한 방법 중 하나가 프로미스이다.

 

앞 코드를 promise를 사용해 다시 써보겠다. 

function getData(callback) {
  // new Promise() 추가
  return new Promise(function(resolve, reject) {
    $.get('url 주소/products/1', function(response) {
      // 데이터를 받으면 resolve() 호출
      resolve(response);
    });
  });
}

// getData()의 실행이 끝나면 호출되는 then()
getData().then(function(tableData) {
  // resolve()의 결과 값이 여기로 전달됨
  console.log(tableData); // $.get()의 reponse 값이 tableData에 전달됨
});

프로미스 처리 흐름 - 출처 : MDN

Async, Await

기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와준다.

async function 함수명() {
  await 비동기_처리_메서드_명();
}

주의 ) 먼저 함수의 앞에 async 라는 예약어를 붙이고 함수의 내부 로직 중 꼭 반환해야할 처리 코드 앞에 await를 붙인다. 

// 비동기함수, 프로미스 객체 반환
function fetchItems() {
  return new Promise(function(resolve, reject) {
    var items = [1,2,3];
    resolve(items)
  });
} //fetchItems() 함수를 실행하면 프로미스가 이행(Resolved)되며 결과 값은 items 배열이 됨

async function logItems() {
  var resultItems = await fetchItems();
  console.log(resultItems); // [1,2,3]
} //logItems() 함수를 실행하면 fetchItems() 함수의 결과 값인 items 배열이 resultItems 변수에 담기며, 콘솔에는 [1,2,3]이 출력