2019년 12월 09일
Jekyll Error Reports
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 처럼 파일명 앞에 _를 붙여줍니다.
scss 파일들을 project/_sass/... 경로에 생성하지 않은 경우, 별도의 config 설정이 필요합니다.
_config.yml
sass:
style: compressed
sass_dir: assets/css
-
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월 11일
typescript에서 import console 이슈
typescript 환경에서 console.log를 입력하면 상단에 `import console = require('console');`가 자동으로 import 생성된다. 해당 문제가 VSCode, Typescript 중 어디서 생성되는지 모르지만 해결방법은 있습니다. ## 해결방안 구글에서 해결방안 중 node_modules 내 파일을 수정하는 방안도 있었지만, 팀원들도 동일한 증상을 겪을 것 같아 declare 방법으로 진행하였습니다. 프로젝트 root 디렉토리에 console.d.ts를 생성 후 아래 코드를 추가합니다. ( 기존에 사용중이신 d.ts가 있으시다면 그걸 사용하셔도 됩니다. ) ```js declare module 'console' { export = typeof import("console"); } ``` > - 문제가 해결되지 않으면 `command + shift + p` 후 `TypeScript: Restart to Server`를 실행해주세요. > - tsconfig에서 baseUrl을 추가하신 경우, baseUrl의 경로가 root가 됩니다.
-
2019년 12월 02일
React Github Pages 배포
Github에서 리액트 앱을 공유할 때, 서버 없이 간단하게 Github Page로 공유가 가능합니다. gh-pages 모듈 설치 yarn add --dev gh-pages package.json 수정 gh-pages 모듈을 설치 후 package.json에서 아래 내용을 추가해주세요. { ... "homepage": "/${path}", "scripts": { ... "predeploy": "yarn build", "deploy": "gh-pages -d build" } } gh-pages 배포 yarn run deploy 만약 deploy 명령어로 배포 시 gh-pages 브랜치를 생성하는 과정에서 오류가 발생할 수도 있다. git branch로 조회해도 없는 gh-pages가 이미 존재한다는 오류는 새롭다.. 이럴 때는 당황한 뒤에 gh-pages 브랜치를 직접 생성한 후 push 해보자. git checkout -b gh-pages git push --set-upstream origin gh-pages yarn run deploy 확인 배포가 완료되면, gh-pages branch가 생성되어 있습니다. Github에서 해당 프로젝트로 이동 후 Settings -> 하단 GitHub Pages 메뉴를 보시면 배포 된 깃헙 페이지 링크를 확인할 수 있습니다.