전체 글

[자바스크립트] 자바스크립트로 웹 크롤링 하기

자바스크립트로 크롤링 하기 1. 크롤링 크롤링은 웹페이지 내용을 그대로 읽어와서 원하는 내용을 추출하는 작업. 2. 필요한 라이브러리 axios - http 호출을 더 편리하게 해주는 http 클라이언트 라이브러리. cheerio - 로드된 HTML을 파싱하여 DOM을 생성하는 라이브러리. 웹브라우저에서 제공하는 DOM인터페이스와는 사용 방법이 다르지만 구현된 기능 자체는 대부분 비슷해 CSS 셀렉터 문법을 사용한 검색이 가능 3. 코드 작성 네이버에서 오늘 읽을만한 글을 크롤링하고 싶다고 가정하자. const axios = require('axios'); const cheerio = require('cheerio'); async function main(){ // html ..

[css] 셀렉터 문법

CSS 셀렉터 문법 CSS에서는 스타일을 적용할 대상을 선택하기 위해서 선택자(selector)를 사용하며 대표적으로 id 선택자, 태그 선택자, 클래스 선택자가 있다. 예제를 통해 살펴보자 아래의 html을 대상으로 셀렉터에 대해 알아보자. CSS 셀렉터 문법 셀렉터 문법에 대해서 알아보자 태그로 찾기 getElementsByTagName() 클래스 속성값으로 찾기 getElementsByClassName() id 값으로 찾기 getElementsById() html 문서에서 요소(element)를 찾는 방법은 여러가지가 있다. // article 클래스 속성값을 가진 요소의 내부 안에 있는 p태그 내용 출력 const articleClasses = document.getElementsByClassNa..

[자바스크립트] this

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조 가능하며 this가 가리키는 값은 호출 방식에 의해 동적으로 결정된다. // this는 어디서든지 참조 가능 // 전역에서 this는 전역 객체 window를 가리킨다 console.log(this); // window function square(number){ // 일반 함수 내부에서 this는 전역 객체 window를 가리킨다. console.log(this); // window return number * number; } square(2); const person = { name : 'lee', getName(){ // 메서드 내부..

[자바스크립트] 프로토타입 쉽게 이해하기

JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불립니다.— 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미입니다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지입니다. 이를 프로토타입 체인(prototype chain)이라 부르며 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간입니다https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes Prototype은 클래스, 객체의 내용 복사 없..

자바스크립트 동작 원리

자바스크립트는 동기적이고 단일 스레드 언어다. 즉 한번에 하나의 작업만 진행할 수 있다. 하지만 자바스크립트의 구동 환경의 특성으로 인해 자바스크립트에서도 비동기가 일어난다. Memory Heap - 변수와 객체의 메모리 할당을 담당하는 곳 Call Stack - 함수가 호출이 되면 쌓이는 곳. 함수가 쌓이는 순서와는 반대로 실행 Web APIs - 브라우저에서 제공하는 APIs. 자바스크립트(JavaScript) 코드를 사용하여 접근할 수 있으며 window나 element에 대한 간단한 작업에서부터 WebGL이나 Web Audio와 같은 API를 사용해 복잡한 그래픽 및 오디오 효과를 만들어내는 것까지 가능 Event Loop - call stack이 비어있을 경우 callback queue에서 함수..

클로저

클로저 간단히 이해하기 MDN에서의 정의 - 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경과의 조합이다 위 정의에서 말하는 '함수'란 반환된 내부함수를 의미하고 그 함수가 선언될 때의 '렉시컬 환경'이란 내부 함수가 선언됐을 때의 스코프를 의미한다. 즉 클로저란? 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수이다. function func(){ let number=10; return function(){ console.log(number++); } } let test=func(); test(); // 10 test(); // 11 test(); //..

이벤트 버블링 & 캡처링 & 위임

이벤트 버블링 - 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작 첫번째 두번째 세번째 var divs = document.querySelectorAll('div'); divs.forEach(function(div) { div.addEventListener('click', logEvent); }); function logEvent(event) { console.log(event.currentTarget.className); } var button = document.querySelector('button'); button.addEventListener..

SSR vs CSR

SSR, CSR 렌더링을 누가 하느냐에 따라 SSR, CSR로 나뉘게 된다. 쉽게 생각하면 html을 뼈대만 받고 브라우저(Client)에서 동적으로 DOM을 그리면 CSR이고 다 그려진 DOM을 받게 되면 SSR이다. 🌞 SSR(Server Side Rendering) 웹 페이지의 렌더링을 서버에서 처리해준다. 서버에서 사용자에게 보여줄 페이지를 모두 구성해 보여주는 방식 서버를 이용해 페이지를 구성하기 때문에 CSR보다 페이지 구성 속도는 느리지만 전체적으로 사용자에게 보여주는 컨텐츠 구성이 완료되는 시점은 빨라진다 모든 컨텐츠가 HTML에 담겨 있기 때문에 SEO 부분에서 CSR보다 효율적이다. 사용자가 클릭을 할 때마다 전체적인 웹사이트를 다시 서버에서 받아오기 때문에 깜빡힘 현상(좋지 않은 UX..

브라우저 렌더링 과정

브라우저 렌더링 과정 브라우저 - 웹 페이지, 이미지, 비디오 등의 콘텐츠를 수신, 전송 및 표현하는 소프트웨어(크롬,사파리,엣지 등) / 사용자가 선택한 자원(URL)을 서버에 요청하고 받아 화면에서 표시 렌더링 - HTML, CSS JavaScript 등 개발자가 작성한 문서를 브라우저에서 시각적 형태로 출력하는 과정 브라우저의 렌더링은 다음과 같이 이루어 진다. 1.DOM(Document Object Model),CSSOM(CSS Object Model) 트리 구축 2.자바스크립트 파싱 3.렌더링 트리 구축 4.레이아웃 생성 5.페인팅 1. DOM 트리 구축 네트워크를 통해 오고가는 데이터는 기본적으로 0과 1로 이루어진 바이트 코드이다. 그렇기 때문에 응답 받은 HTML을 텍스트로 변환하는 과정이..