Next.js는 React 기반 웹 프레임워크입니다. 주로 서버 측 렌더링 사이트를 구현하는 데 사용됩니다. 서버 사이드 렌더링을 하는 주된 이유는 검색 최적화(SEO)입니다. 오늘 우리는 Next.js API 경로를 통해 네이버를 크롤링하는 함수를 만들었습니다.
(색인)
- Next.js API 경로는 무엇입니까?
- Next.js API 기본 예제, 원칙
- 네이버 블로그 목록 가져오기
- 네이버 블로그의 글자수와 제목이 포함된 문장 가져오기
1. Next.js API 경로는 무엇입니까?
우리는 지난 시간에 Next.js에 대해 이야기했습니다. SSR의 이점에 대해서도 이야기했습니다.
03/21/2023 – (프로그래밍_) – 네이버 블로그 SEO 프로젝트 – 개발계획, 기술
오늘 우리는 Next.js의 API 경로에 대해 이야기할 것입니다. Next.js는 정확히 말하면 프런트엔드 영역입니다. 물론 대부분의 서비스는 웹 서버와 API를 모두 사용합니다. Next.js의 대부분의 기능을 쉽게 구현하기 위해 만들어졌습니다. API는 프레임워크 라우팅 기술에 추가하여 노출된 백엔드의 기능입니다.
Next.js API 기술을 사용하면 백엔드 서버 없이 서버리스 기능의 형태로 프런트엔드에서 API를 생성하고 개발할 수 있습니다. 이것은 생산성과 효율성의 엄청난 증가입니다.
API 경로 사용이 쉽습니다. 페이지 폴더 아래에 API 폴더를 생성하고 라우팅을 위한 코드 파일을 생성하면 것이 가능하다.
그대로 설정하시면 됩니다. API 폴더에 원하는 라우팅 이름이 포함되어 있으면 해당 이름으로 파일을 만듭니다.
2. Next.js API의 기본 예제, 원리
위에서 만든 파일처럼 api 폴더에 getsearchvol.js라는 파일을 생성하면 엔드포인트는 “/api/getsearchvol”이 됩니다.생성됩니다.
export default function handler(req, res) {
res.status(200).json({ text: 'googleSearchResult' });
}
getsearchvol.js의 내용이라면 googleSearchResult는 JSON 형식의 텍스트 값이 된다. 요약하자면 ‘/api/getsearchvol’ 다시 보내는 백엔드 서버 역할을 합니다.
async function fetchData() {
const response = await fetch('/api/getsearchvol');
const data = await response.json();
console.log(data);
}
프런트엔드에서 API를 통해 가져오는 “가져오기” 라이브러리를 사용하여 이 JSON 값을 가져올 수 있습니다. Next.js를 통해 프런트엔드 및 백엔드 역할을 모두 허용하는 API 경로를 실행할 수 있습니다.
이러한 서버리스 기능은 일반적으로 AWS Lambda 및 Google Cloud Functions와 같은 클라우드 서비스를 제공하는 회사에서 제공합니다. 편리하긴 한데 사용료를 과금하니 무료로 하거나 EC2 같은 서버를 빌려서 API 백엔드 서버를 늘려서 사용하면 된다.
삼. 네이버 블로그 검색 목록 가져오기
클라이언트 측 렌더링으로 더 쉽게 만들 수 있었던 기능이지만 SSR에서 사용할 수 있게 만드는 것은 확실히 다른 이야기입니다. 내가 사용한 API 경로 기능을 사용해야 합니다.
먼저 위와 같이 키워드를 받을 입력 필드와 버튼을 구성하고 버튼 클릭 시 Axios를 사용하여 API를 호출하는 부분을 생성해 보겠습니다.
//index.js
<button
onClick={() => {
onKeywordAnalyis(keyword);
}}
>
분석
</button>
//중략
const onKeywordAnalyis = (tempKey) => {
axios
.get("/api/naverweb", {
params: {
keyword: tempKey,
},
})
.then((res) => {
setwebItem(res.data.titleitem);
setwebLink(res.data.linkitem);
});
}위 코드는 React.js로 구성된 사용자 인터페이스를 담당하는 부분입니다. Axios는 Google 검색을 위해 GET 방식의 HTTP 통신을 사용하기 위해 사용되었습니다. 일반 API 호출과 같습니다. 수신한 문자열을 키워드로 받아 API 서버에 전달합니다.
그런 다음 /api/naverweb.js 파일을 생성합니다. 생성한 다음 작성하는 코드는 다음과 같습니다.
export default function narverweb(req, res) {
const query = req.query;
const { keyword } = query;
const titleList = ();
const linkList = ();
axios
.get(
"https://search.naver.com/search.naver?where=influencer&sm=tab_jum&query=" +
encodeURI(keyword)
)
.then((response) => {
// console.log(response.data)
const $ = cheerio.load(response.data);
const ultData = $(
//인플루언서 참여콘텐츠
"#_inf_content_root > div > div.keyword_challenge_wrap._fadein_target > div.challenge_wrap > ul > li"
//인플루언서 홈
// '#main_pack > section.sc_new.sp_influencer._inf_content_section._prs_ink_mik > div > div.keyword_challenge_wrap > div > ul > li'
);
// 인플루언서 참여컨텐츠가 아닐 때
if (ultData.length > 1) {
ultData.each((i, li) => {
const title = $(li)
.find(
"div.keyword_box_wrap.api_ani_send > div.detail_box > div.dsc_area > a.name_link._foryou_trigger"
)
.text();
const date2 = $(li)
.find(
"div.keyword_box_wrap.api_ani_send > div.detail_box > div.dsc_area > span"
)
.text();
if (title != "") {
titleList.push(title + " // 날짜 : " + date2);
const link = $(li)
.find(
"div.keyword_box_wrap.api_ani_send > div.detail_box > div.dsc_area > a.name_link._foryou_trigger"
)
.attr("href");
linkList.push(link);
}
});
} else {
$(
"#main_pack > section.sc_new.sp_influencer._inf_content_section._prs_ink_mik > div > div.keyword_challenge_wrap > div > ul > li"
).each((i, li) => {
const title = $(li)
.find(
"div.keyword_box_wrap.api_ani_send > div.detail_box > div.dsc_area > a.name_link._foryou_trigger"
)
.text();
const date3 = $(li)
.find(
"div.keyword_box_wrap.api_ani_send.type_color > div.detail_box > div.dsc_area > span"
)
.text();
if (title != "") {
titleList.push(title + " // 날짜 : " + date3);
const link = $(li)
.find(
"div.keyword_box_wrap.api_ani_send > div.detail_box > div.dsc_area > a.name_link._foryou_trigger"
)
.attr("href");
linkList.push(link);
}
});
}
res.status(200).json({
titleitem: titleList,
linkitem: linkList,
});
})
.catch((err) => {
console.log(err);
});
}현재 2023년 3월 현재 네이버 블로그 목록은 인플루언서 참여 콘텐츠와 비인플루언서 콘텐츠로 구분되어 있어 공유하게 되었습니다. 웹 크롤링을 사용하면 대부분의 시간을 웹사이트를 분석하고 액세스 방법을 알아내는 데 사용합니다. 이 웹 사이트 크롤링 방법은 언제든지 변경될 수 있으며 매번 업데이트하려면 상당한 노력이 필요합니다.
위의 코드는 블로그 제목과 링크를 찾아 API에 배포합니다. 백엔드 기능을 실행해야 합니다. 이 사이트를 호스팅하고 다른 사용자가 사용할 수 있도록 할 수도 있습니다. 저만 이러면 CSR로 성능이 더 좋아지겠죠.
4. 네이버 블로그의 글자수와 제목이 포함된 문장 가져오기
블로그는 굵은 부분이나 제목 키워드가 문장의 핵심 문구로 포함된 것을 알아차렸다. 블로그를 해본 사람이라면 알 것이다. 제목에 들어가는 키워드는 내용의 문장을 요약하는 핵심 키워드입니다.
이를 염두에 두고 블로그 콘텐츠에서 볼드체나 제목 키워드가 포함된 문장을 요약하는 API 기능을 만들었습니다.
문자 수와 줄 수를 얻을 수 있는 간단한 함수를 포함했습니다. 원래는 그냥 개인용으로 쓰려고 했는데 호스팅을 할까말까 고민하다가 버셀로 웹호스팅을 해봤습니다.
https://marcus-blog-helper-3mfo.vercel.app/
마커스 블로그 도우미
분석은 구글링으로 부탁드립니다. * 웹 문서, 인플루언서 * 지식인 Copyright by marcus
마커스-블로그-도우미-3mfo.vercel.app
관련 검색어, 검색 수, 웹사이트 수와 같은 기능은 CSR을 염두에 두고 설계되었으므로 프로세스가 느릴 수도 있고 그렇지 않을 수도 있습니다. 나는 웹 호스팅 비용을 거의 지불하지 않기 때문에 여전히 실행 중입니다.
const accentData = ultData.find('b')
const textData = ultData.find('span')
accentData.map((i,data) => {
const aData = $(data).text().trim()
aData.replace(/ /g,"")
bArray.push(aData)
})
textData.map((i,data) => {
const tempText = $(data).text().trim()
tempText.replace(/ /g,"")
titleArray.forEach(tdata => {
if(tempText.includes(tdata)){
console.log(tempText)
textArray.push(tempText)
}
});
sum = sum + tempText.length
})
볼드와 문장을 분석하는 부분입니다. 네이버 블로그 상단에 올라온 글은 체류기간과 질적으로 우수했기 때문에 게재된 것입니다. 따라서 SEO 최적화의 핵심은 이 글의 분석입니다. 앞으로 SEO를 위해 다양한 도전을 해보려 합니다.
(함께 읽으면 좋은 글)
03/21/2023 – (프로그래밍_) – 네이버 블로그 SEO 프로젝트 – 개발계획, 기술
네이버 블로그 SEO 프로젝트 – 개발계획, 기술
네이버 블로그를 운영하면서 주제나 정보를 찾는 데 많은 어려움이 있었습니다. 그래서 네이버 블로그 SEO 웹사이트를 직접 구축할 계획입니다. 현재 이 웹사이트 서비스는 어떻습니까?
commmmetal.tistory.com
2023.02.27 – (programming_) – Node.js 데이터 파싱 1) Cheerio 설치 및 파싱
Node.js 데이터 파싱 1) Cheerio 설치 및 파싱
나는 종종 nodejs를 사용하여 데이터를 수집합니다. npm에는 많은 모듈이 있으며 npm으로 모듈을 쉽게 다운로드하여 사용할 수 있습니다. 이번에는 데이터 파싱으로 유명한 Cheerio
commmmetal.tistory.com