개발하면서 이슈가 많긴 한데 일단 간단한 것부터 남긴다.
현재 내가 맡은 서비스는 Nextjs로 개발했고, 얼추 1단계 개발은 완료했다. 앱으로 서비스할 예정이라 서비스를 Flutter로 래핑하는 작업을 하고 있다.
그런 작업 중에 발견된 이슈들.
- 다른데에선 그렇지 않은데 특정 페이지에서 키보드가 올라오면 화면이 확대되는 이슈가 있었다. (IOS)
이 문제는 쉽게 해결됐는데 회사 동료가 겪었던 이슈였다. Input의 font size가 16보다 작을 때 이런 이슈가 발생을 했고, 화면 확대를 막음으로써 해결했다.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />- 앱으로 사용하는 특성 상 많은 모달, 오버레이 등이 사용될 수 밖에 없었다. 그래서 z-index, fixed 관련한 이슈가 발생을 했다. 크롬에서는 문제가 없었는데 fixed 처리해놓은 Navigation이 Overlay 위로 올라 온다던지, 이미지 뷰어를 만들어서 띄웠는데 이미지 뷰어 뒤쪽의 스크롤이 노출된다던지..
가장 쉽게 해결하는 방법은 Portal을 사용해서 가장 상위에 엘리먼트를 띄우는 것이다.
모달을 모달답게, 토스트를 토스트답게 사용하려면 최상단에 띄워야 한다고 하는 글을 얼핏 본 것 같지만, 자잘한 관련 이슈를 해결하려면 무조건 최상단으로 올리는게 맞는 것 같다.
그게 어렵더라도 최소한 해당 컴포넌트 레벨에서 최상단으로 올려야 문제가 안생긴다. 나같은 경우는 크게 공지사항 내용과 댓글 영역, fixed 처리 된 댓글 작성 영역이 있었고 원래는 댓글 작성 영역이 댓글 영역에 포함되어 있었다. 그런데 fixed로 넣은 이미지가 노출되지 않는 문제가 발생했다. 그래서 이들을 분리해서 프래그먼트 안에 헤더, 공지사항 내용, 댓글, 댓글 작성 이런 식으로 배치했다. 댓글 작성 영역을 제일 상위로 올림으로써 문제를 해결했다.
프론트엔드 개발자 입니다.