프론트엔드 면접준비 [ 13 - 24 ]

13. React와 Vue, Angular의 차이점은 무엇인가요?

- React - 자바스크립드 기반, 가상돔, JSX, 단방향 바인딩
- Vue - 타입스크립트 지원, 가상돔, 단방향, 양방향 바인딩 지원
- Angular - 타입스크립트, 실제돔, 양방향 바인딩

14.React에서 JSX 문법이 어떻게 사용되나요?

- virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는
  하나의 DOM트리 구조로 이루어져야한다는 규칙이있다.
- 자바스크립트 표현식을 쓰려면 코드를 {}로 감싸주면 된다.
- if, for문 대신에 삼항연산자 or map함수 허용
- 인라인스타일 적용시 카멜문법 사용 필요

15. React의 렌더링 성능 향상을 위해 어떻게 해야 하나요?

- 불필요한 렌더링을 줄입니다. (메모이제이션, 매핑 인덱스 사용x, useState함수형 업데이트 등)

 

16.Redux가 무엇인지 설명하시고, 왜 사용하셨나요?

- 리액트 전역 상태관리 라이브러리, props drilling 이 규모가 클수록 관리가 어렵기때문에

17. 리덕스의 장단점에 대해 설명해보세요

- 장점 :

* 상태의 중앙화 - 전 상태관리가 가능함

* 단방향 모델링 - action을 dispatch할 때마다 기록이 남아 에러 찾기 용이

- 단점 :

* 리덕스 초기 설정이 필요 불변성 개념을 지키기위해 state 객체가 매번 필요
* 상태관리 중앙화만 필요하다면 context API 이용

18. 생명주기 메서드(LifeCycle)에 대해 설명해보세요

- 컴포넌트 디드 마운트, 컴포넌트 디드 업데이트, 컴포넌트 윌 언마운트

- 화면이 생성되고 화면이 사라질 때까지의 메소드 진행과정

19. 메모이제이션에 대해 설명해보세요

- 결과를 저장해놨다가 동일한 입력동작이 발생했을 때, 캐시를 불러와서 사용,
  불필요 연산을 줄여줘 속도를 높이는 효과를 줌

20. 캐시가 무엇이고, 어떻게 동작하는지 설명해보세요

- 데이터나 값을 미리 복사해 놓는 임시장소
- 데이터가 본래 저장되어 있던 장소보다 접근 시간이 더 빠른 별도에 장소에
  복사 계산이나 접근 시간 없이 더 빠른 속도로 데이터에 접근할 수 있음

21. CSS relative, fixed, absolute의 차이가 무엇인지 설명해보세요

- static : 위치를 지정하지 않을 때 사용
- relative : 위치를 계산할 때 static의 원래 위치부터 계산
- fixed : 원래 위치와 상관없이 위치를 지정할 수 있다.
             하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정위치 설정
- absolute : 원래 위치에 상관없이 위치 지정, 가까운 상위 요소를 기준으로 위치가 결정

22. 새로운 CSS Flexbox나 Grid를 사용해본 적이 있나요? 있다면, 설명해보세요

- display : flex, grid를 통해 사용해본 경험이 있습니다.
- flex는 1차원 레이아웃을 대상으로, grid는 2차원을 대상으로 합니다.
- 1차원 레이아웃을 조절하여 2차원처럼 수직정렬을 다룰 수 있습니다.
   grid는 2차원 좌표로 값을 표시하는 것 처럼 간격과 갯수, 또는 aria를 통해 위치 지정이 가능

23. 반응형 디자인은 적응형 디자인과 어떻게 다른가요?

- 윈도우 사이즈에 맞게 변경되는 형태가 반응형이고, 사이즈 변경에 상관없이 출력값 동일하면 적응형

24. null과 undefined의 차이점은 무엇인가요?

- null은 값이 존재는 하는데 비어있는 상태이고 undefinec는 값이 존재하지 않는 상태