JS(ES5) vs EcmaScript6(ES6) 기본

# EcmaScript6(ES6)-엑마스크립트6 특징을 자바스크립트(ES5) vs ES6을 비교하는 자바스크립트 소스로 실습해 본다.

- 모던 자바스크립트(ES6) 학습(대학교 1학기 45시간 강의분량) : https://ko.javascript.info/

파트1: JavaScript Core로서 기본 문법부터 객체 지향 프로그래밍과 같은 고급 개념까지 다양한 내용을 학습합니다.
파트2: DOM(Document Object Model) 프로그래밍으로 브라우저 내 페이지와 이벤트를 다루는 방법에 대해 학습합니다.
파트3: API(Application Programming Interface) 네트워깅 프로그래밍과 같은 다양한 응용 주제에 대해서 학습합니다.

- 기술참조 : 

• https://tech.toktokhan.dev/2021/08/22/es6/ (ES6기본문법), 
• https://hanamon.kr/javascript-es6-%EB%AC%B8%EB%B2%95/ (ES6기본문법), 
• https://sanghaklee.tistory.com/54 (ES6활용),
• https://joshua1988.github.io/web-development/javascript/promise-for-beginners/ (비동기통신), 
• https://www.daleseo.com/js-window-fetch/ (브라우저내장함수fetch사용)
• https://blog.goorm.io/react_kakaomap/ 카카오맵에 전기차 충전소 위치 표시하기 (구름ide 클라우드에서 리액트 사용)

- API참조 : 영화진흥위원회 https://www.kobis.or.kr/kobisopenapi/homepg/main/main.do 
- 실행환경 : https://codepen.io/또는 크롬 콘솔에서 실행을 명시한 것은 jQuery.get()이 가능한(또는 fetch()사용) https://kimilguk.tistory.com/ 에서 크롬 F12 개발자도구 콘솔 창에서 실행(아래)

크롬F12 개발자도구 콘솔 사용 예(위)

1. var변수-let, const객체선언 사용, ${템플릿 리터럴문자-변수} 사용, 매개변수-파라미터에 기본값 사용(아래)

// ES5(2015년 이전 표준 자바스크립트)
var str1 = ', ';
var str2 = '고전적인 자바스크립트 변수 선언';
var str3 = 'ES5는' + str1 + str2;
console.log(str3);
// ES6(2016년 이후 표준 자바스크립트)
let str4 = ', ';
let str5 = '2016년 이후 자바스크립트 변수 선언';
let str6 = `ES6는 ${str4} ${str5}`;
console.log(str6);

// 객체의 변수명 단축 할당-object short assignment(아래)
let fullName = "김일국";
let birthDay = "1070.01.01"
let obj = {
  fullName: fullName,
  birthDay // 객체의 속성과 변수명이 같을 때는 1개로 축약할 수 있다.
}
console.log(fullName, birthDay);

const greeting = (username='anonymous', date=new Date(), message='hello') => {  // 람다식=>arrow-애로우함수사용 원래는 function(매개변수) { 구현내용 } 을 축약해서 사용가능하다.
    return `${username} ${date} at ${message}` //템플릿 문자-변수는 ${변수명}을 백틱 문자열내부에(` 역엑센트-백틱으로 감싼) 사용한다.
}
console.log("여기", greeting())
//멀티 라인을 백틱으로 감싸서 저장 할 수 있다.
// ES5
var str = '안녕하세요.\n' + 
'줄 바꿈하는 코드 입니다..\n'
console.log(str);
// ES6
let backtick = `안녕하세요
줄 바꿈하는 코드 입니다.`;
console.log(backtick);

2. 배열과 객체의 분해 할당 Spread-확장 방식 ES5 vs ES6(아래)

// 배열은 [값1,값2,...] 형태이고, 객체는 {json (키:값)1, json (키:값)2,...} 형태이다.(아래)
// 배열위 분할할당 사용(아래)
const arr = [1, 2, 3];
const [one, two, three] = arr;
console.log(one) // 1
console.log(two) // 2
console.log(three) // 3
// 객체의 분할할당 사용(아래)
const obj = {
 firstName: '성',
 lastName: '이름'
};
const { firstName, lastName } = obj;
console.log(firstName); // 성
console.log(lastName); // 이름

// Spread-확장 연산자를 사용하면 3줄을 1줄로 축약할 수 있다.(아래)
const memberInfo = {
  level: "admin",
  name: "김일국",
  age: 1,
};
// ES5 문법(아래)
let level = memberInfo.level;
let name = memberInfo.name;
let age = memberInfo['age'];
console.log(level);
console.log(name);
console.log(age);
// ES6 문법(아래)-분해 할당 방식 위 3줄을 1줄로 축약할 수 있다.
const newObj = { ...memberInfo, address:"주소 입니다."}; // 객체 값을 복사해서 신규객체 생성
console.log(newObj.level);
console.log(newObj.name);
console.log(newObj['age']);
// 참고로 const newObj = memberInfo; 는 겍체 주소만 복사해서 같은 객체 값을 가져온다.(아래)
const newObj2 = memberInfo;
console.log(newObj2 == memberInfo); // true
console.log(newObj == memberInfo);  // false
console.log(newObj);
console.log(newObj2);
// 참고로 배열에서도 Spread-확장연산자를 사용해 본다(아래)
let numbers1 = [1,2];
let numbers2 = [...numbers1, 3];
let numbers3 = [...numbers1, ...numbers2];
let numbers4;
console.log(numbers3?`${numbers2} ${numbers3}`:"객체값이 없습니다.");// 참고로 삼항연산자로 표시

//분해 할당-Destruct 예 2가지(아래)
let obj = {
  name: "김일국",
  age: 10
}
let {name, age} = obj; // 객체에서의 변수명은 객체의 키와 같아야 한다.
console.log(name, age);

let array = [1, 2, 3, "김일국", 10];
let [a, b, ...Destruct] = array; // 배열에서는 변수명을 새로 지정할 수 있다.
console.log(a, b, Destruct);

//향상된 for 반복문을 사용할 수 있다.
const iterable = [10, 20, 30];
//es5(아래)
for (let i = 0; i < iterable.length; i++) {
  console.log(iterable[i]);
}
//es6(아래)
for (const value of iterable) {
  console.log(value);
}

3. 비동기 통신1 : 콜백함수 사용(아래)

- 콜백함수란 무엇인가(아래)
function time() {
  setTimeout(function() {
    return 'time1';
  }, 1000);
}
let a = time(); //변수정의 var 대신 let 사용
console.log(a); // undefined 출력

function time(callbackFunc) {
  setTimeout(function() {
    callbackFunc('time!');
  }, 1000);
}
let a;
time(function(r) { //함수를 호출할 때 매개변수로 익명함수를 사용하면 자동실행(콜백함수)된다.
  a = r;
  console.log(a); // time1 출력
});

- 실제 API서버에서 받아오는 콜백함수 사용 : Ajax 비동기 통신-크롬 콘솔에서 실행(아래)
function getData(callbackFunc) {
  jQuery.get('https://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20230101', function(response) {
    callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
  });
}
getData(function(callbackFuncData) {
  console.log(callbackFuncData); // $.get()의 response 값이 tableData에 전달됨
});

4. 비동기 통신2 : Promise 리턴값 사용 : 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용(아래)

- Promise 란 무엇인가? : 크롬 콘솔에서 실행(아래)
const getName = (user_id) => {
  return new Promise( (resolve, reject) => { //Promise 객체값을 리턴-응답 받는다. 3가지 상태 pending(대기), Fulfilled(실행완료), Rejected(실패)
    if(!user_id) {
      return reject('user_id 가 필요합니다.') // 실패(Rejected) 상태면 reject()호출
    }
    Model.select('table_users', user_id) // 여기서 Model객체는 undefined 값이다.
    .then( result => {
      resolve( result.username ) // 성공(Fulfilled) 상태면 resolve()호출
    })
    .catch( err => { // 람다식=>arrow-애로우함수사용 원래는 function(err) { 구현내용 } 이다.
     reject( '에러메세지: ' + err ) 
    })
  }
  );
}
console.log(getName());

- 실제 API서버에서 받아오는 콜백함수대신 Promise 사용 : Ajax 비동기 통신-크롬 콘솔에서 실행(아래)
function getData(callbackFunc) { // callbackFunc-콜백 함수 파라미터가 필요없다.
  // new Promise() 추가
  return new Promise(function(resolve, reject) {
    jQuery.get('https://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20230101', function(response) {
      if (response) { // 데이터를 받으면 resolve() 호출
      resolve(response);
      }
      reject(new Error("요청 실패"));
    });
  });
}

// getData()의 실행이 끝나면 호출되는-동기처리시 then()사용 - resolve()의 결과 값 data를 resolvedData로 받음
getData().then(function(resolvedData) {
  // resolve()의 결과 값이 여기로 전달됨
  console.log(resolvedData); // jQuery.get()의 reponse 값이 resolvedData에 전달됨
}).catch(function(err) {
  console.error(err); // Error 출력
});

5. 비동기 통신3 : async 와 await 사용 : 기존 비동기 처리 방식인 콜백함수와 프로미스의 단점을 개발자가 읽기 좋은 코드를 작성할 수 있게한다(아래)

- 실제 API서버에서 받아오는 콜백함수대신 await + 비동기_처리_함수명 사용 : Ajax 비동기 통신-크롬 콘솔에서 실행(아래)
async function getData() { // 함수명 앞에 async 예약어를 붙인다. jQuery.get 대신 브라우저에 내장된 fetch를 사용해 본다.
  var response = await fetch('https://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20230101');
  //Promise 에서 사용된 then 대신에 await 를 사용하여 응답 데이터를 받은 후 아래 코드가 실행된다.
  if(response.ok) {
    console.log(response.json()); // Promise 객체와 서버에서 받은 데이터 response를 return-반환한다.
  }else{
    console.log('응답이 올바르지 않습니다.');
  }
}
getData(); // async 함수실행

6. 마지막 세련된 ES6를 활용한 비동기 통신 소스(아래)

async function getData(host, date, headers = {}) { // 초기값 빈 배열객체{}, POST방식에서 body와 headers에 "Content-Type": "application/json", 을 사용할 수 있다.
  const url = `${host}=${date}`;
  const options = {
    method: "GET",
    headers: {
      ...headers, // ES6구조 분해할당 중 배열할당기호 ...
    }
  };
  const res = await fetch(url, options);
  const data = await res.json();
  if (res.ok) {
    return data;
  } else {
    throw Error(data);
  }
}

getData("https://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt", "20230101",)
  .then((data) => console.log(data))
  .catch((error) => console.log(error));

7. 위 ES6를 활용한 비동기 통신 소스를 활용한 리액트 앱 화면(아래)

### 리액트기반으로 공공데이터와 지도API 연동01~08 시리즈 8편 분량의 제 블로그 자료(아래)

- 1. 구름IDE에서 리액트 컨테이너 생성 후 npm install 로 기본 패키지 설치 후 리액트 홈 실행하기. https://kimilguk.tistory.com/808

- 2. 1).공공데이터 포털에서 API 활용신청하기 및 2).카카오 개발자센터에서 지도 API 애플리케이션 생성하기. https://kimilguk.tistory.com/809

- 3. 구름IDE에서 공공데이터 포털의 API 데이터를 노드js API의 서버기능 으로 데이터 가져오기. https://kimilguk.tistory.com/810

- 4. 리액트에서 카카오 맵 API 샘플코드를 사용하여 클래스형 컴포넌트 생성 후 라우터 기능으로 메뉴에 추가하기. https://kimilguk.tistory.com/811

- 5. 이전에 생성한 노드js API 데이터를 리액트 카카오 맵 클래스형 컴포넌트에 바인딩해서 지도에 표시하기. https://kimilguk.tistory.com/812

- 6. 클래스형 카카오 맵 컴포넌트를 참조하여 함수형 컴포넌트를 생성 후 노드js API 데이터를 바인딩해서 지도에 표시하기. https://kimilguk.tistory.com/813

- 7. npm빌드 대신 yarn 빌드를 사용하기 위한 yarn 설치 및 빌드로 build 폴더의 index.html 생성하기. https://kimilguk.tistory.com/814

- 8. 컨테이너 나가기 후에도 노드js 서버 실행을 유지하기 위한 forever 설치(node 버전 업드레이드 필수) 및 forever 로 앱 실행하기. https://kimilguk.tistory.com/815

리액트js 확인 URL: ( https://server-basic-fekuw.run.goorm.io/ )