[참고문헌 및 소스공개] 웹페이지 코드분리를 위한 리마커블 전처리기의 설계 및 구현

1. 개요
1.1. jquery.reTmpl-2.4
- jquery.reTmpl-2.3 까지 사용되던 웹컴포넌트 기능 제거로 성능 최적화.
- jquery.reTmpl-2.3 까지 사용되던 <ao> 태그 대신에 더 간결하게 <o> 태그로 대체함.

1.2. jquery.reBind-1.4
- re-list 하위의 첫번째 태그(반복요소)에 대한 파싱 버그 수정(HTML 바인딩)
- re-list 바인딩 처리시에도 <o> 태그 활용.
- re-bind-key 및 re-list-key 문법 제거 : id 기반으로만 동작하도록 간소화
- HTML 바인딩 문법 최소화 : "><>" 및 "</><" 만 사용하도록 단일화

2. 버전업 내용
2.1. jquery.reTmpl-2.4
2.1.1. 웹컴포넌트 기능은 웹프레임워크 수준에서 다뤄지는것이 바람직하다는 판단으로 제거함.
2.1.2. <ao> 태그 대신에 <o> 태그로(= 오메가 블럭) 더욱 간결하게 처리하도록 하였습니다.(하위 호환성은 포기)
- <o> 태그에서는 key 값을 attribute 영역에 표시토록 함.(전처리시 attribute 모음이 아닌 문자열로 파싱됨)

→

2.1.3. 분기 문법은 아래 4가지만으로 처리하도록 하였습니다.(하위 호환성은 포기)
1) {{ if msg }}
- if 블록의 시작. (msg 참조값을 JavaScript true/false로 평가)
2) {{ else msg }}
- else if 블록의 시작.
3) {{ else }}
- else 블록의 시작.
4) {{ /if }}
- if 블록의 종료.

2.2. jquery.reBind-1.4
2.2.1. v1.3 과 동일하게 바인딩 초기화시 pageId 옵션으로 화면ID를 전달할 수 있습니다.

2.2.2. re-list 바인딩 전처리시에도 내부적으로 <o> 태그를 사용합니다.
- re-bind-key 및 re-list-key 문법 제거 : id 기반으로만 동작하도록 간소화하였고, 바인딩 요소에 id 속성이 없는 경우 re-list 뿐만아니라 re-bind 시에도 화면ID 기반의 name 속성을 활용할 수 있도록 하였습니다.

→

2.2.3. HTML 바인딩 문법의 "영역 표시" 방법 단일화
- 오메가 블럭 내 "><>" 및 "</><" 로 감싼 영역이 HTML 바인딩 영역으로 치환처리 됩니다.

3. 예제
3.1. re-list문법 예제

See the Pen jQuery reBind Plugin v1.4 : re-list 예제 by hd8131 (@hd8131) on CodePen.

3.2. re-bind문법 HTML 바인딩 예제

See the Pen jQuery reBind Plugin v1.4 - HTML 바인딩 예제 by hd8131 (@hd8131) on CodePen.

4. 본 버전업의 의의
4.1. 웹컴포넌트 기능을 삭제하여 Plugin 성능을 최적화 함.
4.2. <o> 태그로 코딩량을 최소화하는 간결함 제공.
4.3. 하위 호환성을 포기하는 대신에 최소한의 규칙으로 코딩 품질 및 성능 개선.
4.4. 버전업 항목에 해당하지 않는 기본 문법은 아래 경로에 있습니다.
- https://hidongh.tistory.com/20