2025-04-14

목차

1. 아침 인사와 날씨 이야기
2. React Query 에러 처리 방법
3. 권한 체크 및 인증 처리 방법
4. Firebase Studio 및 Atomic Pattern 논의
5. Git 관리 및 실수 사례
6. React Router v7 관련 이슈
7. 원격근무와 업무 집중도
8. 건강과 수면의 중요성
9. 멀티팩터 인증(MFA) 분실 경험과 주의사항
10. 스타일링 라이브러리 선택: styled-components vs Tailwind CSS

1. 아침 인사와 날씨 이야기 ☀️🌬

• 아침 출근 시 기상 메시지를 주고받음
• 4월 중순임에도 불구하고 쌀쌀한 날씨에 대해 이야기
• 패딩이나 니트를 꺼내 입는 등의 겨울옷 재등장 언급

2. React Query 에러 처리 방법 🐞

• HTTP 403 오류(인가 실패)와 같은 에러를 공통 처리하는 방법에 대한 질문
• Axios에서 인터셉터를 활용하는 방식을 React Query 환경에 맞게 적용할 수 있는지 궁금해함
• 이에 대해 Error Boundary 활용, Axios 인터셉터 사용 가능성, 혹은 React Query의 글로벌 콜백 참조 제안
• ky 라이브러리: Fetch 기반이며 가볍고 인터셉터 사용하는 데 유리한 라이브러리로 소개됨
• 참고 블로그 공유: React Query 글로벌 에러 핸들링 팁

용어 설명

• React Query: 서버 상태 관리를 편리하게 해주는 라이브러리
• 인터셉터(interceptor): 네트워크 요청이나 응답을 가로채서 특정 작업을 수행하는 기능
• Error Boundary: React 컴포넌트 트리에서 발생하는 렌더링 에러를 처리하는 방법

3. 권한 체크 및 인증 처리 방법 🔑

• 토큰 권한 확인 시 매 라우팅 시점마다 location.pathname 감시하는 방식 질문
• 넥스트(Next.js) 미사용 상태에서의 권한 체크 방안 논의
• 미들웨어(middleware.ts)에서 권한을 체크하는 방법 제시
• React Router에서 loader 함수와 shouldRevalidate 옵션으로 권한 체크 가능
• 백엔드에서 유저 정보 API를 별도로 요청하는 방식을 권장
• 권한 변경이 잦은 서비스 특성상 권한 체크 구현이 까다로움

용어 설명

• Middleware: 요청과 응답 처리 사이에 끼어들어 처리 로직을 삽입하는 코드
• Loader: React Router v6.4+ 버전에서 데이터 로딩 및 권한 체크 등에 사용하는 함수
• shouldRevalidate: 데이터 재검증 여부를 제어하는 옵션
• 인증서(verify): 안전한 인증을 위해 암호화된 증명서 사용

4. Firebase Studio 및 Atomic Pattern 논의 🔥

• Firebase Studio 성능 평가
• Atomic Pattern(아토믹 디자인) 적용 요구가 있었으나 충실하지 않음 지적
• Atomic Pattern: UI 구성요소를 원자(atom) 단위부터 복합체까지 계층 구조로 설계하는 방법
• 클로드 3.7 (Claude 3.7) AI 모델을 언급하며 코드 이해에 도움 받음

5. Git 관리 및 실수 사례 ⚠️

• Node_modules 폴더가 깃에 대량으로 올라가는 실수 발생 사례 공유
• .gitignore 파일이 제대로 작동하지 않아 실수가 발생
• 신규 개발자는 실수가 있을 수 있음, 팀 내에서 인내심 갖고 문제 해결 필요
• Git 관리 원칙: node_modules 등의 불필요한 파일은 반드시 .gitignore로 제외
• 프로젝트별 .gitignore 파일 통일 중요

6. React Router v7 관련 이슈 🛤

• React Router v7 SPA 용도 빌드 시 index.html이 생성되지 않는 문제 언급
• Vite 환경에서 빌드 명령어 변경 필요성 제기
• 일부 개발자가 혼란 겪고 있으므로 업그레이드 시 공식 문서 확인 필수

7. 원격근무와 업무 집중도 🏠

• 회사 출근 시간과 조기 퇴근 희망에 관한 대화
• 자택근무 시 집중도와 업무 능률이 더 올라감 경험 공유
• ADHD 등 집중력 문제를 겪는 사람들도 있어 개개인 상황 차이 존재

8. 건강과 수면의 중요성 🛌

• 하루 7시간 이하 수면 시 컨디션 저하와 예민함 증가
• 충분한 수면과 건강 관리 필요성 강조
• 헬스(운동)와 좋은 식습관(예: 제육볶음)도 중요하다는 의견 교환

9. 멀티팩터 인증(MFA) 분실 경험 및 주의사항 🔐

• Oracle Cloud MFA 분실 후, 결제카드 번호 일부 등 보안 정보 없으면 복구가 어려움
• MFA(Multi-Factor Authentication): 두 가지 이상 인증 요소를 결합하여 보안을 강화하는 방법
• 가입 후 중요 정보는 반드시 기록해둘 것 강조

10. 스타일링 라이브러리 선택: styled-components vs Tailwind CSS 🎨

• styled-components 메인테이너 유기 상태로 사실상 버려진 상황
• 프로젝트에선 emotion, styled-components 대신 Tailwind CSS 선호
• Tailwind CSS는 유틸리티 클래스 형태로 빠르고 효율적인 스타일링 지원
• @emotion/styled 라이브러리도 스타일드 컴포넌트 대안으로 추천

용어 설명

• styled-components: CSS-in-JS 방식 디자인 라이브러리
• Tailwind CSS: 클래스 기반 유틸리티 퍼스트 CSS 프레임워크
• @emotion/styled: styled-components와 유사한 CSS-in-JS 라이브러리이며 유지보수 활발

면접팁⚡

• 에러 처리 전략 면접 시 React Query의 글로벌 에러 처리 방법과 Error Boundary 활용 가능성 설명
• 권한 관리 질문에 대해 토큰 직접 파싱 vs 백엔드 API 확인 방식의 장단점 비교
• Git 관리 실수는 흔한 일이므로 문제 해결사로서의 태도 강조
• 스타일링 라이브러리 변화 트렌드를 언급하며 최신 툴에 대한 관심 표현

링크🔗

• React Query 글로벌 에러 핸들링: https://tkdodo.eu/blog/react-query-error-handling#the-global-callbacks
• Next.js 앱 개발 참고 블로그: https://velog.io/@ice1github/Next.js%EB%A1%9C-%EC%95%B1-%EA%B0%9C%EB%B0%9C%EC%9D%84-%ED%95%98%EB%A9%B4%EC%84%9C