프로젝트 1: URL에서 모든 <p> 태그 가져오기
개요
이 프로젝트는 주어진 URL에서 전체 웹 페이지를 가져와 지정된 콘텐츠 영역 내의 모든 <p> 태그를 추출하는 것을 목표로 합니다. 추출된 콘텐츠는 로컬 서버에 표시됩니다.
단계 및 설명
1. 프로젝트 설정
- Node.js와 npm이 설치되어 있는지 확인합니다.
- 프로젝트를 위한 새 디렉토리를 만들고 새로운 Node.js 프로젝트를 초기화합니다.
mkdir retrieve_p_tags
cd retrieve_p_tags
npm init -y2. 필요한 라이브러리 설치
- 서버 생성을 위한
express, HTTP 요청을 위한axios, 크로스 오리진 리소스 공유를 처리하기 위한cors, HTML 파싱을 위한jsdom을 설치합니다.
npm install express axios cors jsdom3. server.js 생성
- 이 파일은 URL에서 콘텐츠를 가져오고, 파싱하고,
<p>태그를 추출하여, 콘텐츠를 제공하는 서버 로직을 포함합니다.
const express = require('express');
const axios = require('axios');
const cors = require('cors');
const path = require('path');
const { JSDOM } = require('jsdom');
const app = express();
const port = 3000;
app.use(cors());
// 루트 경로에서 HTML 파일 제공
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'index.html'));
});
app.get('/fetch-content', async (req, res) => {
try {
const response = await axios.get('https://theminjoo.kr/main/sub/news/view.php?brd=230&post=1204092');
const htmlText = response.data;
// HTML 파싱 및 콘텐츠 추출
const dom = new JSDOM(htmlText);
const document = dom.window.document;
const contentSelector = '#container > div.article-body > div > div.board-view__wrap > div.board-view > div.board-view__body > div.board-view__contents';
const contentElement = document.querySelector(contentSelector);
let collectedTexts = [];
if (contentElement) {
const pTags = contentElement.getElementsByTagName('p');
Array.from(pTags).forEach(p => {
collectedTexts.push(p.textContent.trim());
});
}
res.send(collectedTexts.join('\n'));
} catch (error) {
res.status(500).send('Error fetching content');
}
});
app.listen(port, () => {
console.log(`Proxy server running at http://localhost:${port}`);
});4. index.html 생성
- 이 파일은 Express 서버에 의해 제공되며, 추출된
<p>태그 콘텐츠를 표시합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retrieve Text Content</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#results {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h1 id="page-title">Loading...</h1>
<div id="results">Loading...</div>
<script>
document.addEventListener('DOMContentLoaded', async function () {
// 결과를 표시할 컨테이너
const resultsContainer = document.getElementById('results');
const pageTitle = document.getElementById('page-title');
try {
// 프록시 서버에서 콘텐츠 가져오기
const response = await fetch('http://localhost:3000/fetch-content');
const contentText = await response.text();
// 추출된 텍스트 표시
resultsContainer.innerHTML = contentText.split('\n').map(text => `<p>${text}</p>`).join('');
pageTitle.innerHTML = '추출된 콘텐츠';
} catch (error) {
resultsContainer.textContent = '콘텐츠 가져오기 오류.';
pageTitle.innerHTML = '오류';
}
});
</script>
</body>
</html>5. 서버 실행
- 서버를 시작하고 브라우저를 열어 추출된 콘텐츠를 확인합니다.
node server.js- 브라우저를 열고
http://localhost:3000/로 이동하여 콘텐츠를 확인합니다.
발생한 어려움
- CORS: 외부 서버로 HTTP 요청을 하는 동안 CORS 문제가 발생할 수 있습니다. Express에서
cors라이브러리를 사용하여 이러한 문제를 해결했습니다. - HTML 콘텐츠 파싱:
JSDOM을 사용하여 HTML 콘텐츠를 파싱하고 조작하는 것이 익숙하지 않을 수 있습니다. 올바르게 요소를 선택하여 필요한 데이터를 추출하는 것이 중요합니다. - 에러 처리: 네트워크 오류나 잘못된 HTML 구조와 같은 문제를 관리하기 위해 적절한 에러 처리가 필요합니다.