본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다
패스트캠퍼스 환급챌린지란?
(~6/20) 50일의 기적 AI 환급반💫 | 패스트캠퍼스
초간단 미션! 하루 20분 공부하고 수강료 전액 환급에 AI 스킬 장착까지!
fastcampus.co.kr
https://fastcampus.info/4n8ztzq
여전히 임파선염으로 턱이 부어서 힘들지만 재미있게 강의를 들을 수 있게 해주는 환급챌린지 최공!
12일차 공부 시작!
오늘의 강의 주제는 '문자열을 활용한 HTML 다루기'이다.
(오늘도 마찬가지로 모자이크 처리..)
오늘의 학습 내용
DOM API와 UI 구성의 효율성
* 기존 자바스크립트 코드의 한계
자바스크립트로 UI를 구성할 때 코드만 보고 실제 HTML 구조를 파악하는 것은 쉽지 않다. HTML 마크업 파일을 직접 보면 구조가 명확하지만, JS 코드에서는 여러 줄에 걸쳐 DOM 요소를 생성하고 조립하기 때문에 전체 구조를 한눈에 이해하기 어렵다. 특히 규모가 커지면 코드만으로 UI의 마크업 구조를 파악하는 것은 거의 불가능해진다.
* DOM API의 직접 사용의 피로감
DOM API, 예를 들어 createElement나 appendChild 등을 직접 사용해 UI를 만드는 것은 반복적이고 번거로운 작업이다. 코드가 길어질수록 구조가 복잡해지고 유지보수 역시 어려워지는데 이런 방식은 개발자의 생산성을 저하시킬 수 있다.
* 개선 방법: 문자열 기반 마크업
DOM API를 직접 사용하는 대신 HTML 구조를 문자열로 작성하고 이를 innerHTML 속성을 통해 삽입하는 방법이 있다. 이 방식은 다음과 같은 장점이 있다.
- 마크업 구조를 코드에서 직관적으로 확인할 수 있다.
- 복잡한 UI도 구조적으로 파악하기 쉽다.
- 반복되는 DOM 조작 코드를 줄일 수 있다.
아래는 이를 적용한 예시 코드다.
const container = document.getElementById('root');
const ajax = new XMLHttpRequest();
const content = document.createElement('div');
const NEWS_URL = 'https://api.hnpwa.com/v0/news/1.json';
const CONTENT_URL = 'https://api.hnpwa.com/v0/item/@id.json';
function getData(url) {
ajax.open('GET', url, false);
ajax.send();
return JSON.parse(ajax.response);
};
const newsFeed = getData(NEWS_URL);
const ul = document.createElement('ul');
window.addEventListener('hashchange', function () {
const id = location.hash.substr(1);
const newsContent = getData(CONTENT_URL.replace('@id', id));
const title = document.createElement('h1');
title.innerHTML = newsContent.title;
content.innerHTML = '';
content.appendChild(title);
});
for (let i = 0; i < 10; i++) {
const div = document.createElement('div');
div.innerHTML = `
<li>
<a href="#${newsFeed[i].id}">
${newsFeed[i].title} (${newsFeed[i].comments_count})
</a>
</li>
`;
ul.appendChild(div.firstElementChild);
};
container.appendChild(ul);
container.appendChild(content);
이처럼 innerHTML을 사용하면 문자열로 작성한 마크업이 자동으로 DOM 요소로 변환된다. UI가 복잡해져도 구조가 명확하게 드러나고, 내용을 파악하는 데 어려움이 없다.
* 코드 개선: 함수와 객체의 활용
중복되는 코드를 줄이기 위해 함수와 객체를 적극적으로 활용하는 것이 중요하다. 예를 들어, 데이터를 가져오는 부분을 getData 함수로 묶으면 네트워크 요청과 JSON 파싱 과정을 반복하지 않아도 된다. 함수는 코드의 재사용성과 유지보수성을 높여준다.
- 네트워크 요청, 데이터 파싱 등 반복되는 로직을 함수로 분리
- 관련 데이터는 객체로 묶어서 관리
이렇게 개선하면 실제로 UI를 구성하는 코드가 훨씬 간결해지고 전체적인 구조도 명확해진다.
* 리팩토링의 중요성
UI의 시각적 개선뿐만 아니라, 내부 코드 구조를 효율적으로 만드는 리팩토링 역시 매우 중요하다. 코드의 가독성, 유지보수성, 확장성을 높이기 위해서는 함수 분리, 중복 제거, 명확한 데이터 구조화 등 다양한 리팩토링 기법을 적용해야 한다.
이처럼 DOM API의 직접 사용에서 벗어나 문자열 기반 마크업, 함수의 적극적 활용 등을 통해 더 효율적이고 유지보수하기 쉬운 UI 코드를 만들 수 있다.
마치며
오늘도 환급 챌린지 12강 공부 완료!!
오늘은 DOM API와 문자열 기반 마크업과 함께 함수를 활용하여 중복코드를 줄이는 리팩토링에 대한 내용을 들었다. DOM API뿐만 아니라 리팩토링의 중요성에 대해 다시 한 번 느낄 수 있었다. 강사님이 너무 설명을 부드럽고 잘하시는데 부럽고 존경심이 든다.. 기술에 대해 알고 있어도 그걸 간단하게 설명하는 것이 어렵다고 하는데 나도 강사님처럼 하고 싶다.