트러블슈팅4 웹에서 배경이 투명한 영상 사용하기 실무를 하다보면 움직이는 오브제를 배경 요소로 넣어달라는 요청이 오곤 한다.ex) https://ko.wix.com/transparent-videos 투명배경 동영상을 통해 웹사이트를 특별하게 만드세요| 투명배경 비디오 | Wix.comWix의 독보적인 투명배경 동영상 컬렉션으로 웹사이트를 차별화시켜보세요.ko.wix.com 그동안 우리 조직 내에서 권장하는 영상 포맷은 가장 안정성이 높고 압축률이 좋은 mp4였고,배경이 투명한 움직이는 요소를 써야할 땐 apng로 전달받아 사용하고 있었다. 그러나 apng는 png를 프레임 단위로 이어놓은 것이라 기본적으로 용량이 컸고,해상도가 커질수록 용량은 더더욱 커진다는 단점이 있어서 사용에 제약이 있었다. 이번 프로젝트의 경우 큰 사이즈의 영상을 배경 오브제로 .. 2024. 8. 25. 리액트의 Life Cycle을 알고 해결한 이슈(useEffect, useLayoutEffect) 실무에서 리액트로 업무를 하다가 라이프 사이클에 대한 고려가 부족해 발생한 이슈가 있었다. 라이프 사이클에 대한 이해를 바탕으로 문제를 해결하였고, 그 과정을 기록해본다.TODO유저의 상태가 담긴 데이터를 fetch 해오고 이 데이터를 바탕으로 컴포넌트를 렌더링 해야 함.이 때 로그아웃 상태면 api 호출 없이 바로 로그아웃 화면 노출, 로그인 시에만 fetch를 해야 함.의도한 동작1. 로그인 함수를 불러오고 로그인이 성공하면 전역 context로 로그인 값을 설정,그리고 이 값을 가져오는 custom Hook을 만듬.(useLogin)2. fetch가 필요한 컴포넌트에서 useLogin을 이용해 로그인 체크 2-2. 로그인이 되어있다면 fetch 실행3. response 값으로 userState.. 2024. 8. 25. URL을 이용하여 탭 메뉴 구성하기 페이지 내에서 탭으로 두 개의 하위 페이지를 구분하고, 외부에서 해당 탭으로 즉시 연결이 가능한 웹을 갑작스레 구현해야 했다. 지금까지 업무에서 탭 메뉴를 구성할 때에는 주로 css의 display 속성을 none과 block(혹은 flex)로 전환하는 형태로 구성을 했고, 별도의 url이 요구된 적은 없었다. 그러나 이 경우에는 외부에서 두 탭으로 즉시 연결되는 url이 각각 필요했다. 디자인부터 모든 작업이 하나의 페이지를 기준으로 진행되다가 갑작스럽게 url만 2개가 필요해진 상황이었기 때문에, 완전히 다른 두 개의 url을 생성해 사용하는 것은 여러모로 리소스 낭비였고 기획 의도와도 어긋나는 방식이였다. 또한 탭이 변경될 때에는 탭 안에 있는 기능들이 실행 되어야 하기 때문에 페이지가 다시 로드되.. 2024. 8. 25. 뒤로가기 후 자바스크립트가 동작하지 않는 이유 업무 중 아래와 같은 이슈가 하나 생겼다.'부적절한 값 입력 등의 이유로 폼 제출 후 다시 뒤로가기를 통해 페이지로 돌아왔을 때, Select 안의 값이 남아있질 않는다.' 똑같이 Form에 들어있는 다른 Input 박스나 Textarea의 값들은 잘 남아있는데, 이상하게 Select 박스만 데이터가 남아있지 않았다. 이유는 Select만 커스텀으로 만들어졌기 때문이었다. 다른 입력창들은 모두 기본 input태그에 스타일링만 했다.그래서 선택된 값을 커스텀 DOM으로 갱신해주는 함수를 페이지가 로드될 때 스크립트에서 한번씩 실행해주어야 했다. 함수는 정상 로드 되는 것으로 보이는데도 불구하고 동작이 정상적으로 실행이 되지 않아처음에는 함수 자체의 문제인 줄 알고 여러가지 방법으로 로직을 바꾸는 시도를 .. 2024. 8. 25. 이전 1 다음
