frontend
-
컬러 렌즈 개발 후기 EP. 1 : 그냥 100vh만으로는 충분치 않다..!프로젝트 개발 후기 2023. 8. 3. 21:11
사건의 발단 컬러 렌즈 프로젝트는 온전히 모바일에서만 동작하는 프로젝트이다. 따라서 모바일에 최적화된 UI를 만드는 것이 이번 프로젝트의 핵심적인 디자인 목표였는데, UI를 구성할 때, header부터 footer까지 딱 첫눈에 보이는 화면에 꽉 차도록 구현하고 싶었다. 하지만, 문제가 발생했다. 처음에 CSS 상에서 나는 단순하게 데스크탑 UI를 만들때처럼 전체 화면의 높이값을 100vh로 설정했다. 왜냐면, 데스크탑 상에서는 이렇게 진행해도 하단에 추가적인 상태바가 존재하지 않았기 때문에, 가려지는 부분이 없었기 때문이다. 하지만, 모바일에서 이러한 방식은 통하지 않았다. 왜냐하면, 모바일 버전에서 크롬 브라우저는 상/하단에 위치한 주소창 및 메뉴 바가 존재했고, 이때 화면을 100vh로 해버리면 하..
-
[ React.js / 에러 ] HTML video 엘레먼트 src 변경 시 렌더링 업데이트가 되지 않는 에러.Web/React.js 2023. 6. 30. 19:00
사실 에러라고 하기보다는 리액트의 렌더링에 대해 더 명확하게 알지 못해서 벌어진 나의 실수라고 하는 것이 더 정확하지만... 에러 상황 : 현재 리액트로 나의 작업물들을 모아둔 아카이빙 웹사이트를 개발하는 중이다. 내가 구현하고자 했던 기능은, 화면 왼편의 프로젝트 리스트 중 하나를 클릭하면, 화면 오른편에 해당하는 프로젝트의 정보를 보여주는 것인데, 이때, 프로젝트의 데이터에 비디오가 있다면 video 태그를 함께 return하여 보여주는 것이었다. 알고리즘을 구상하여 코딩을 진행했고, 잘 동작하는듯 했다. 하지만, 뜻밖의 문제를 직면했는데, 비디오가 없는 프로젝트를 클릭했다가, 다시 비디오가 포함된 프로젝트를 클릭하는 경우에는 제대로 비디오가 보여졌으나, 비디오가 포함된 다른 두 프로젝트를 연속으로 ..