후니's Blog

React/2022-上

원시 자료형 vs 참조 자료형

2022.05.01

원시 자료형 vs 참조 자료형 원시 자료형 고정된 저장 공간을 차지하는 데이터를 모두 원시 타입(primitive type) 데이터 라고 한다. 원시 타입 데이터 : 객체가 아니면서 method를 가지지 않는 6가지의 타입 ┌ string ├ number ├ bigint ├ boolean ├ undefined ├ symbol └ null 원시 자료형은 모두 하나의 데이터만을 담고 있다. 예시 ┌ 위 예시를 보면, 데이터의 크기와는 관계 없이 하나의 변수에는 하나의 데이터만을 담을 수 있다. └ 원시 자료형은 값 자체에 대한 변경이 불가능(immutable)하지만, 변수에 다른 데이터를 할당할 수는 있다. 참조 자료형 자바스크립트에서 원시 자료형이 아닌 모든 것들은 참조 자료형이다. 대표적으로는 배열과 객..

Web Basic/JavaScript

Null & undefined

2022.05.01

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

Web Basic/JavaScript

Js와 Node의 차이

2022.05.01

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

Web Basic/JavaScript

let, const, var

2022.05.01

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

React/2022-上

Reduce

2022.05.01

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

React/2022-上

Memoization

2022.05.01

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

React/2022-上

Optimistic UI

2022.05.01

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

React/2022-上

LazyLoad vs Preload

2022.05.01

LazyLoad vs Preaload Preload 웹 사이트를 방문하면, 필요한 리소스 자원을 서버에 요청할 때 여러 자원을 동시에 요청하게 되고 서버에서는 요청 순서에 상관없이 준비가 되는대로 응답을 하게 된다. 이 때, 특정 리소스를 빠르게 로딩하도록 우선순위를 부여하는 방법이 바로 PreLoad를 지정하는 방식이다. Head 태그에 빠르게 로딩시킬 파일을 PreLoad로 지정하게 되면, 페이지 요청 시 해당 소스 자원을 우선적으로 로드를 수행하게 된다. └ "이미지 보여주기" 버튼을 클릭하지도 않았는데 이미지가 우선적으로 요청이 된 것을 확인할 수 있다. Preload를 올바르게 사용하기 불필요한 리소스에 Preload는 걸지 않기 우선 preload로 선언되는 순간, 해당 소스가 실제로 사용하든..

전체 글

원시 자료형 vs 참조 자료형

Null & undefined

Js와 Node의 차이

let, const, var

Reduce

Memoization

Optimistic UI

LazyLoad vs Preload

티스토리툴바