코드스테이츠 소프트웨어엔지지어링 부트캠프 +35일

오늘 배운 것

 

• bind,call,apply
• 그동안 블로깅했던거 읽으면서 개념정리

bind, call, apply

리액트에서 필요할 때 마다 bind 함수를 사용했지만 정확한 개념을 몰랐기에 개념정리를 했다.

https://wnsdufdl.tistory.com/69

JS: call, apply, bind

 

 

결국 call, apply, bind 는 형태만 다를 뿐 셋 다 this를 다른 객체로 바꾸는 역할을 한다.

나는 '다른 객체의 정보를 가져다 쓴다' 라고 이해 하였다.

 

이는 유사배열을 배열로 바꿀때 이용되기도 한다. 예를들면 다음과 같이 빈배열의 this를 조작하는 것이다.

const els = document.body.children  // body태그의 자식요소들에 접근한다.

els // 배열의 형태를 하였지만 배열이 아닌 '유사배열' 이 할당되어 있다.

Array.isArray(els) // els가 배열인지 검사. 배열이 아니기 때문에 false 이다.

els.forEach(function(i){console.log(i)}) // Uncaught TypeError: els.forEach is not a function
   // els는 유사배열이기 때문에 forEach메서드를 활용할 수 없다.

[].forEach.call(els, function(i){console.log(i);});
// 빈배열의 this를 els로 변경하였다. 빈배열은 Array기 때문에 forEach를 사용할 수 있다.
// 빈배열에 els의 정보를 이용하여 forEach를 실행한다고 이해했다.

 

그동안 배운것들 개념정리

면접대비 차원에서 개념정리를 조금씩 했다.

 

• DOM : HTML 문서에 접근하기 위한 일종의 인터페이스, 문서 객체 모델인 DOM은 문서내의 모든 요소를 정의하고 각각의 요소에 접근하는 방식을 제공한다.
• <script>를 head에 넣는것과 body에 넣는 것의 차이 : 브라우저가 HTML 문서를 해석할때 <script> 태그를 만나면 그 안에 있는 JS의 처리가 끝날 때 까지 HTML 파싱이 지연된다. 때문에 CSS, HTML 파싱을 완료 하고 JS가 파싱되도록 </body> 직전에 두는 것을 선호한다.
• 얕은복사와 깊은복사 : 얕은 복사는 같은 메모리 주소를 참조하는 복사, 깊은 복사는 데이터를 통째로 복사하여 새로운 독립적인 메모리 주소에 담는다.
• 클로저 : 외부 함수의 변수에 접근이 가능한 리턴되는 내부함수, 클로저는 스코프를 이용하여 변수의 접근 범위를 조정한다. 이를 통해 불필요한 전역변수의 사용을 줄이고, 스코프를 이용해 값을 보다 안전하게 다룰 수 있다.
• 리액트의 3가지 특징 : 선언형, 컴포넌트 기반, 범용성
• JSX가 명시적인 이유 : HTML과 JS가 결합된 문법으로 직관적이다.
• Component의 필요성 : 하나의 기능 구현을 위해 여러 코드를 묶어 놓은 것이다. 기능별로 구분되어 있고 재사용이 가능하기 때문에 개발자는 기능에 집중한 개발을 할 수 있다.
• JSX : JS를 확장한 문법이다. JSX는 브라우저가 바로 사용할 수 있는 JS코드가 아니기 때문에 'Babel'을 통해 JSX문장이 JS로 변환된다.
• BrowserRouter : 새로고침 없이 주소변경이 가능하게 해준다.
• 리액트에서 변수는 component의 state로 유지되며 useState로만 업데이트 된다. setState 에 원본을 변경하는 메소드는 사용하면 안된다. (concat은 가능하지만 unshift,push는 불가능)
• 호이스팅 : 함수, 변수 선언을 문서 최상위로 끌어 올린다. 함수 표현식, 화살표 함수는 호이스팅의 대상이 아니다.
• parseInt, parseFloat와 Number의 차이 : parseInt, parseFloat는 문자열에서 숫자만 빼올 수 있지만, Number는 NaN이 포함되어 있으면 NaN을 반환한다.
• 배열을 합치는 방법 3가지 : concat(), spread연산자, push() 사용