Sub DevLog

기술 블로그

[React] React와 Redux

기초지식

들어가며… React프로젝트의 관계성이 깊어질수록 자식으로 넘겨주어야하는 props도 마찬가지로 점점 깊어집니다. 깊어지면 깊어질수록 state를 관리하기가 힘들어 내가 언제 어디서든 원하는 state를 사용할 수 있는 redux가 나왔다. Redux는 React에 종속된 라이브러리가 아닙니다.Js에서 State를 관리하기 위해 등장한 라이브러리입...

Posted by Sub DevLog on July 17, 2021

[React] React Hook 종류

기초지식

React에서는 16.8버전부터 Hook이라는 기능으로써 함수형 컴포넌트에서도 상태관리를 도와주는 훅,렌더링 후 작업을 설정하는 훅등 기존 함수형 컴포넌트에서 할 수 없었던 다양한 작업들을 할 수 있게 도와주는 기능이다. useState 제일 기본적인 useState부터 알아보죠 useState는 함수 컴포넌트안에서 state를 사용할 수 있게 해줍...

Posted by Sub DevLog on June 25, 2021

[React] React Life Cycle

기초지식

React는 UI를 효율적으로 구축하고 사용하기위한 JS기반의 컴포넌트 라이브러리입니다. 일반적인 DOM이 아닌 Vritual DOM을 위에서 작업을 합니다. 그렇다면 왜 일반 DOM에서 작업하는 것이 아닌 Vritual DOM에서 작업을 하는것일까요?? 일반적인 SPA페이지 에서는 DOM의 직접적인 조작이 많이 발생합니다.(레이아웃의 변화 및 트리변...

Posted by Sub DevLog on June 5, 2021

[JavaScript] Curry

기초지식

currying이란 Currying는 여러개의 인자를 가진 함수를 호출할 경우 적은 수의 파라미터를 인자로 받으면 누락된 파라미터를 인자로 받는 것을 뜻한다. Javascript에서만 국한된 기술은 아니며 함수형프로그래밍에서 주로 쓰인다. 예를들어 f(a,b,c) 처럼 단일 호출로 처리하는 함수를 f(a)(b)(c)와 같이 각각의 인수가 호출 가능...

Posted by Sub DevLog on March 20, 2021

[JavaScript] Intersection Observer API

기초지식

Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법입니다. viewport란? 모바일 브라우저에서는 viewport라고 알려진 가상의 화면에 페이지를 렌더링합니다.또한 모바일에서는 viewport meta 태그를 ...

Posted by Sub DevLog on March 13, 2021

[JavaScript] 이벤트 루프

기초지식

자바스크립트는 싱글 스레드 기반의 언어입니다.싱글 스레드는 한번에 하나의 호출스택을 사용하며 이러한 방식은 한번에 하나의 동작만을 사용할 수 있음을 의미합니다. 그럼 자바스크립트에서는 어떻게 동시성을 지원할까요?? 바로 이벤트루프라는 것을 이용하여 비동기 방식으로 동시성을 지원합니다. 이벤트 루프 하지만 자바스크립트 엔진 자체에서 지원해주는 것이 아...

Posted by Sub DevLog on March 7, 2021

[JavaScript] 이벤트위임과 캡처링버블링

기초지식

이벤트 버블링 이벤트 버블링은 javascript의 각 요소에서 이벤트가 발생되면 상위의 요소들에게 전달하는 것입니다. 예제를 한번 살펴보죠 1 2 3 4 5 6 7 8 9 10 11 12 <style> .bubbling { margin: 10px; border: 1px solid blue; } </style&g...

Posted by Sub DevLog on February 28, 2021

[Javascript] Javascript에서의 generate

기본기

이전 포스팅에서 봤던 이너레이터가 값을 읽어오기 위한 인터페이스라면 제너레이터는 값을 쓰기 위한 인터페이스이다. 제너레이터는 또한 interator protocol 규약을 준수해서 반복문인 for..of문과 Spread문법에서 사용할 수 있다. 제너레이터 함수 제너레이터는 일반적인 함수와는 다르게 * 함수뒤나 함수명 앞에 * 를 붙입니다. 1 2 ...

Posted by Sub DevLog on February 21, 2021

[Javascript] Javascript에서의 iterable과 iterator

기본기

먼저 Interator란 뭘까요? 위키 백과에 따르면 ‘Iterator(반복자)는 객체 지향적 프로그래밍에서 배열이나 그와 유사한 자료 구조의 내부의 요소를 순회(traversing)하는 객체이다.’ 라고 명시가 되어있습니다. javascript에서도 이러한 Interator 기능이 정의되어 있는데 es6에 나온 iterable protocol입니...

Posted by Sub DevLog on February 14, 2021

[Javascript]Javascript this와 this 바인딩 우선순위

기초지식

Javascript를 사용하다보면 this를 많이들 사용해본 경험이 있을거다. this란 메서드를 호출한 객체가 저장되어있는 속성인데 이게 상황별로 지정하는 대상도 틀리고 우선순위도 다르다 그래서 가끔 예상치 못한 상황도 발생하는데 우선순위만 정확하게 파악해도 이런 일이 없을거다. 차근차근 예시를 들어가며 알아보자. this 혼자 쓰인경우 아무것도 ...

Posted by Sub DevLog on February 7, 2021

FEATURED TAGS
-Algorithm Javascript React -백준 -DFS 이벤트 -그리디 HeadlessBrowser NextJs
ABOUT ME

#Web #FrontEnd Still Learn