개발/React (13) 썸네일형 리스트형 모바일 웹뷰환경에서 영상을 제공하는 여정 목차 글을 시작하며 : 글또 커뮤니티 소개 및 주제 결정 서비스 영상 삽입 과정에서의 고민과 선택 Video 태그를 활용한 서비스 영상 삽입 및 Layout Shift 개선하기 iOS에서의 자동재생 이슈 Lottie를 활용한 영상 제공 및 Dynamic Import를 활용한 성능 최적화 운영하던 도중 발견한 추가 이슈사항 (2024.4.17 추가내용) Re-Cap 글을 시작하며 : 글또 커뮤니티 소개 및 주제 결정 이전 글에서 이야기했던 바와 같이 혼자서 파편화된 정보를 계속해서 축적해 나가기보다는 보다 정제된 글로 발전시키면서 가지고 있던 기억을 더 장기화하기 위해 많이 고민해 왔고, 이를 더 잘 수행하기 위해 글또라는 커뮤니티에 속하게 되어 앞으로 5개월간은 주기적으로 글을 작성할 예정입니다 :) 글.. useTouchNavigation 개발기 일단 너무 오랜만에 글을 올리게 되어 상당히 어색하지만, 계속해서 개발을 열심히 하고있고 개인적으로 노션에만 아카이빙하던 것들을 앞으로는 다시 공개적으로 아카이빙하면서 부족한점을 채워가야겠다는 스탠스로 방향을 정했습니다. (_ _) 만들게 된 계기 현재 현업에서는 속도감있는 서비스제공을 위해 메인 앱 내에서 웹뷰로 일부 피처 서비스를 제공하고있고, 이러한 웹뷰에서는 본앱과 유사한 경험을 주는 유저에게 제공하는 것이 주요한 목적 중 하나였습니다. 따라서 유저가 많은 컨텐츠를 접하고 이를 유연하게 이동하기 위해 우측 고정 네비게이션 바가 필요했고, 이러한 요구사항을 구현함에 있어서 custom hook으로 headless하게 기능을 제공할 수 있겠다는 생각에 작업하게 되었습니다. 기능적 한계 현 버전에서는 .. React-Query(tanstack/query)의 Suspense 옵션을 사용할 때 주의할 점 모던 프론트엔드에서 대부분의 리액트 코드는 서버와의 통신상태에 따라 View를 나누어 보여주어야하기때문에 아래와 같은 형태로 코드를 작성하는 경우가 빈번하다. /** React */return ( {isLoading && } {apiError && } {data && }) <p data-renderer-start-pos="207" data.. Why use .jsx 현재 근황 5월에 연이 닿아 입사하게 된 회사에서 정신없이 일하느라 블로그 관리가 너무 소흘했던 것을 2021년이 되어서야 새삼 느끼게 되었다. 내부 일정, 상황 속에서 여러가지를 느끼며 개발하고 있는 와중에도 레거시에 흔들리지 않기 위해 항상 코드의 근거를 찾고 기본 개념을 잊지 않기 위해 노력해왔고, 이들을 시간을 내어 다시 정리하며 앞으로 나아가기로 다짐하여 오랜만에 다시 글을 적는다. ( 오랜만이라 정해진 틀 없이 의식의 흐름대로 적어보기로 한다. ) 왜 이런 주제를 다루게 되었을까 ? 사실 이런 주제는 처음 리액트를 접할 때부터 알아야하는게 아닌가 싶지만, 보통 토이프로젝트의 기본 틀을 잡을 때에는 기본 개발 템플릿인 create-react-app 을 사용했고, 또는 구글링을 통해 접한 코드들에.. Why Virtual DOM? 글을 시작하며 ... 리액트를 공부하고 나서는 Virtual DOM 이라는 말을 당연하게도 들어봤을 것이다. 이것이 React 사용의 장점이라고들 말이다. 그러면 Virtual DOM 이 어떻게 동작하는데 ? 라는 물음을 스스로 던져봤을 때에는 render하기 전 내용을 Virtual DOM에 그려서 미리 적용하고, 그 다음에 그려주는 역할을 한다. 라고 생각했었다. 하지만 거기서 한걸음 더 나아가 그렇게 하는게 어떤 장점이 있는건데 ? 라는 질문을 해보았을 때에는 순간적으로 멈칫하게 되었다. React를 사용하는 개발자로서 React의 이점이 무엇인지 정확히 모른다는 점이 아무래도 내가 맡아서 하는 분야에 대한 전문성이 떨어진다는 생각에 이를 다시한번 찾아보게 되었다. 그래서 Virtual DOM이 왜.. 이전 1 2 다음
