전체 글
-
web 에서 스무스하게 동영상 재생하기카테고리 없음 2024. 5. 23. 01:09
m3u8 + hls.js = 짱짱맨.1. 알맞은 동영상 관련 라이브러리 사용하기사실 이건 동영상 재생의 최적화 보다는 프로젝트의 최적화와 관련이 있는 부분이다. react-player는 내부에 hls.js 를 갖고 있고, 이를 react 방식으로 export 해주며, 다양한 플랫폼을 지원 (ex. youtube, vimeo.. )하는데에 장점이 있다. 하지만 TV 프로젝트의 경우 m3u8 형식으로 내려오는 소스를 그냥 재생하면 끝일 뿐이라서 굳이 react-player 를 선택할 필요가 없었다. 오히려 2번 때문에 hls.js 가 더 적합했다..2. 최초 동영상을 다운받는 시간에 영향은 미치는 config 항목 조절하기m3u8 형식은 HLS(HTTP Live Streaming) 프로토콜을 따르는 동영상 ..
-
[번역] 10월에 web platform 에 추가된 새로운 기능들카테고리 없음 2022. 11. 27. 23:27
이 글은 Rachel Andrew 의 New to the web platform in October 글을 한글로 번역한 글입니다. 이번 10월에 Firefox 106, Chrome 107, Safari 16.1 이 stable version이 되었다. 이 것이 web platform에 어떤 의미를 갖는지 알아보자. Grid track 들의 애니메이션 마이크로소프트의 컨트리뷰터들이 힘써준 덕분에 이제 Chrome에서는 `grid-template-columns` 와 `grid-template-rows` 의 값들을 보간(interpolate, 두 개의 점으로 된 데이터 사이를 연결하기 위해 궤적을 생성하는 것)할 수 있다. 이 것은 grid layout 들이 state 에서 state 로 뚝뚝 끊기지 않고 더..
-
.mdx 와 .md 의 차이점?카테고리 없음 2022. 11. 5. 02:37
next.js로 개인 블로그를 만들고 있는데, 따로 서버를 두지 않고 정적 페이지를 렌더링해주는 방향으로 구현하려다 보니 Kent.c.dodds 이 만든 mdx-bundler 라는 패키지를 살펴보기에 이르렀다. mdx 는 md와 뭐가 다를까? .md Markdown은 블로그, 문서 등 텍스트의 비중이 높은 콘텐츠에 사용할 수 있는 일반 텍스트 기반의 마크업 언어(= 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어. LaTex, HTML, SVG 가 있다!)이다. John Gruber 와 Aaron Swartz(RSS 1.0 명세서 작성자, reddit 공동 설립자)가 2004년 만들었다. John Gruber의 블로그에 현재 쓰이고 있는 Markdown 1.0.1 버전 readme 및 관련 명세..
-
prefetch, preload카테고리 없음 2022. 10. 29. 02:06
- prefetch // HTML에서 선언해주기 Link: ; rel=prefetch // HTTP Header에서 선언해주기 const EmojiPicker = import(/* webpackPrefetch: true */ "./EmojiPicker"); // webpack에 prefetch할거라고 알려주기 연관된 경로 혹은 페이지에서 필요할 수 있는 리소스를 미리 fetch 할 수 있게 해주는 브라우저 최적화. 어떤 버튼을 누르면 컴포넌트가 나타난다고 가정할 때, 해당 컴포넌트는 script의 loading -> parsing -> compiling -> executing 총 4가지 단계를 거쳐야 사용자에게 보인다. 따라서 버튼을 눌러도 컴포넌트가 잠깐 안보일 수도 있다. 버튼을 눌러야 컴포넌트가 나..
-
[next.js] window 객체가 undefined일 때React 2022. 10. 26. 01:56
동생의 포트폴리오 홈페이지를 next.js를 써서 간단하게 만들어주고 있다. 작품 사진이 있는 /works 페이지에서 작품 이미지들을 드래그 & 드랍할 수 있도록 구현하고 있는데, 모바일을 고려하면 터치도 지원해야할 것 같아서 터치도 지원하도록 구현하고 있다. 그런데 이제 라이브러리 없이! 구현할 때까지만해도 큰 문제가 없었는데 배포하고 보니 모바일 화면에서 터치가 구현이 제대로 안되었다. window.innerWidth를 사용해서 이 이상으로는 이미지가 움직이지 못하도록 제한을 걸어놓았는데, SSR의 특성상 서버에서 HTML을 다 만들어서 주기 때문에 이 시점에는 window 객체가 없어 undefined가 뜨는 것이었다. SSR의 특성까지 생각해보면 자연스러운 현상인데! 검색해보니 다양한 방법들이 나..
-
[리팩토링] 1장 - 첫 번째 예시 / 기초를 탄탄히학습기록 2022. 10. 22. 02:42
프로그램이 새로운 기능을 추가하기에 편한 구조가 아니라면, 먼저 기능을 추가하기 쉬운 형태로 리팩터링하고 나서 원하는 기능을 추가한다. - 27p, 리팩터링, 마틴 파울러, 개앞맵시(이복연), 남기혁 회사 프로젝트가 점점 커지고 있다. 기능 추가가 계속되면서 실질적인 코드량이 늘어나는 것도 있지만, 기존 기능의 변경이 요구되면서 늘어나는 코드량이 문제라는 생각이 들었다. 덮어놓고 코드를 덧씌우는 것이 아님에도 불구하고, 왜 계속 신경이 쓰이는걸까. 이 책의 초반에서 답을 찾을 수 있었다. 새 기능을 덧붙여야하는 기존 기능이 탄탄하지 않음에도 불구하고, 기초를 탄탄히 하는 작업을 건너뛰고 새 기능을 덧붙여서는 아닐까? 혹은 더 좋은 구조에 대한 고민없이 기존 기능의 변경만을 위해 작업한 것은 아닐까? 처음..
-
[번역] 개별 transform 속성으로 CSS transform을 더 세밀하게 조정하기CSS 2022. 10. 18. 23:24
원문 글: https://web.dev/css-individual-transform-properties/ 이 글은 상기 원문 글을 한국어로 번역한 내용입니다. Finer grained control over CSS transforms with individual transform properties Learn how you can use the individual translate, rotate, and scale CSS properties to approach transforms in an intuitive way. web.dev 하나의 element 에 transform을 적용하려면 CSS transform 이라는 property(속성)을 사용할 수 있다. 이 속성은 하나 이상의 을 차례대로 적용한다..