[nodeJS] 브라우저로 서버 일 시키기.

개발 환경.

 - Mac.

 - nodeJS.

 - Express.

 - PostgreSQL.

 

 - IntelliJ IDEA.

 

 - puppeteer

 - pg

 

---

 

기본적으로 express 서버를 세팅하고 켜는 것에 대해서는 이전에 올린 글을 참고하시기 바라며..

과연 내가 브라우저로 localhost:3000에 접속하면 어떻게 흘러가는지에 대해 알아보고자 합니다.

 

브라우저 주소창에 localhost:3000 을 입력한다는 것.

 - localhost는 127.0.0.1로 결국 자기 자신을 나타내는 것입니다.

 - 그 중에서 express 서버에 세팅된 3000번 포트로 접속을 하는 것 입니다. (서버 코드에서 수정가능.)

 - express 서버를 실행 (bin 폴더 안의 www 파일을 node로 실행)하면 3000번 포트가 열리면서

   localhost:3000 에 접속하게 됩니다.

 - 브라우저와에서 주소창에 입력한다는 것은 get 방식의 통신입니다.

 - 브라우저에서 get 방식으로 요청을 보내면 서버는 그에 걸맞는 html 파일을 보내줍니다.

 

글로 보기 힘드니 코드에서 찾아보도록 하겠습니다.

app.js 의 일부

처음에 localhost:3000으로 접속했으면 아무것도 없는 '/' 에 해당하게 됩니다.

그래서 routes 폴더의 index 파일로 연결됩니다.

 

자 프로젝트 파일에 위에서 나온 경로로 가보니 index.js 가 있습니다.

위의 app.js는 여기있는 index.js를 가리키고 있었습니다.

 

index.js 의 일부

index.js 중 일부에서 아까와 같은 '/' 상태가 보입니다. 그리고 제일 위에서 제가 언급했던 get이 보입니다.

주소창을 입력하면 기본적으로 get으로 요청이 갑니다.

그랬을 때 응답으로 index를 랜더링하라고 합니다.

뒤에도 보니 index 파일 안의 title을 'Main Page'로 정의하고 있습니다.

 

index.html 의 모습

네 뭐 원래 파일은 아니지만 이런식으로 되어 있습니다.

아까 정의되었던 title이 여기에 있습니다.

여기에 추가로 저는 버튼을 달았습니다.

크롤링을 하기 위해 생성했습니다.

여기서 중요한 것은 form태그에 method를 post로 했다는 겁니다.

 

 

서버를 실행하고 접속해보면 의도한대로 잘 보입니다.

이제 버튼을 누르면 post방식으로 서버에 전달이 될 것 입니다.

 

app.js 의 일부

아까는 get이였고 지금은 post기 때문에 차이가 있습니다.

아까 get이 있던 app.js로 가서 위의 코드를 추가해 줍니다.

이것은 post 방식일때 작동하며 똑같이 아무 입력 없이 포스트를 보내면

'/'에 해당하여 저 안의 코드가 실행되게 됩니다.

 

자 서버에 접속하고 버튼을 누르게 되면 짜잔 성공입니다.

의도한대로 abcd가 출력되었습니다.

그런데 콘솔로 찍은 gogo는 어디갔을까요 ?

 

서버 터미널 캡처

너무 필요한 부분만 보여서 이게 뭔가 하겠지만..

서버를 실행해둔 터미널에서 캡처한 것입니다.

여기서 알 수 있듯이 브라우저가 실행했다면 크롬 F12의 콘솔에 출력이 됬을 것 입니다.

하지만 서버가 돌아가고 있는 곳에서 확인 할 수 있었습니다.

 

간단하게 이야기 하자면 서버에는 "post로 요청이 들어오면 abcd 띄우고 gogo 외쳐!"라고 시켜놓고

브라우저를 통해서 서버에게 post로 요청을 보냅니다. 서버는 미리 설정된 대로 행동 할 뿐입니다.

 

 

이제 제가 하려고 했던 크롤링을 추가하겠습니다.

위와 똑같이 서버에게 주문을 해놓습니다.

"서버야 내가 post로 부르면 craw라는 함수 호출해주고 abcd 띄워주렴"

그리고 브라우저에서 버튼을 눌러서 서버를 부릅니다.

 

 

crawler.js 의 일부

제가 구현했던 것은 웹에서 버튼을 누르면 미리 세팅해놓은 사이트에 가서 DB에서 세팅 값을 불러오고 그 값으로 크롤링을 하는 것이였고 크롤링 후 데이터를 다시 DB에 저장하는 것이였습니다.

그것을 단지 귀찮지 않게 버튼 하나만 누르면 알아서 하도록 시키고 싶었습니다.

 

크롤링 중인 것은 브라우저에서는 보이는게 없지만 서버에서는 열심히 돌아가고 있답니다.

제가 크롤링을 준비하면서 axios, cheerio를 사용도 해보고 puppeteer을 사용해 보았지만

axios-cheerio 조합을 사용하는건 단순한 페이지 뿐이였고 복잡하거나 로그인하는 부분을 하기엔

무리가 조금 있었습니다. 다만 제가 puppeteer을 사용하다가 말았던 것은 클라이언트 단에서는

실행 할 수 없었기 때문이였습니다. 하지만 이제 클라이언트 단에서 실행하지 않아도 서버에게

시킬 수 있으니 문제 없이 다양한 크롤링을 할 수 있게 되었네요.