웹 크롤링에 대해서

이번 프로젝트를 하면서 처음 웹크롤링이란걸 해봤는데

많은 삽질을 했고, 삽질을 하면서 배운 것들을 정리해 볼 예정이다

jsoup->selenium->dockerfile&chromium->결국 api호출

 

 

우리의 프로젝트가 로스트아크 커뮤니티인만큼

로스트아크의 계정정보를 불러오는 것이 중요했는데,

로스트아크 오픈api는 닉네임을 알면 캐릭터의 정보를 가져올 수 있지만,

내 캐릭터가 아닌 다른 사람의 캐릭터의 정보를 입력해도 정보를 가져올 수 있다.

즉, 내 계정의 캐릭터를 가져오기위해선

별도의 인증절차가 필요하다

 

 

그래서 참고한게 kloa라는 사이트의 인증방식이다

https://kloa.gg/

클로아

스토브에서 로그인하고 마이페이지로 가면

타임라인에 소개글을 적을 수 있는데,

kloa에서 발급해준 랜덤 코드를 소개글에 저장하고

마이페이지의 url주소를 입력하면 

자신의 로스트아크 계정을 불러올 수 있다

 

 

 

이 인증방식을 적용하려고 했는데,

우리 팀은 이 방법이 크롤링이라고 짐작했다

마이페이지의 url주소로 부터 소개글 값을 가져와

랜덤코드와 일치하면, 자신의 계정이라는 것이 인증되고,

이 url로 부터 로스트아크 캐릭터 정보를 가져오는 별도의 과정을 처리하는 것 같았다(이 방법을 알아내기가 어려웠다)

 

 

 

그래서 이 인증방식을 도입하기 위해 웹 크롤링을 적용해보았는데,

첫 번째로 시도한게 java의 jsoup라이브러리다

jsoup라이브러리를 사용하면 정적 웹페이지의 html을 가져올 수 있다

그래서 시도해봤는데 

왠걸

We're sorry but homepage doesn't work properly without Javascript enabled. Please enable it to continue.

라고 떴다

구글링하면서 User-agent가 없으면 저렇게 된다길래

User-agent도 모질라를 추가했는데도 해결이 되지 않았다

 

 

이건 네이버를 해본건데 잘 된다

그래서 네이버는 잘되는데 스토브는 안된다는거면

스토브에서 막아놨나?라고 생각이 들었다

그래서 불가능한건가라고 포기하려고 했다가

조금 더 검색을 해보니

 

 

 

정적컨텐츠와 동적컨텐츠를 구분하는 방법을 알려준 블로그가 있었다

f12를 누르고 톱니바퀴를 누른 후

Debugger>Disable Javascript를 클릭한 후

새로고침을 했을때 뜨는 것이 정적컨텐츠고

사라지는것이 동적컨텐츠라고 했다

즉, 이것을 통해 페이지가 정적인지 동적인지 구분할 수 있다고 했다

 

 

 

 

그래서 stove의 마이페이지에 시도를 해봤는데

옳다구나 

모든 컨텐츠가 사라지는 것으로 보아

이 사이트는 모든 컨텐츠를 동적으로 가져오는 동적 웹사이트라는 것을 알게 되었다

 

 

정적 웹사이트 크롤링은 jsoup으로 가능하지만,

동적 웹사이트 크롤링은 selenium과 크롬드라이버가 있어야지 가능하다고 했다

spring boot gradle에 selenium을 implement해주고,

크롬드라이버를 내 컴퓨터에 설치하고, 자바 코드내에서 지정을 해주니

스토브의 소개글을 크롤링하는데 성공하였다

 

우리가 결국 필요한건

로스트아크>전투정보실 페이지에서

대표캐릭터로 있는 캐릭터 이름

내 경우에 '노루세키'라는 텍스트만 가져오면

로스트아크 openapi에서 parameter로 건네주기만 하면

모든 캐릭터의 정보를 가져올 수 있다

로스트아크 openapi등록에 대한 과정은 다루지 않는다

 

 

그러면 이거를 어떻게 가져올까에 대한 과정이 쉽지 않았다

이 부분은 감사하게도 팀원분이 찾아냈고, 과정을 정리해보겠다

방법은 소스코드를 뜯어보는 것이었다

 

 

 

 

아까 위에서도 보면 알 수 있듯이, 전투정보실에 들어가면 나의 캐릭터이름을 가져올 수 있는데,

자유게시판 페이지에서 data-url을 보면 전투정보실에 대한  링크가 있다

/Profile/Member?id=인코딩된 문자

이 data-url을 기억해두자

 

 

그리고 소스코드에서 data-url을 검색해보니

전투정보실의 링크를 가져오는 부분이 있는데,

encodeURIComponent(encryptMemberNo)부분이 있다

그러면 다시 encryptMemberNo를 검색해보자

 

 

 

 

/board/IscharacterList라는 api를 통해 encrypMemberNo를 불러 올 수 있고,

request data로는 memberNo를 주는데

이 memberNo가 스토브 마이페이지의 맨 뒤에 숫자를 의미한다

 

 

 

정리해보자

1. 스토브에 로그인하면 memberNo를 알 수 있다.

2. 이 memberNo를 통해 /board/IscharacterList를 호출해 encryptMemberNo를 얻어낸다.

3. http:/lostark.game.onstove.com//Profile/Member?id= 여기에 encryptMemberNo를 넣는다.

4. 스토브계정과 연동된 자신의 전투정보실 페이지가 뜬다

5. 이 전투정보실 페이지를 크롤링해서 자신의 대표캐릭터 닉네임을 얻어낸다.

6. 로스트아크 openapi를 호출해 캐릭터 목록을 불러올 수 있다

 

 

정말 복잡하다

이걸 알아낸 팀원이 대단하다고 느껴진다

나보고 하라고했으면 못했을 거다

팀원분의 활약으로 알게 된건

현재 페이지의 element만 뜯어 볼 수 있는 줄 알았는데,

소스코드에서도 정보를 얻어 낼 수 있다는 것이다

 

 

이러한 로직을 팀원분의 파이썬코드로 정리해주셔서 이해하기 쉬웠지만,

결국 인증서버는 내가 spring boot로 만들기 때문에

java코드로 다시 구현하였고,

셀레니움을 사용해 최종적으로 전투정보실의 닉네임을 얻어내

캐릭터목록을 가져오는데 성공했다

(이 과정에서 삽질 스노우볼이 생겼던 것 같다)

나중에 알고보니 전투정보실 페이지는 셀레니움을 사용하지 않아도

크롤링이 가능하다 

 

 

 

 

이로써 로컬에서는 스토브계정으로부터 로스트아크 캐릭터를 조회하는데 성공했지만,

배포과정에서 큰 문제가 생겼다

바로 셀레니움때문인데, 

엄밀히 말하면 셀레니움을 사용하기위해 필요한 크롬드라이버때문이다

이 파일은 exe파일로 

설치가 되어있어야 셀레니움이 실행이 가능하다

 

로컬에서는 잘 되지만,

배포는 dockerfile을 통한 도커 이미징화를 이용했는데,

처음엔 단순히 프로젝트 파일에 저장해놓고 java/resources/chrome/chromedriver.exe

이런식으로 찾으면 되겠다고 생각했지만,

도커 빌드를 하는 순간 별도의 설치가 필요하다는 것을 알게되었다

 

여기서부터는 따로 캡쳐해둔게 없는데,

처음 도커파일로 빌드할때도 

도커는 alpine linux를 사용해 다른 블로그에서 나온

우분투용 설치 명령어가 안먹히고 달랐고,

alpine linux java11용 크로미움, 크롬드라이버 설치를 따라해보았는데

경로 인식을 자꾸 못하는 문제가 생겼다

결국 셀레니움을 씀으로 인해 배포과정에서 난항을 겪고

해결하고있지 못하다

 

 

 

팀원분이 고맙게도

https://api.onstove.com/tm/v1/preferences/member_number 라는 api를 호출하면

스토브의 소개글을 가져올 수 있다는 것을 알아내 주었다

 

이를 통해

스토브 사이트 크롤링을 셀레니움을 쓰지 않고,

후에 알게된 전투정보실 페이지는 원래 셀레니움을 쓰지 않아도 되는거여서

그냥 httpurlconnection을 통해 html을 받아와서 파싱을 통해 닉네임을 얻어오는 방식으로 바꾸었다