Jaddong's Lab

웹에서 비디오 최적화를 위해서는 webm 확장자를 사용하는 것이 좋았다. 하지만 사파리 브라우저에서 자동 재생 이슈와 배경이 투명한 영상이 정상적으로 보이지 않고 까맣게 백그라운드 처리가 되는 이슈를 발견해서 처리하는 과정을 설명해봤다. 비디오 최적화하기 하나의 소스를 제공하는 것이 아니라, 최적화를 위해 여러 영상을 제공하고 브라우저가 렌더링 할 수 있는 영상을 사용한다. 아래의 예시에서는 브라우저가 webm 영상을 렌더링할 수 있는 경우 선택한 영상 파일이다. 그렇지 않으면 다음 요소로 이동하여 두 번째 요소는 mp4 형식의 영상을 가리키게 된다 . 브라우저가 mp4 영상을 렌더링할 수 있는 경우 해당 영상 파일을 사용하고 webm의 용량이 mp4보다 훨씬 작아 우선순위가 높기 때문에 먼저 선언해주면..

얼마 전 회사에서 클라이언트가 왜 브라우저를 닫고 퇴근했는데, 다음날 로그인이 되어 있다고 해당 사항을 바꿔달라고 한 요청이 있었다. 그래서 sessionStorage의 존재를 알게 되었고 차이점을 정리해보았다. 보통 우리가 개인 컴퓨터에서 네이버나 구글처럼 자주 사용하는 사이트들에 대해 로그인 상태를 유지를 해놓는 경우가 많다. 웹 스토리지 객체(web storage object)인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해준다. 해당 로그인 정보를 유지하기 위한 정보는 보통 브라우저에 내장되어 있는 저장소인 localStorage혹은 sessionStorage에 저장되어 유지된다. localStorage 로컬스토리지 오리진(도메인·프로토콜·포트..

1. 카카오 본인 카톡 채팅방 1-2개(본인 것도 됨) 정도에서 테스트해서 썸네일이나 타이틀 디스크립션이 업데이트가 안되었다면 아래와 같이 처리 필요함 Kakao Developers 사이트 접속 : https://developers.kakao.com/ 로그인하기 도구>초기화 도구>(Open Graph) 캐시 접속 url 입력한 후 초기화 클릭 다시 채팅방에서 공유하기 테스트! 그래도 안되면 클라이언트단 캐시때문에 뜨는 않는 것이므로 채팅방을 나가거나, 설정>기타>채팅방용량관리>캐시데이터삭제 한 후 다시 테스트하....! 안되면 5-6번 다시 해보기 그래도 안되면 그저 기다릴 뿐.... ( 테스트시 캐시삭제하고 적용까지 이틀 소요되었습니다 (ﾉ*･ω･)ﾉ) ‌ 2. 페이스북 페이스북은 보통 테스팅을 Fac..

렌더링이란? 웹페이지 접속시, 그 페이지를 브라우저에 그려주는 것. SPA(Single Page Application)란? 생긴 이유? 모바일의 시대가 도래하면서, 모바일은 데스크탑에 비해 성능이 낮고 유저의 모바일 웹에서의 동작 및 요청이 많아 웹페이지를 기존에 방식과 다르게 렌더링할 필요가 느껴지면서 등장한 클라이언트 사이드 렌더링 Single Page Application(SPA) 어떤게 있는가? 우리가 아는 React, Angular 등 대부분의 자바스크립트 프레임워크를 말한다. 특징과 차이 SSR(Server-side-rendering) 전통적인 웹 방식. 즉, 브라우저에 나타나는 형태 그대로를 HTML로 만들어 제공하고, 브라우저는 HTML을 표시하는 방식 장점 검색엔진최적화(SEO)에 문제없..

현생이 치여 회사에서 업무 하면서 궁금한 것들을 매번 구글링만 하다 보니 뭔가 내 머릿속에 있던 깊은 것들이 사라지는 느낌이다.... ㅎ ㅏ.... 역시나 반복하지 않으면 뭐든 잊어버리게 되는 듯하다. 웹에 관해 간결하게 핵심만 정리하여 주 1회 공부 겸 포스팅을 해보려 한다. 시작이 반이다.... 그래.... 현생에 치여 회사에서 업무 하면서 궁금한 것들을 매번 구글링만 하다 보니 뭔가 내 머릿속에 있던 깊은 것들이 사라지는 느낌이다.... ㅎ ㅏ.... 역시나 반복하지 않으면 뭐든 잊어버리게 되는 듯하다. 웹에 관해 간결하게 핵심만 정리하여 주 1회 공부 겸 포스팅을 해보려 한다. 거의 다른 글 복붙 수준인뎈ㅋㅋㅋ 그래도 곱씹어 읽어보게 되니 그걸로 만족한다. 시작이 반이다.... 그래.... 1. ..