위와 같이 하단에 고정시킨 영역이 키보드가 열렸을 때 키보드 위에 위치하도록 구현해야 했다.하지만 iOS에서 키보드가 열리면 position: fixed 요소가 키보드에 가려지는 문제가 자주 발생한다.이 문제를 해결하면서 공부한 내용을 정리하고자 한다. 플랫폼 마다 다른 키보드 열림 시 페이지 처리방식안드로이드와 ios는 가상키보드가 열릴 때 페이지를 차지하는 방식이 다른데,안드로이드는 키보드가 열릴 때 viewport를 키보드를 제외한 영역만큼의 height를 설정해준다.ios는 viewport가 아닌 document를 키보드 영역 만큼 밀어버린다. → fixed 요소가 키보드 아래에 갇히는 문제 발생 여러가지 구현 방법이 있겠지만, 나는 키보드 높이와 키보드 유무에 따라 하단 요소의 위치를 변경해주..
이번 프로젝트에선, S3와의 통신을 모두 클라이언트단에서 처리하기로 했습니다.업로드를 구현하는 과정에서 Multipart Upload라는걸 알게되었고 적용시켜보았습니다⛳️ taskAWS SDK for JavaScript 사용하여 대용량 파일을 청크로 나누어 업로드(MultiPart Upload)한다.✅ task flowMultipart upload 구현 작업Multipart upload initiation: 고유한 upload id를 반환받는 단계Parts upload: 업로드 할 파일을 chunk로 쪼개서 각각 요청을 보내는 단계Multipart upload completion: chunk를 결합하고, src를 반환받는 단계Abort Upload: 예외처리Multipart upload Progress..
문제상황 #1 타겟 이벤트로 부터 상위 이벤트까지 발생하는 이슈드롭다운 트리거버튼(`...`) 을 클릭하면 상위에 있는 카드컨테이너의 "click" 이벤트까지 같이 발생하는 문제가 있었다.하필 카드컨테이너의 "click" 이벤트는 navigate 시키고 있어, 드롭다운 트리거 버튼을 클릭하면 다른 페이지로 이동하는 의도치 않은 문제 발생했다. 코드를 살펴보자면, 카드 컨테이너를 클릭하면 상세페이지로 … 버튼을 클릭하면 드롭다운이 보이도록 2개의 click 이벤트가 등록되어 있었다. 그리고 이 카드가 dom에 여러개 그려지고 있다. (다중 드롭다운!!) console.log("컨테이너 클릭이벤트 발생!!!")}> console.log("드롭다운 클릭이벤트 발생!!!"}> ..
문제 상황이번 프로젝트에선 toss slash의 useOverlay 훅을 사용해 모달과 같은 오버레이 컴포넌트를 관리하고 있었습니다.문제는 특정 오버레이 컴포넌트는 상태에 따라 렌더되어야 했는데, 문제는 오버레이 컴포넌트가 최초 마운트될 때의 상태를 "고정"하고 있어, 이후에 상태가 업데이트되어도 변경사항을 반영하지 못하는 상황이 발생했습니다. 문제가 되었던 발생했던 SortOptionBottomSheet 경우, 사진과 같이 선택한 sort option의 status에 따라 스타일을 다르게 주었지만 한번 마운트가 된 경우에선 status가 고정되어 있는 문제가 있었습니다. 해당 이슈의 원인은 OverlayProvider 하위 스코프에서 Overlay 컴포넌트가 렌더되기 때문이였습니다.📍 관련 이슈 h..
