Dev-dotoli TIL

inf 9



News

demo5.html



browser 개발자 콘솔에서 코드를 작성, 필요로 하는 정보 띄우기


  1. WEBpage내의 제목, 날짜, 작성자, 본문요소를 추출
    innerText, cloneNode로 추출한 요소를 변수에 담아 확인

    innerText: text를 추출
    cloneNode: 그림, 표 등 다양한 서식때문에 DOM tree가 깊음
    따라서 동일한 Node를 다 복제하기 위해 사용

    • 제목
    const title = document.querySelector(".tit").innerText;
    • 날짜
    const timeStamp = document.querySelector(".date").innerText;
    • 작성자
    const reporter = document.querySelector(".writer").innerText;
    • 본문
    const content = document.querySelector(".cont").cloneNode(true);



  1. 추출한 정보를 담을 element / 구조 생성

    • creatElement로 element생성 후 담기

      const root = document.createElement("html");
// root
//: <html></html>

    • WEBpage 교체

      document.replaceChild(root, document.documentElement);
//기존의 화면을 모두 리셋​

    • 새로운 구조를 생성
      .join : 배열의 모든 요소를 연결 하나의 문자열로 만듦

      root.innerHTML = [
  "<head>",
  '<meta charset="utf-8">',
  '<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">',
  "</head>",
  "<body>",
  "<article>",
  "</article>",
  "</body>",
].join("");

root;
//root로 만들어진 elements확인 가능

    • 본문담기위해 변수만들기

      const article = document.querySelector("article");
//생성된 객체 article에 method를 사용할 수 있음

    • 제목 담기

      article.insertAdjacentHTML("afterbegin", `<h1>${title}</h1>`);
// 'afterbegin'의 역할은?
// 타겟 element의 다음(자식)에 생성
// 시작tag뒤 자식요소로 만든다는 뜻

    • 날짜 담기

      article.insertAdjacentHTML("afterbegin", `<p>${timeStamp}</p>`);

    • 작성자 담기

      article.insertAdjacentHTML("afterbegin", `<p>${reporter}</p>`);

    • 본문 담기

      article.append(content);



  1. css로 UI다듬기

    • style 요소를 담을 변수 생성

      const style = document.createElement("style");
// style
//: <style></style>

    • style 주입

      style.innerHTML = `@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Nanum+Gothic&display=swap');
    body{
    diplay: flex;
    flex-direction: column;
    align-item: center;
    margin-top: 10px;
    margin-bottom: 60vh;
    text-align: center;
    font-family: 'Nanum Gothic', serif;
    }
    article {
    width: 640px;
    text-align: justyfy;
    }`;
// style
// style에 담긴 내용 확인

    • article에 style 담기

      document.body.append(style);

userscript로 영속성 유지

  1. userscript header 설정

    // @name         just-news-PoC
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  view news only
// @author       You
// @match        https://mediahub.seoul.go.kr/archives/*
    (page에 *를 붙여서 어떤 number의 기사에도 match하도록 설정)

// @icon         https://www.google.com/s2/favicons?sz=64&domain=go.kr
// @run-at       document-end
    (해당 script를 언제 실행할지 : DOM lodidng이 완료 되었을 때 실행)

// @exclude      *?just-news=false
    (include 혹은 match에 의해 포함된 url중에서
     *just-news = false일 때는 실행 시키지 않음)

// @grant        none

  2. url의 구조?

    http://mediahub.seoul.go.kr/archives/1280826?just_news=false

protocol: http
= 통신방법 규칙 표기 : HTML을 주고 받을 수 있는 protocol

domain: mediahub.seoul.go.kr
= network상의 pc주소 : 국가, 기관, domain이름, host의 정보가 기입

file path & file name: /archives/1280826
= file의 경로, 이름 : archives folder에 1280826이라는 file

parameter: ?just_news=false
= parameter의 이름, 값 : ~/archives/1280826 라는 page를 보여줄 때
  just_news라는 parameter 값을 false로 설정하고 보여주겠다는 의미

  3. script 작성

    영속성 적용은 세부적으로 달라진 url때문에 적용 안됨 필요한 부분 혼자서 해보는 정도로 마무리


  • ‘코딩공부를 했다’라기보단 실생활에서 쓸 수 있는
    유용한 트릭을 배운 것 같은 느낌
    하지만 너무 재밌음


다른 site에도 적용, 광고제거

만든 script 배포