REACT34 [React] 배경화면 동영상/사진 - Safari 자동재생 안됨, Chrome 구분하여 자동재생 작동하기 구현 동아리 웹사이트를 만들면서 Home 화면 배경화면 동영상이 Safari에서는 자동 재생이 안된다는 사실을 알게 되었다.. 알고 보니 사파리는 사용자 경험을 향상시키기 위해 자동 재생 정책을 가지고 있는데, 광과민성 발작을 일으킬 수 있는 영상, 음란물, 폭력, 혐오, 공포가 포함된 영상 등이 자동 재생되어 원치 않게 보게되는 문제를 방지하기 위해 화면이 딱 켜졌을 때에 대한 자동 재생을 막아두었다. 그래서 사용자의 스크롤 컨트롤이 생기면 자동 재생이 되는 기능을 넣자고 하기도 했지만..ㅎㅎ 그래서 우리는 Safari일 때와 Chorme일때의 환경을 JS로 읽어와 서로 다른 인터렉션을 보여주기로 결정하였다. 사용자 에이전트(userAgent) 문자열 읽어오기 -> 사용자 에이전트 문자열을 읽어오기 위해 U.. 2023. 7. 7. [React] date-fns와 Style-Components로 커스텀하기 쉬운 달력 만들기(2편) 저번 1편에 이어서 2편으로 date-fns와 Style-Components로 커스텀 달력 편을 마무리 하고자 합니다! 2023.07.06 - [코딩/Javascript] - [React] date-fns와 style-components로 커스텀 달력 만들기(1편) [React] date-fns와 style-components로 커스텀 달력 만들기(1편) 올해 새로운 프로젝트를 맡게 되면서 달력에 서버에 있는 데이터를 보여줘야하는 기능을 구현하게 되었다. 다양한 라이브러리가 있었지만 디자이너의 요구에 맞는 달력을 제작하기가 어려워 da quddkflty.tistory.com 커스텀 달력 만들기 이제 date-fns에 대한 이해도가 어느 정도 생겼다는 가정하에 글을 쓰도록 하겠다. 1. Date-fns 라.. 2023. 7. 6. [React] date-fns와 style-components로 커스텀하기 쉬운 달력 만들기(1편) 올해 새로운 프로젝트를 맡게 되면서 달력에 서버에 있는 데이터를 보여줘야하는 기능을 구현하게 되었다. 다양한 라이브러리가 있었지만 디자이너의 요구에 맞는 달력을 제작하기가 어려워 date-fns를 사용하여 커스텀 달력을 만들어보았다. date-fns란? date-fns는 JavaScript와 TypeScript를 위한 유용한 날짜 관련 유틸리티 라이브러리이다. 이 라이브러리는 날짜를 다루는 다양한 함수를 제공하여 날짜 및 시간 관련 작업을 쉽게 처리할 수 있도록 도와주며 날짜 비교, 날짜 추가, 일,달,년, 요일 계산등의 다양한 기능이 많다. date-fns 라이브러리 설치하기 아래 코드를 입력하여 설치할 수 있다. npm install date-fns --save # or with yarn yarn a.. 2023. 7. 6. [React] 웹 배포하기 전 Index.html에 콘텐츠 설명(OG 태그) 넣어주기. 흔히 우리가 웹사이트 링크를 다른 사람들에게 공유하다보면 아래 사진과 같은 해당 링크에 대한 제목, 설명과, 썸네일 사진을 확인할 수 있을 것이다. 이러한 내용들 또한 배포하기 직전 웹에서 오픈 그래프를직접 설정해줘야한다! 오픈 그래프(Open Graph)란? 오픈 그래프(Open Graph, 이하 OG)는 웹사이트가 소셜 미디어 플랫폼에서 공유될 때 메타데이터를 제공하는 프로토콜이다. OG는 페이스북(Facebook)에서 처음 도입되었으며, 웹사이트의 콘텐츠가 소셜 미디어에서 미리보기로 제공되는 정보를 제어하기 위해 사용되고 있다. OG는 웹사이트의 만약 배포에 있어 개발자 도구 콘솔창을 관리하고 싶다면 아래 페이지로! https://quddkflty.tistory.com/39 [React] 배포 전 .. 2023. 6. 7. 이전 1 ··· 5 6 7 8 9 다음
