📝 오늘의 웹 개발 학습 기록
오늘은 웹 개발을 하면서 여러 가지 새로운 것들을 배웠다. 특히 Fetch API, Span 태그 사용법, Firebase와 모듈 사용 시의 주의점 등을 중점적으로 학습했으며, 문제를 해결하는 과정에서도 많은 것을 얻었다. 이번 포스팅에서는 오늘의 배움과 해결 과정에 대해 정리해 보았다.
1. Fetch API 이해
오늘은 Fetch API에 대해 깊이 있게 배웠다. Fetch는 페이지가 모두 로드된 후 자동으로 데이터를 가져오는 역할을 한다. 이 데이터를 가져온 후, 필요한 값만 추출하여 적절한 위치에 적용할 수 있었다. 이를 통해 페이지의 특정 부분에 동적으로 데이터를 반영하는 작업을 수행했다.
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
// 필요한 데이터만 추출하여 적용
document.querySelector('#element').textContent = data.value;
});이와 같은 방식으로 데이터를 가져와 필요한 부분에 반영할 수 있었다.
2. Span 태그 사용법
오늘 배운 또 다른 중요한 내용은 Span 태그의 사용법이다. Span 태그는 주로 <p> 태그 내에서 특정 글자나 단어를 묶을 때 사용된다. 이를 통해 텍스트의 일부분을 쉽게 스타일링하거나 조작할 수 있었다.
<p>이 문장에는 <span class="highlight">중요한 부분</span>이 있다.</p>위와 같은 방법으로, 텍스트의 특정 부분만 스타일링하여 강조할 수 있다.
3. Firebase와 모듈 사용 시 주의점
Firebase를 사용하는 과정에서 스크립트에 type="module" 속성을 붙일 때 주의할 점을 배웠다. type="module"을 추가하면, HTML에서 onclick과 같은 이벤트 핸들러를 직접 호출할 수 없게 된다. 이 문제는 처음엔 다소 혼란스러웠지만, 클릭 이벤트 등을 동적으로 생성하여 할당하는 방식으로 해결할 수 있었다.
document.getElementById('button').addEventListener('click', function() {
// 클릭 이벤트 처리
});이처럼, 이벤트 핸들러를 동적으로 설정하여 문제를 해결했다. 또한, 모듈 스크립트는 페이지의 모든 요소가 로드된 후 실행되므로, 기존에 사용하던 $ (document).ready(function() 코드를 사용할 필요가 없다는 것도 배웠다.
4. 오늘의 문제점과 해결 과정
문제점: Firebase를 사용하는 중, 스크립트에 type="module" 속성을 추가하자, HTML에서 onclick과 같은 이벤트 핸들러를 직접 호출할 수 없는 문제가 발생했다. 이로 인해 기존에 작성된 코드들이 작동하지 않게 되었다.
해결 과정: 문제를 해결하기 위해, onclick과 같은 이벤트 핸들러를 동적으로 생성하고 할당하는 방식으로 코드를 수정했다. 이를 위해 addEventListener 메서드를 사용하여 클릭 이벤트를 할당하고, 함수들을 모듈 내부에서 정의하여 호출하도록 변경했다. 또한, 모듈 스크립트가 페이지가 완전히 로드된 후 실행된다는 점을 활용하여, 기존에 사용하던 $ (document).ready(function() 코드를 제거해 코드의 간결성과 효율성을 높였다.
