2019년 12월 11일
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가 됩니다.
2019년 12월 11일
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일
동영상 플레이어 중 영상의 비율을 맞춰주기 위해 영상의 세로가 긴 화면은 양쪽에 검은색 여백이, 영상의 가로가 긴 화면은 상하단에 검은색 여백이 생성되는 플레이어들이 있습니다. 검은색 여백은 video 태그에 width: 100% or height:100% 중 어떤 속성인지로 적용됩니다. 여기서 `video 태그를 감싸고 있는 div보다 video 태그의 height가 높아지면 height를 100%로 고정`하여 양 옆에 여백을 생성하고, `width가 높아지면 width를 100%로 고정`하여 상하에 여백을 생성합니다. ## 동영상의 비율을 수정하자 useRef를 사용해도 무방합니다. - `useLayoutEffect`를 사용하여 화면의 `resize를 감지`하고 함수를 실행합니다. - updateSize 함수에서 `video 사이즈와 video-wrap 사이즈를 비교`하고 클래스를 적용합니다. - contains로 현재 클래스를 비교한 이유는 이미 적용되어있기 때문에 if문을 거쳐도 변화가 없기 때문입니다. ```jsx 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");...
2019년 12월 09일
Jekyll을 사용하며 나타난 오류를 정리합니다. Scss Import Error + Tip Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/index.scss': File to import not found or unreadable: filename. on line 1 Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/index.scss': Invalid CSS after "": expected selector, was "---" on line 1 Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/index.scss': Invalid CSS after "@import "theme"": expected "{", was ";" on line 3 scss 파일은 빌드 후 css + minify 형태로 제공해주기 때문에 head에서는 src=”index.css” 형태로 작성하게 됩니다. 파일 수 만큼 css를 import하면 속도가 느려 index.scss 파일 하나에서 모든 scss 파일을 import 하는 방법으로 bundle 작업을 진행하는게 좋습니다. jekyll은 scss에서 상단에 아래 문구가 적혀있으면 css로 빌드 작업을 진행합니다. --- --- index.scss 파일에서만 위에 문구를 추가한 후 나머지 파일을 import 해줍니다. 만일 index.scss에서 호출하는 scss 파일들은 상단에 --- 문구가 존재하면 에러가 나타납니다. 호출하기 위한 파일을 구분하기 위해 _theme.scss 처럼 파일명 앞에 _를 붙여줍니다....