2024-03-25

목차

1. 날씨와 일상 이야기
2. 카카오톡/네이버 인앱 브라우저 UA 처리
3. 리액트 상태관리 및 성능 관련 토론
4. 인증 및 보안 로직 구현 방법
5. HTML 텍스트 데이터 DB 저장 vs. 하드코딩 이슈
6. 깃(Git) 브랜치 병합과 스태시 활용 팁
7. 리액트 17과 18 버전 타입 충돌 문제 해결 노하우
8. VSCode 테마 추천 및 개발환경 이야기
9. CRUD 페이지 분리 vs. 통합 관리 전략
10. 면접질문 및 기술적 고민

1. 날씨와 일상 이야기 🌤️

• 대화 시작은 봄철 밤 기온 얘기부터
• 예상보다 따뜻한 밤이라 선풍기 켰다는 이야기
• 출퇴근 지하철 3호선 지연, 대중교통 불편함 공유
• 꽃가루 알레르기와 건강 관련 조언도 오감됨

2. 카카오톡/네이버 인앱 브라우저 UA 처리 📱

• **인앱 브라우저(In-App Browser)**란?
  카카오톡, 네이버 앱 등에서 링크 클릭 시 앱 내에서 열리는 브라우저를 의미
• 사용자 에이전트(UA) 문자열을 이용해 인앱 브라우저 여부를 감지
• 문제점: 인앱 브라우저는 구글/애플 로그인 시 보안 문제 발생 가능
• 대응법: 강제로 네이티브 브라우저(크롬, 사파리)로 유도하는 스크립트 사용
• 애플 사파리의 경우 우회 방법 없어 제한적임

Tip: 인앱 브라우저 감지는 UA 체크 + 정규식으로 구현하되, 모든 플랫폼 별 차이도 고려해야 함.

3. 리액트 상태관리 및 성능 관련 토론 ⚛️

• 전체 선택 기능 구현을 위해 인덱스 키를 상태로 별도 관리하는 사례
• reduce vs map 두 가지 접근법 비교
  • reduce: 한 번의 순회로 처리할 수 있어 성능 면에서 유리
  • map: 코드 가독성 측면에서 직관적
• 리액트에서 상태 업데이트 시 중복된 데이터 조회를 최소화하는 방향 권장
• SWR, React Query 등 서버 상태 패칭 라이브러리와 글로벌 상태 관리 오남용 사례 지적

4. 인증 및 보안 로직 구현 방법 🔐

• 인증되지 않은 사용자가 URL 직접 접근 시 UI 틀은 보여지나 데이터는 제한됨
• 보안 강화 방법:
  1. 서버사이드에서 토큰 유효성 검사 후 페이지 접근 허용 또는 리다이렉트
  2. 클라이언트에서 토큰 체크는 한계 존재 → 반드시 서버 검증 필요
• 전형적인 방법은 인증 실패 시 로그인 페이지로 리다이렉트 처리
• UI 자체 노출보다는 민감 데이터 제공 여부가 핵심

5. HTML 텍스트 데이터 DB 저장 vs. 하드코딩 이슈 📝

• 페이지의 모든 텍스트를 DB에서 불러오는 아키텍처에 대한 의문
• DB 저장 이유: 다국어 지원, 관리자편집, SEO등 향상 목적
• 단점: 프론트엔드와 백엔드 모두 유지보수 부담 발생
• 각자 역할이 분리되어야 하며, 상황에 따라 적절한 설계가 필요
• SEO(검색엔진 최적화)를 고려하면 서버에서 텍스트 렌더링하는 것이 권장됨
• 관리자 UI를 통해 비개발자가 내용 변경 가능하도록 하면 장기적 유지보수 유리

6. 깃(Git) 브랜치 병합과 스태시 활용 팁 ⚙️

• 기존 기능 A와 수정 기능 B를 각각 브랜치에서 작업 후 병합 시나리오
• A 기능은 이미 main에 병합 완료된 상태에서 B 기능 수정 병합 시 A 기능 유지 여부 걱정
• 결론: 수정된 부분이 겹치지 않으면 A 기능은 그대로 유지됨
• 병합(Merge) 과정에서 동일 코드 수정을 동시에 하면 충돌(Conflict) 발생
• 해결법:
  1. 최신 main 브랜치를 병합하기 전에 작업 브랜치를 git pull로 최신화
  2. 충돌 시 직접 코드 수정 후 병합 진행
• Git stash 기능
  • 임시 작업 공간에 변경 사항을 저장하고, 나중에 다시 복원할 수 있음
  • 작업 중 브랜치 전환 시 매우 유용
• GUI툴(예: Sourcetree, GitKraken) 활용 추천

7. 리액트 17과 18 버전 타입 충돌 문제 해결법 🐱‍💻

• React 17 버전용 타입 정의와 React 18 버전 간 타입 충돌 발생
• 주로 forwardRef 사용 컴포넌트에서 ref 타입 불일치하는 오류 경험
• 해결 팁:
  • yarn이나 npm으로 react 및 관련 @types/react 버전 동기화
  • 필요 시 d.ts 타입 재선언(오버라이딩)으로 임시 조치 가능
  • package.json에서 타입버전 범위 명확히 지정
• 최신 버전 업그레이드 전까지 호환성 이슈는 일시적일 가능성 높음

8. VSCode 테마 추천 및 개발환경 이야기 🎨

• VSCode 기본 테마 변경 후 가독성 및 디자인 불만 다수
• 인기 테마:
  • Atom One Dark (부드러운 다크모드, 눈에 덜 피로함)
  • Monokai Pro (유료지만 개발자 사이에서 선호됨)
  • Dark+ (VSCode 기본 다크 테마)
• 다크모드 선호 이유: 눈의 피로 감소, 야간 코딩에 적합
• IDE 익스텐션으로 시간대별 테마 자동 변경 가능
• 테마 색상은 개인 취향이며, 업무 효율과 직결됨

9. CRUD 페이지 분리 vs. 통합 관리 전략 🗂️

• 등록(Add) 페이지와 수정(Edit) 페이지를 한 컴포넌트 내 분기 처리 vs. 별도 페이지 분리 고민
• 의견 요약:
  • 작은 프로젝트 또는 단순 UI는 한 페이지에서 분기 처리 가능
  • 기획 변경과 복잡도 증가시 유지보수 어려워짐
  • 확장성과 명확한 책임 분리를 위해 페이지 분리 추천
• 컴포넌트 중복 최소화는 공통 컴포넌트 분리 활용 권장
• 실무에서는 상황과 기획 안정성에 따라 선택

10. 면접팁⚡

5년 차 리액트 개발자 면접 대비 질문 예시

• useEffect 훅이 무엇인지, 어떻게 사용하는지 설명해 보세요
• React 17과 18의 주요 차이점과 업그레이드 시 주의사항은?
• 상태관리 라이브러리 활용 경험 및 장단점은? (Redux, SWR, React Query 등)
• 깃 병합 충돌 처리 경험과 해결 방법 사례
• 인증 로직 설계 시 클라이언트와 서버 역할 분담
• CRUD UI 설계 시 페이지 분리와 통합 관리 장단점 생각해보기
• 타입스크립트 사용 경험과 버전 간 충돌 해결 경험

링크🔗

• 인앱 브라우저 구글 로그인 이슈 해결 코드
• 자바스크립트 이벤트 루프 이해
• 자바스크립트 이벤트 루프 설명 블로그
• 타입스크립트 Truthy 값에 대한 타입 추론
• VSCode Atom One Dark 테마
• 리액트 17-18 버전 타입 충돌 대응 트윗
• 프롬프트 마켓 플랫폼 www.leadprompt.co.kr