javascript 멀티 라인 쓰는법

Javascript 언어에서는 다른 언어와는 달리, 문자열 입력시에 소스상에서의 개행을 지원하지 않는다.

아래와 같이 문자열을 줄내림하여 입력할 경우 구문 에러가 발생한다.

var test = "I am MarkLab!
	Hello! Nice to meeting you
";

따라서 문자열을 내가 개행하고자 하는 단위로 잘라서 아래와 같이 + 를 통해 

문자열을 이어줘야 한다.

var test = "I am MarkLab!"
	 + "Hello! Nice to meeting you";

약간 불편하긴 하지만 클라이언트 사이드에서 개발을 진행할 때는 그렇게 큰 이슈가 되진 않았는데

Node.js를 통해 서버를 구현하고 쿼리문을 작성하면서 이게 문제가 되기 시작했다.

나 같은 경우 쿼리문을 작성할 때 가독성을 위해 아래와 같은 스타일로 작성하는 편인데

	SELECT
		id
		, password
		, name
		, auth
	FROM
		USER
	WHERE
		auth = 1

javascript 에서 제공하는 문법으로 작성하면 위처럼 멀티라인으로 작성을 할수가 없다.

따라서 보통 한줄로 쿼리를 작성하는데, 이게 쿼리가 매우 복잡해지게 되면 수정할 때 눈에 쉽게 들어오지 않아 힘들어진다.

그래서 처음에 말했던 방법처럼 구현하면

var query = "SELECT"
	+ "	id"
	+ "	, password"
	+ "	, name"
	+ "	, auth"
	+ "FROM"
	+ "	USER"
	+ "WHERE"
	+ "	auth = 1";

위 처럼 되게 된다. 

Sublime Text 와 같이 Highlighting 기능이 잘 되는 에디터에서는 그나마 가독성이 좋아지는 거 같긴하다.

근데 이것도 매번 쌍따옴표(")로 문자열을 감싸줘야 될 뿐만 아니라 앞에 '+' 기호도 붙여줘야 된다

또 쿼리를 처음 작성해놓고 수정/개발을 반복하다 보면 가끔 쌍따옴표로 닫는 부분을 종종 잊어버리기도 한다.

그럼 또 버그메세지를 보고 해당 구문 찾아서 수정하고... 이러한 절차가 반복되다보니 

딱히 좋은 것 같아 보이진 않았다.

(또 약간은(?) 보기 쉽게 나눠져 있다 뿐이지, 해당 쿼리문을 console.log()를 통해 출력하면 한줄로 나온다)

해서 다른 방안이 없을까? 찾아보다가 개행될 때 역슬래시(\)를 입력하면 javascript 문법 에러를 발생하지 않고

개행할 수 있음을 알게 되었다.

var query = "\
	SELECT\
		id\
		, password\
		, name\
		, auth\
	FROM\
		USER\
	WHERE\
		auth = 1\
";

더이상 쌍따옴표와 +를 넣진 않아도 되서 조금은 편해졌다고 생각했었다.

근데 이것도 문제가 있는데

사실 엔터를 입력하면서 역슬래쉬로 에디터에서 엔터에 대한 예외처리를 하는 방식이기 때문에

실제로 출력해보면 한 줄로 연결되어 출력되는 방식인 것은 여전하다.

	SELECT		id		, password		, name ...

게다가 위와 같이 사실 앞에 가독성을 위해 탭을 입력한 부분까지 문자열으로 포함하기 때문에 각 단어마다

띄엄띄엄 비어서 출력하게 된다.

뭐 그래도 어짜피 쿼리 실행하는데는 길이가 너무 길지만 않으면 정상적으로 실행되기 때문에 

그러려니 했다 (혹은 쿼리 실행 전 경량화 하는 함수를 태우기도 하였다)

이 방식의 최대 가장 큰 문제점이라고 생각하는 것은

저 역슬레쉬 뒤에 어떠한 문자 특히 공백도 들어가면 안된다!!!!

앞서 설명한 바와 같이 에디터에서 엔터입력에 대한 부분을 예외처리 시키는 부분이기 때문에 

문자열 혹은 공백을 입력한 후에 엔터는 자바스크립트 문법 에러로 처리된다.

근데 문자열이면 그나마 찾기가 쉬운데 공백이면 블록지정을 하지 않고서는 정말 찾기 어렵다.

에러라고 발생은 되는데 뭐가 문젠지 알 수가 없어서 한참을 소스를 봤던 기억이 있다...

결국 이것도 맞는 방법은 아니라고 생각되어서 공부를 더 하던 중, 

ES6에서 지원되는 기능인 [Template literals] 에 대해서 알게 되었다.

문법 : 

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tag `string text ${expression} string text`

ES6에서 지원되는 템플릿 문법인데

역따옴표(`)를 사용하면 앞서 문제되었던 멀티라인 작성을 간단하게 할 수 있도록 지원 할뿐만 아니라

템플릿문법처럼 변수부분만 지정해서 해당 부분에 변수값을 치환해서 넣을 수 있도록 기능을 제공한다.

게다가 역따옴표(`)를 이용하기 때문에 지겹게 따라다니던 따옴표('), 쌍따옴표(")를 선택했을때 서로에 대한 예외처리부분도 고민하지 않아도 된다.

결론적으로 쿼리문을 아래와 같이 작성하면 앞서 고민했던 모든부분이 깔끔하게 해결된다!!

var query = `
	SELECT
		id
		, password
		, name
		, auth
	FROM
		USER
	WHERE
		auth = 1
`;

거의 PHP에서 많이 사용했던 HereDoc과 비슷한 개념인거 같은데 매우 유용한 기능이라고 생각된다.

요즘 ES6문법을 공부중에 있는데 또 어떠한 새로운 점이 있을지 더 기대된다.

ES6 문법이기 때문에 아직 지원범위에 대한 제약이 있으니, 자세한 내용은 MDN 사이트를 참고해서 사용하면 좋을 것 같다.

※ Template literals 에 대해 좀더 자세한 사항은 아래의 MDN을 참고바랍니다!

참고 URL : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals