전체 글

리액트 프레임워크 Next.js! Gatsby!

Next.js, Gatsby 알아보자 리액트 프레임워크 중 대표적인 것들을 비교해보자 https://nextjs.org/ https://www.gatsbyjs.com/ 공통점으로 리액트로 프로그램을 만들면 디폴트로 클라이언트 사이드 렌더링이 된다. 즉 유저가 웹 사이트로 이동한 후에 js를 다운 받고 리액트가 UI를 빌드하게 된다. -> 인터넷 문제가 있거나 js파일에 문제가 있거나 하면 유저는 빈 화면만 보게 된다. -> 리액트만 사용해 해결해도 되지만 이 프레임워크들을 서버사이드 렌더링을 통해 문제를 해결할 수 있다. CSR의 문제점 중 하나인 SEO에 대한 문제를 프레임워크를 쓴다면 사용자에게 보여질 콘텐츠를 포함하고 있는 HTML 문서를 응답으로 전달하므로 해결할 수 있다. 👍 Next.js N..

Flux란?

Flux란 애플리케이션의 데이터 흐름을 관리하는 패턴을 말한다. Flux에서 중요한 것은 데이터의 흐름이 단방향으로 흐른다는 것이다. Front-End에 사용되는 프레임워크의 대부분은 MVC(Model-View-Controller) 디자인 패턴을 채택했었다. 그런데 MVC 패턴이 한계 명확하게 보여지면서 Flux 아키텍쳐가 등장하게 되었다. ✅ 그럼 MVC 패턴을 먼저 살펴보자 기존의 어플리케이션 환경에서 보편적으로 사용되는 패턴은 MVC였다. Model에 데이터를 정의해 두고, Controller를 이용해 Model 데이터를 생성 / 조회 / 수정 / 삭제(CRUD)하고, 변경된 데이터는 View에 출력되면서 사용자에게 전달되며 그림처럼 model과 view가 양방향 통신이 가능하다. MVC 패턴의 문..

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

자바스크립트로 크롤링 하기 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..