Null & undefined 공통점 둘다 각각의 타입명(undefined, null)의 값이 유일하다. undefined 타입의 값은 undefined가 유일하다. null 타입의 값은 null이 유일하다. undefined 타입 undefined는 원시 자료형 undefined로 분류된다. undefined는 "아무 값도 할당받지 않은 상태"를 의미한다. var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화된다. 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이뤄질 때까지 빈 상태(대부분 비어 있지 않고 쓰레기 값이 들어 있다.)로 내버려두지 않고 자바스크립트 엔진이 undefined로 초기화한다. 따라서, 변수를 선언한 이후 값을 할당하지 않은 변수를 참조하면 undefined가..

Js와 Node의 차이 JavaScript : 브라우저, 문서 등을 다루는 즉, clinet에 대한 개발을 하는 도구이다. Nodejs : backend에서 server에 대한 개발을 하는 도구이다. 차이점 Nodejs는 chrome의 자바스크립트 엔진인 v8을 이용한다. JavaScript는 스크립트 언어로써 특정한 환경(브라우저)에서만 사용가능한데 Nodejs를 통하여 특정한 환경(브라우저) 없이도 실행을 할 수 있게 된다. JavaScript를 크롬(chrome)같은 브라우저에서만 쓰는 것이 아닌 브라우저 밖. 즉, 내 컴퓨터에서 다양한 용도로 확장하기 위해 만들어진 것이 바로 Node.js이다. Nodejs를 이용하여 Express 같은 라이브러리를 사용하여 자바스크립트 언어로 서버를 구축하기도 ..

let, const, var JavaScript에서 변수 선언 방식에는 let, const, var가 있다. 변수 선언 방식 var는 변수 선언 방식에 있어서 큰 단점을 가지고 있다. 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력되는 것을 볼 수 있다. 이는 유연한 변수 선언으로 간단한 테스트에는 편리 할 수 있으나, 코드량이 많아진다면 어디에서 어떻게 사용 될지도 파악하기 힘들뿐만아니라 값이 바뀔 우려가 있다. 그래서 ES6 이후, 이를 보완하기 위해 추가 된 변수 선언 방식이 let과 const이다. 위의 코드에서 변수 선언 방식을 바꿔주면 아래와 같다. ┌ name이 이미 선언 되었다는 에러 메시지를 볼 수 있다. (const도 마찬가지이다.) ├ 변수 재선언이 ..

Reduce Reduce 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다. 리듀서 함수는 네 개의 인자를 가진다. ① 누산기 accumulator (acc) ② 현재 값 (cur) ③ 현재 인덱스 (idx) ④ 원본 배열 (src) reduce라는 이름은 이 메서드가 보통 배열을 값 하나로 줄이는 데 쓰이기 때문에 붙였다. 예를 들어 배열에 들어있는 숫자를 더하거나 평균을 구하는 것은 배열을 값 하나로 줄이는 동작이다. 하지만, reduce가 반환하는 값 하나는 객체일 수도 있고, 다른 배열일 수도 있다. ┌ callback : 배열의 각 요소에 대해 실행할 함수, 다음 네가지 인수를 받는다. ├ ┌ accumulator(누산기) : 콜백의 반환값을 누적한..

Memoization 기존에 수행한 연산의 결과값을 저장해두고 동일한 입력이 들어오면 재활용하는 기법이다. Memoized된 내용을 재사용하여 렌더할 시, 가상 DOM에서 바뀐 부분을 확인하지 않아 성능이 향상된다. Memoization 방법 1️⃣ Redux - useSelector useSelector로 Redux를 최적화하는 방법 ① useSelector를 여러번 사용 store에서 객체를 통째로 불러오는 대신, 필요한 값들을 쪼개어서 useSelector로 선언해준다. └ number 또는 diff가 바뀌었을 때만 리렌더링 된다. ② shallowEqual 사용 shallowEqual은 react-redux에 내장되어있는 함수로, 객체 안의 가장 겉에 있는 값들을 비교해준다. ③ equality ..

Optimistic UI Optimistic UI(낙관적인 UI ?)는 특정 요청이 성공 할 것이라 가정을 하고 먼저 그 요청의 결과를 보여주는 방식의 UI이다. 어떤 요청이 아주 높은 확률로 성공한다는 보장이 있을 때, 그리고 그 요청이 너무 늦지 않은 시간 안에 응답이 온다는 보장이 있을 때 사용할 수 있는 UI라고 생각하면 된다. Optimistic UI - 세 UI의 이야기 세 UI는 술집에 간다. 첫 UI는 술을 한 잔 주문하고, 그 후로도 몇 번 더 주문한다. 몇 시간 후, 그는 계산을 하고 취해서 술집을 나선다. 또다른 UI는 한 잔을 시키면서 계산을 먼저하고, 이후로도 먼저 계산하고 마시기를 반복하다 취해서 술집을 나간다. 마지막 UI는 술집에 들어서자마자 취해서 바로 다시 나온다. - 그..