[PWA] 모던자바스크립트 ES6 입문

모던자바스크립트는 기존 자바스크립트와 달리 변수가 유지될 수 있는 범위가 더 엄격해졌으며, 함수를 객체처럼 변수에 저장해서 사용할 수 있는 함수 표현식도 가능해졌습니다.

 

1. 함수와 변수

① 함수 표현식 - 함수명 없이 선언한 후 객체 변수에 저장하는 방식입니다.

예를 들어

const fnPlusNumber = function(p1,p2){
	return p1+p2;
}

위와 같이 const 변수에 함수를 대입하여 사용합니다.

 

또한 함수표현식은 선언 후 호출할 수 있어서 순서를 엄격하게 지켜야합니다.

 

만약 아래와 같이 사용한다면 에러가 발생합니다.

fnPlusNumber(1,2);

const fnPlusNumber = function(p1,p2){
	return p1+p2;
}

 

 

② 변수 - 기존 자바스크립트는 var 키워드를 사용하였지만, ES6에서는 let , const 키워드를 사용하여 변수를 선언합니다.

var 변수는 함수 스코프만 지원하고 블록스코프는 지원하지 않습니다. 

fnTest();

function fnTest(){
	var inner = 1;
}

console.log(inner); //error!

 

또한 같은 이름을 중복선언할 수 있습니다.

즉 함수 외부에서 선언한 변수는 모두 전역변수처럼 사용되며, 기존선언을 덮어 씁니다.

var number =1;

function fnTest{
	var number =3;
    console.log(number);// 3 출력
}

console.log(number);//3출력

 

 

ES6 부터는 엄격해진 방식으로 사용하기 위하여 블록스코프를 지원하는 let, const 키워드를 통해 변수를 선언합니다.

 

let ,const는 블록내부로 유효범위를 제한하므로 블록 외부에서는 사용할 수 없습니다. 또한 같은 이름으로 중복 선언이 불가능합니다.

 

let 선언변수는 변숫값을 변경가능하지만 

 

const는 선언과 동시에 값 할당을 해야 하며 변경이 불가능합니다.

 

③ 화살표 함수 - 화살표 함수는 모던스크립트에서 가장 많이 사용하는 함수며, 모던스크립트에서 처음 등장한 개념입니다.  function, return 키워드를 대신하여 화살표( =>)를 사용하는 방식입니다.

//function 키워드 생략
const fnPlus = (p1,p2) => {
return p1+p2;
}

// function, return 키워드 모두 생략
const fnMinus =  (p1,p2) => p1-p2 ;

function, retrun 키워드를 대신 화살표로 대신 사용가능하므로 키워드를 사용해도 되고 화살표를 사용해도 되므로 자유롭게 쓸 수 있습니다.

 

함수가 실행하는 문장이 단 한줄이므로 블록을 나타내는 중괄호를 생략할 수 있습니다.

화살표 함수는 return 키워드를 생략하여도, 자동으로 값을 반환합니다. (암묵적 반환)

즉, 화살표 뒤에 있는 p1-p2의 결과값이 자동으로 반환됩니다. 

 

또한 매개변수가 1개일때는 소괄호()를 생략할 수 있습니다.  

const onlyOne = p1 => p1+1;

만약 매개변수가 없다면 반드시 소괄호를 사용하여야 합니다.

const fnEmpty = () => 'Hello';

 

2. 모듈 사용법

모듈은 코드를 관리하는 가장 작은 단위입니다. 모듈을 이용하면 코드관리와 재활용이 가능합니다.

기존 스크립트 방식에서는 소스가 길어질 수록 변수나 함수가 충돌하기 쉬웠지만, 모듈의 사용을 통해 이러한 문제점을 해결할 수 있게되었습니다. 

const car ='K5';
const fnPlus = (p1,p2) => p1+p2;

export { car, fnPlus };

 

① 모듈 내보내기

모듈을 내보내는 방식은 export를 이용하여 공유하고 싶은 식별자를 쉼표로 나열해서 중괄호로 감싸는 방식입니다.

export로 내보낸 모듈은 가져올때 import 다음 작성하는 식별자와 일치하여야 정상적으로 가져올 수 있습니다.

만약, 새이름을 사용하고 싶다면 식별자 이름뒤에 as 키워드와 새이름을 입력합니다. 그러면 외부에서 지정한 새이름으로 가져올 수 있습니다. 

 

② 모듈 가져오기

모듈을 가져오기 위하여 import 키워드를 사용하여 식별자를 쉼표로 구분해 중괄호로 묶고 , from 키워드를 통해 가져올 식별자가 있는 파일경로를 적습니다. 그러면 현재파일에서 해당 식별자를 사용할 수 있습니다.

// 식별자 car, fnPlus 를 testLib.js 파일에서부터 가져옴
import { car, fnPlus } from './testLib.js';

// testLib.js파일에 있는 모든 식별자를 가져옴
import * as AllLib from './testLib.js';

 

위와 같이 모든 식별자를 가지고 오려면 별표(*)를 통해 식별자를 모두 작성하지 않고 가져올 수 있습니다. 

별표뒤에 as 키워드와 함께 객체명을 지정하고, 사용할 때는 점(.) 을 사용해서 객채명.식별자 형태로 사용합니다.

 

③ 기본으로 내보내고 가져오기

식별자 중 하나를 대표로 지정해서 공유하는 방식입니다. export 키워드 뒤에 default 키워드를 추가하여 모듈 하나당 하나의 함수나 클래스만 공유 할 수 있고, let, var, const 는 사용 할 수 없습니다.

let number =1;
const fnPlus = (p1,p2) => p1+p2;

export default fnPlus;

 

export default로 내보낸 식별자를 가져올때는 이름을 변경할 수 있습니다.

 

import fnPlusNumber from './lib.js';

 

보낼떄는 fnPlus()였지만 가져올떄는 fnPlusNumber()로 가져올수 있습니다. 

 

또한 export 키워드를 선언문 앞에 써서 간단하게 내보내는 방법도 있습니다.

export const greeting = 'Hello';
export const fnPlus = (p1,p2) => p1+p2;

 

.html 파일에 모듈을 사용한 스크립트를 가져올떄는 반드시  타입을 "module" 로 지정하여야 합니다.

 <script type="module" src="lib.js"></script>

 

 

3. 비동기 처리와 콜백 함수

동기 처리는 함수를 포함한 모든 코드가 위에서 아래로 순서대로 실행되는 것을 의미합니다. 

즉, 모든 명령문이 일렬로 진행되어 순차적으로 실행됩니다.

 

하지만, 웹앱에서는 네트워크 통신으로 외부 데이터와 상호 작용하는 경우가 많습니다. 만약 동기 처리 방식으로 통신을 요청할 경우 네트워크나 서버에 문제가 생겨 응답받지 못할 경우 제대로 동작할 때까지 무한정 기다려야 하고 다음 순서가 진행되지 않습니다.

 

이러한 문제점 때문에 비동기 처리방식을 사용합니다. 즉 명령을 요청 후 결과가 나올때까지 기다리는 것이 아니라 그 다음 작업을 연이어 수행하고 결과가 완료되면 다시 돌아와 필요한것을 마무리 하는 방식입니다.

 

동기처리 방식의 명령이 일렬로 되어있다면 비동기 처리방식의 명령은 독립적입니다. 

 

 

자바스크립트는 이러한 비동기 처리 방식을 구현하기 위해 콜백함수를 사용합니다. 함수는 보통 매개변수로 값을 전달받는데 자바스크립트에서 함수는 객체로 취급하므로 함수의 매개변수로 함수를 전달받을 수 있습니다.

function A(p){
return p;
}
funcation B(p){
...
}

B(A);

매개변수 값대신 함수를 전달한다고 생각하면 이해하기 쉽습니다. 이처럼 어떤 함수의 매개변수로 전달된 함수를 콜백 함수라고 부릅니다. 콜백 함수는 다른 함수와 상관없이 독립적으로 실행되므로 비동기 처리를 구현할 때 사용합니다.

 

그러나 콜백함수의 한계가 있습니다. 네트워크 데이터를 비동기 방식으로 처리할 내용이 많은데, 이 경우 프로그램 로직이 복잡해지게되고, 콜백 함수가 늘어나서 심하게 중첩되는 경우가 많습니다.

 

나중에는 관리하기 힘들 정도로 복잡하게 꼬여 오류를 찾기 어려워 지게 됩니다. 이런 현상을 콜백지옥이라고 합니다.

 

 

구조를 단순화하고 소스의 가독성과 유지보수를 쉽게 하는 방법으로 Promise가 등장합니다. Promise는 ES6부터 비동기 처리방식을 위해 정식으로 포함된 객체로서 콜백 함수에만 의존하는 문제를 해결하였습니다.

 

 

4. Fetch API

Fetch API를 이용해 서버에서 JSON 데이터를 가져올때 Promise를 사용합니다. 여기서 JSON(Javascript Object Notation)이란 자바스크립트에서 데이터를 저장하고 교환할떄 사용하는 정형화된 텍스트 형식입니다. JSON은 자바스크립트의 데이터 타입인 객체로 변환해서 사용합니다. 

JSON은 중괄호로 시작과 끝이 묶여져 있고, 각 항목은 '키:값' 형식으로 표현합니다. 각 항목은 콤마(,)로 구분합니다.

 

JSON의 원본값은 텍스트이지만, 자바스크립트에서는 배열 형식으로 관리해야 하므로 텍스트를 객체로 바꾸는 작업(JSON.parse() 함수 사용)이 필요합니다.

 반대로 JSON 데이터가 담긴 자바스크립트 객체를 텍스트로 변환할떄는 JSON.stringify() 함수를 사용합니다.  

 

Fetch는 웹 API에서 제공하는 함수 중 하나입니다. 이 함수는 원격 서버에서 제공하는 데이터의 CRUD(create,read,update,delete) 작업을 손쉽게 하도록 HTTP Request, Response의 POST,GET,PUT,DELETE 메서드로 관리 해 주는 방법을 제공합니다. 

fetch(path);
//path:데이터를 읽을 주소
//반환값 : 서버가 응답하는 값을 Promise 객체로 변환

테스트를 하기 위한 데이터를 제공해 줄 원격 웹서비스는 JSONPlaceholder 웹사이트(jsonplaceholder.typicode.com/)를 이용하는 것입니다.

 

위 사이트에 접속하면 스크립트 사용방법이 나오며, Run script 버튼을 클릭하면 Promise 객체로 반환합니다. 

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))

결과값

{
	"userId": 1,
	"id": 1,
	"title": "delectus aut autem",
	"completed": false
}

5. Promise 

promise 란 비동기 처리 방식으로 실행된 결과의 성공과 실패를 관리하는 객체입니다. 

사전적의미로 약속이라고 생각하면 되는데

 - 약속대로 일을 수행한 경우 -> 성공 resolved

 - 약속한 일을 하지 못한 경우 -> 실패 rejected

 - 약속한 일이 지연되는 경우 -> 대기 pending

의 결과가 나올 수 있습니다.

 

최종 결과는 2가지입니다.

 - 약속 지킴 최종 성공 (fulfilled) 원하는 결과값을 반환 받은 경우입니다.

 - 약속 지킴 최종 실패 (unfulfiiled) 약속이 거절되어 원하는 값을 못받은 경우입니다. 오류 코드를 통해 오류를 처리해야 하는 경우에 해당합니다.

 

예시 코드

 <script>
  fnStartPromise();
        function fnStartPromise() {
            console.log('Promise 시작!');
            let bStatus = Math.random() > 0.5;
            fnCreatePromise(bStatus)
                // 비동기 실행으로 결과 알려줍니다.
                .then(pResult => console.log(pResult))
                .catch(pErrMsg => console.error(pErrMsg));
            console.log('Promise 종료!');
        }
        // Promise 생성
        function fnCreatePromise(pStatus) {
            return new Promise((fnResolve, fnReject) => {
                // 상품 준비 확인의 비동기 함수를 실행했다고 가정합니다.
                setTimeout(() => {
                    // 상품 준비 결과는 랜덤으로 True 또는 False 가정
                    if (pStatus) fnResolve('상품이 성공적으로 배송되었습니다.');
                    else fnReject('죄송합니다. 상품이 아직 준비되지 못했습니다.');
                }, 2000); // 2초 타이머로 가상의 네트워크 지연상황 연출함
            });
        }
    </script>

성공하면 then() 메서드를 실패하면 catch() 메서드를 출력합니다. 

즉, 비동기 처리를 종료한 후 반환값은 성공과 실패 모두 then()과 catch() 에 전달된 함수를 통해서 관리할 수 있습니다.

 

 

5. await 연산자 async 비동기 함수

 await 연산자는 '기다리다' 라는 사전적 의미처럼 다음 실행으로 넘어가지 않고 결과값이 나올때까지 기다립니다.

즉. await 연산자는 오른쪽 항을 동기로 처리하도록 지시합니다.

test = await fnProductReady(1,2000);
//fnProductReady 함수 호출
console.log(test);

위 예시 소스처럼 await 연산자 다음에 실행문을 적으면 됩니다. 위 코드는 Promise의 실행이 완료될때까지 2초간 기다립니다. 완료되면 이어서 다음코드를 실행합니다. 

하지만 await만 사용한다면 무한 대기를 해야할 수 있습니다. 그래서 비동기 방식으로 처리하는 명령이 있는 함수는 반드시 async를 실행해야합니다.

async function fnAsync(){
console.log(await fnProductReady(1,2000));
}
fnAsync();
//async 함수 실행

 

사용방법은 일반 함수 선언할 때 앞에 async를 붙여서 비동기 처리 방식으로 선언합니다. 

실행하는 방법은 일반함수와 같습니다. 

<body>
    <button onclick="fnDoAsync()">async,await : 음식 배달 시작!</button>
<script>
async function fnDoAsync(){
    console.log(await fnDeliveryReady(1,2000)); //2초지연
    console.log(await fnDeliveryReady(2,1000)); //1초지연
    console.log(await fnDeliveryReady(3,500)); //0.5초지연
}
//promise로 비동기 함수 생성
function fnDeliveryReady(pNum,pTime){
    return new Promise((resolve) =>{
        setTimeout(()=>{
            console.log(pNum);
            resolve('음식 배달 완료!');
        },pTime);
    });
}

</script>
</body>

결과값

1
음식 배달 완료!
2
음식 배달 완료!
3
음식 배달 완료!

 

await 연산자가 사용된 함수 호출문이 하나씩 실행되고, 하나의 함수가 완료될떄까지 함수는 호출되지 않으므로,

1->2->3 순서로 진행됩니다.

이때 무한 루프에 빠지지 않도록 async 함수로 전체를 감싸서 비동기로 처리합니다.

 

이상 PWS를 개발하기 위한 모던 스크립트 기본 개념에 대하여 알아봤습니다.

 

다음에는 순수 자바스크립트를 사용하여 PWA를 개발하는 방법에 대하여 알아보겠습니다.

 

수고하셨습니다.