목차
- 커스텀 훅과 클래스 사용에 대한 고민
- TypeScript에서의 타입가드와 제네릭 사용법
- Axios 에러 처리 방식
- 로그인 등 서버 검증 에러 메시지 처리 방법
- React 18 SSR과 Suspense, 코드 스플리팅 문제
- Redux와 Context API 비교 및 전역 상태 관리
- 취업 준비 시 프로젝트 환경 선택 (CRA vs Vite)
- 전역 상태 관리 라이브러리 고민 (Redux vs Zustand)
- Apple 로그인 API scope 에러 문제
- 프로토타입 툴 프레이머(Framer) 실사용 소감
1. 커스텀 훅과 클래스 사용에 대한 고민
- 훅(Hook)은 React 함수 컴포넌트에서 상태 관리와 사이드 이펙트를 쉽게 하도록 만든 함수임.
- 훅을 클래스에 직접 사용할 수는 없고, 훅을 감싸는 별도의 함수나 훅으로 재구성해야 함.
- useSearchParams 훅은 URL의 쿼리 스트링을 상태로 관리하며, React 컴포넌트가 리렌더링 되게 함.
- 만약 여러 저장소(예: URL, 로컬 스토리지, DB)에서 데이터를 관리하고 싶다면, 추상화된 인터페이스를 설계해 훅 내부에서 사용하도록 만들면 됨.
- 컴포넌트가 URL 상태에 반응하려면 훅을 사용해야 하므로 훅 대신 클래스를 쓰면 반응형 상태 관리가 어려워질 수 있음.
- 의존성을 낮추고 유연성을 높이려면 저장소 접근 방식을 분리하는 추상화가 핵심임.
2. TypeScript에서의 타입가드와 제네릭 사용법
- 타입 가드(Type Guard)는 런타임 시 타입을 좁혀 개발자와 컴파일러가 더 안전하게 코드를 작성하도록 도움.
- 예: function isString(value: any): value is string { ... }를 사용해 if (isString(val)) { val는 string }으로 인식 가능.
- 제네릭(Generic)은 다양한 타입을 재사용 가능하게 만드는 템플릿 같은 개념임.
- 자주 보이는 패턴 중 하나는 React 컴포넌트 클래스인지 확인하는 타입 가드.
- 복잡한 제네릭과 삼항 연산자를 쓰면 이해하기 어려울 수 있으나, 타입 안전성이 크게 좋아짐.
- 참고로, "please_dont_use.ts"는 TypeScript로 JSON 파서를 구현한 예시인데, 비효율적이고 비추천이라는 의미.
3. Axios 에러 처리 방식
- Axios 라이브러리는 HTTP 요청 시 에러를 잡기 위한 방법을 제공함.
- 에러 확인은 axios.isAxiosError(error)를 쓰는 게 권장됨.
- instanceof AxiosError도 가능하지만, 공식 문서에선 isAxiosError 메서드를 더 권장함.
- 이렇게 처리하면 타입 추론도 자동으로 이루어져 코드가 더 깔끔해짐.
- try { ... } catch (error) { if (axios.isAxiosError(error)) { ... } } 형식으로 에러를 구분해 처리함.
4. 로그인 등 서버 검증 에러 메시지 처리 방법
- 서버 검증 오류 메시지는 백엔드에서 보내주는 메시지를 그대로 보여줄 것인지,
아니면 프론트엔드에서 상태 코드별로 별도 메시지를 보여줄지 의견이 나눠짐. - 보통은 백엔드와 협의 후, 사용자 경험을 고려해 프론트에서 조건별 텍스트를 보여주는 경우가 많음.
- 직접 에러 코드를 받아 필요한 경우에만 메시지를 가공하는 방법도 실용적임.
5. React 18 SSR과 Suspense, 코드 스플리팅 문제
- React 18 이전 SSR환경에서는 모든 내용을 다 로드한 후에야 하이드레이션(hydration)이 가능했음.
- 코드 스플리팅을 SSR에 적용하면, 서버에서 받은 HTML에 포함된 주석 내 해당 컴포넌트의 코드가 없으면 리액트가 어디서 어떻게 연결해야 할지 모르고 컴포넌트를 지워버릴 위험이 있었음.
- 이 때문에 SSR과 코드스플리팅은 이전엔 호환성 이슈가 있었고, React 18의 Suspense가 이를 개선함.
- Suspense는 비동기 렌더링에 대한 공식 지원으로, 데이터나 컴포넌트 로딩 중에도 부드러운 사용자 경험을 가능하게 함.
6. Redux와 Context API 비교 및 전역 상태 관리
- Context API는 리액트 내장 기능으로, 하위 컴포넌트에 props drilling 없이 값을 전달 가능.
- Redux는 전역 상태 관리를 위한 외부 라이브러리로, Context보다 강력한 도구와 유틸이 더 포함되어 있음.
- Context는 주로 간단한 상태 공유에, Redux는 복잡하고 대규모 상태관리에서 많이 사용됨.
- Redux에는 미들웨어, DevTools, 상태 불변성 관리 같은 편의 기능이 풍부함.
- Zustand 같은 라이브러리는 Context와 Redux 사이에서 간단하고 직관적인 전역 상태 관리를 제공함.
- 프로젝트 규모와 필요에 따라 적절한 도구를 선택하는 것이 중요함.
7. 취업 준비 시 프로젝트 환경 선택 (CRA vs Vite)
- CRA(Create React App)와 Vite는 모두 React 개발용 환경 세팅 도구임.
- CRA는 안정적이고 대중적이지만 빌드 속도가 느리고 구식일 수 있음.
- Vite는 빠르고 최신 개발 경험을 제공, 모듈 핫 리로드(HMR)가 뛰어남.
- 사전 과제나 포트폴리오에선 자신이 이해하고 설명할 수 있는 환경을 선택하는 게 중요.
- 미리 공부하고, 왜 이 도구를 쓰는지 이유를 준비해야 면접에서 유리함.
8. 전역 상태 관리 라이브러리 고민 (Redux vs Zustand)
- Zustand는 가볍고 사용법이 간단해 최근 인기 상승 중인 전역 상태 관리 라이브러리임.
- Redux는 기능이 많고 보편적이지만 학습 난이도가 다소 있음.
- 한 프로젝트에서 두 가지를 동시에 쓰는 경우는 드뭄. 보통 하나를 정해 집중하는 것이 좋음.
- 상황과 개발팀 스타일에 따라 선택하며, 상태 관리를 직접 구현하는 것도 방법임.
9. Apple 로그인 API scope 에러 문제
- OAuth 스코프(scope)는 사용자가 앱에 허용하는 권한 범위를 뜻함.
- Apple 로그인에서 scope=email%20name 이렇게 인코딩했음에도 invalid_client_scope 에러가 발생할 수 있음.
- 예전에는 "name email" 같이 스페이스를 직접 넣는 경우도 있어, 정확한 인코딩과 Apple의 최신 정책 확인이 필요.
- 보통은 Apple 개발자 문서에 맞춰 scope를 올바르게 설정하고 URL 인코딩을 확실히 해야 함.
10. 프로토타입 툴 프레이머(Framer) 실사용 소감
- 프레이머는 토스 등에서 쓰이는 UI 프로토타입 툴로, 직관적 인터페이스가 특징임.
- 다만 코드 내보내기(export) 기능이 부족해 구현 단계로 바로 옮기기엔 한계가 있음.
- 시각적 프로토타이핑에 강점이 있지만 개발용 코드 생성용으로는 보완이 필요함.
면접팁⚡
- 커스텀 훅과 클래스의 차이를 명확히 인지하고 설명할 수 있어야 함.
- 타입스크립트 타입가드 예시를 이해하고 현업에서 어떻게 쓰이는지 말할 수 있으면 좋음.
- HTTP 에러 처리할 땐 axios.isAxiosError 사용법을 알고, 왜 권장하는지 설명 준비.
- 전역 상태 관리 도구 선택 이유와 함께 Context API와 Redux의 차이점을 구분해서 설명.
- 프로젝트 환경 선택 시 자기가 쓴 도구를 자신있게 설명할 수 있게 직접 경험과 학습을 적극 추천.
링크🔗
- React 18 SSR과 Suspense 관련 토론: https://github.com/reactwg/react-18/discussions/37
- JSON Parser in TypeScript (비추천 예제): https://github.com/jamiebuilds/json-parser-in-typescript-very-bad-idea-please-dont-use/blob/main/json-parser-in-typescript-very-bad-idea-please-dont-use.ts
- Type Challenges (TypeScript 문제): https://github.com/type-challenges/type-challenges/issues/6329
#React#TypeScript#Axios#전역상태관리#Redux#ContextAPI#SSR#코드스플리팅#취업준비#프론트엔드