• StoryBook config change config.js -> preview.js

📬무엇을

• Menu btn
• Menu Nav
• MSB

🤔왜?

여려개의 카테고리를 분류하려할 때 결국 페이지별로 구분해야하는데 그 진입점을 제작해야한다.

• gatsby-plugin-use-dark-mode
• use-dark-mode
• Button

Dark mode 사용

Gatsby의 다크모드를 사용하는 플러그인으로 사용!
찾아야될 점 웹앱이 렌딩될때 @media (prefers-color-scheme: dark)인지 아닌지 구별해서 상태값으로 부여해주기 이부분을 모름

Button

참고
Pure Css "day and night" toggle

🤔 이전에 styled-components에서 세미콜론이 빠져서 오류를 겪었었지만 원인을 출력해주지 않는 경우가 있었다. 그래서 꼭 컴포넌트를 확인해보곤했었다.

styled-components linst semicolons .. etc...

styled-components 확장중에 styled-components/stylelint-processor-styled-components 패키지가있다. 이것을 적용하자

GA를 통한 관리보다 추후 확장성을 위해서 GTM으로 설정하기

노션에서 어느 카테고리 및 어느 페이지 하위로 들어왔는지 알아 볼 수 있는 기능이 편리했다. 도입해보고싶은 기능

노션으로 정리해왔던 4log 블로그를 운영하는 이유와 히스토리에대해서 이야기하고싶다.

• 4log about
• Hansanghyeon about

• commit-lint
• husky
• lint-staged
• eslint (typescript)
  prettier

코드는 React를 이용해서 컴포넌트 작성하듯이 사용하지만, 공통 레이아웃을 관리하거나 페이지를 생성하거나 데이터소스와 컴포넌트를 연결하거나 하는 기능을 Gatsby에서 제공하고 있어서 쉽게 만들 수 있다.

Gatsby 파먹기

• 공통 레이아웃 관리 직접 만들어보기

1차 beta release를 하려고보는데 메인페이지에서만 모든 돔들이 로딩되고 svg가 만들어지면서 레이아웃과 다른 모양으로 나오게된다. 어떻게 해결해야할까?

처음 블로그 방문했을때 보여지는 디바이스의 라이트모드 / 다크모드를 detech해서 동적인 테마를 구성할 수 있게 해주어야 한다.

웹팩으로 컴포넌트 개별 제작 환경이있으면 좋겠다고 생각했다.
codepen처럼 구성하는 것?
gatsby랑 별개로 webpack-cli webpack-dev-server로 구성!

카테고리에서 post의 블로그 템플릿은 mdx로 변형하는 것이아닌 wp에서 가져오는 데이터를 뷰로 변환해주는 것이라서 다른 템플릿이 필요하다.
이에 따라서 post 템플릿을 또 템플릿화해서 분리해서 작성해야 할 것같다.

최근글을 볼 수 있게해주는 영역이 필요할 것같다

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet.
We recommend using:

• CircleCI
• Travis CI
• Buildkite
• CodeShip
• Azure Pipelines
• TeamCity
• Buddy
• AppVeyor
  But Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

📬무엇을

지금은 MDX를 통해서 컨텐츠를 구성하고있다. 이것을 WordPress 의 글로 변경

🤔왜?

MDX를 통해서 컨텐츠를 관리하는 것에 회의가 들었다. 정말로 CMS로의 기능을 제대로 하고있는 건가? 이렇게 계속 구성해도될까? 나중에 글로옮기려면? 이런 고민들이 들기 시작했기때문이다.

각 페이지에서 페이지 정보를 나타내주는 페이지 헤더제작하기

• 아이콘
• 페이지 섬네일
• 페이지 정보

#54

문제점
blog-post.tsx에서 섬네일을 나타네는 컴포넌트를 렌더링해서 만든다. 그럼 어떻게 .mdx에서 인터렉션 컴포넌트를 만들었던것을 구분해서 불러올까?

• React
• Typescript
• webpack
• styled-components

https://www.gatsbyjs.org/blog/2019-01-31-using-react-context-api-with-gatsby/

위 게시물을 참고해서 layout 컴포넌트 Theme provider를 변경하기

https://github.com/Hansanghyeon/4log/blob/6639d08319189e092a81c223b7b9eb2a2ac71220/src/components/templates/layout.tsx#L30-L41

📬무엇을

Category 페이지의 template 제작

🤔왜?

메뉴에서 해당 카테고리를 들어갔을때 그 카테고리의 세부내용을 표현해주고자 한다.
아래는 내가 노션에서 카테고리별로 페이지를 운영하는 방식인데 이것을 홈페이지로 가져오고자 한다.

📬무엇을

현재 wp, mdx 데이터로 혼용으로 블로그를 구현하였다. 그래서 각 포스트들의 불러오는 곳이달라 이전글 다음글을 구현하기 벅차다. category관련 프로젝트 완료하고 버튼 구현하기!

🤔왜?

왜냐? 다음글, 이전글이 있어야 사용자로하여금 둘러보기 편하기 때문에 아니면 이전글 다음글이아닌 다른 방식으로 이동할수있는 구현을 생각해보기

📬무엇을

eslint하고 prettier하고 같이 설정하기 어려웠는데 어떻게 설정했는지 이해했으니 적용하기!

🤔왜?

• 코드를 작성하다보면 항상 import module from 'module'이런식으로 나오게되는 것
• 마지막 trailing comma를 넣는것이 불편한 점이있다.
• Atomic Design 패턴으로 작업을하는데 Atom단계에서 데이터를 실제와 동일하게 넣지않고 Lorem ipsum...으로 채워넣는데 100글자가 넘어서 lint에서 에러를 내뿜는것을 해결하려고 ()감싸주고 단락변경하는 것이 불편하다

• 디자인 레퍼런스 찾기

📬무엇을

Framer X를통한 페이지전환 모션추가하기

🤔왜?

Gatsby의 페이지전환 트랜지션 플러그인도있지만 추후 계속적으로 인터렉션관련 컴포넌트들을 추가하거나 반응을 만들려면 더 활용범위가 좋은 툴과 모션을 사용해야하기 때문이다.

• CI/CD gh-pages deploy pipeline
• custom domain
  • https

• Gatsby

Gatsby에서 구성요소안에서 StaticQuery를사용하는 경우들이 많다. 그런데 이것들 storybook에서 뷰테스팅을하려고보면 해당 데이터가 없어서 오류를 낸다.

참고

• https://www.gatsbyjs.org/docs/visual-testing-with-storybook/

StoryBook에서 alias할때 루트 경로는 해당 .storybook 폴더를 향한다. 그래서 alias해 줄때 ../src/ 이런식으로 루트를 다시 잡아줘야한다.

📬무엇을

Redux의 설정

🤔왜?

앞으로 상태관리에대한 기술로 Redux를 사용
#24

원인

Travis를 통해서 자동으로 빌드 배포하려했는데 컨텐츠는 Post라는 깃헙 저장소에서 관리하고있어서 4log를 자동배포하게되면 아무런 컨텐츠가 없는 상태로 배포가되버린다. 어떤 방식으로 해결할 수 있을까?

#57

Daily blog같은 경우에는 사진을 이용하는 경우가 많다.

정적인 이미지는 nas를 활용하기 이미지 데이터센터 만들어서 사용해보기.

🤔의도

master branch로 풀리퀘를할때는 릴리즈가완료되어서 배포하는 것이라서 이 상황에서는 gatsby로 배포하는 스크립트를 실행하는 것

https://github.com/Hansanghyeon/4log/blob/73dab7c00fb490c074b9c16197ce59c7ca6856d7/.travis.yml#L20-L29

• Story book

글 상세페이지에서 상단에 썸네일을 보여주는 것이 더 좋을것같다!

기능 개요

• Text Color
• Text background Color

둘중 한가지만 가능하게 설정하기

#43

다크모드, 라이트모드를 지정하는데 문제가있는데 이것은 캐시가없이 처음으로 방문 했을때 일어나는 현상?

왜? 그렇게 생각했는가?

캐시가없는 상태에서만 문제가 발생하고 새로고침 했을때 정상적으로 보여지니까.

그럼 어떻게 해결해 볼 것인가?

첫 로딩때

window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches

코드를 활용해서 styled-components 를 부여해주고 이후에는 해당 데이터를 overload 하는 방식으로 구현하면 되지않을까?

📬무엇을

gutenberg 데이터로 가져온 code 블럭 구현 prism 라이브러리 이용

🤔왜?

wp cms에서 gutenbreg에서 각 블럭마다 가져오고 그 값을 json이어서 string 값으로 받는다
예시로

const codeblock = `<!-- wp:code -->\n<pre title=\"gatsby-config.js\" class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">module.exports = {\n  plugins: [\n    // You can have multiple instances of this plugin\n    // to create pages from React components in different directories.\n    //\n    // The following sets up the pattern of having multiple\n    // \"pages\" directories in your project\n    {\n      resolve: `gatsby-plugin-page-creator`,\n      options: {\n        path: `${__dirname}/src/account/pages`,\n      },\n    },\n    {\n      resolve: `gatsby-plugin-page-creator`,\n      options: {\n        path: `${__dirname}/src/settings/pages`,\n      },\n    },\n  ],\n}</code></pre>\n<!-- /wp:code -->\n\n<!-- wp:paragraph -->\n<p>위와 같은 방식으로 페이지를 불러오는 곳의 디렉토리를 변경 할 수 있다.</p>\n<!-- /wp:paragraph -->`

위와 같이 받아온다고했을때
<pre> <code>를 분리해서 실제 돔처럼 제작해야한다. prism의 해당 예시처럼 구현하려한다

const Prism = require('prismjs');
const loadLanguages = require('prismjs/components/');
loadLanguages(['haml']);

// The code snippet you want to highlight, as a string
const code = `= ['hi', 'there', 'reader!'].join " "`;

// Returns a highlighted HTML string
const html = Prism.highlight(code, Prism.languages.haml, 'haml');

• 내부 코드 텍스트영역만 가져오기
• code lang의 어떤 확장자의 코드인지 가져오기

• block style
• syntax highlighting
• font style

현재는 gatsby-use-dark-mode로 구현했다 하지만 이 플러그인이 해주는 역활을 전역에서 사용할 필요가있어서 Redux로 다크모드의 상태를 가져와서 사용하는게 좋을 것같다고 생각했다.
그리고 디바이스의 현재 테마모드를 가져와서 활성화해줄때도 필요할 것같다.

• menu icon

use-dark-mode 패키지로 구성해서 dark-mode유무를 가려서 value값을 props로 넘겨 스타일을 지정해줬다.
gatsby에서 gatsby clean && gatsby build && gastby serve 해서 테스트를 해보면
styled-components props로 darkMode.value로 지정해줬던 배경색값들이 재대로 지정되지 않는 모습이 보인다. 이것 또한 styled-components의 오류인지 찾아봐야할 것같다.

보고있는 글의 관련된 내용의 글을 보여주면 좋을 것같다.

Travis를 이용한 자동배포 설정하기

지금은 컨텐츠를 카테고리별로 구성하기 힘들어서 태그별로 나눠서 보여지는 것으로 대채해서 구현

📬무엇을

npm i --save-dev @storybook/addon-viewport
스토리북에서 편리하게 모바일 태블릿의 뷰포트를 정해서 볼 수 있게 해주는 플러그인이다.
https://github.com/storybookjs/storybook/tree/master/addons/viewport

🤔왜?

직접 뷰포트를 지정해줘도 storybook의 ui 패널들과 겹처서 재대로된 뷰포트를 테스트 할 수 없다.

• Layout system 사용
• Blog Design Variation

https://dan4log.com/
원래 홈페이지를 마이그레이션하면서 원하는 디자인과 인터렉션을 첨부해서 조금 변화를 주기

blog 참고
https://feel5ny.github.io/

블로그 thumbnail 영역에서 원하는 인터렉션 요소를 넣고싶을때가 많다. 평범한 블로그로 만들고싶지 않으니까
생각하다가 현재는 이미지를 불러오는 방식으로 구현 했는데 이 부분을 이미지의 사이즈 및 비율에 맞게 영역을 차지하게 제작하고 이미지는 백그라운드로 넣는 방식으로 구현 하면 어떨까?

anime.js를 사용해서 로고 애니메이션 만들기
anime.js로 로고 애니메이션을 만들기 위해서는 일단 로고를 SVG로 뽑아 내야한다!

utterances github plugin으로 블로그 코멘트 제작하기