Miracle Morning, LHWN

네이버 블로그를 크롤링하는 과정에서 cheerio 로는 크롤링이 제한되는 상황이 나왔다. ​ 첫 로딩된 HTML 에는 해당 element 가 display:none; 상태로 있었고, 특정 버튼을 눌러야 해당 element 가 나타났다. 다만, cheerio 를 이용한 크롤링은 DOM (Document Object Model: 웹 페이지에 대한 인터페이스) 이 계속 변하는 SPA (Single Page Application: 단일 페이지 어플리케이션) 에서는 사용할 수가 없어 puppeteer 를 추가적으로 사용하였다. cheerio 와 puppeteer 의 차이 cheerio 는 jQuery 를 이용해서 웹 페이지를 parsing 하고, 데이터 구조의 결과물을 탐색 및 조작할 수 있도록 도와주는 Node..

axios 와 cheerio 를 사용해서 내 블로그를 Crawling 했다. Axios JavaScript 를 이용해 AJAX Request 를 할 수 있는 라이브러리이다. (AJAX : Asynchronous JavaScript and XML, 비동기적으로 JSON 이나 XML 등의 데이터를 받을 수 있는 방법) cheerio jQuery 처럼 DOM Selector 기능을 제공한다. axios 로 받은 HTML 데이터에서 내가 크롤링할 정보만을 추출하는 곳에 사용할 것이다. exports.crawlBlog = async (ctx) => { let htmlData = []; // axios 를 활용해서 AJAX로 HTML 문서를 가져온다. const getHTML = () => { try { retur..

프로젝트에 비동기 함수를 호출하면서 그 State 를 관리하기 위해 redux-pender 를 사용했는데, onSuccess 에서 multiple actions 하는 과정에서 잘못된 형식을 사용하는 바람에 ......... redux-pender Redux pender is a middleware that helps you to manage asynchronous actions based on promise. It comes with useful tools that help you to handle this even more easier. ​ 즉, Promise 기반의 비동기 actions 를 좀 더 편하게 관리하게 해주는 middleware 이다. onSuccess 시 하나의 action const G..

e.preventDefault() 와 e.stopPropagation() 일단 이 두 개의 코드 모두 이벤트 관련 동작에서 많이 사용된다. e.preventDefault() HTML 에서 태그나 는 고유의 동작을 가진다. 예를 들어, 페이지를 이동시킨다거나 form 안에 있는 데이터 등을 전송한다. 이때, e.preventDefault() 는 그러한 동작을 중단시킨다. // index.html LHWN's BLOG 위에서 LHWN's BLOG 를 클릭하면 내 블로그로 이동될 것이다. // index.html LHWN's BLOG // preventDefault.js $("a").click(function(e)) { e.preventDefault(); alert("stop to move"); } 만일 위 ..

# 화살표 함수 (Arrow Function) 형식에서 라이프 사이클 함수 (Life Cycle) 을 사용할 필요가 없는 이유 > 함수가 () => {} 작업을 수행할 때 마다 새로운 함수 객체를 만들어내는데, 이런식으로 작동하면 동일한 요소의 여러 복사본을 렌더링할 때 브라우저가 동일한 기능을 재사용하는 것을 방지하여 JavaScript 엔진에 의한 최적화를 더 어렵게 만든다. ​ 이로 인해 성능(Performance) 문제가 발생하게 되어, React 의 Life Cycle 메서드에는 화살표 함수를 사용하지 않는 것이 좋다.

CORS (Cross-Origin Resource Sharing) 클라이언트와 서버가 포트가 다른 상태에서 클라이언트 측에서 서버 측으로 무언가 요청했을 때, 브라우저가 보안상의 이유로 요청을 차단하는 문제이다. ​ 가령, 클라이언트의 포트가 3000이고, 서버의 포트가 4000으로 열려있으면 보안상의 이유로 차단된다. 이 문제를 해결할 수 있는 방법 중의 하나가 '프록시 (Proxy)' 이다. 프록시(Proxy)란? 프록시(Proxy) 라는 것은 사전적 의미로 해석하면 '대리, 대리인'이라는 의미를 갖고 있다. 프로토콜에 있어서는 '대리응답'이라는 개념으로 이해하면 될 것 같다. 111.111.111.111 이라는 IP 를 가진 유저가 인터넷에 어떠한 요청을 하게 되는 경우에 IP 가 전달되는데, 인터..

yarn start 명령으로 프로젝트를 시작하려하면 해당 오류가 빈번하게 발생한다... ~ yarn start /bin/sh: react-scripts: command not found 그럼 여기서 react-scripts 뭘까 ​ ※react-scripts 는 Node.js 의 모듈로서 create-react-app 으로 프로젝트를 생성할 때 함께 설치되는 라이브러리로, (create-react-app 은 react 프로젝트를 간편하고 빠르게 실행하기 위해 사용한다.) create-react-app 만을 위해 만들어진 모듈이다. ​ 원래 내가 npm 대신 사용하는 yarn 에는 'start' 라는 명령이 없다. (yarn run 이나 npm start 가 맞음) 어쨌든, yarn start 라는 명령을..

데이터 조회 (GET) # 데이터베이스의 데이터를 조회할 때에는 find() 메서드를 사용한다. exports.list = async (ctx) => { let books; try { books = await Book.find().exec(); } catch (e) { return ctx.throw(500, e); } ctx.body = books; }; ※ let 이나 const 는 scope 가 블록단위이다. books = await Book.find().exec(); .exec() 함수를 뒤에 붙여주어야 실제로 데이터베이스에 요청이 이루어진다. 이때의 반환 값은 Promise 이기 때문에 await 을 사용할 수 있다. ​ # 이번에는 여러 옵션을 주어 최근에 생성된 3개의 데이터만 조회해보자. (..

Mongoose 란 Mongoose 는 MongoDB 기반의 ODM(Object Data Mapping) Node.js 전용 라이브러리이다. ODM은 쉽게 말해 데이터베이스 객체지향 프로그래밍 언어 사이에 호환되지 않는 데이터를 변환해주는 프로그래밍 기법이다. 즉, MongoDB 에 있는 데이터를 우리의 어플리케이션에서 JavaScript 객체로 사용할 수 있도록 해준다. ​ ※ 프로젝트 생성 시 npm init 을 하면 package.json 이 생성된다. 프로젝트에 사용한 패키지들 # express : 웹 프레임워크 # body-parser : 데이터 처리 미들웨어 (req.body 를 통해 요청에 접근할 수 있게 해준다.) # mongoose : MongoDB 연동 라이브러리 프로젝트 구조 # mo..

npm과 yarn의 차이점 # npm : Node Package Manager라는 프로그램으로, 자바스크립트 라이브러리를 설치하고, 버전을 관리한다. npm은 node_modules라는 폴더에 라이브러리를 내려받아 저장하고, package.json이라는 파일에 설치된 라이브러리의 정보를 적어서 저장한다. (라이브러리 명세를 적는 이유는 라이브러리의 용량이 크기 때문에 명세를 통해서 다운받을 수 있도록 하기 위함) ​ # yarn : npm의 동작방식과 유사하고, 페이스북에서 npm의 단점을 보완하여 성능과 속도를 개선한 라이브러리 관리도구이다. ​ → 즉, npm은 패키지가 설치될 때 자동으로 코드와 의존성을 실행할 수 있도록 허용했는데, 이 특징은 편리하지만 안정성의 위험도가 증가한다. 반면 yarn ..