분류 전체보기4 react-router-dom v6 마이그레이션 (본인이 velog에 작성한 글을 옮겨왔습니다.) 기존에 운영하던 B2B향 서비스와 CMS를 react-router-dom v6로 마이그레이션하면서 작성한 내용이다. 영향도가 적은 프로젝트부터 순차적으로 적용하고, 이후 B2C향 서비스에도 적용할 예정이다. 목차 개요 전제 조건 v5와 달라진 점 이슈 및 해결방안 개요 전제 조건 React Hook을 사용하므로 React v.16.8 이상 프로젝트에 적용해야 한다. v5와 달라진 점 주요 차이점은 아래와 같다. 1. Switch 대신 Routes를 사용해야 한다. Switch 대신 Routes를 사용해야 한다. // v5 const App = () => ( ) // v6 const App = () => ( ) 2. exact가 사라졌다. v5까지는 exa.. 2022. 9. 27. TypeScript로 React Query 시작하기 Getting Started with React Query and TypeScript의 글을 바탕으로, 제 경험을 바탕으로 설명을 좀 더 덧붙였습니다. 타입스크립트로 React Query를 개발하며 혼란스러운 마음에 조금 도움이 되길 바랍니다. React Query란 무엇인가? React Query는 웹 서비스를 요청하고, 응답받은 데이터를 관리하는데 도움이 되는 라이브러리입니다. React Query가 실제로 서비스 요청을 하는 것은 아닙니다.(이 부분은 여전히 fetch나 axios와 같은 라이브러리를 사용해야합니다.) React Query를 사용하면 컴포넌트 라이프 사이클에 맞추어 적절한 타이밍에 서비스 요청을 지시할 수 있습니다. 또, 요청 응답 데이터를 상태(state)로 설정하거나 서비스 요청.. 2022. 8. 16. 스크롤 복원(Scroll Restoration) 바닐라 자바스크립트든, 리액트든 여러 페이지로 구성된 서비스를 개발하기 위해서 History API를 사용할 수 밖에 없다. 대부분 페이지 이동 메소드를 호출하거나, state를 전달하는 용도에 대해서만 주의 깊게 볼 것이다. 구글 검색 예시를 떠올려보자. 1. 검색창에 history api를 검색한다. 2. 스크롤을 내려서 원하는 검색결과를 찾는다. 3. 원하는 검색결과를 발견하면 클릭해서, 해당 사이트로 이동한다. 4. 뒤로가기 버튼을 클릭해서 이전 화면(검색결과)으로 이동한다. 1~4번을 거친 뒤 이전 화면으로 돌아왔을 때, 스크롤의 위치는 어디에 있을까? 답은, 이전 화면에서 탐색한 위치이다. 이것이 스크롤 복원의 기본(default) 동작이다. 대부분 상황에서 스크롤 복원을 의식하며 개발하지 않.. 2022. 8. 13. HTML5 Video Tag 사용하기 (본인이 velog에 작성한 글을 옮겨왔습니다.) 최근 간단한 서비스 소개 페이지를 개발하면서 기획, 백엔드 담당자와 논의한 내용에 대한 글이다. 비디오에 대한 요구사항만 크게 추려보면 아래 4가지였다. 요구사항 비디오 볼륨은 20% 정도로 노출 페이지 랜딩 시 유음으로 자동재생 컨트롤바를 클릭했을 때 이벤트 추가 mp4 영상 재생 아주 간단한 요구사항이지만, 1~4번은 서로 상충되거나 불가능한 요구사항이다. 커뮤니케이션 비용을 고려하지 않고 개발기간을 산정했다면 난감한 상황을 겪었을 것이다. 이슈 1. 클라이언트 오디오 볼륨의 20%로 재생 대부분의 사람들은 우연히 클릭한 비디오의 큰 음량으로 인해 깜짝 놀라거나 부끄러운 상황을 경험해본 적이 있을 것이다. 기획자는 비용과 시간을 들여 제작한 비디오를 .. 2022. 8. 10. 이전 1 다음
