이번 시간에는 자바스크립트 문자열을 다루는 신규 기술로 템플릿 문자열(Template Literals) 문법을 배워보도록 하겠습니다.

자바스크립트 언어에서 기본적인 문자열 변수를 정의하고 해당 변수에 추가적인 문자열을 조합하는 방식으로는 + 를 통해 문자열과 문자열을 아래 예시와 같이 조합합니다.

     let introduction = "저를 소개합니다. 이름은 " + name + "이고 나이는 " + age + " 살이고 사는곳은 " + local + "입니다.";
        introduction += "추가메시지2" + name;
        introduction += "추가메시지2";

        console.log("전통적인 문자열과 변수의 조합:", introduction);


조합하려는 문자열이 많아 질수록 가독성 및 문맥과 구조를 파악하기 어려워지는 문제점이 있어
이를 개선하기 위해 나온 신규 문법이 템플릿 문자열 문법이며 핵심적인 키워드는 여러분 키보드의 숫자 1 옆에 있는 역홑따옴표(벡틱문자)를 통해
전체 문자열 문맥을 정의하고 정의된 문자열 중간 중간에  특정 변수값을 ${변수명} 형식으로 위치를 지정 삽입하여 문맥에 따른 변수값을 할당하여 문자열 조합시
문제점인 가독성 및 문맥구조 개선을 도와주게 됩니다.

ECMAScript-Basic 폴더내에 template-literals.html 웹페이지를 하나 만들고 ! 엔터키를 쳐 기본적인 웹페이지 코드를 자동으로 생성합니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Template Literals</title>
</head>

<body>

    <h1>템플릿 문자열 다루기</h1>

    <script>



    </script>
</body>

</html>



간단한 자기소개 문자열을  전통적인 문자열 조합방식과 템플릿 문자열 방식으로 만드는 예시코드입니다.
직접 코딩을 통해 그 차이를 느껴보시기 바랍니다.

    <script>

        const name = "강창훈";
        const age = 50;
        let local = "경기도 성남시";

        //전통적인 방식의 문장열과 변수값의 조합방식
        //가독성이 떨어지고 코딩하는데 정신이 없다.
        let introduction = "저를 소개합니다. 이름은 " + name + "이고 나이는 " + age + " 살이고 사는곳은 " + local + "입니다.";
        introduction += "추가메시지2" + name;
        introduction += "추가메시지2";

        console.log("전통적인 문자열과 변수의 조합:", introduction);


        //ECMAScript 2015에서 추가된 신규문법 템플릿 문자열 방식으로 변수와 문자열을 조합해보자.
        //템플릿 문자열은 벡틱문자열(역홑따옴표)
        let introduction2 = `저를 소개합니다. 이름은 ${name}이고 나이는 ${age}살이고 사는곳은 ${local}입니다.`;

        console.log("템플릿문자열을 통한 문자열과 변수의 조합", introduction2);


    </script>


템플릿 문자열을 이용한 자기소개 변수명 introduction2는 역홑따옴표(벡틱문자) ``을 통해 전체 문맥을 먼저 정의하고 중간중간에 변수값을 ${변수명}을 추가하여 + 를 사용하여 문자열을 조합하는 방식보다 획기적으로 개선된 문자열 조합 기법을 제공하게 됩니다. 


코드 작성이 완료되었으면  Live Server등을 실행해 코드 결과값을 웹브라우저의 콘솔을 통해 확인해봅니다.
** 개발소스 수정 저장후에는 반드시 웹브라우저에서 해당 페이지를 반드시 재 로딩해서 테스트 또는 디버깅을 진행하세요. **