자바스크립트에서 DOM 요소의 텍스트 내용을 다루는 세 가지 주요 속성 innerHTML, innterText, textContent의 차이점을 알아보자. 안녕하세요 저는 woodstock입니다. innerHTML이 속성은 요소의 HTML 내용을 그대로 다룬다.HTML 태그를 포함한 모든 내용을 문자열로 반환하고, 새로운 HTML을 설정할 수 있다. 다음 코드는 요소 내부의 HTML 태그를 포함한 모든 내용을 출력한다.const element = document.getElementById('example');console.log(element.innerHTML); 그리고 이렇게 새로운 HTML을 설정하면 태그가 실제로 적용되어 이탤릭체로 표시된다.const element = document.getE..

DOM(Document Object Model) API를 활용하여 웹 페이지의 요소를 동적으로 조작하는 방법을 알아보자.버튼 클릭으로 텍스트 변경하기버튼을 클릭하면 텍스트 요소의 내용이 변경되도록 이벤트 리스너를 추가해보자. 기본 텍스트 텍스트 변경 // DOM 요소 선택const button = document.getElementById('changeTextButton');const text = document.getElementById('text');// 텍스트 요소의 내용을 변경하는 함수const onClickButton = () => { text.innerText = "미션 1. DOM API 클리어 🥳";}// 이벤트 리스너 추가bu..

페이지 라우터 (Pages Router)기존 방식에서는 _app.tsx를 통해 전역(Global) 레이아웃을 정의하고,특정 페이지에서만 별도의 레이아웃을 적용하고 싶을 때는 getLayout 패턴을 사용한다..├── src│ ├── components│ │ ├── global-layout.tsx│ │ └── searchable-layout.tsx│ ├── pages│ │ ├── _app.tsx│ │ ├── book│ │ │ └── [[...id]].tsx│ │ ├── search│ │ │ └── index.tsx글로벌 레이아웃// global-layout.tsxexport default function GlobalLayout({ childr..