2024-07-06

목차

1. QR 코드 스캐너와 모바일 웹 문제
2. PWA와 모바일 웹의 차이점
3. 지도 라이브러리 추천 및 인테리어 시장 이야기
4. Redux Toolkit 사용 이슈와 해결법
5. Svelte에 대한 의견과 활용 사례
6. 우아한형제들과 빠른 MVP 개발 사례
7. 애플 매직 키보드와 기계식 키보드 비교
8. 대규모 인풋 폼 관리 방법 토론
9. 기술 면접 관련 이야기
10. 개발 관련 유용 링크

1. QR 코드 스캐너와 모바일 웹 문제 📱

• React 기반 PWA(Progressive Web App)에서 QR 스캐너 라이브러리 사용 중 카메라는 나오지만, 모바일 환경에서 QR 인식이 잘 안 되는 문제 발생.
• 데스크탑 웹에서는 문제 없이 작동하지만 모바일에서는 카메라 화질이 낮고 ‘우글우글’ 거리는 화면이 보임.
• 모바일 웹에서 카메라 해상도나 포커싱 설정 등 추가 처리가 필요할 수도 있음.
• 권한 문제는 아니라 권한 팝업은 정상적으로 뜨고 카메라도 켜짐.
• QR코드 종류별 인식 차이 가능성 제기 (예: 특정 로또 QR코드는 인식 안 됨).
• 라이브러리 옵션 중 포커스 잡기 기능이 있으니 관련 설정을 확인하는 것이 좋음.
• 해결 팁: 모바일 웹과 PWA를 구분해 테스트하고, 크롬 혹은 특정 브라우저에서만 실행하도록 제한하는 방법도 고려.

QR 코드 인식 기술 설명

• QR코드 스캐너는 카메라 입력을 받아 이미지 프로세싱을 통해 QR 패턴을 분석함.
• 모바일에서는 카메라 해상도, 자동 포커스 지원 여부, 조명환경 등이 인식률에 큰 영향.
• 웹캠과 달리 모바일 환경은 다양한 디바이스와 브라우저 차이가 있어 구현 난이도 상승.

2. PWA와 모바일 웹의 차이점 🌐

• 모바일 웹: 스마트폰 브라우저(크롬, 사파리 등)로 웹사이트를 방문하는 형태.
• PWA: 웹사이트를 앱처럼 설치해 독립 실행되며, 서비스 워커로 오프라인 기능이나 푸시 알림 등을 지원.
• PWA는 브라우저 내에서 실행하지만, UI는 일반 앱과 유사하고 별도 아이콘이 생성됨.
• PWA는 성능과 UX 개선용이며, 모바일 웹은 단순히 브라우저 접속만 의미함.
• 서비스 워커: 네트워크 요청을 가로채고 캐시 제어, 백그라운드 작업 수행 가능.

3. 지도 라이브러리 추천 및 인테리어 시장 이야기 🗺️🏠

• 네이버에서 "Jindo.js"라는 지도 라이브러리를 과거에 사용했다는 언급.
• 인테리어 및 청소 관련 IT 서비스에 대한 현재 시장 상황 (경기 침체 및 수요 지역 따라 차이).
• 여러 인테리어 중개 플랫폼 존재 (예: 미소).
• 벌집 제거와 관련된 벌집 처리 사례도 공유됨.

4. Redux Toolkit 사용 이슈와 해결법 ⚛️

• 리듀서 내 상태 변경 시 구독 함수가 실행되지 않는 문제 발생.
• 문제 원인은 선언 순서 오류였음.
• Redux Toolkit은 기존 Redux보다 간편하게 스토어를 만들고 관리할 수 있도록 도와주는 라이브러리.
• 구독(subscribe)은 상태 변화가 있을 때 콜백 함수가 실행되도록 하는 메커니즘.
• 상태 불변성을 지켜야 구독자에게 알림이 제대로 전달됨.

5. Svelte에 대한 의견과 활용 사례 ⚡

• Svelte는 컴파일 단계에서 프레임워크 코드를 제거해 작은 크기와 빠른 성능을 갖는 프론트엔드 프레임워크.
• 프로토타입 제작 및 빠른 MVP 개발에 적합.
• 리액트 대비 배우기 쉽고 적은 코드로도 개발 가능.
• 실제 프로덕션 용도보다는 테스트나 실험적 프로젝트에 활용하는 경향.
• 일부 회사는 Svelte로 빠르게 제품을 출시하고 평가 후 리팩토링하는 전략을 사용.
• 단점: 생태계가 작아 지원 개발자 구하기 어려움.

6. 우아한형제들 MVP 개발 사례 🍽️

• 우아한형제들은 초기 MVP를 PHP로 빠르게 만들어 시장 반응 검증.
• 이후 스프링(Spring)으로 전환하여 고도화 진행.
• 노드(Node.js)나 파이썬도 MVP용으로 많이 선택되지만 PHP가 여전히 많이 사용됨.

7. 애플 매직 키보드와 기계식 키보드 비교 ⌨️

• 매직 키보드는 얇고 휴대성이 뛰어나며 “갬성(감성)”이 장점.
• 기계식 키보드는 타건감과 반응 속도에서 우위.
• 매직 키보드의 장점 중 하나는 지문 인식 및 연동 기능이 있어 보안면에서 편리함.
• 실제 업무용은 개인 취향에 따라 선택됨.

8. 대규모 인풋 폼 관리 방법 💻

• 인풋 필드가 6개 이상일 때 OnChange 이벤트로 상태를 실시간 관리하면 코드가 복잡해짐.
• 공용 인풋 컴포넌트를 만들어 재사용하거나, 커스텀 훅을 만들어 상태 관리 효율화 가능.
• React Form 같은 라이브러리 사용을 추천. 이들은 유효성 검사, 상태 관리, 에러 핸들링 등을 쉽게 처리해줌.
• 혼합 사용도 방법 (라이브러리 + 커스텀 훅).
• 핵심은 코드를 깔끔하고 유지보수하기 쉽게 만드는 것.

9. 기술 면접 관련 이야기 ⚡

• 코딩 테스트에서 통과해야 면접 기회가 주어짐.
• 통과 경험과 면접 준비에 관한 경험 공유.
• 면접 준비 시 꾸준한 코테 연습과 다양한 회사 도전 중요.

10. 개발 관련 유용 링크 🔗

• QR 관련 동영상

  • 모바일 QR 인식 관련 영상 1
  • 모바일 QR 인식 관련 영상 2

• 샵검색 태그

  • #pwa
  • #오와열

면접팁⚡

• 코딩 테스트 통과 후 면접 준비 집중.
• 지속적인 문제 풀이 반복이 중요하며, 실패해도 꾸준히 도전할 것.
• 유형별 문제를 다양하게 경험하여 실력을 다져야 현장에서 당황하지 않음.
• 실무 경험과 면접 질문 간 연관성도 고려해 준비하면 유리.