Page 27 -

URL은 간단하지만 대신 문제를 복잡하게 하기 위해 일반적인 문자열, 함수에
서 반환된 문자열, 변수에 할당된 문자열, 연결하기 전에 변환된 문자열을 연결
해볼 것입니다. pragprog.com/cloud처럼 클라우드 제공업체의 URL을 반환하

는 함수를 다른 곳에 구현해서 사용합니다. 함수의 매개변수는 이미지 ID와 너
비이며, 너비의 경우 파싱하는 절차를 거쳐 정수로 만듭니다.

URL은 라우팅 사이에 슬래시를 넣고 쿼리를 위해 ?, =, & 기호를 넣어야 하므
로 특히 어수선해 보입니다. 전통적인 방법은 각 부분을 + 기호로 연결하는 것
입니다. 이렇게 작성한 함수는 다음과 같습니다.

variables/literals/problem.js
function generateLink(image, width) {
const widthInt = parseInt(width, 10);
return 'https://' + getProvider() + '/' + image + '?width=' +
widthInt;
}

꽤 많은 일이 벌어지고 있지요? 정보를 조합하는 데 + 기호는 별 도움이 되지

않는 것처럼 보입니다. 게다가 이 URL은 아직 간단한 편입니다. URL은 금세
복잡해지기도 합니다. 라우팅이 더 길거나 매개변수를 네 개 더 추가해야 한다
면 어떨까요? 함수가 더 길어질 것입니다.

다행히 템플릿 리터럴을 사용하면 복잡도를 줄일 수 있습니다. 템플릿 리터럴
은 자바스크립트 표현식을 사용해서 문자열을 연결하고 새로운 문자열을 생성

하는 간단한 문법입니다.
템플릿 리터럴을 이용하려면 두 가지만 기억하세요. 첫째, 템플릿 리터럴은
따옴표 또는 쌍따옴표 대신 백틱(back-tick)(`)을 사용합니다. 둘째, 변수에 할

당한 문자열처럼 단순 문자열이 아니라면 특별한 지정자로 감싸야 합니다.
`${stuff}`처럼 $ 기호와 중괄호로 변수나 다른 자바스크립트 코드를 감싸는 것
입니다.

040

코딩의기술_자바_07.indd 40 2019-12-13 오전 10:27:04