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