프론트에 Vuejs를 사용해 사용자가 키워드를 넣어 크롤링 할수 있게 구현해보려고 한다.


이미 Vuejs 기본셋팅하는 방법을 포스팅한 적이 있다.

https://shlee0882.tistory.com/282?category=903333


해당 포스팅을 참고하여  Vuejs 프로젝트 생성하고 온다.



검색 엔진 ID와 API_KEY를 gitignore에 추가하기 위해 따로 API_DATA.js 파일을 뺐다.


Home.vue에는 구글키워드 이미지 크롤링 텍스트와 ImageList 컴포넌트를 갖고 있다.


사용한 오픈소스는

파싱을 위한 url, js를 쉽게 쓸수 있게 도와주는 jquery, 이미지 get을 위한 axios

zip파일 생성 및 체크를 위한 JSZip, JSZipUtils 을 사용했다.


구글이미지를 크롤링하는 js코드가 구현되어 있고 크롤링 진행상황에 대한 progress bar가 추가 되었다.

또한 수집된 url이 리스트형태로 텍스트 출력되는 것과 zip파일로 사용자에게 다운을 제공한다.

그 전 포스팅과 달라진 점은 fs을 사용하지 않는다는 것이다.


프론트에서는 fs를 사용할 수 없어 이미지 api로 json 데이터로 response 받으면

이미지 url을 axios request하여 이미지 데이터를 blob 구조로 받아와 이미지 리스트를 만들고

이미지 리스트를 zip파일로 묶어서 사용자에게 반환한다.


효율적인 크롤링과 acess-control-allow-origin 문제 해결을 위해 

크롬 extention에서 간단한 플러그인을 설치해준다.





https://github.com/shlee0882/vuejs-nodejs-google-image-crawling


배포된 url로 들어가 테스트 해본다.

크롤링이 잘되어 zip파일로 이미지를 다운받아지는 것을 확인 할 수 있다.







마지막으로 해당 소스의 배포된 url과 github repository를 올린다.


클라이언트


https://github.com/shlee0882/vuejs-nodejs-google-image-crawling


https://shlee0882.github.io/vuejs-nodejs-google-image-crawling/#/


서버쪽 


https://github.com/shlee0882/node-crawling-google-image

저작자표시

'전체 > Vuejs' 카테고리의 다른 글

구글 검색엔진 API, Node js, Vue js를 사용하여 이미지 크롤링하기 - 1  (4) 2020.10.18
Vue js와 Node js 사용해보기 - 핵심 2  (0) 2020.09.27
Vue js와 Node js 사용해보기 - 핵심 1  (0) 2020.09.27


구글 검색엔진 API, Node js, Vue js를 활용하여 간단하게 이미지 크롤링하는 프로젝트를 만들어 보려고 한다.



본인은 구글 이미지를 크롤링 할 수 있는 오픈소스가 있는지 검색하였고

github에서 google-images라는 오픈소스를 발견하여 npm을 이용하여 해당 오픈소스를 설치하여 활용하였다.



1. 일단 제일 먼저 Nodejs프로젝트를 생성해보자. 



폴더를 하나 만들고 cmd에서 해당폴더의 경로로 이동 후 npm init을 한다.




그럼 package.json이 생성되고 해당 폴더경로로 VSC(visual studio code)로 오픈한다.



2. VSC에서 TERMINAL창을 열고 해당 위치에서 필요한 package를 설치한다.





3. 구글 커스텀 검색 엔진을 생성한다.


https://cse.google.com/cse


들어가서 간단하게 구글 검색엔진을 생성할 수 있고 

생성하면 검색엔진 ID가 나오게 된다.


이미지 검색 부분을 가능하게 설정해주고

해당 검색엔진 ID를 보관한다.





4. 구글 개발자 콘솔로 접속하여 프로젝트를 생성 및 연결하기


https://console.developers.google.com/


구글 개발자 콘솔로 접속하여 프로젝트를 생성한다.

본인은 googleSearchApiTest라는 프로젝트를 생성했다. 




프로젝트 생성 이후 라이브러리로 이동하여 custom search api를 검색하여 api 사용해보기를 설정한다.




그다음 사용자 인증정보 탭으로 이동 후 API 키를 하나 생성한다.


여기서 생성한 API_KEY를 보관한다.




우리는 총 2개의 값 (검색엔진 ID와 API_KEY) 를 갖게 되었다.


오픈소스 google-images 레퍼런스

https://github.com/vadimdemedes/google-images



5. 다시 프로젝트로 돌아온다.



getGoogleImg.js라는 자바스크립트 파일을 하나 생성한다.



6. 구글검색엔진으로 이미지 크롤링 하기 위한 코드를 작성한다.


getGoogleImg.js 파일에 해당 코드를 작성한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
const GoogleImages = require('google-images');
let url = require('url');
let request = require('request');
const fs = require('fs');
var zip = new require('node-zip')();
 
// ** 8라인 본인의 검색엔진 ID와 API_KEY로 교체 필수
const client = new GoogleImages('검색엔진 ID', 'API_KEY');
 
const keyWord = "조현영";
const pageStVal = 1;
const pageEndVal = 201;
 
let saveDir = __dirname + "/"+keyWord;
 
if(!fs.existsSync(saveDir)){
    fs.mkdirSync(saveDir);
}
 
// 이미지 검색
const searchFunc = (pageStVal) =>{
    client.search(keyWord,  {page: pageStVal, size: 'large'}).then(images => {
        images.forEach(img => {
            console.log(img);
            let filePath = url.parse(img.url).pathname;
            let newFilePath = filePath.replace(/[^a-zA-Z0-8\.]+/g, '_');
            let localFilePath = saveDir + "/" + newFilePath;
            let pattern = /\.(jpg|png|gif)\b/; 
            
            // 파일길이가 200 미만이고 이미지 파일인지 체크
            if(newFilePath.length<200 && pattern.test(newFilePath)){
                try {
                    request.get(img.url).on('error', function(err) {
                        console.log('request error1:', err);
                    }).pipe(
                        fs.createWriteStream(localFilePath).on('close', function() {})
                    );
                } catch (err) {
                    console.log('request error2:', err);
                }
            };
        });
        compareTwoVal(pageStVal, pageEndVal);
    }).catch(error => {
        console.log(">>>>>>>>>>>>>>>>>>>"+error);
        console.log("모든 이미지를 수집했습니다.");
        makeImgToZip();
        return;
    });
}
 
// 이미지 압축파일 만들기
const makeImgToZip = () =>{
    var zipName = keyWord+".zip";
    var someDir = fs.readdirSync(__dirname+"/"+keyWord);
    var newZipFolder = zip.folder(keyWord);
    
    for(var i = 0; i < someDir.length; i++){
        newZipFolder.file(someDir[i], fs.readFileSync(__dirname+"/"+keyWord+"/"+someDir[i]),{base64:true});
    }
    var data = zip.generate({base64:false,compression:'DEFLATE'}); 
    fs.writeFile(__dirname +"/"+ zipName, data, 'binary', function(err){
        if(err){
            console.log(err);
        }
    });
}
 
// 페이징 검색
const compareTwoVal = (pageStVal, pageEndVal) =>{
    if(pageStVal<=pageEndVal){
        setTimeout(function() {
            pageStVal += 10;
            console.log("pageStVal: >>>>>>>>"+pageStVal);
            searchFunc(pageStVal);
        }, 500);
    }else{
        console.log("모든 이미지를 수집했습니다.");
        makeImgToZip();
        return;
    }
}
 
// 이미지 수집 시작
searchFunc(pageStVal);
cs



코드를 작성 및 저장 후 

termial에서 node getGoogleImg.js 로 실행한다.





정상적으로 동작한다면 

크롤링한 이미지 데이터를 json형태로 return받게 된다.


이제 이 많은 데이터가 

키워드의 폴더 하위로 로컬컴퓨터에 저장하게 되고 zip파일도 만든다.


레인보우 조현영의 이미지 데이터가 잘 크롤링 된 것을 확인 할 수 있다. 






Nodejs로 크롤링 테스트가 완료되었으니


프론트에 Vuejs를 사용해 사용자가 키워드를 넣어 크롤링 할수 있게 구현해보자.


[수정된 코드 github url]


https://github.com/shlee0882/node-crawling-google-image


저작자표시

'전체 > Vuejs' 카테고리의 다른 글

구글 검색엔진 API, Node js, Vue js를 사용하여 이미지 크롤링하기 - 2  (2) 2020.10.18
Vue js와 Node js 사용해보기 - 핵심 2  (0) 2020.09.27
Vue js와 Node js 사용해보기 - 핵심 1  (0) 2020.09.27


Vue js와 Node js 사용해보기 - 핵심 1 을 이어서 내용을 진행하겠다.

1편 ( https://shlee0882.tistory.com/282?category=797808 )


visual studio code를 실행하여 2개의 파일을 수정할 것이다.


1. src/views/Home.vue



[Home.vue]


17라인에 HelloWorld를 다시 21라인에서 hello-world 컴포넌트로 재정의한다.

3라인에 hello-world 태그로 들어가고 HelloWorld.vue 파일에

바인딩 될 데이터를 셋팅해주고 있다


23라인에 초기 데이터를 선언 및 초기화해주고

30라인에서는 계산된 결과값을 가져오고

35라인에서는 뷰가 생성될때 시작되는 함수이다.


2. src/components/HelloWorld.vue



[HelloWorld.vue]


13라인 props에서 부모에게 받은 바인딩 된 데이터를 어떻게 받아올지 선언하고

받아온 데이터를 3~5라인에서 출력해주고 있다.


6라인에 changeAddress 클릭 이벤트가 있는데

21라인에 부모의 이벤트를 받는 $emit을 사용해 부모의 change-address를 찾아가 데이터를 전달해준다.




위 두 파일을 수정하여 띄워보면


라우팅에 따라 localhost:8080/, localhost:8080/about 에 다른 페이지가 출력되는 것을 확인 할 수 있다.




위 실습을 통해 Vue js에서 많이 사용하는 아래 항목들에 대해 


- data-bind

- on-click

- props

- components

- data()

- computed

- created()

- methods

- $emit


알아 볼 수 있게 되었다.



마지막으로 해당 소스와 배포된 URL을 추가한다.


https://shlee0882.github.io/vuejs-nodejs-basic-setting


https://github.com/shlee0882/vuejs-nodejs-basic-setting









저작자표시

'전체 > Vuejs' 카테고리의 다른 글

구글 검색엔진 API, Node js, Vue js를 사용하여 이미지 크롤링하기 - 2  (2) 2020.10.18
구글 검색엔진 API, Node js, Vue js를 사용하여 이미지 크롤링하기 - 1  (4) 2020.10.18
Vue js와 Node js 사용해보기 - 핵심 1  (0) 2020.09.27

vue js와 node js를 활용하여 vue js의 핵심 개념을 정리해 보려고 한다.


1. nodejs를 설치


https://nodejs.org/ko/download/



2. node js 프로젝트 생성


node js 프로젝트 폴더 생성 한다.

본인은 vueJs_nodeJs 라는 폴더로 생성하였다.

cmd로 생성한 프로젝트 경로로 진입한다.


아래 명령어를 입력하여 설치한다.


1
npm install -g @vue/cli
cs



위와 같이 설치가 완료되면 

아래 명령어를 입력한다.


1
vue create client
cs


위와 같이 명령어를 치면 선택할수 있는 항목이 주어진다.

Vue 버전을 선택할수도 있고 직접 커스텀하게 설정할 수 도 있다.

Manually select features 선택한다.



스페이스를 눌러 Babel, Router, Linter / Formatter 를 선택하고 엔터를 친다.

Babel 자바스크립트 컴파일러 설치해주고

Router 라우팅, linter는 코딩스타일 문법체크 정도로 생각할 수 있다.

여기서 취향대로 빼거나 추가할 수 있다.



라우터에 대한 히스토리 모드는 Y를 입력후 엔터를 친다.

히스토리 모드를 N으로 입력한다면 경로에 /#/이 붙는 현상이 발생한다.



Lint는 선택사항이라 아무거나 해도 된다.

ESLint + Airbnb config 설정을 선택한다.



Lint에 대한 설정 2개를 모두 선택한다.



config에 관한 설정을 in package.json 에 두겠다는 것이다.



다음 프로젝트에 이 설정 저장 N으로 설정한다.



설치가 완료되면 다음과 같이 뜨게 된다.

cd client를 하고 npm run serve를 한다.



vue js기반의 node js서버가 띄워지게 되었다.

해당 서버가 잘 띄워 졌는지 확인해보자.



멋지게 뜬것을 확인 할 수 있었다.


이제 코드를 봐야하므로 visual studio code를 실행하여 프로젝트 구조를 살펴본다.


만약 eslint를 설정을 해제하고 싶다면 package.json 위치와 같은 경로에 

.eslintignore 파일을 생성 후 해제하고 싶은 소스 경로를 명시해준다.



이제 이 설정을 가지고 vuejs를 실습하고 테스트 해보겠다.


2편 ( https://shlee0882.tistory.com/283?category=797808 )

저작자표시

'전체 > Vuejs' 카테고리의 다른 글

구글 검색엔진 API, Node js, Vue js를 사용하여 이미지 크롤링하기 - 2  (2) 2020.10.18
구글 검색엔진 API, Node js, Vue js를 사용하여 이미지 크롤링하기 - 1  (4) 2020.10.18
Vue js와 Node js 사용해보기 - 핵심 2  (0) 2020.09.27

+ Recent posts

티스토리툴바