react deep dive12 인앱웹뷰에서 다이얼로그를 띄운 후 안드로이드 뒤로가기 버튼을 눌렀을 때 다이얼로그를 끄려면? 우리는 다이얼로그를 띄우고 없애기를 반복한다. 웹에서는 구현이 어렵지 않다. 사용자가 다이얼로그 바깥 부분(딤 영역)을 누르거나 취소 버튼을 누르면 사라지게 된다. 모든 것이 마우스 이벤트로 진행된다. 인앱웹뷰에서는 '터치'라는 이벤트가 발생하게 된다. 터치 이벤트 또한 쉽게 다룰 수 있다. 하지만 안드로이드에는 '뒤로가기' 물리 버튼이 존재한다. 뒤로가기 물리 버튼이 클릭된 것을 감지하여 다이얼로그를 꺼야 하는 상황이 왔다. 어떻게 해결할 것인가? 제일 처음 생각했던 방법은 안드로이드에서 뒤로가기 버튼을 눌렀을 때 네이티브 영역에서 인앱웹뷰 영역으로 데이터를 넘겨주는 것이었다. 이렇게 할 경우 네이티브를 담당하는 개발자에게도 공수가 들게 되어 좀 더 간단한 방법에 대해 알아보게 되었다.뒤로가기 버튼을 .. 2025. 5. 20. [ZIMZIM] pwa로 만들어 보는건 어떨까?(1) ZIMZIM은 사용자가 운동 기록과 음수량을 기록하는 어플이다.하지만 웹어플리케이션일 경우 사용자에게는 사이트에 접속하여 기록을 하는 것이 귀찮을 수 있다.그렇다면 사용자에게 앱으로 제공한다면 편히 이용할 수 있지 않을까?react-native로 구성할 수도 있겠고 아니면 pwa로 구성할 수도 있을 것 같다. 이번에는 pwa로 구성해보기로 했다. 먼저 pwa 플러그인을 설치한다.npm install next-pwanetxt.config.js에 pwa를 사용할 수 있게 설정을 해준다.그리고 public 폴더 안에 manifest.json을 만들어준다.public 폴더 안에 sw.js도 만들어준다.pwa는 https에서만 구동되기 때문에 로컬에서 구동시키려면 인증서를 받아야 한다.먼저 brew install.. 2024. 9. 15. [ZIMZIM] 클라이언트 컴포넌트에는 skeleton ui를 입혀주자 클라이언트 컴포넌트에 skeleton ui를 입혀주었다. 데이터 페칭하는 동안 사용자들에게 빈 페이지를 보여주는 것 보다 skeleton ui를 보여주는 것이 사용자 경험을 높일 수 있기 때문에 추가해주었다. 2024. 9. 14. [ZIMZIM] 클라이언트 컴포넌트와 서버 컴포넌트의 성능 차이는 얼마나 날까? 클라이언트 컴포넌트로 되어있던 것 중 서버컴포넌트로 변경하면 좋을 것을 선별했다.그 중 하나는 대시보드 페이지였다. 대시보드 페이지에는 총 3개의 차트가 있었고 클릭하면 다른 페이지로 이동하는것 외에는 다른 사용자와의 상호작용이 없었기 때문에 서버컴포넌트로 변경했다. next.js에서는 이렇게 사용자와의 상호작용이 적고 데이터를 보여줄 경우 서버컴포넌트로 구현할 것을 권장하는데 왜일까 그 이유를 생각해봤다. 미리 데이터를 받아와 사용자에게 보여줄 수 있다는 점에서 권장하는것 같아 대시보드페이지에서 차트들을 클라이언트 컴포넌트, 서버컴포넌트일 때 Lighthouse에서 측정했다. 클라이언트 컴포넌트와 서버컴포넌트를 비교했을 때 성능은 +2점, FCP(Fist Contnetful Paint) +0.3초,.. 2024. 9. 11. 이전 1 2 3 다음
