오늘은 Vue, React 프레임워크에서 나올 수 있는 질문들을 정리해 보았습니다
Vue
1. Vue 라이플 사이클
- beforeCreate : 컴포넌트 인스턴스가 생성되기 이전에 호출
- created : 컴포넌트 인스턴스가 생성된 후 호출이 되며 데이터에 접근하거나 이벤트 리스너를 설정할 수 있다
- beforeMount : 인스턴스가 실제 DOM에 마운팅 되기 이전에 호출
- mounted : 인스턴스가 실제 DOM에 마운팅 된 후 호출이 되며 돔에 접근하거나 조작을 수행할 수 있다
- beforeUpdated : 데이터 변경이 일어나 DOM이 업데이트되기 이전에 호출
- updated : 데이터 변경이 일어난 후 실제 DOM이 업데이트된 후 호출
- beforeUnmount : 컴포넌트가 돔에서 사라지기 이전에 호출
- Unmounted : 컴포넌트가 돔에서 사라진 후 호출이 되며 이벤트 리스너 제거와 같은 정리 작업을 수행할 수 있다
2. Vue 양방향 데이터
- vue는 양방향 데이터 바인딩을 지원해 줍니다. 이는 데이터 변경이 UI에 자동으로 렌더링 되고 UI변경이 데이터에 자동으로 업데이트해 줍니다
3. Props와 Emit
- 컴포넌트 간 데이터를 전달하거나 이벤트를 호출할 때 사용합니다
- props는 부모 컴포넌트에 데이터를 자식 컴포넌트에 전달할 때 사용합니다
- emit은 자식 컴포넌트에 발생한 이벤트를 부모 컴포넌트에 전달하는 방법입니다
4. computed와 method
- computed와 method에 주요 차이점을 캐싱과 호출 방식입니다
- computed는 종속 데이터에 따라 자동으로 캐싱이 되고 속성에 접근하듯이 함수에 접근해야 됩니다
- method는 매번 호출할 때마다 계산을 수행하여 함수처럼 호출해야 합니다
5. vue2와 vue3의 차이점
- vue3로 업데이트되면서 composition api 가 도입이 되었고 코드의 재사용성과 코드 가독성을 높였습니다 또한 가상 돔 랜더링 방식 개선, 트리쉐이킹 도입을 통해 더 빠른 렌더링과 더 작은 번들 크기를 지원합니다
6. 가상돔
- 가상돔이란 실제 돔을 메모리상에 구현한 것이며 돔 변경을 먼저 가상돔에 적용하고 렌더링 성능을 개선하는 기법입니다. 가상돔 변경이 완료가 되면 실제 돔에 최소한의 변경사항만 반영하여 빠른 업데이트를 가능하게 합니다
7. 트리 쉐이킹
- 불필요한 코드를 제거하고 번들 크기를 최소화하는 모듈링 과정에서 사용되는 최적화 기법입니다
8. composition api
- 컴포지션 API란 vue3에 도입되었으며 새로운 방식으로 애플리케이션의 코드를 구조화하고 모듈화 된 형태로 vue 코드를 구성할 수 있습니다. 컴포넌트 간의 코드 재사용을 개선하고 가독성을 높여줍니다
9. nextTick
- nextTick이란 돔 업데이트 사이클을 기다린 다음에 실행할 콜백 함수를 등록할 수 있게 해 줍니다
10. vuex
- vue에서 사용하는 대표적인 상태 관리 라이브러리입니다
- state : 중앙 집중식 저장소이며 상태를 저장하는 공간입니다
- getter : state에 있는 상태를 계산하거나 필터링할 때 사용합니다
- mutation : state를 동기적으로 변경할 수 있는 메소드 이며 state는 무조건 mutation을 사용해서 변경해야 합니다
- action : 비동기 작업을 수행하거나 여러 뮤테이션을 조합하여 사용할 수 있는 메소드 입니다
React
11. 클래스형 컴포넌트와 함수형 컴포넌트의 차이
- 이전에는 클래스형 컴포넌트만 상태값을 사용할 수 있었으며 생명주기 함수를 사용할 수 있었습니다
- 하지만 이름 대체하는 hook이라는 기능이 도입이 되면서 함수형 컴포넌트에서도 상태값과 생명주기를 관리할 수 있게 되었습니다
12. JSX란?
- HTML처럼 보이는 코드를 작성할 수 있게 해 주며 자바스크립트 문법의 확장자입니다
- JSX는 함수 호출방식으로 컴파일되어 컴포넌트에 대한 마크업을 만들 수 있는 방법을 제공합니다
13. state와 props의 차이
- props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터입니다
- props는 수정이 불가하며 직접 쓰이거나 다른 값을 계산하는 데 사용합니다
- state는 컴포넌트 생명주기 동안에 수정될 수 있는 내부 데이터이며 재랜더링시에도 유지됩니다
14. setState를 사용하는 이유
- 만약 컴포넌트의 state를 직접 변경하면 리액트는 컴포넌트를 다시 랜더링 해야 하는지 알 수 있는 방법이 없습니다
- 이러한 문제를 해결하기 위해 setState를 사용하여 state를 변경하면 리액트는 컴포넌트의 UI를 업데이트합니다
15. props drilling
- 상위 컴포넌트에서 하위 컴포넌트로 연속적으로 props를 전달하는 과정
- props 구조가 복잡해지면 코드 가독성 과 유지보수가 어려워집니다
- 이를 해결하기 위해 Redux 와 같은 상태 관리 라이브러리를 사용합니다
16. React Hooks
- 함수형 컴포넌트에서 상태 관리와 생명주기 기능을 사용할 수 있게 해주는 기능입니다
- useState, useEffect 등의 내장훅을 사용해 쉽게 상태 관리와 부수효과를 처리할 수 있습니다
17. useMemo, useCallback
- useMemo는 메모이제이션을 통해 계산 비용이 높은 값을 캐싱하고 이전 계산결과를 재사용합니다
- useCallback은 함수를 메모이제이션 하여 불필요한 재생성을 방지하고 이전에 생성된 함수를 재사용할 수 있게 해 줍니다
18. Redux
- React에서 상태를 편리하게 관리하기 위한 상태 관리 라이브러리입니다
- 하나의 커다란 store라는 상태가 존재하며 여기서 전체 상태를 총괄합니다
- 이 상태는 직접 변경할 수 없고 순수함수인 reducer로 변경이 가능합니다
- reducer는 type과 payload를 속성으로 갖는 단순 객체인 action 이벤트가 발생했을 때 작동합니다
- action 이벤트는 dispatch라는 함수에 단순객체인 action을 넣어 발생시킬 수 있습니다
19. Recoil
- Redux와 마찬가지로 리액트에서 상태를 관리하기 위한 상태 관리 라이브러리입니다
- Atom, selector, Recoil Root 등의 개념을 사용하여 상태를 구성합니다
- Atom은 하나의 상태값을 나타냅니다
- selector는 하나 이상에 atom에 의존하는 파생 상태값을 나타냅니다
- 이러한 개념을 사용하면 상태를 더 작은 단위로 분리하고 Atom 간의 의존성을 관리할 수 있습니다
20. Css-in-js
- 컴포넌트 별로 스타일링을 할 수 있고 각 컴포넌트에 고유한 스타일을 적용하고 관리하기 때문에 유지보수를 쉽게 할 수 있습니다
- 다만 css-in-js를 사용하게 되면 스타일과 컴포넌트 로직이 결합되기 때문에 코드 가독성이 떨어집니다
여기까지 자바스크립트, CS, 프레임워크까지 질문들을 정리해 보았습니다
사실 면접을 어떠한 질문들이 나올지 모르고 특히 경력직 면접을 이력서를 토대로 질문이 나올 수 있기 때문에
기술면접을 준비하려면 더 광범위하게 공부를 하시면 좋을 거 같습니다
'프론트 CS' 카테고리의 다른 글
프론트 엔드 기술면접 준비하기_Typescript,React (0) | 2023.06.08 |
---|---|
프론트 엔드 기술면접 준비하기_CS(Computer Science) (0) | 2023.05.01 |
프론트 엔드 기술면접 준비하기(프론트엔드 면접질문) (0) | 2023.04.30 |
브라우저 저장소 (0) | 2022.12.13 |
GET과POST (0) | 2022.12.11 |