후니's Blog

React/2022-上

Promise all

2022.05.01

Promise all 우선 MDN의 Promise.all을 살펴보자 !! Promise.all이란 ? Promise.all() 메서드는 MDN에서 이렇게 설명되어있다. Promise.all() 메서드는 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환한다. 주어진 프로미스 중 하나가 거부하는 경우, 첫 번째로 거절한 프로미스의 이유를 사용해 자신도 거부한다. 더 자세히 알아보기 !! Promise.all() - JavaScript | MDN Promise.all() 메서드는 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환합니다. 주어진 프로미스 중 하나가 거부하..

React/2022-上

Observable

2022.05.01

Observable 1️⃣ Observable Observable은 observer가 구독(subscribe)하는 대상이다. Observable이 아이템을 방출하면 observer가 반응(react)한다. 이 패턴은 동시성 연산(concurrent operation)을 편하게 해준다. ┌ 블록 상태에서 Observable이 아이템을 방출하길 기다릴 필요가 없다. └ 대신, observer가 보초처럼 서서 적절하게 반응(react)할 준비를 하고 있다. 2️⃣ 배경 ReactiveX에서는 Observer에 의해 명령어들이 병렬(parallel)로 실행되고, 결과값이 임의 순서로 나중에 반환된다. 데이터를 어떻게 가져오고 변환할지에 대한 매커니즘을 Observable 형태로 정의를 한다. 그 다음, 이 Ob..

React/2022-上

token, XSS, CSRF

2022.04.24

token, XSS, CSRF KWT에는 두가지 종류의 토큰이 있다. ┌ Access Token └ Refresh Token Access Token Access Token을 통해서 민감한 정보에 접근할 수 있으며 두 가지 토큰중에서 실제 권한에 접근하는 토큰이다. 짧은 유효기간을 가진다. Refresh Token Refresh Token을 통해서 만료된 Access Token을 발급받을 수 있다. Access Token보다 긴 유효기간을 가진다. 이 때, 유저는 다시 로그인하지 않아도 된다. Refresh Token이 탈취당하면, 위험하기에 정보에 민감한 사이트는 Refresh Token을 사용하지 않을 수 있다. JWT의 구조 JWT의 구조는 Header / Payload / Signature로 이루어..

React/2022-上

Callback

2022.04.24

Callback (콜백 함수) Callback (콜백 함수)란 ? JS에서 콜백함수는 매우 중요한 개념이다. Node.js 환경에서 프로그래밍 시 반드시 필요한 개념이기도 하다. 콜백 함수란 어떤 이벤트가 발생한 후, 수행될 함수를 의미한다. JS에서 함수는 1급객체이므로, 인자 전달 시 함수를 전달할 수 있기 때문에 콜백함수가 가능하다. ┌ 위의 코드는 submitBtn 클래스를 가진 요소를 클릭했을 때, 콜백 함수가 실행되는 jQuery 코드이다. ├ 즉, 비동기 이벤트인 click에 대한 이벤트 리스너로 콜백 함수가 작성된 것이며, 그 내용은 alert()를 호출한다. └ click의 콜백 함수는 네이밍을 할 필요가 없는 익명함수이고, 대부분의 콜백 함수는 이렇게 익명함수로 작성된다. Callbac..

React/2022-上

flatten, unflatten

2022.04.24

flatten, unflatten 자바스크립트에서는 flatten은 중첩된 배열구조를 하나의 배열로 만드는 것을 의미한다. unflatten unflatten은 중첩된 배열 구조를 의미한다. └ 위와 같은 배열안에 배열이 중첩되어 있는 구조를 unflatten이라고 생각하면 된다. flatten flatten은 중첩 배열을 평탄화 하는 것을 의미한다. ※ 평탄화 ? → 중첩 배열을 하나의 배열로 만드는 것을 의미한다. flatten의 방법 Array.prototype.flat() 자바스크립트에는 flat이라는 메서드가 존재한다. flat 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙여 새로운 배열을 생성한다. └ 사용할 때 평탄화 할 깊이를 지정해 주어야 한다. (default 값은 ..

React/2022-上

Recursive Functions

2022.04.24

Recursive Functions (재귀 함수) 어떤 함수 내부에서 다시 자기 자신을 부르는 함수를 의미한다. 마치 반복문을 돌리듯 자기 자신을 끊임없이 부르다가 특정 조건이 되면 빠져나오는 함수를 재귀 함수라고 한다. Recursive Function (재귀 함수)의 생성과 사용법 재귀함수는 다음과 같이 만들 수 있다. 나와 같은 이름의 함수를 내부에서 실행해 준다. 내가 만든 함수 내부에서 다시 나를 부르는 형태이기 때문에 무한히 계속 반복되는 함수가 된다. 따라서, 재귀함수를 만들 때에는 반드시 함수를 종료하는 조건을 만들어 주어야 한다. 이 부분은 특히 재귀 함수를 만들 때 가장 주의해야 할 부분이다. Recursive Function (재귀 함수)의 예 └ 결과로 5! = 120이 나온다. 위..

Web Basic/JavaScript

ES6의 특징

2022.04.18

ES6의 특징 let과 const 전통적으로 자바스크립트는 함수스코프와 전역스코프만을 지원하여 변수의 생명주기 및 접근을 제어한다. 하지만 ES6에서부터는 블록스코프도 지원하게 됐다. 이를 가능하게 해주는 것이 let과 const ┌ 위의 코드는 블록 스코프를 따르는 다른 언어들에서는 에러를 발생시켰지만, ├ 함수스코프와 전역스코프를 따르는 자바스크립트에서는 문제없이 작동한다. └ 그러나, 이는 많은 에러와 버그의 원인이었으며, let과 const가 도입된 이유였다. ┌ let을 사용하면 선언한 변수는 블록안에서만 유효하게 된다. ├ 따라서, 블록 밖에서 접근했더니 ReferenceError를 발생시킨다. ├ const 역시 마찬가지로 블록스코프를 따른다. ├ const와 let의 차이점은 const는 ..

Web Basic/JavaScript

==, === 차이점

2022.04.18

==, === 자바스크립트는 엄격한 비교와 유형변환 비교를 모두 지원함 따라서, 어떤 연산자가 어떤 비교조건에 사용되는지가 중요함 ===는 변수 유형을 고려함 └ 엄격한 비교를 함 ([값 & 자료형] -> true) ==는 변수 값을 기반으로 유형을 수정함 └ 서로 다른 유형의 두 변수의 [값] 비교 예시 └ 0값은 false와 동일하므로 true 출력 └ 두 피연산자의 유형이 다르기 때문에 false 출력 └ 자동 유형변화 비교하기 때문에 true 출력 └ 두 피연산자의 유형이 다르기 때문에 false 출력 └ 자동 유형변화 비교하기 때문에 true 출력 └ 두 피연산자의 유형이 다르기 때문에 false 출력 !=와 !== 비교연산자의 차이는 ? └ 값이 다르지 않으므로(자료형 비교 안하므로) fals..

전체 글

Promise all

Observable

token, XSS, CSRF

Callback

flatten, unflatten

Recursive Functions

ES6의 특징

==, === 차이점

티스토리툴바