작성한 질문수 6

0

안녕하세요 답변 도우미입니다.

물론 있습니다. 웹 페이지의 여러 부분을 동적으로 로딩하기 위해 JavaScript를 활용할 수 있습니다. 이렇게 하면 각 버튼을 누를 때마다 전체 페이지를 다시 로드할 필요가 없어져서 사용자 경험이 좋아집니다. 관련해서도 여러 가지 기술이 있을 수 있어서 참고로 몇가지 예시를 공유드립니다.

### 방법 1: AJAX (Asynchronous JavaScript and XML)

- 서버에서 필요한 데이터만 가져와서 해당 부분만 업데이트합니다.

```javascript

document.getElementById("myButton").addEventListener("click", function() {

fetch('/some-api-endpoint')

.then(response => response.json())

.then(data => {

// Update your HTML here

document.getElementById("someElement").innerHTML = data.someValue;

});

});

```

### 방법 2: SPA (Single Page Application)

- React, Angular, Vue 같은 프레임워크를 사용하여 하나의 페이지 내에서 동적으로 컨텐츠를 바꿉니다.

예를 들어 React를 사용한다면:

```jsx

function App() {

const [page, setPage] = useState('home');

return (

<div>

<button onClick={() => setPage('home')}>Home</button>

<button onClick={() => setPage('stock')}>네이버 증권</button>

<button onClick={() => setPage('webtoon')}>네이버 웹툰</button>

{page === 'home' && <HomePage />}

{page === 'stock' && <StockPage />}

{page === 'webtoon' && <WebtoonPage />}

</div>

);

}

```

이렇게 하면 각 버튼을 클릭할 때마다 해당하는 컴포넌트만 로딩되므로, 페이지 전체를 다시 로드할 필요가 없습니다.

### 방법 3: InnerHTML 또는 DOM Manipulation

- 순수 JavaScript만을 사용하여 원하는 부분의 HTML을 바꿉니다.

```javascript

document.getElementById("myButton").addEventListener("click", function() {

// Update your HTML here

document.getElementById("someElement").innerHTML = '<h1>New Content</h1>';

});

```

이렇게 하면 여러 페이지를 만들고 링크를 걸지 않아도 한 페이지 내에서 여러 카테고리를 표시할 수 있습니다.

감사합니다.