2019년 12월 12일
Jekyll Disqus 연동하기
Jekyll에서 Disqus를 연동하는 방법을 살펴보도록 하겠습니다.
Disqus 설정
-
Disqus 홈페이지에 접속해서 회원가입을 진행합니다.
-
로그인 후 상단에
Get Start -> I want to install Disqus on my site를 선택합니다. -
정보를 입력 후 확인을 누른 후
플랫폼 선택에서 jekyll를 선택합니다.
( 만약 화면이 나타나지 않는 경우, admin -> Settings -> Installation ) -
설명 2번에 있는
Universal Embed Code링크 클릭 -
홈페이지 첫 동영상 밑에 있는 1번의 Disqus to load 코드를 post Layout에 추가합니다.
중간 주석 부분에는Disqus thread가 중복되어 생성되는 것을 방지하기 위해 page_url, identifier를 추가하라고 적혀있습니다.
해당 부분은 아래와 같이 site 정보를 설정해주시면 됩니다.this.page.url = "https://minhyeong-jang.github.io/2019/12/12/jekyll-disqus"; // minhyeong-jang.github.com/2019/12/... this.page.identifier = "/2019/12/12/jekyll-disqus"; // /2019/12/... -
홈페이지에서 두번째 동영상 밑에 있는 count.js 스크립트를 body 맨 아래 선언하면
댓글 수가 체크됩니다.
적용 후 새로고침 하시면 로컬에서도 정상적으로 Disqus가 보이게 됩니다.
-
2019년 12월 12일
Nextjs에서 styled-components 깜빡임 현상
Nextjs에서 styled-components (이하 SC) 사용하면 CSS 로딩이 늦게 되어 발생하는 깜빡임 현상이 발생합니다. 개인적인 생각으로는 HTML은 SSR로 미리 렌더링 시켜 보내지만 SC의 스타일들은 사용자가 접속 시 변환된다고 생각합니다. ## css를 미리 적용할 수 있을까? [참고 자료](https://github.com/zeit/next.js/blob/master/examples/with-styled-components/pages/_document.js) Next.js와 SC를 검색한 결과, ServerStyleSheet라는 함수를 SC에서 제공하고 있었고 Next.js에서 샘플 코드를 제공하고 있었습니다. 해당 페이지에서 제공하는 코드는 다음과 같습니다. ```jsx import Document from "next/document"; import { ServerStyleSheet } from "styled-components"; export default class MyDocument extends Document { static async getInitialProps(ctx) { const sheet = new ServerStyleSheet(); const originalRenderPage = ctx.renderPage; try { ctx.renderPage = () => originalRenderPage({ enhanceApp: (App) => (props) => sheet.collectStyles(), }); const initialProps = await Document.getInitialProps(ctx); return { ...initialProps, styles: ( {initialProps.styles} {sheet.getStyleElement()} ), }; } finally { sheet.seal(); } } } ``` > `_document.js 란?` HTML Document를 관리하는 부분으로 이 외에도 `'_app.js, _error.js'` 등이 있습니다. ## 위 코드에서 에러가 나신다면..? 시간이 지나고 작성하는 글이라 정확하게 기억은 안나지만, 위에 코드를...
-
2019년 12월 12일
list-style에 bold 처리하기
ol, li 태그를 사용하면 옆에 숫자가 기본적으로 나타나는데, 해당 숫자에 bold 처리하는 방법입니다. ## 단순 font-weight 처리 방법 기본적으로 list-style에 bold 처리를 하려면 ol 태그에 적용하면 됩니다. 이후 li 내 태그를 생성하여 normal을 적용합니다. ```html test test2 not work ``` 위 방법의 문제점은 마지막 li처럼 태그 적용이 안되어있으면 같이 bold 처리가 됩니다. ## count-increment [count-increment](https://developer.mozilla.org/en-US/docs/Web/CSS/counter-increment) 방법을 사용하여 list-style을 사용하지 않고 카운터를 작성할 수 있습니다. ```html test test2 not work ``` counter를 사용하여 li:before에 숫자를 직접 작성하는 방법입니다. 단점으로는 list-style처럼 다양한 스타일이 아닌 숫자로만 제공합니다.
-
2019년 12월 11일
React useContext 사용하기
2019년 초에 Redux를 사용하다가 불편함이 많아 useContext를 사용법을 찾아봤을 때 자료가 생각보다 많지 않아 헤맸던 기억이 있습니다. 늦었지만, useContext의 활용법을 공유 드립니다. createContext로 생성하자 import React, { createContext } from "react"; export const AppContext = createContext(); 우선 Context를 생성합니다. 초기화는 바로 할 필요 없으며, export하는 이유는 Redux처럼 다른 파일에서 접근하기 위해 정의합니다. context에 함수와 데이터를 저장하자 const App = () => { const [text, setText] = useState("test"); const logText = (text) => { console.log("test"); }; return ( <AppContext.Provider value=> <ViewLayout /> </AppContext.Provider> ); }; export default App; Provider를 선언하게 되면, 해당 Provider의 자식들은 value에 선언된 부분들을 props로 넘겨주지 않아도 사용할 수 있습니다. ViewLayout에서 useContext를 사용하여 데이터 및 함수 실행을 진행합니다. useContext로 호출하자 import React, { useContext } from "react"; // App에 선언 된 context 호출 import { AppContext } from "./App"; const ViewLayout = () => { const { text, setText, logText } = useContext(AppContext); return ( <div> <div>{text}</div> <button...