Miracle Morning, LHWN

라우팅 # 라우팅 : 웹 페이지 간의 이동 방법을 말한다. SPA (Single Page Application)에서 주로 사용하고 있다. → 화면 간의 전환이 매끄럽다. → 어플리케이션 사용자 경험을 향상시킬 수 있다. → Vue 뿐만 아니라 React, Angular 에서도 모두 라우팅을 이용하여 화면을 전환하고 있다. ​ ※ SPA (Single Page Application) : 페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라, 미리 해당 페이지들을 받아 놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 어플리케이션 뷰 라우터 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리이다. 태그 설명 페이지 이동 태그이다. 화면에..

컴포넌트 간 통신과 유효범위 뷰는 여러 컴포넌트로 화면을 구성하는데, 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없다. 따라서 뷰 프레임워크 자체에서 정의한 데이터 전달 방법인 '상위(부모) - 하위(자식) 컴포넌트 간의 데이터 전달 방법'을 따라야 한다. 지역 혹은 전역 컴포넌트를 등록하면, 등록된 컴포넌트는 하위 컴포넌트가 되고 하위 컴포넌트를 등록한 인스턴스는 상위 컴포넌트가 된다. 상위 → 하위 : props 라는 속성을 전달 하위 → 상위 : 이벤트만 전달 가능 상위에서 하위 컴포넌트로 데이터 전달하기 // 상위 컴포넌트 ... // 하위 컴포넌트 // Vue.component() 이용하여 하위 컴포넌트인 child-cmoponent 를 등록 Vue...

Vue 인스턴스 # Vue 인스턴스 : Vue로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위 new Vue({ ... }) 이 인스턴스를 활용해보자 // 인스턴스 new Vue({ el: '#app', // el 속성 data: { // data 속성 message: 'Hello Vue.js' } }) 일단 화면을 개발하기 위해 new Vue를 이용하여 인스턴스를 생성하였다. 그리고 el 속성으로 Vue 인스턴스가 그려질 지점을 지정하고, data 속성에는 message 값을 정의하여 화면에 출력​​해줄 것이다. ​ # Vue 인스턴스 생성자 new Vue() 로 인스턴스를 생성할 때 Vue를 생성자라고 한다. (이때 Vue 생성자는 Vue 라이브러리를 로딩해야 접근할 수 있다.) 생성자를 ..

# Vue.js는 웹 페이지 화면을 개발하기 위한 프런트엔트 Framework이다. 즉, 화면단의 라이브러리 이자 프레임워크이다. ​ ※ 프레임워크 : 개발자들의 생산성을 높이기 위해 일정한 규칙에 따라 개발하도록 미리 구조를 정의해놓은 도구 > 틀! ※ 라이브러리 : 자주 사용되는 기능들을 모아 재활용할 수 있도록 정리한 기술 모음집 > 재활용템! ※ DOM : HTML 문서에 들어가는 요소의 정보를 담고있는 데이터 트리 ​ ※ 타입스크립트 (TypeScript) : 기존 자바스크립트에 엄격한 타입 체크를 도입한 언어. 앵귤러2의 표준 ※ ES6 : 자바스크립트의 최신 스펙 (=ECMAScript 2015) ※ 웹팩 (Webpack) : 웹 모듈 번들러 (Web Module Bundler). 최신 프런..

네이버 블로그를 크롤링하는 과정에서 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 가 전달되는데, 인터..