NodeSelector2 JS NodeSelector 살펴보기 평소에 사용하던 NodeSelector 들을 명확하게 정의하고자 합니다. NodeSelector 는 JavaScript 코드에서 DOM에 존재하는 하나이거나 여러개의 Node(Element)를 선택하기 위해 사용하는 method 입니다. NodeSelector 의 종류로는 - getElementsByClassName() - getElementById() - getElementsByName() - getElementsByTagName() - querySelector() - querySelectorAll() 등이 있습니다. getElementsByClassName() 파라미터로 넘긴 String을 전체 Elements의 class를 대상으로 탐색을 실행합니다. 반환값은 HTMLCollection 입니다. -.. 2021. 3. 7. Handlebars, DOMParser, NodeSelector를 사용한 랜더링 함수 만들기 React를 사용하지 않고(웹팩도) 단순하게 파일을 Link 하여 개발할 일이 생겼다. (유지보수 관련) 나는 Vanilla JS로 개발할 때에는 템플릿 엔진이 필수적이라고 생각한다. SSR로 구성된 페이지들은 필요가 없을 수 있겠지만, CSR로 구성된 페이지들은 사용자와의 인터렉션을 통해 유기적으로 UI가 추가, 삭제, 변경 되야하기 때문에 라고 생각한다. 템플릿 엔진은 대중적 이라고 생각되는 Handlebars 템플릿 라이브러리를 사용하였다. 템플릿을 랜더링하여 실제 DOM에 반영하는 프로세스는 다음과 같습니다. - Id로 참조하여 String template 가져옴 - 템플릿 컴파일(Handlebars.compile) 실행 - 컴파일된 템플릿에 후처리 대상인 Element 참조 - 후처리 대상 El.. 2021. 3. 3. 이전 1 다음
