면접 질문 연습하기
-
SPA와 MPA의 각각의 개념과 특징에 대해 설명해주세요
- SPA는 페이지가 한개인 웹이고 렌더링이 빠른 장점이 있음 MPA는 페이지가 여러개라서 렌더링 할 때 마다 데이터를 불러와야 해서 느림, 할 때마다 깜빡거리는 효과가 있음
-
DOM과 가상 DOM에 대해 설명해주세요
- DOM은 자바스크립트에서 html태그를 가져와서 사용하는 것
- 가상 DOM
- 기본개념은 실제 DOM(DOM Tree)과 똑같다. 즉 복사본인데 API가 없다. API가 없다는 것은 getElementById가 없다는 것 => 엄청 가볍다.
- 배치 업데이트 = 일괄작업 ( 바뀐 것들을 한 곳에 모아서 한 번에 업데이트 해준다. )
- 스테이트 변경은 실시간으로 업데이트가 아니라 배치성 업데이트 ( 즉 비동기 )이다. 그래서 맨 처음에 콘솔을 찍으면 undefined가 나온다. 이렇게 나오지 않게 하기 위해서는 함수를 사용해야 한다.
- setState의 비동기 해결(구글링해서 알아보기)
-
자바스크립트의 런타임 환경 2가지
- 자바스크립트의 런타임환경 2가지는 브라우저, node환경이다. 과거에는 브라우저에서만 자바스크립트가 실행될 수 있었지만 업데이트를 통해 node환경과 같이 브라우저밖에서도 동작할 수 있도록 되었다.
-
불변성은 무엇이며, 리액트에서 왜 중요한가요?
💡(Map, filter, spread 등을 꼭 언급하기)- 불변성은 메모리에 있는 값을 변경할 수 없는 것이다. 리액트에서 불변성이 중요한 이유는 리액트 가상돔은 메모리의 참조값을 기준으로 비교를하기 때문이다. 참조값이 변하지 않는다면 리액트는 변화로 감지하지않아 렌더링에 반영하지 못한다.
- 가변성과 불변성은 리액트에서의 리렌더링조건과 연결되므로 중요하다. 배열에서도 map, filter와 같이 기존의 배열을 수정하는 것이 아닌, 새로운 배열을 내뱉어주는 함수들이 불변성함수에 해당한다.
-
일반 함수와 화살표 함수의 차이점
- 화살표 함수는 this 바인딩(this에 새로운 값을 할당하는 것)을 안하고 일반함수는 this 바인딩을 한다.
-
Export default 와 export 차이점
- Export default는 js파일에서 가장 중요한 것을 내보내는 것, 한개만 가능, 그냥 Export는 여러개 할 수 있다.
- export 할 경우에는 import { 함수명 } from * 으로 사용하는데,
export default 하실 경우에는 import 함수명 from
-
Props 드릴링이란 ?
- props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정, 유지보수도 더욱 어려워진다.
-
리덕스는 콘텍스트 api 기반의 미들웨어이다.
-
순수 함수란 무엇인가?
- 어떤함수에 동일한 인자를 줬을때 항상같은 값을 리턴
function soonsoo (a, b) {
return a + b
}
soonsoo(1, 2) // 1,2를 인자로 줬을 때 항상 3을 리턴한다.
const num = 10; // num 값을 변경해주면
function notSoonsoo(a, b) {
return a + b + num
notSoonsoo(1, 2) // 1,2를 인자로 줬을 때 리턴값이 변하기 때문에 순수 함수가 아니다.- CSR, SSR를 SEO 관점에서 설명해주세요.
- CSR: 클라이언트 쪽(리액트)에서 렌더링을 하는 것
- SSR: 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달한다.
- SEO: 서치 엔진 옵티마이제이션
- CSR은 index.html 하나뿐이라 크롤링 봇이 가져갈 게 없어서 seo 취약함
취준 개발자