회사를 옮기고 나서 일정 및 여러 이유로 angular나 react.js로 프로젝트를 진행하기 어려운 상황에서
SPA형태의 프로젝트를 진행할 때 html template과 data를 편하게 사용할 수 있도록 만들었던 함수를 정리할려고 한다.
요구조건
1. 내가 HTML,CSS, UI(jQuery)기능을 구현하느라 data를 붙일 시간이 없는 것
2. SPA를 해본 경험이 없는 개발자가 붙이기 쉽게 함수로 만들 것
3. API URL이 복수개로 지정가능하게
4. data type을 고려할 것
5. HTML URl이 복수개로 지정가능하게
6. Template Class명 지정 컨트롤 할 수 있게
7. HTML삽입 시 새로 붙여넣을 것인지(HTML), 기존 데이터에서 추가로 붙여넣을지(append)구별 할 것
8. HTML삽입 위치 지정가능 하도록
9. HTML, API 삽입 후 callback 함수를 통해 rendering된 HTML을 컨트롤 가능하게
위 내용들을 고려하여 renderTemplate함수를 만들어 보았다.
사용한 라이브러리
renderTemplate 특징
1. API URL이 배열인지 확인 아니라면 존재하지 않는 것으로 보고 renderHtml을 호출하여 HTML만 rendering
2. API URL[0]째가 string인지 확인 맞다면 renderHtml호출 아니라면 JSON.stringify를 통하여 URL[0]을 string으로 변환하여 renderHtml호출
3. renderHtml을 호출하면 HTML template이 this.cache에 존재 하는지 확인 있다면 cache를 통하여 재사용하고 아니라면
ajax를 통하여 template을 호출하고 templateHtml에 저장 후 this.cache에 저장
4. api data가 존재한다면 insert type이 'HTML'인지 'Append'인지 확인 후 api data를 template에 뿌려주고 지정한 위치에 rendering
api data가 존재하지 않는다면 HTML template만 rendering함
5. callback 함수 호출
6. 변수 초기화
renderTemplate은 위와 같은 형태로 구현을 했고 말로 설명하기가 어려워 그림으로도 그려보았다.
단점
2. rendering될 때 바뀐 API Data를 비교하는 부분이 빠져있다.(이 부분을 추가했으면 더 빨랐을 걸 react로 옮기면서 더 이상 이 코드는 만지지 않고 있다...)
3. callback이 아닌 promise방식으로 구현했다면 더 간단하게 할 수 있었을 것 같다.(api data 호출 부분은 promise방식을 사용해 놓고선...)
4. 변수 선언이나 이런 부분에 가이드를 정확히 정해놓지 않고 급하게 하다보니 그 부분도 너무 아쉽다.
최근 덧글