자바스크립트 템플릿 리터널

let test = '<?=school?>'; 
console.log(test); //초,중,고

let test2 = ["<?=implode(",", $test)?>"]; //php test 배열을 implode() 를 통해서 ,로 잘라서
// 자바스크립트 변수에 넣어줍니다. 그러면 자바스크립트 [0] 번째 index에 전부 들어가게 됩니다.
console.log(test2); //초,중,고

var test3 = test2[0].split(","); 해서 test3라는 배열을 만들어 ,를 기준으로 잘라서 넣어 줍니다.

PHP로 개발을 하다보니 자바스크립트 안에서 PHP 변수를 사용하는 경우가 생겼다. 

이럴 경우에 '<? = php변수 ?>' 로 사용이 가능했다. 그렇지만 적용이 불가능한 점도 확인 하였다. 예로들면 반복문으로 자바스크립트 배열에 PHP 배열을 넣는 것인데, [index] 가 자바스크립트 에서만 돌기 때문에 PHP는 정해진 배열의 인덱스만 뽑아올 수 있다. 그래서 PHP 배열을 자바스크립트 배열에 넣어주어야 한다.

필자는 좀 비효율적인 생각이 들어 개선방법을 생각중임.

$school = 초,중,고;
$test = explode(',',$school); //,를 기준으로 잘라서 test라는 변수에 배열로 넣을 수 있다.
$test[0]/초
$test[1]//중
$test[2]//고

 

자바스크립트에서 DOM을 이용해 src 부분이나 font 부분을 건드리는 경우 src = " "  이렇게 " " 안에 php 변수를 작성해야 되는 경우가 있다. 그런 경우에는 위에처럼 '<??>' 이렇게 작성하면 되지만 배열의 경우는 말이 달라진다. 한개에 index를 넣어야 되는 경우라면 괜찬지만 반복문을 돌려서 출력해야한다면 말이다. 그럴 경우는 자바스크립트 index도 문자열로 취급이 되기 때문에 자바스크립트의 템플릿 리터널을 이용해야 한다.

( ` ) 백틱 이라는 기호를 사용한다.

for(var i = 0; i < 3; i++){
ctx.font = `${test3[i]}px`; //이렇게 되면 i가 정상적으로 돌면서 배열이 돈다.
}