개발자 도구에서 자바스크립트 하기
티스토리 블로그 제목 추출 따라해보기
자바스크립트는 인기가 많은 언어이다. PYPL index(Google에서 언어가 검색되는 빈도를 분석하여 결정하는 순위)에 따르면 자바스크립트는 파이썬(Python), 자바(JAVA) 다음으로 인기 있는 코딩 언어이다.(※자바(JAVA)와 자바스크립트(Javascript)는 인도와 인도네시아 만큼이나 다르다)
PYPL Index자바스크립트는 1995년 브렌던 아이크(Brendan Eich)가 만든 프로그래밍 언어로써 대화형 웹페이지를 만들 수 있다.
자바스크립트는 확장자가 js인 파일 형태로 작성될 수도 있고 html 문서 내부에서 사용될 수 있다. html 내부에서 사용될 때는 <script>자바스크립트 코드</script> 또는 <script type="text/javascript">자바스크립트 코드</script>로 쓰인다. script 태그는 자바스크립트를 쓸 수 있게 해주는 태그이다.
이렇게 html 내부에 자바스크립트를 써서 html 문서를 브라우저에서 실행시켜서 자바스크립트 실행을 볼 수도 있지만 개발자 도구에서 직접 코드를 쓰고 결과를 확인해 볼 수 있다.
개발자 도구에서 자바스크립트 사용하기
먼저 PC에서 크롬 브라우저를 열고 F12를 눌러 개발자 도구를 연다. 화면 우측 또는 아래에 빨간색 박스에 있는 것처럼 개발자 도구가 열린다.
상단에 여러 가지 탭(tab)이 있다. Elements, Console, Sources, Network 등등. 이 중 Console 탭을 클릭한다.
콘솔(Console) 탭에 들어가면 아무것도 안 보이고 > 에 커서만 깜박거린다.
여기서 자바스크립트 코드를 실행시켜볼 수 있다. 여기에 javascript 코드를 넣어본다.
alert('실행되었음')
이렇게 써보고 엔터를 누르면,
위 이미지처럼 경고창이 실행된다. alert는 경고창을 실행하는 코드로 () 안의 내용을 경고창으로 출력한다. 좀 더 복잡한 구구단을 출력해보자 2단을 출력해보는 자바스크립트 코드는 다음과 같다.
for (var i = 1; i < 10; i++){
console.log("2 * " + i + " = " + 2 * i)
}
코드를 실행하면,
이렇게 구구단 2단이 출력된다.
간단한 자바스크립트 코드는 개발자도구 콘솔 탭에서 실행해서 테스트해볼 수 있다. 또한, 현재 열린 웹사이트에서 자바스크립트 관련 오류도 여기 콘솔 탭에서 확인할 수 있다.
할 얘기는 끝이지만, 이왕 개발자도구 콘솔 탭을 열어본 김에 재밌는 거 하나 해보도록 하자.
티스토리 블로그 제목 및 주소 추출하기
자바스크립트를 이용해서 현재 창에 열린 티스토리의 제목과 주소(URL)를 출력해보도록 하자. 여기에서 자바스크립트 문법을 가르치려는 게 아니고 그냥 한번 따라 해 보라는 취지이다.
먼저 크롬 브라우저를 열고 티스토리 블로그 주소를 입력한다. 대신 주소 끝에 /m을 붙여서 모바일 웹으로 접속한다. 나는 티스토리 공지 블로그(https://notice.tistory.com)로 해보겠다. 주소창에 티스토리 주소/m 이라고 입력한다. 나의 경우는 https://notice.tistory.com/m 이렇게 열었다. 본인의 블로그에 /m 만 붙여서 열어도 좋다. 그리고 F12를 눌러 개발자도구로 들어간 다음, 콘솔(Console) 탭을 선택한다.
m 주소로 접속한 티스토리 공지 블로그이제 제목과 URL을 추출하기 위해서는 티스토리 블로그를 원하는 만큼 아래로 스크롤해서 페이지를 연다. 전체 제목을 추출하고 싶다면 끝까지 아래로 스크롤을 한다. 내가 하려는 건 스크롤해서 보이는 만큼 제목과 URL을 추출하는 것이다.
여기까지 스크롤해 보았다.다음, 아래 코드를 복사 붙여 넣기로 console 탭에 넣고 엔터를 친다.
var ul = document.querySelectorAll("ul.list_post");
var text = '';
var count = 0;
for(f=0;f<2;f++){
var posting = ul[f].getElementsByClassName("tit_blog");
var url = ul[f].getElementsByTagName("a");
for(i=0;i<posting.length;i++){
text += posting[i].innerHTML+" "+url[i].href.replace("m/","")+"\n";
count += 1;
}
}
console.log(text);
console.log(count+'개의 글을 복사했습니다.');
이 코드의 결과는 다음과 같이 보인다.
내 티스토리 블로그의 제목과 url을 모조리 뽑고 싶을 때 이렇게 간단히 자바스크립트 코드를 이용해 손쉽게 할 수 있다.
물론 더 쉽게 할 수 있는 방법은 티스워드(tisword.com)에서 너의 티스토리가 이미 이 기능을 제공하고 있으므로 무료로 내 블로그 제목을 엑셀로 받아볼 수 있다.
오늘 이 글을 통해 자바스크립트를 한 번씩 경험해볼 수 있었으면 좋겠다.
