2019년 12월 11일
동영상 비율에 맞춰 사이즈 변경하기
동영상 플레이어 중 영상의 비율을 맞춰주기 위해 영상의 세로가 긴 화면은 양쪽에 검은색 여백이, 영상의 가로가 긴 화면은 상하단에 검은색 여백이 생성되는 플레이어들이 있습니다.
검은색 여백은 video 태그에 width: 100% or height:100% 중 어떤 속성인지로 적용됩니다.
여기서 video 태그를 감싸고 있는 div보다 video 태그의 height가 높아지면 height를 100%로 고정하여 양 옆에 여백을 생성하고, width가 높아지면 width를 100%로 고정하여 상하에 여백을 생성합니다.
동영상의 비율을 수정하자
useRef를 사용해도 무방합니다.
useLayoutEffect를 사용하여 화면의resize를 감지하고 함수를 실행합니다.- updateSize 함수에서
video 사이즈와 video-wrap 사이즈를 비교하고 클래스를 적용합니다.- contains로 현재 클래스를 비교한 이유는 이미 적용되어있기 때문에 if문을 거쳐도 변화가 없기 때문입니다.
import React, { useLayoutEffect } from "react";
const Video = () => {
const updateSize = () => {
const videoWrap = document.querySelector("#video-wrap");
const video = document.querySelector("#video");
if (
!video.classList.contains("is-vertical") &&
video.offsetHeight > videoWrap.offsetHeight
) {
video.classList.add("is-vertical");
} else if (
video.classList.contains("is-vertical") &&
video.offsetWidth > videoWrap.offsetWidth
) {
video.classList.remove("is-vertical");
}
};
useLayoutEffect(() => {
window.addEventListener("resize", updateSize);
return () => window.removeEventListener("resize", updateSize);
}, []);
return (
<div id='video-wrap'>
<video id='video' />
</div>
);
};
export default Video;
CSS
video {
width: 100%;
}
video.is-vertical {
width: auto !important;
height: 100%;
}
-
2019년 12월 12일
Jekyll Disqus 연동하기
Jekyll에서 Disqus를 연동하는 방법을 살펴보도록 하겠습니다. ## Disqus 설정 1. [Disqus 홈페이지](https://disqus.com/)에 접속해서 회원가입을 진행합니다. 2. 로그인 후 상단에 `Get Start -> I want to install Disqus on my site`를 선택합니다. 3. 정보를 입력 후 확인을 누른 후 `플랫폼 선택에서 jekyll`를 선택합니다. ( 만약 화면이 나타나지 않는 경우, [admin](https://disqus.com/admin/) -> Settings -> Installation ) 4. 설명 2번에 있는 `Universal Embed Code` 링크 클릭 5. 홈페이지 첫 동영상 밑에 있는 1번의 Disqus to load 코드를 post Layout에 추가합니다. 중간 주석 부분에는 `Disqus thread가 중복되어 생성되는 것을 방지하기 위해 page_url, identifier를 추가`하라고 적혀있습니다. 해당 부분은 아래와 같이 site 정보를 설정해주시면 됩니다. ```js this.page.url = "{{ site.url }}{{ site.baseurl }}{{ page.url }}"; // minhyeong-jang.github.com/2019/12/... this.page.identifier = "{{ page.url }}"; // /2019/12/... ``` 6. 홈페이지에서 두번째 동영상 밑에 있는 count.js 스크립트를 body 맨 아래 선언하면 `댓글 수가 체크`됩니다. 적용 후 새로고침 하시면 로컬에서도 정상적으로 Disqus가 보이게 됩니다.
-
2019년 12월 11일
React useContext 사용하기
2019년 초에 Redux를 사용하다가 불편함이 많아 useContext를 사용법을 찾아봤을 때 자료가 생각보다 많지 않아 헤맸던 기억이 있습니다. 늦었지만, useContext의 활용법을 공유 드립니다. ## createContext로 생성하자 ```jsx import React, { createContext } from "react"; export const AppContext = createContext(); ``` 우선 Context를 생성합니다. 초기화는 바로 할 필요 없으며, export하는 이유는 Redux처럼 다른 파일에서 접근하기 위해 정의합니다. ## context에 함수와 데이터를 저장하자 ```jsx const App = () => { const [text, setText] = useState("test"); const logText = (text) => { console.log("test"); }; return ( ); }; export default App; ``` Provider를 선언하게 되면, 해당 Provider의 자식들은 value에 선언된 부분들을 props로 넘겨주지 않아도 사용할 수 있습니다. ViewLayout에서 useContext를 사용하여 데이터 및 함수 실행을 진행합니다. ## useContext로 호출하자 ```jsx import React, { useContext } from "react"; // App에 선언 된 context 호출 import { AppContext } from "./App"; const ViewLayout = () => { const { text, setText, logText } = useContext(AppContext); return (...
-
2019년 12월 11일
typescript에서 import console 이슈
typescript 환경에서 console.log를 입력하면 상단에 import console = require('console');가 자동으로 import 생성된다. 해당 문제가 VSCode, Typescript 중 어디서 생성되는지 모르지만 해결방법은 있습니다. 해결방안 구글에서 해결방안 중 node_modules 내 파일을 수정하는 방안도 있었지만, 팀원들도 동일한 증상을 겪을 것 같아 declare 방법으로 진행하였습니다. 프로젝트 root 디렉토리에 console.d.ts를 생성 후 아래 코드를 추가합니다. ( 기존에 사용중이신 d.ts가 있으시다면 그걸 사용하셔도 됩니다. ) declare module 'console' { export = typeof import("console"); } 문제가 해결되지 않으면 command + shift + p 후 TypeScript: Restart to Server를 실행해주세요. tsconfig에서 baseUrl을 추가하신 경우, baseUrl의 경로가 root가 됩니다.