혀니 네이버 날씽 가져오깅

자바스크립트

by e7e 2023. 7. 28. 17:21

이 그른 일단 혀니님을 위한 글이라 다른 분들에겐 관심이 없을 수 있음을 경각심!

아래 예제는 서버프로그램 없이 AJAX로만으로도 테스트가 가능한데,

그렇게 테스트 하려 할 경우는 브라우져 플러그인 Cross-Origon을 설치하고

활성화 시킨 다음에 AJAX에서 바로 네이버 URL을 요청하면 된당.

(Cross-Origin 플러그인이 활성화되어 있는 경우 해킹될 수 있다하니,

꼭 사용시에만 활성화하고, 평상시에는 비활성화하여 놓도록 하장.

활성화 되어 있는 경우 daum이나 naver메일등이 제대로 동작하지 않을 수 있당)

실제 서비스의 경우 사용자에게 모두 브라우져 플러그인을 설치하라 요구할 수 없으닝.

아래와 같은 절차로 서버 사이드 프로그램이 필요해 진당.

아작스에서 네이버 바로 요청시 Cross-Origin(CORS) 문제를 서버 우회로 해결하기

위해서 아래 httpclient5 라이브러리를 추강 (딴거도 써도 됨!,요건 내가 좋아함)

pom.xml

<dependency>
    <groupId>org.apache.httpcomponents.client5</groupId>
    <artifactId>httpclient5</artifactId>
    <version>5.2.1</version>
</dependency>
<dependency>
    <groupId>org.apache.httpcomponents.client5</groupId>
    <artifactId>httpclient5-fluent</artifactId>
    <version>5.2.1</version>
</dependency>

아작스 요청을 받을 controller 소스 작성!(이름은 일단 내맘...)

HttpClientTest.java

package kr.pe.basic.controller;

import org.apache.hc.client5.http.fluent.Request;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@RequestMapping("/hyun")
public class HttpClientTest {
	
	@GetMapping("/weather")
	public String getWeather() {
		return "weather";  // weather.jsp롱
	}
	
    //weater.jsp 안 아작스에서 요청하는 URL
	@GetMapping(value="/naver", produces = "application/json;chaset=utf-8")
	@ResponseBody
	public String getWeatherInfo() throws Exception {
		return Request.get("https://weather.naver.com").execute().returnContent().asString();
	}
}

클라이언트 단 작성(이름은 내맘!)

weather.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<!DOCTYPE html>
<meta charset="UTF-8">
<div id="disp"></div>
<script>
const myDisp = document.querySelector("#disp");
let imgArr1,imgArr2;
function fGetWeather(){
    //let schURL = `https://weather.naver.com`;
    let schURL = "/basic/hyun/naver";

    let xhr = new XMLHttpRequest();
    xhr.open("get",schURL,true);

    xhr.onreadystatechange = ()=>{
        if(xhr.readyState == 4 && xhr.status == 200){
            let cont = xhr.responseText;
            console.log(cont);
            myDisp.innerHTML = "";

           // myDisp.innerHTML=cont;

            
            // 날씨 정보
            let startIndex = cont.indexOf("weather_area");
            let endIndex = startIndex;
            let content="";
            for(let i=1; i<=2;i++){
                endIndex = cont.indexOf("</div>",endIndex)+6;
              //  console.log("체킁:",cont.substring(startIndex+14,endIndex));
                content = cont.substring(startIndex+14,endIndex);
            }
            myDisp.innerHTML = content;

            // 위치정보
            startIndex = cont.indexOf("location_name")+15;
            endIndex = cont.indexOf("</strong>",startIndex);
            myDisp.innerHTML += "<div>" + cont.substring(startIndex,endIndex) + "</div>";
            
            // 위성사진1
            startIndex = cont.indexOf('["https://search.pstatic.net/common?');
            endIndex = cont.indexOf('"]',startIndex);
            imgArr1 = JSON.parse(cont.substring(startIndex,endIndex+2));
            console.log(imgArr1);
            myDisp.innerHTML += `<img id="img1" width=400 height=400 src="\${imgArr1[0]}">`;

            // 위성사진2
            startIndex = cont.indexOf('["https://search.pstatic.net/common?',endIndex);
            endIndex = cont.indexOf('"]',startIndex);
            imgArr2 = JSON.parse(cont.substring(startIndex,endIndex+2));
            console.log(imgArr2);
            myDisp.innerHTML += `<img  id="img2" width=400 height=400 src="\${imgArr2[0]}">`;
            imgRotate();
        }
    }
    xhr.send();
}
fGetWeather();

let pIndex1=0,pIndex2=0;
function imgRotate(){
     myDisp.querySelector("#img1").src=imgArr1[pIndex1];
     myDisp.querySelector("#img2").src=imgArr2[pIndex2];
     pIndex1++;
     if(pIndex1 > (imgArr1.length -1)) pIndex1 =0;
     pIndex2++;
     if(pIndex2 > (imgArr2.length -1)) pIndex2 =0;
    setTimeout(imgRotate,500);
}
</script>

테스통 결과

이거슨 일시적 편법이닝, 제대로 하려면 네이버 날씨API등을 사용하는 거시 좋당.

그거시 완벽하지 않음을 알지만, 그거시 가치가 있음도 안당.

삶에 원하지 않았던 페이지도 많지만, 그거시 필요했었음을 이젠 안당!

https://www.youtube.com/watch?v=Qzuehp-umF4

'자바스크립트' 카테고리의 다른 글

차트 그려 보아용 (chart.js) (0)	2023.09.04
노션에 등장 블록 에디터 (editor.js) (0)	2023.07.30
너 참 계산 자알 하여랑~ (1)	2023.07.28
Worker (Thread)사용 공아 달려랑! (0)	2023.07.27
어이없이 쉬운 별 삼각형 맹글깅 (0)	2023.07.22