후발대 - 기술 면접 대비

기술면접 대비

MPA: 클라이언트 사이드에서 브라우저에 무언가를 요청할 때 마다 HTML 파일 전체를 서버에서 받아와서 화면에 뿌려준다. 껌뻑거리는 것을 볼 수 있다.

SPA:  클라이언트 사이드에서 브라우저에 무언가를 요청하면 처음 한번은 HTML 전체를 서버에서 받아오지만 그 이후 부분적으로 변경하거나, 페이지 이동을 할 때 서버에서 받아오는 것이 아니라 내 컴퓨터에서 자바스크립트를 이용하여 화면에 뿌려주는 것. 껌벅거리지 않음

 

DOM: HTML 요소를 브라우저에서 객체화하여 트리형태로 만들어준 것. 하나하나를 노드라고 부른다. 

가상 DOM: DOM이랑 완전히 똑같은 복사본, but API가 없다. getelementbyId, div.create와 같은 것. 그래서 엄청 가볍다.

 

DOM은 자바스크립트 언어를 화면에 나타내기위한 표준입니다. DOM은 랜더링되는 과정이 복잡하다는 한계가 있습니다. 이러한 문제점을 해결하기 위한 등장한 것이 가상 DOM입니다. 가상DOM은 DOM과 같은 객체를 메모리에 저장한 것입니다. 이 가상 DOM과 DOM의 비교를 통해 DOM에서 변화가 있는 부분만 랜더링하는 것이 리액트의 특징입니다. 즉, 가상 DOM은 DOM을 필요에 따라 랜더링하기 위한 하나의 메모리라 정리할 수 있습니다.

 

여러 변경사항들을 모아서 1번만 렌더링한다. Batch  update (일괄 작업)

비동기 업데이트한다.

그냥 setState를 하면 바뀌지 않고 함수로 만들어야한다는데?

setstate 비동기 해결

 

자바스크립트 런타임 환경 두 가지

 

자바스크립트의 런타임환경 2가지는 브라우저, node환경입니다. 

과거에는 브라우저에서만 자바스크립트가 실행될 수 있었지만 

업데이트를 통해 node환경과 같이 브라우저밖에서도 동작할 수 있도록 되었습니다

 

불변성은 데이터의 변하지 않는 속성입니다. 

리액트에서 불변성이 중요한 이유는 리액트 가상돔은 메모리의 참조값을 기준으로 비교를하기 때문입니다. 

참조값이 변하지 않는다면 리액트는 변화로 감지하지않아 랜더링에 반영하지 못합니다.

 

가변성과 불변성은 리액트에서의 리렌더링 조건과 연결되므로 중요합니다. 

배열에서도 map, filter과 같이 기존의 배열을 수정하는 것이 아닌, 

새로운 배열을 내뱉어주는 함수들이 불변성 함수에 해당합니다.

 

일반 함수 vs 화살표 함수

 

화살표 함수는 this binding이 없다.

일반함수는 동적으로 this가 결정되지만 

화살표함수는 정적으로 this가 결정되기 때문에 

이벤트 호출시나 콜백함수를 사용 할 경우 this를 어떻게 사용하냐의 따라 그에 맞는 함수를 사용 할 수 있습니다

 

export  default vs export 

export는 어렵

export 할 경우에는 import { 함수명 } from * 으로 사용하는데, export default 하실 경우에는 import 함수명 from

 

프롭스 드릴링이란?

프롭을 중간 단계에서 필요 없더라도 하위 컴포넌트마다 계속해서 내려주는것이고, 생산성 측면에서 어디에서 문제가 발생했는지 찾기가 힘들어 유지보수가 어렵다.

이 문제 해결을 위해 redux (context API 기반) or context API 로 state 관리하게 되었다.

 

순수 함수란?

같은 값을 넣으면 항상 동일한 값을 리턴해주는 함수

ex) function 순수 (a, b) {

return a+b

}

 

const 이상한 놈 = 10

function 안 순수 (a,b){

return a+b+이상한 놈

}

 

리액트는 항상 순수함수  프롭스를 받아서 렌더링해줄 때 어떤것도 개입 노노

 

CSR vs SSR

CSR: 클라이언트가 주권을 가진다.CSR은 index.html 하나뿐이라 크롤링 봇이 가져갈 게 없어서 seo 취약함

SSR: 서버에서 HTML 받아서 화면에 뿌려준다.크롤링봇이 가져갈 HTML 많아서 검색이 잘 된다.