2025-02-03

목차

1. 예비군 소소한 이야기와 에피소드
2. React 타입스크립트 에러 및 상태관리 문제
3. React 앱 모니터링 도구와 Prometheus vs Datadog
4. React에서 HTML Export 및 이메일 전송 관련 질문
5. XAMPP 설치 경험과 추천 여부
6. TailwindCSS 관련 이야기와 스타일링 팁
7. JWT 기반 프로젝트 마이그레이션과 토큰 관리 방법
8. Redis 캐시 만료 전 이벤트 처리 관련 질문
9. 개발과 연애, 실력변화에 대한 토론
10. MSW(Mock Service Worker) React Native에서의 활용 여부

1. 예비군 소소한 이야기와 에피소드 🎖️

• 예비군 시즌이라며 소소한 헛소리와 웃음이 오갔음.
• 동미참, 박달, 인천 등 실감나는 지역 이름이 언급됨.
• 예비군 가고 싶어 하는 사람이 의외로 많았음.
• 예비군 경험을 지역별, 개인별로 나누며 친근감 형성.

예비군 관련: 동미참은 ‘동미참여훈련’의 줄임말로, 예비군 훈련의 일종입니다. 동미참은 비교적 집 근처에서 간편히 훈련을 받을 수 있어 선호하는 사람이 많음.

2. React 타입스크립트 에러 및 상태관리 문제 ⚛️

• string[] 타입의 파라미터를 요구하는 함수에 string 하나를 넘겨도 되는지 문의.
• 타입스크립트는 엄격하게 타입을 검사하는 언어로, string과 string[]은 호환되지 않아 일반적으로 에러 발생.
• 하지만 어떤 상황에서는 묵시적 변환이나 다른 라이브러리/함수 내부 동작에 따라 다를 수 있음.
• 상태관리 훅 useState<UploadFile[]> 와 업로드 파일 목록 변환 함수의 반환 타입도 확인 필요.
• 코드가 복잡할 때는 타입 정의와 함수 시그니처를 정확히 확인하는 것이 중요함.

타입스크립트에서 string과 string[]의 차이점은, 전자는 단일 문자열, 후자는 문자열 배열입니다. 이를 혼용하면 타입 에러가 발생하니, 정확한 타입 사용이 요구됨.

3. React 앱 모니터링 도구와 Prometheus vs Datadog 📊

• Datadog(데이터독)은 특히 대기업에서 선호하는 모니터링 서비스.
• Prometheus도 활용하지만 보통 Datadog이 더 쉽게 통합되고 관리됨.
• React 앱에서 별도의 모니터링 라이브러리를 반드시 추가하지 않아도 통신 로그 등을 수집 가능.
• 그러나 직접 메트릭을 노출하고 싶다면 Datadog SDK나 에이전트 설치가 필요.
• 이상 징후나 토큰 만료 등을 모니터링하기 위해 여러 전략과 도구를 사용함.

Datadog은 SaaS 형태 모니터링 서비스로, 클라우드 애플리케이션 상태 감시와 로그 분석에 최적화돼 있음.

4. React에서 HTML Export 및 이메일 전송 관련 질문 📧

• React 컴포넌트의 내용을 HTML로 변환해 이메일 API로 보내고 싶다는 요청.
• react.email 라이브러리가 대표적이며, React 컴포넌트를 쉽게 HTML 이메일 형식으로 렌더링해 줌.
• 이메일 전송용 HTML을 추출하는 용도로 활용 가능.
• 이메일 템플릿 관리는 일반 React 컴포넌트와 달리 별도 최적화 필요.

HTML 이메일은 브라우저 렌더링과 달라서 스타일 인라인 처리, 제한된 CSS 지원 등에 주의해야 함.

5. XAMPP 설치 경험과 추천 여부 🖥️

• 10년 만에 XAMPP를 설치한 사람이 있음.
• 설치 직후 많은 오류에 당황, 서비스 재시작이 번거로워 고민 중.
• Linux, Windows, Mac 등 OS에 따라 호환성 차이가 있어 종종 문제 발생.
• 최신 도구나 Docker 기반 개발 환경 사용 추천.

XAMPP는 Apache, MySQL 등 웹서버 스택을 한 번에 설치하는 툴인데, 가볍고 간편하지만 종종 충돌이나 버전 문제 발생 가능.

6. TailwindCSS 관련 이야기와 스타일링 팁 🎨

• TailwindCSS 버전 4 사용 시 속도가 매우 빠름을 체감.
• CSS 모듈과 TailwindCSS 혼용하는 프로젝트도 있음.
• 배경 그라데이션 적용, 반응형 디자인 등의 스타일 템플릿 공유.
• 리팩토링 시 걱정 많으나, Tailwind 사용 시 재사용 가능한 클래스 중심 유지 권장.
• 디자인 요구사항과 기능 구현 간 밸런스 중요.

TailwindCSS는 유틸리티 클래스 기반 CSS 프레임워크로, 빠른 스타일링과 유지보수가 장점임.

7. JWT 기반 프로젝트 마이그레이션과 토큰 관리 방법 🔐

• 기존 React에서 axios interceptor로 토큰 만료 감지 및 리프레시 처리하던 방식이 있었음.
• Next.js 15 버전으로 마이그레이션 중이며, BFF(Backend For Frontend) 아키텍처를 쓰기도 함.
• Next.js middleware 단에서 토큰을 확인하고 처리하는 방법이 가능.
• axios나 fetch 모두 사용 가능하며, 적절한 인증 흐름 구현 필수.
• BFF는 별도 서비스로 유지하는 것이 관리와 정신 건강에 유리하다는 의견.

BFF 패턴은 프론트엔드 요구에 맞춰 API를 중간에서 재구성하는 서버 로직으로, 토큰 관리, 보안 등에 효과적.

8. Redis 캐시 만료 전 이벤트 처리 관련 질문 🧠

• Redis 캐시 만료 직전에 이벤트를 바인딩할 수 있는지 문의.
• Redis는 만료 시점에 이벤트(Notification)를 발생시키는 기능이 제한적임.
• 일반적으로 만료 후 이벤트를 처리하거나, 만료 전 폴링 혹은 크론 작업으로 대응함.
• Redis Keyspace Notifications 설정을 활용하면 일부 알림 가능하지만 정확한 타이밍 제어는 어려움.
• 폴링이 번거롭다면 캐시 TTL보다 여유 있게 갱신 로직 설계 권장.

Redis Keyspace Notifications는 키의 상태 변화를 Pub/Sub 방식으로 알리는 기능이나, 만료 직전 알림 기능은 제한적임.

9. 개발과 연애, 실력변화에 대한 토론 💬

• 개발 실력 저하를 연애 탓으로 돌리는 농담과 토론.
• ‘연애하면 개발 못 한다’는 농담 말고, 정신 건강과 시간 관리가 더 중요하다는 의견.
• 스트레스 상태와 집중력 차이에 따른 개인차 존재.
• 적절한 휴식과 정신 건강 유지가 중요한 포인트로 강조됨.

10. MSW(Mock Service Worker) React Native에서의 활용 여부 🛠️

• React Native에서도 MSW를 사용하는지 질문.
• 명세가 나오면 목 데이터로 UI와 API 호출 부분 구현 가능.
• React 환경과 달리 네이티브 모바일 환경이기에 MSW 설정에 제한이 있을 수 있음.
• RN에서는 네이티브 목킹 라이브러리나 별도의 테스트용 서버도 활용.

MSW는 브라우저 환경을 활용하는 API 목킹 툴로, React Native에서는 별도 구성이나 대체 도구가 필요할 수 있음.

면접팁⚡

• 타입스크립트 엄격한 타입 관리 중요성
  string과 string[] 타입 차이를 명확히 설명하고 실제 코드에서 예외 처리 방안 등 경험을 제시하면 좋음.

• 토큰 관리 방법과 BFF 아키텍처 이해
  JWT 토큰 만료와 리프레시 흐름, Next.js 미들웨어 활용 경험은 백엔드-프론트엔드 연동 분야에 큰 플러스.

• 모니터링 도구 선택과 사용 이유
  Prometheus와 Datadog의 차이, 각 도구의 장단점과 실제 프로젝트에서의 활용성 토론 가능.

• 캐시 만료 알림과 Redis 이벤트 처리 한계
  시스템 설계 시 캐시 미세 제어와 만료 이벤트 처리 전략에 대해 알고 있으면 고급 개발자로 인정받음.

링크🔗

• TypeScript 이슈: https://github.com/microsoft/TypeScript/issues/61088
• React Email 컴포넌트: https://react.email/docs/components/html
• Next.js 공식 홈페이지: https://nextjs.org
• Datadog: https://www.datadoghq.com
• MSW (Mock Service Worker): https://mswjs.io