인프런 커뮤니티 질문&답변
작성한 질문수
궁금한점
작성
·
225
0
예를 들면 네이버에 접속을 하면 "네이버 증권", "네이버 웹툰"등등 여러 카테고리가 나오지 않습니까 그런데 이 모든 페이지를 html로 구현하려니 모든 버튼에 a태그와 그에 맞는 html웹페이지를 연동시켜야 하더라고요... 혹시 이렇게 않고 java script를 이용하여 구현하는 방법이 따로 있을까요?
답변 1
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>';
});
```
이렇게 하면 여러 페이지를 만들고 링크를 걸지 않아도 한 페이지 내에서 여러 카테고리를 표시할 수 있습니다.
감사합니다.