재한쓰의 공부용 블로그 😊 - 마크다운 테스트

공부 및 문제풀이 기록용입니다.

https://wisesaturn.github.io/study-blog/posts/developLog/blog/%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4%20%ED%85%8C%EC%8A%A4%ED%8A%B8

버그 설명

styled-component에서 background-image가 적용이 되지 않습니다.

발생 과정

1. pubilc 폴더가 아닌 다른 src 폴더에서 파일을 불러온다.
2. 상대 경로를 활용해 import한다.
3. styled-component에 불러온다.
4. 에러 발생 (이미지 로딩이 안 된다)

나의 예상

• 당연히 이미지 로드가 될 줄 알았는데...? 안 된다.

해결

• public 폴더에 source를 넣고 저장하기로 결정했다.

버그 설명

내비게이터 버튼이 마우스 위치를 테두리에 가져다 놓으면 자꾸 흔들리는 현상이 발생한다.

발생 과정

1. 마우스를 props 테두리에 갖다 대면
2. 흔들리는 현상 발생

나의 예상

보자마자 문제점이 뭔지는 파악했다.
애니메이션 끝 부분과 시작 부분이 겹쳐서 발생하는 것 (움직임에 따라 마우스 영역이 달라진다는 점이 화근)

스크린샷

기타

애니메이션을 바꿀 예정이다.

버그 설명

이미지 불러오기가 안 된다.

해결 Log

환경이 다르기 때문! (Development / Production)
Development는 바로 public 폴더를 인식하지만, Production은 그렇지 않다.
기존 설정되어 있던 next.config.js에 의해 assetprefix로 환경에 따라 경로를 설정해주긴 했는데
이상하게 환경을 읽지 못했다.
cross-env를 통해 OS 상호 호환을 고려함과 동시에 NODE_ENV= 값을 부여해서 해결하였다.

예시

next.config.js

// add
    const debug = process.env.NODE_ENV !== 'production'
    const name = 'study-blog'

    module.exports = {
        assetPrefix: !debug ? `/${name}/` : '',
    }

package.json

// before
   "scripts": {
          "dev": "next dev"
          "build": "next build",
   }

// after
   "scripts": {
          "dev": "cross-env NODE_ENV=development next dev"
          "build": "cross-env NODE_ENV=production next build",
   }

버그 설명

Darkmode 버튼이 light 일 경우 기본값인 dark에서 시작되므로 애니메이션이 페이지마다 reload된다.

발생 과정

1. Darkmode 상태를 저장해서 옮겼다.
2. 하지만 기본값 input의 checked를 손 보지 못했다
3. state.tsx의 check를 페이지 이동 때 바로 불러오긴 하지만 불러오는 과정에서 상태를 확인하기 때문에 기본값인 dark는 고정이다.

기타

getInitialProps를 이용하면 어떨까 생각해보는 중
혹은 state.tsx의 default 값을 수정해볼까 생각 중

설명

깃허브의 gh-pages를 통해서만 production 상태의 홈페이지를 확인하는 건 번거롭다.
직접 Custom Server를 구축하여 deploy 하기 전 테스트를 거친 후 배포할 계획이다.

할 일

• npm run build 후 npm run start를 통해 production 환경의 홈페이지를 배포 전 확인 할 수 있도록 구현

기타

백엔드 데이터도 공부해야 하기 때문에 꽤 오래 걸릴 듯
블로그 기초 구성만 완료한 후 파헤칠 계획이다.

Issue Test

설명

정말 기초적인 블로그 형태를 갖추기 위해 몇 가지 기능들을 완성해보려고 합니다.

할 일

• NextJS 환경 안정화 (특히 eslint #12 )
• CRUD 구현
  • 게시물 기능 O
  • 자동화만 남았음 (Shell Script 이용)
• Page Routing
• 댓글 기능

  utterance 이용

• 방명록 기능

  댓글 기능과 동일하게 이용할 계획
  만들다 보니 필요성을 딲히 못 느껴서 중단

• 404 페이지 디자인 (홈버튼 구현)
• 반응형 모바일 (미디어 쿼리 이용)
• 구글 검색 등록 (최종)
• 마크다운 게시물 디자인

  remark-html과 그 외 플러그인 이용

• Index (초기 화면) 꾸미기
• 검색 기능
• 태그를 이용한 정렬 기능

기타

구글 검색 및 CRUD 구현이 조금 오래 걸릴 듯 하다.

설명

배포 환경이 CSR에서 SSR로 바뀌어선지 매우 불안정하다.
빠르게 안정화를 시켜보자
안정화를 시킨 후 제대로 배포할 계획

할 일

• Eslint 안정화
• 페이지가 로드가 안되어 visibility : hidden이 먹히는 상황 (Provider.tsx의 useEffect가 먹지 않았다)

  icon이 로드되지 않았다. Image 불러오도록 하여 해결
  또한, css 파일안에 이미지를 불러오기 때문에 환경 변수에 영향이 미치지 않았다.
  Darkmode button만 styled-component로 변경하였다.

• 페이지마다 Darkmode 호환이 되지 않는다. (#13)

  localstorage를 통해 해결

• 홈페이지를 불러올 때마다 색상 애니메이션이 적용된다.

  기본값 색상이 하얀색이라서 그렇다. (변경할 계획)
  animation 때문이 아닌 페이지 자체 로딩 때문에 발생한다.
  특히 404 page를 로딩할 때 발생한다 (Link로 이동한 페이지는 바로 넘어간다)
  해결 : 페이지 라우팅 만 제대로 해주면 발생되지는 않는다.

    ❕ 스크린샷

• Image가 로드되지 않는다. #11

  cross-env를 통해 해결 (development/Production 환경을 읽게 하였다)

• 404 Page 디자인 할 때 viewport가 100%에 맞게 제작해야 한다.

  Viewport 100%에 맞게 수정 완료

• 커스텀한 404 Page가 Production 환경에서 불러오기가 안되고 깃허브 페이지 의 Default 404 Page가 출력된다.

  코드 내에서 잘못 불러오지만 않으면 주소값으로 입력된 404는 정상적으로 불러온다.

버그 설명

Darkmode status가 페이지마다 호환이 되지 않는다.

기타

1. localstorage를 이용해 호환해보거나
   2. main page에서 상태를 받아놓고 저장해놓을 계획 (Context API)

해결

1번을 이용해 해결

Provider.tsx

:: Darkmode에 전체 Class를 주기 위한 Component

// add
// useEffect안에서 동작하는 데이터는 SSR되지 않는 점을 이용, 화면 상태 체크
    React.useEffect(() => {
        setCheck(localStorage.getItem('Darkmode') === 'true' ? true : false)
        // HTML 렌더링 때 Darkmode 상태 불러오기
    }, [])

Darkmode.tsx

:: Darkmode Component

// add
// confirm 함수는 Darkmode 스위치를 눌렀을 때 (onChange/onClick) 실행하는 함수

const confirm = () => {
        setCheck(localStorage.getItem('Darkmode') === 'true' ? false : true)
        // 값이 변할 때 (스위치를 눌렀을 때) Boolean 값 전환

        localStorage.setItem('Darkmode', check === true ? 'false' : 'true')
        // localStorage에서도 Boolean 값 전환 (check === true로 조건을 보는 이유는 setCheck는 confirm 함수가 끝날 때 적용이 된다)
    }

설명

블로그 안에 BGM 같은 기능을 넣으면 어떨까 고민하는 중이다.

할 일

• Just Thinking

기타

우선 블로그를 완전히 구현 후 생각해보도록 하자.

버그 설명

Dark 모드에서 Post된 게시물을 불러오면 이상 없으나
Light 모드에서 불러오면 테마가 적용이 되지 않거나 중복되어 나온다.

나의 예상

처음에 Darkmode 상태를 확인할 때 Recoil 를 이용한다.
useEffect를 이용해 사이트를 최신화 하는데 여기서 중복이 됐을 것으로 생각한다.

기타

우선 기본 기능을 모두 다 추가하고 나중에 한꺼번에 수정할 계획
다크모드 가 생각보다 발목을 많이 잡는다.

🤗 Page Update Log (2021-01-03 ~ )

✔ 기본 틀 제작 및 HTML 학습 (2022-01-03 ~ 2022-01-04)

• HTML, CSS, JS를 다시 복습하는 동안 React, Bootstrap, SASS(SCSS) 개념을 공부했다. 👀

✔ React 환경에서 사이트 제작 (2022-01-05 ~ 2022-01-18)

React 환경 제작 (create-react-app 이용)
SCSS 이용 (npm install node-sass 설치)
git 연결 (gh-pages 패키지 설치)

🔸 세부사항
npm install gh-pages --save-dev
homepage 및 script( package.json )에 deploy 명령어 추가
npm run deploy를 통해 배포

• 이 3단계를 통해 최종적으로 React 환경 내 Github 연결을 완료하였다.
• 이 과정을 거치는 동안 *'branch', 'local'와 'remote' repository 개념을 여러 번 학습하였다. (⊙ˍ⊙)

• 상태 관리 라이브러리 'Recoil' 설치

  'npm install recoil' 이용

  • Header, Content, Footer가 Level에 따라 변화하기 위해선 하나의 전역 변수가 필요한데 이를 'Recoil'통해 구현하였다.
  • 대부분 변수 및 데이터를 state.jsx 안에 넣어놓았다.

• 임시 아이콘 'React-icon' 이용

  'npm install react-icons' 이용

  • React-icon을 이용해 간단한 아이콘들을 임시로 사용한다.
  • 차후에 마음 생기면 아이콘도 디자인할 계획!

• Typescript 처럼 Type을 검사해주는 'PropType' 사용

  'npm i prop-types' 이용

  • 나중에 Type이 뒤죽박죽 되는 부분을 방지하기 위해!

• styled-component 를 사용하여 CSS-in-JS 라이브러리를 사용

  'npm i styled-components' 이용

  • 요즘 트렌드인 선 Component 분류, 후 한 곳에 섞기를 해보려고 한다.
  • 전역적인 CSS를 사용하지 않으려면 이 방법을 사용하면 좋을 듯하다.

• 레이아웃 전면 수정 (2022-01-12 ~ 13)
  • 너무 무턱대고 맨 땅에 헤딩을 하면서 코드를 짜다 보니 디자인 방향성이 중구난방이었다.
  • (색상, 사이드바 위치, 버튼 디자인 등 난잡 그자체)
  • 그래서 디자인 요소를 전부다 수정하기로 결정했다. (다시 처음부터..?)
  • 100% 꽉채우는 반응형 웹 + 메인 컬러만 설정해서 간단하게 짰다.
  • 사이드바는 초기엔 좌측에서 팝업 느낌으로 나오게끔 하였으나 너무 부산스러웠다.
  • 또한, 메인 내용을 가려버리는 인터페이스 디자인이라 그냥
  • 맨 처음 계획이었던 게시물과 flex 형태 레이아웃 및 버튼에 따라 나오게 했다.

• 아이콘 svg 제작 및 분석 (2022-01-13)
  • 아이콘이 CSS에 따라 색을 바꾸기 위해 벡터 기반의 이미지인 'svg' 파일을 사용했다.
  • svg 안에는 이미지 정보, 속성값, path값으로 이루어져 있는데 path값을 통해 디자인한다.
  • 일러스트레이터로 svg 파일을 저장해야 path 값을 알 수 있다.
  • 처음에는 png을 svg로 변환했으나 path값이 나오지는 않았다. (일러 ai 파일 필요)

• 다크모드 토글 스위치 제작 (2022-01-13 ~ 14)

  • 처음에는 recoil를 활용해 전역 변수로 dark, light로 상황을 구분시킨 후, 그에 따라 styled-component를 이용하여 스타일을 주려고 했다.
  • 'span'를 이용해 바 모양, 스위치 모양 두 가지 모양을 만들고 디자인을 하는 게 초기 구상이었다.
  • 그런데 찾아보니 놀라운 방법이 있었다. 바로 'input' 과 'before' 를 활용해서 전역 변수 없이도 css만으로 구현이 가능했던 것! 😮
  • input 은 check 확인용으로 사용하고, before 를 활용해 bar 앞에 디자인을 하나 더 넣는 작업을 거치는 방법이다.
  • 초기 구상은 워낙 간단한 방법이라 이 페이지에는 css 만으로 구상해보기로 했다.
  
  

• 사이드바 디자인 완성, 검색바 디자인 완료, 게시물 기본 태그 추가" (2021-01-17)

  • 사이드바 디자인을 완성하였습니다. 다크모드에 맞게 2가지 테마의 색을 이용하였습니다.
  • wrap은 scss 파일에 디자인 했고, Component로 독단적으로 나뉘었을 때 styled-component를 이용하였습니다.
  • 검색바는 게시물 위에 자동으로 뜨게 하여 게시물 영역을 검색할 땐 검색 목록으로 이용하려고 합니다.
  • 프로필은 '제페토' 프로필을 이용하였습니다.
  • 사이드바 좌측 영역에 추가 메뉴(뮤직 플레이어 등) 을(를) 넣을 생각입니다.
  • 게시물 기본 태그를 추가했습니다. (날짜, 카테고리, 태그)
  • 이번 일주일 간은 CRUD 구현을 완료 하는 것을 목표로 잡았습니다.
  • react-router 를 통해 페이지 구분을 테스트하였습니다.

    npm install --save react-router-dom

  
  

✔ NextJS를 이용하여 SSR 환경 구현 (2022-01-18 ~ )

기존에 설치된 react-scripts 와 react-router-dom 을 제거
npm uninstall --save react-scripts react-router-dom
Next 설치
npm install --save next
Next 설치 도중 node-sass 버젼 호환 문제로 node-sass 제거
npm uninstall --save node-sass

• React를 이용하여 깃허브에 배포 및 기초 디자인과 메인 레이아웃을 완성하였습니다.
• 초기 구상은 React-router 를 이용하여 SPA 형식 의 블로그를 꾸미려 했습니다.
• 그런데 CSR 과 SSR 를 공부하던 중 SEO 대응 능력 이 CSR이 SSR보다 낮아 SSR 기반인 NextJS 를 사용하기로 결정했습니다.

• Typescript 설치 (2022-01-18)

  • JS 환경에서 작업하다 Typescript로 전환하려고 합니다.
  • 방대한 데이터를 처리하지 않는 블로그 형태 의 홈페이지이므로 굳이 TS를 고를 필요는 없습니다.
  • 하지만 간혹 boolean을 이용한 상태에 따른 환경 처리나 동적 타입 할당으로 인한 undefined 경우가 가끔씩 생겨 향후엔 절대적으로 필요했습니다.
  • 내친 김에 NextJS 환경 구현과 동시에 Typescript로 전환하려고 합니다.
  • 생각보다 Next 구현 환경에 손 봐야 되는 구석이 많고 모든 .js 파일을 바꾸려다보니 시간이 많이 소요될 듯 합니다.

    npm install --save-dev typescript @types/react @types/node

  
  

• Next 환경 전환 (2022-01-18 ~ 2022-01-19)

  • Next.JS 환경으로 전환하였습니다.
  • 기존 create-react-app을 통해 React 환경 에서 구현했을 때 index.js에서 ReactDOM을 통해 App Component를 추출하여 그에 따른 props Components들을 렌더링하였습니다.
  • Next는 Pages 폴더 기반으로 Routing 을 해주는 기능이 내장되어 있어 기존 react-router를 이용할 필요 없이 폴더 내 파일명 으로 쉽게 구분이 가능했습니다.
  • _app은 기존 ReactDOM과 유사한 기능을 함과 동시에 개별 페이지마다 공통된 Component 를 줄 수 있다는 점과 index는 맨 첫 페이지 라는 사소한 차이가 있었습니다.
  • Next 자체에서 styled-component가 적용이 안됩니다. 해결방안으로 _document와 babelrc를 추가하였습니다. (무슨 내용인지 추후에 자세하게 개발일지에 풀어내보겠습니다.)

    npm i -D babel-plugin-styled-components

  
  

• Github Commit정리 (2022-01-19)

  • Github Commit를 정리하였습니다. Next환경 이전 Commit은 다른 branch 로 옮겨놓았습니다. main branch 는 Next 환경 전환 시점 부터 이어나갈 계획입니다.
  • Commit을 일관성 있게 소제목 을 붙여 정리해보았습니다. 해당 키워드만 보아 쉽게 어떠한 내용을 변경하였는지 유추하도록 하였습니다.
  
  

• DarkMode 기능 Contex API로 재구현 (2022-01-20)

  • 기존에 DarkMode 기능을 recoil 상태 관리 라이브러리를 통해 구현하였습니다. 하지만 Next 환경에서는 RecoilRoot로 인해 _app.tsx안에서 사용하지 못하는 번거로움이 존재합니다. (Layout Component 로 따로 뺄 수도 없는 상황)
  • Header와 Footer가 고정되어 있는 블로그 형식이라 Page Component를 가운데에다 배치해야 하는 구성입니다. 이에 따라 모든 Component 에 Darkmode를 구현하려면 recoilRoot에 방해받지 않는 Context API를 사용하려고 합니다.
  • 하지만, 본질적인 해결방안은 아닙니다. React Hook은 최상단에 변수를 줄 수 없는 환경입니다. RecoilRoot 아래 단계에 그리고 body 윗 단계에서 className을 변경하는 방법을 생각해보았습니다.
  • Provider.tsx라는 파일을 하나 더 생성하여 {children}을 불러와 그 속에 <div> 태그를 적용하여 다시 return하는 방식을 차용했습니다. 이 단계에서 {children}은 body 영역에 해당한다고 보시면 됩니다.
  
  

• TypeScript 전환 (2022-01-20)

  • .jsx 파일을 .tsx로 전환하였습니다.
  • 복잡한 type은 any type을 사용하였기 때문에 기능이 다 구현된 후 type을 좀 더 세밀하게 잡아볼 예정입니다.

• _document에 <meta> 태그 추가 (2022-01-21)
  • 공통 및 세부 <meta> 태그 Template를 제작했습니다. 좀 더 검색과 크롤링이 용이하게 하기 위함입니다.

• NextJS 환경 에서 배포 (2022-01-21)
  • React 환경에서 gh-pages package를 활용해 배포하였습니다. 하지만, Next 환경에선 배포 패키지가 없어 직접 구현해주어야 합니다.
  • Next 환경에선 build 를 위해 Eslint를 설치해주어야 합니다. Eslint는 코드 오류를 잡아주는 도구입니다.

    npm install --save-dev eslint

  • Eslint의 추가 플러그인을 설치합니다. TypeScript도 고려했으며 설정 환경은 다음 '블로그'를 참고했습니다.

    npm install --save-dev eslint-plugin-prettier eslint-config-prettier eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react-hooks@next

  • prettier는 Eslint와 충돌 오류가 생겨 Eslint-rule에서 삭제했습니다.
  • The Next.js plugin was not detected in your ESLint configuration. 라는 오류를 해결하기 위해 eslint-plugin-next을 설치합니다.

    npm install --save-dev @next/eslint-plugin-next

  • 'touch'는 내부 또는 외부 명령, 작동 가능한 프로그램 또는 배치 파일로 인식되지 않습니다 를 해결하기 위해 커맨드 라인 인터페이스 를 설치합니다.

    npm install touch-cli -g

  • 배포 진행 도중 Failed to load resource: the server responded with a status of 404 (Not Found) 라는 오류를 발견했습니다.
  • 해결 방법은 사이트의 fabicon이 불러오지 못했기 때문입니다. '사이트'의 도움을 받아 해결했습니다.

• Next 환경 안정화 #11 (2022-01-24)
  • Next.JS 환경 안정화를 진행하였습니다.
  • 우선 Eslint와 prettier의 설정을 추가하였습니다. 버전이 충돌 되는 사소한 문제가 있어 버전을 다운그레이드 혹은 재설치 하는 등 삽질을 좀 했습니다 :)
  • cross-env를 설치하여 development와 production 환경을 구분할 수 있도록 하였습니다.

    npm install --save-dev cross-env
    next.config.js 안에 assetprefix를 통해 환경에 따라 경로를 주는 설정을 해놓았습니다.
    이를 통해 이미지 로딩 불가 현상을 해결하였습니다.

  • vscode-styled-components 확장을 설치하여 좀 더 깔끔하게 볼 수 있도록 하였습니다.
  • At-rule or selector expectedts styled-plugin(9999) 라는 오류가 생겨 tsconfig.ts를 수정하여 해결하였습니다.

    typescript-styled-plugin 설치가 필요합니다.
    npm install --save-dev typescript-styled-plugin

• Darkmode 호환 #13 (2022-01-25)
  • 페이지마다 Darkmode 상태가 호환되도록 조치하였습니다. localStorage를 이용해 상태를 저장하였습니다.

    State는 페이지가 넘어갈 때 초기화됩니다.

• .md을 이용한 Page Dynamic Routing (2022-01-25~27)
  • .md 마크다운 파일을 이용하여 페이지 라우팅을 진행하였습니다. velog 와 같은 형태의 게시물 입니다.
  • 설치 모듈은 다음과 같습니다.
    • gray-matter : .md 파일의 metadata를 이용하여 객체 형태의 DB를 받아오는 모듈
    • remark, remark-html, remark-parse unified : .md파일을 html 형태로 변환해주는 모듈
    • date-fns : 날짜 형식 포맷을 바꾸거나 계산해주는 모듈

    npm install --save-dev gray-matter remark remark-html remark-parse unified date-fns

  • Page 동적 라우팅을 하기 위해 '이 사이트'를 참고했습니다.
  • 진행 도중 몇 가지 알 수 없는 문제가 발생했고, 이를 해결해보았습니다.
  • 문제 1 : Module not found: Can't resolve 'fs'

    package.json에 browser - fs : false만 추가하여 해결했습니다.

  • 문제 2 : Cannot read properties of undefined (reading 'map')

    1. 데이터가 제대로 넘어오는지(defined) 확인
    2. &&를 사용하여 조건부로 테스트해보기

  • 문제 3 : Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime

    node-sass를 재설치하였습니다. (호환에 맞게 버전 6으로 재설치했습니다.)
    npm uninstall node-sass
npm install --save-dev node-sass@6

• Page Routing 설정 완료 및 markdown 게시물 기초 디자인 완성 (~ 2022-02-03)
  • Page Routing 기능을 구현했습니다. 게시물만 push하면 자동적으로 게시물이 최신 날짜를 기준으로 뜨도록 카테고리를 제작하였습니다.
  • 게시물 내용을 markdown 형태로 구현했습니다. 현재 디자인 작업 중입니다

• .md 파일 형식인 GFM 설치 (2022-02-04)
  • 기본 마크다운 형식에 없는 기능인 취소선 등을 추가하기 위해 깃허브용 .md 형식을 추가로 설치하였습니다.

    npm install --save-dev remark-gfm
Post 할 때 .use(remark-gfm) 추가

• 댓글 기능 구현 (utterance 이용) (2022-02-04)
  • utterance를 통해 깃허브를 이용한 댓글 상태를 구현하였습니다. 이 기능을 통해 방명록도 구현할 예정입니다.
  • utterance에서 제공하는 <script>를 직접 복사할 경우 React 환경에서는 적용되지 않습니다. 이를 해결하기 위해 따로 component를 제작하여 불러와 setAttribute를 이용하였습니다.
  • iframe형식의 새로운 html component를 생성하는 방식이라 darkmode가 동적으로 적용되지 않습니다. iframe는 contentWindow를 이용하여 값을 변경하는 것이 가능합니다. 이를 이용해 Darkmode 상태에 따라 테마를 바꾸도록 하였습니다.
  • light 모드에서 홈페이지를 불러올 경우 댓글 창이 중복이 되거나 제대로 테마가 바뀌지 않는 버그가 있습니다. 이는 Recoil로 인해 useEffect를 적용하면서 생기는 현상인데 추후에 수정하겠습니다.
    #19

• <code> highlight 및 폰트 변경 (2022-02-07)
  • <code>로 나타낸 코드를 highlight 하는 모듈인 prism을 사용하였습니다.
  • prism 자체 모듈로 사용할 수 있으나 현재 .md 파일을 HTML로 변환하는 remark 형태를 사용하고 있기 때문에 remark에 맞는 prism 모듈인 remark-prism을 설치했습니다.

    npm install --save-dev @types/remark-prism remark-prism

  • 문제 : <span>으로 영역은 나눠지나 class가 적용되지 않는 오류
  • '이슈'를 참고하여 해결하였습니다.

    remark-html 버전 호환 문제, sanitize : false

  • 다른 markdown-it 등을 사용할 경우 그에 맞는 markdown-it-prism 등을 사용하면 됩니다.
  • 폰트의 가독성이 떨어져 Apple 산돌고딕을 사용하려고 합니다.

• Index 페이지 초기 디자인 완성 및 Swiper.js를 이용한 Slide 및 타이핑 타이틀 추가 (2022-02-08)
  • Index 페이지 초기 디자인을 제작하였습니다. 추후에 조금씩 바꿀 예정입니다.
  • 타이핑 타이틀과 카테고리를 슬라이드로 표현한 점이 핵심입니다.
  • 나중엔 카테고리를 넷플릭스 테마 처럼 제작해보려고 합니다.
  • 슬라이드와 타이틀 컴포넌트를 제작하는데 이 사이트를 참고하였습니다.
    • 'Progressbar'
    • 'Swiper (영상)'
    • 'Swiper (공식 홈페이지)'
    • '타이핑 효과 (setInterval 용)'
  • useRouter를 이용하여 로딩 페이지를 만들려고 했으나 Progress Component가 더 깔끔하여 이를 사용하였습니다.

• '반응형 웹' 제작 완료 (2022-02-09 ~ 2022-02-11)
  • 반응형 웹을 고려했습니다. 425px, 786px, 1024px (모바일, 태블릿, 노트북) 기준으로 나누었으며 검색창 디자인을 고정값을 주어 디자인을 바꾸었습니다.
  • vw,vh,vim,vmax를 고려하여 디자인했습니다. 처음엔 반응형 웹을 고려하지 않아 계속 다시 수정하는 작업을 거쳤습니다.

• 배포 설정 완료 및 사소한 오류 수정 (2022-02-14)
  • 레이아웃 점검 후 배포 설정을 완료하였습니다. 구글에 검색하기 위한 sitemap.xml과 여러 설정을 진행하였습니다.
  • 추후에 게시물이 등록이 되면 자동으로 사이트맵을 작성하려고 합니다. (Shell Script 이용)
  • 이미지 불러오기가 환경에 따라 안되는 버그를 수정하였습니다.

    99.99% PATH 문제 였으므로 PATH를 유심히 봤습니다...

  • Image Optimization using Next.js' default loader is not compatible with 'next export'.

    module.export에 loader를 추가하여 해결하였습니다. '참고'

imges : {
   loader : 'imgix',
   path :  !debug ? 'https://wisesaturn.github.io/' : `https://wisesaturn/github.io/study-blog`,
   // next/image를 사용할 때 미리 붙는 Path입니다.
}

• 🤔 혹시? : 음악 플레이어, CRUD 구현
• 😓 오류! : 링크 타고 뒤로가기 했을 때 다크모드 오류 발견
• 😎 FOLLOW THE RULE OF GIT COMMIT LOG

📎 학습자료

📎 참고

버그 설명

• 다크모드 를 적용할 수가 없다.
• 기존 React 환경에서는 App.jsx 안에 recoil 라이브러리를 활용하였으나 Next 환경에서는 _App.tsx안에 RecoilRoot를 넣게 되므로 변수를 바로 받을 수가 없다.

발생 과정

1. _App.tsx안에 useRecoilState를 활용해 변수를 받으려고 하였다.
2. RecoilRoot 밖에 선언 되므로 에러 발생
3. 또한, React Hook에 의해 최상단에 변수를 선언할 수도 없다.
4. _document.tsx에 적용하기에도 역시 마찬가지로 최상단이므로 힘들다

나의 예상

• RecoilRoot를 예상 안했다.. ㅎㅎ

기타

• 다른 전역 변수 선언 방법(Context API, Redux)이나 색다른 방법 통해 적용해야 할 듯하다.

해결

• Provider.tsx 파일을 따로 만들어 { children }을 불러오는 Wrap 형태의 Component를 만들고 거기에 Class를 적용했다.

Provider.tsx

:: Darkmode 상태에 따라 Class를 적용하게 만들 Component

import React from 'react'
import { darkModeState } from '../../components/state'
import { useRecoilState } from 'recoil'

export default ({ children } : any) => {
    const [prevent, setPrevent] = React.useState(false)
    const [check, setCheck] = useRecoilState(darkModeState)

    // useEffect안에서 동작하는 데이터는 SSR되지 않는 점을 이용, 화면 상태 체크
    React.useEffect(() => {
        setPrevent(true)
    }, [])

    const body = <div id="App" className={`${check ? 'dark' : 'light'}`}>{children}</div>

    // prevents ssr flash for mismatched dark mode
    if (!prevent) {
        return <div style={{ visibility: 'hidden' }}>{body}</div>
    }

    return body
}