2024-09-22

목차

1. 코드푸시(CodePush)와 React Native 앱 업데이트
2. 예비군 훈련과 유급 휴가
3. React 개발환경과 Vite 전환 제안
4. NFT와 저작권 이슈에 대한 고민
5. React 커스텀 훅 작성 시 주의사항
6. TypeScript에서 export default 사용에 관한 의견
7. React와 jQuery 스타일 개발 이야기
8. 데이터베이스 인덱스와 성능
9. React Native의 Concurrent Mode 및 Suspense
10. 구독 모델과 결제 복원 방식

1. 코드푸시(CodePush)와 React Native 앱 업데이트 🚀

• 핵심: React Native 앱에서 코드푸시는 OTA(Over-the-Air) 업데이트를 가능하게 해주는 서비스임.
• 설명:
  • 코드푸시는 앱스토어 배포 없이 자바스크립트와 리소스를 서버에서 내려받아 앱을 즉시 업데이트한다.
  • 커스텀 UI(예: 프로그레스바)를 추가하려면 최상위 컴포넌트(App)를 codePush HOC로 감싸거나, useCodePush 커스텀 훅을 구현해 업데이트 진행 상태를 관리해야 한다.
  • 오류가 발생하면 앱이 먹통이 될 가능성도 있어 롤백 기능이 중요하다.
  • 2025년 3월 앱센터 서비스 종료 예정이고, 코드푸시는 앱센터에서 분리되어 별도 서비스로 나온다.
  • 현재 코드푸시 업데이트 시 다운로드 진행률을 콜백 함수로 받아서 UI에 반영하는 방식이 권장됨.
• 고민 및 팁:
  • 개발 환경과 프로덕션 환경에서 코드푸시 적용 상태를 잘 구분하고 테스트하자.
  • 코드푸시 업데이트 실패하면 전체 앱을 이진 바이너리 형태로 재배포해야 하므로 안정성이 매우 중요함.
  • 커스텀 업데이트 로직은 공식 SDK 제공 함수들을 잘 활용해 구현하는 게 좋음.

2. 예비군 훈련과 유급 휴가 ⛑️

• 핵심: 예비군 훈련은 유급 휴가로 처리됨.
• 설명:
  • 예비군 훈련으로 월요일 출근이 어려울 때는 회사에 미리 알리면 연차를 쓰지 않아도 유급 휴가로 인정됨.
  • 회사에서 개인 연차를 소진하게 강요하는 건 부당하며, 신고 대상이 될 수 있음.
• 팁:
  • 예비군 훈련 일정이 잡히면 미리 회사에 알리고 휴가 처리를 요청하자.
  • 숨기는 것보다 투명하게 알리는 게 더 좋음.

3. React 개발환경과 Vite 전환 제안 ⚡

• 핵심: Create React App(CRA)은 느리고 초기 빌드 시간이 길다.
• 설명:
  • CRA로 개발할 때 빌드와 시작이 느릴 수 있는데, 이는 CRA 구성이 무겁고 오래된 번들링 방식 때문임.
  • Vite는 모던한 빌드 시스템으로 훨씬 빠른 시작과 빌드 속도를 제공한다.
  • 특히 저사양 PC에서 체감 성능 차이가 크게 난다.
• 팁:
  • 기존 CRA 프로젝트라도 가능하면 Vite로 마이그레이션 고려.
  • Vite로 환경 구성을 시작하면 생산성 향상 기대 가능.

4. NFT와 저작권 이슈에 대한 고민 🎨

• 핵심: 커뮤니티 게시글 등 가치 있는 콘텐츠의 저작권과 복제 문제는 해결하기 어렵다.
• 설명:
  • NFT(대체 불가능 토큰)는 블록체인 기반의 디지털 자산 증명 방법이나, 단순히 원장에 기록하는 것만으로 저작권 문제가 자동 해결되는 것은 아님.
  • 커뮤니티 내 공개된 글이 복제 및 재배포되는 걸 막기 어렵고, 복제된 콘텐츠가 다시 돈을 벌 수도 있는 상황이 발생함.
  • NFT는 P2P 원장에 데이터를 기록하며, 데이터 용량과 트래픽 문제도 고려해야 함.
• 의견:
  • 현재 커뮤니티 사이트에서 크게 저작권 보호가 필요하다면 별도의 법적/기술적 조치를 마련해야 함.
  • NFT 등에 대한 맹신은 피하고 현실적인 관리 방안을 찾아야 함.

5. React 커스텀 훅 작성 시 주의사항 🪝

• 핵심: 커스텀 훅은 React 훅 사용 규칙을 지켜 작성해야 한다.
• 설명:
  • 훅은 최상위에서만 호출하고, 조건문 내부에서 호출하지 말아야 한다.
  • 커스텀 훅의 입력과 출력은 명확히 정의하고, 상태 공유나 순서 문제를 관리해야 한다.
  • 리액트 공식 문서(https://react.dev/reference/rules/rules-of-hooks)에서 규칙과 베스트 프랙티스를 반드시 숙지할 것.
• 팁:
  • 훅 내부에서 비동기나 의존성 관리에 신경 써야 하며, 훅끼리 상태가 유기적으로 연결될 때는 커스텀 훅 조합이나 Context API 사용을 고려하자.
  • 공식 문서와 커뮤니티 자료 참조를 게을리하지 말자.

6. TypeScript에서 export default 사용에 관한 의견 📦

• 핵심: TypeScript 프로젝트에서 export default 사용을 피하라는 권고가 있음.
• 설명:
  • export default는 자동 완성, 리팩토링 도구 지원이 부족하고, 이름 충돌과 혼란을 일으킬 수 있음.
  • 코드 분할과 CommonJS 호환성 문제도 야기함.
  • Named exports를 사용하면 코드 일관성과 유지보수성이 향상됨.
• 참고 링크: https://basarat.gitbook.io/typescript/main-1/defaultisbad (TypeScript에서 export default 관련 권고 내용)
• 의견:
  • 팀이나 프로젝트 스타일 가이드에 따라 결정하지만, TypeScript를 깊게 활용한다면 named export를 추천.

7. React와 jQuery 스타일 개발 이야기 🔄

• 핵심: React는 jQuery와 다르게 직접 DOM을 조작하지 않고 상태(state)를 통해 UI를 재렌더링한다.
• 설명:
  • jQuery는 DOM 요소를 직접 갱신하며, React는 상태값 변경 시 뷰(View)가 자동으로 갱신되는 선언형 방식임.
  • Datagrid 같은 라이브러리에서 렌더 함수 안에 코드 로직을 작성하는 경우도 있으나, React 철학과는 다를 수 있음.
• 팁:
  • React에서는 상태 관리(useState 등)를 활용해 UI 상태와 로직을 분리하는 것이 권장됨.
  • 가능하면 함수형 컴포넌트와 훅을 적극 활용하자.

8. 데이터베이스 인덱스와 성능 🚀

• 핵심: 인덱스 생성은 데이터 조회 성능을 크게 향상시킨다.
• 설명:
  • 인덱스는 디스크에서 필요한 데이터를 빠르게 찾기 위해 메모리 내 별도의 자료구조를 만듦.
  • 데이터가 많을수록(예: 7.5백만 건) 인덱스가 없으면 검색 속도가 매우 느려짐.
  • 인덱스 생성 시 디스크 및 메모리 사용량이 증가할 수 있으니 적절히 관리가 필요함.
• 팁:
  • 자주 조회하는 컬럼 위주로 인덱스를 생성하고, 불필요한 인덱스는 제거하자.

9. React Native의 Concurrent Mode 및 Suspense ⚛️

• 핵심: Concurrent Mode는 React 18에서 도입된 비동기 렌더링 기능이나, React Native에서는 아직 실험 단계임.
• 설명:
  • Suspense는 데이터 로딩 대기 UI를 쉽게 구현할 수 있게 도와준다.
  • React Native에서 Suspense와 Concurrent Mode 활용은 아직 공식적으로 완전 지원되지 않아 주의를 요함.
• 조언:
  • 최신 공식 문서(https://reactnative.dev/docs/react-18-and-react-native#react-18-and-the-react-native-new-architecture) 참고해서 안정적으로 적용할 시기를 판단하자.

10. 구독 모델과 결제 복원 방식 💳

• 핵심: 앱 내 구독 결제는 구글과 애플 결제 시스템 기준으로 관리됨.
• 설명:
  • 구독 구매 시 백엔드 서버에서 실시간 알림(구글 RTDN, 애플 ASSN)을 받아 DB 상태를 동기화하는 방식이 일반적.
  • 백엔드 없이도 기기 내 계정 정보를 바탕으로 구독 상태를 확인하고 복원할 수 있지만, 기기나 계정 변경에 따른 혼동 가능성이 있음.
  • 여러 로그인 방식(휴대폰 번호 로그인 vs. 구글/애플 로그인)을 함께 쓰면 복잡도가 증가하므로 주의 필요함.
• 팁:
  • 결제 상태 검증과 복원 로직을 꼼꼼히 구현하여 사용자가 결제를 정상적으로 이용하도록 하자.
  • 구독 가격 책정 시 이용자 거부감도 고려해야 함.

면접팁⚡

• CodePush & OTA 업데이트:
  • 앱 OTA 업데이트 구조와 안정성 확보 방안, 오류 발생 시 롤백 처리 방법을 설명할 수 있어야 함.
• React 커스텀 훅:
  • 훅 작성 규칙과 커스텀 훅 관리 방법(상태 공유, 순서 보장 등)을 구체적으로 말할 수 있으면 좋음.
• TypeScript export 방식:
  • export default vs named export 장단점과 관련된 실무 경험 공유 가능하면 플러스.
• React 개발 환경 개선:
  • CRA vs Vite 성능 차이와 마이그레이션 필요성에 대해 논의하고 개선 방안을 제시할 수 있어야 함.

링크🔗

• React 공식 커스텀 훅 사용 규칙
• React 훅 재사용 공식 문서
• TypeScript export default 사용 권고 문서
• React Native와 React 18 새로운 아키텍처
• 외 다수 관련 React Native, 코드푸시, NFT, 구독 관련 공식 문서 및 커뮤니티 답변 정리