1 React-Query를 사용해보셨나요?
- 네, 서버의 상태를 관리할 때 React-Query를 사용했습니다.
1.1 React-Query에 대해 설명해주세요.
- React-Query는 React를 위한 비동기 상태 관리 라이브러리입니다. React-Query는 웹 애플리케이션의 서버 상태를 fetching, caching, 동기화, 업데이트 해줍니다.
1.2 React-Query의 등장 배경과 장점에 대해 설명해주세요.
-
전통적인 상태 관리 라이브러리들은 클라이언트 상태에서는 잘 작동했지만, 비동기 또는 서버 상태와는 잘 작동하지 않았습니다.
- 그 이유는 서버 상태는 클라이언트 상태와 달리 제어할 수 없는 원격 장소에 유지되고, 상태를 가져오고 업데이트할 때 비동기 API를 사용해야 하며, 소유권을 공유해서 알지 못하는 사이에 상태가 바뀔 수 있기 때문입니다.
-
React-Query의 장점으로는 서버 상태를 캐싱할 수 있고, 같은 리소스 요청에 대한 다중 요청을 단일 요청으로 줄일 수 있으며, 서버와 상태 동기화를 할 수 있고, 페이지네이션이나 지연 로딩 데이터를 통해 성능 최적화를 할 수 있다는 것입니다.
2. Recoil을 사용해보셨나요?
2.1 Recoil에 대해 설명해주세요.
- recoil은 React를 위한 전역 상태 관리 라이브러리입니다.
- recoil에서 데이터는 atom으로부터 selector를 거쳐서 컴포넌트로 단방향으로 흐릅니다.
- 여기서 atom은 컴포넌트가 구동할 수 있는 상태 단위를 말하고, selector는 atom 상태 값을 동기/ 비동기 방식으로 변환하는 순수 함수를 말합니다.
- recoli은 전역 상태 관리를 간단한 get/set 인터페이스로 사용할 수 있도록 boilerplate-fee API를 제공합니다.
- 상태 정의는 점진적이고 분산되어 있기 때문에, 코드 분할이 가능합니다.
2.2 Recoil에서 Loadable의 개념에 대해 설명해주세요.
- Loadable 객체는 recoil의 atom 혹은 selector의 최신 상태를 대표합니다.
- Loadable 객체의 인터페이스는 state와 contents를 갖고 있습니다.
- state는 'hasValue', 'hasError', 'loading' 값을 가질 수 있습니다.
- contents는 state가 'hasValue'일 때 실제 값, 'hasError'일 때 Error 객체을 가지며, 'loading'일 때 toPromise()를 사용하여 값의 Promise를 얻을 수 있습니다.
2.3 Recoil에서 비동기로 데이터를 받아올 때 State를 어떻게 관리하셨나요?
- recoil에서 비동기 데이터를 실제로 관리해보지 않았지만 상황을 가정해보면, selector를 사용하여 비동기로 데이터를 받아오고 promise가 resolve되기 전 대체하기 위한 UI를 위해 Suspense로 감싸는 식으로 구현할 것 같습니다.
2.4 Recoil에서 로딩, 성공, 에러와 관련된 처리를 어떻게 하셨나요?
- 비동기 상태를 관리하는 컴포넌트의 경우 Suspense로 감싸서 로딩에 대한 처리를 해주었고, ErrorBoundary로 감싸서 에러에 대한 처리를 해주었습니다.
2.5 Redux와 Recoil에 대해 비교 설명해주세요. (개념, 장단점)
-
Redux는 JavaScript 앱을 위한 예측 가능한 상태 컨테이너 라이브러리입니다.
- 중앙 집중식 Storage와 상태 업데이트를 위한 Reducer를 사용하고, Flux 패턴 방식으로 데이터가 흐릅니다.
- Redux의 장점은 오랜 역사를 갖고 있어서 탄탄한 커뮤니티와 개발자 풀이 존재한다는 점입니다. 또한 미들웨어를 활용하여 여러 비동기, 로그 작업 등을 저리할 수 있습니다. 그리고 Redux DevTools가 잘 되어 있습니다.
- Redux의 단점은 구조가 복잡해서 필요한 코드의 양이 비교적 많다는 것입니다. 또한 dispatch 관리를 위해 redux-thunk나 redux-saga와 같은 미들웨어를 설치해야한다는 것입니다.
-
Recoil은 React를 위한 전역 상태 관리 라이브러리입니다.
- recoil에서 데이터는 atom으로부터 selector를 거쳐서 컴포넌트로 단방향으로 흐릅니다.
- Recoil의 장점은 atom에서 selector로 흐르는 간단한 데이터 구조를 갖고 있다는 것입니다. 또한 설치해야 하는 미들웨어가 없기 때문에 redux보다 가볍습니다.
- Recoil의 단점은 문서나 커뮤니티의 규모가 Redux보다 작다는 것입니다. 또한 recoil은 react와 함께 사용하기 위한 라이브러리이므로 다른 라이브러리와 함께 사용할 경우 호환성 문제가 발생할 수 있습니다.
3. 타입스크립트를 사용하는 이유에 대해 설명해주세요.
- TypeScript는 정적 타입을 지원하므로 컴파일 단계에서 오류를 포착할 수 있다는 장점이 있습니다.
- 명시적인 정적 타입 지정은 개발자의 의도를 명확하게 코드로 기술할 수 있으므로, 코드의 가독성을 높이고 예측할 수 있게 하여 디버깅이 쉽습니다.
- TypeScript는 IDE에 타입 정보를 제공함으로써 높은 수준의 intelliSense, 코드 어시스트, 타입 체크, 리팩토링 등을 지원받을 수 있습니다.
4. Type과 Interface의 차이점에 대해 설명해주세요.
- interface는 extends 키워드를 사용하여 확장하고, type은 intersection & 연산자를 사용하여 확장합니다.
- interface는 속성 추가를 위해 같은 이름의 interface를 병합할 수 있지만, type은 선언한 후 변경할 수 없고 같은 이름으로 중복 선언을 할 수도 없습니다.
- interface는 객체의 구조를 선언하는데 사용됩니다. 반면에 type은 원시값을 다른 이름으로 선언할 때도 사용됩니다.
5. 제네릭에 대해 설명해주세요.
- 제네릭은 타입간의 관계를 설명하기 위한 타입입니다.
- 함수에서 사용할 경우 매개변수의 괄호 앞에서 홑화살표 괄호<>를 사용하여 제네릭 매개변수를 선언합니다.
- 선언한 제네릭 매개변수는 각 구조체 내부에서 사용할 수 있습니다.
- 제네릭 매개변수의 타입이나 기본값을 설정할 수 있습니다.
5.1 제네릭 유틸리티 타입에 대해 설명해주세요.
- 유틸리티 타입으로는 Partial, Readonly, Record, Pick, Omit 등입니다.
- Partial 타입은 특정 타입의 부분 집합을 나타내는 타입입니다.
- Readonly 타입은 타입의 모든 프로퍼티를 읽기 전용으로 설정해주는 타입입니다.
- Record 타입은 Key와 Value 형태로 타입을 지정해주는 타입입니다.
- Pick 타입은 특정 타입에서 몇 개의 프로퍼티만 선택한 타입입니다.
- Omit 타입은 특정 타입의 차집합을 나타내는 타입입니다.
6. 클래스의 Public, Private, Protected에 대해 설명해주세요.
- public 키워드를 붙인 클래스 멤버는 모든 곳에서 누구나 접근이 가능합니다.
- protected 키워드를 붙인 클래스 멤버는 클래스 내부 또는 하위 클래스에서 접근이 가능합니다.
- pivate 키워드를 붙인 클래스 멤버는 클래스 내부에서만 접근이 가능합니다.
7. 클래스의 Static에 대해 설명해주세요.
- static 키워드를 사용하여 정적 변수 또는 정적 메서드를 선언할 수 있습니다.
- TypeScript의 경우 static 키워드를 단독으로 사용하거나, static 키워드를 접근성 키워드(public, protected, private)와 readonly 키워드를 함께 사용할 수 있습니다.
