처음 만들어보는 블로그
요즘 이러한 생각을 한다. 기록하지 않으면 시간은 그대로 흘러가지만, 기록하면 시간이 쌓여간다는 생각. 그래서 블로그를 하기로 하였다. 단지 글을 쓰기위한 목적이면, velog나 tistory등을 하면되지만, 내가 직접 만듦으로써 개발하는 연습을 하기위해 블로그를 직접 만들기로 결정했다.
와이어프레임 을 간단하게 만들고, 작업을 진행하였다. CSS 프레임워크는 tailwindCSS를 사용하였다. 이유는
- 커스터마이즈가 쉽다. 사전 정의된 클래스를 사용하여 디자인을 빠르게 할 수 있다.
- 반응형 디자인을 지원해 반응형을 구현하기 쉽다.
이러한 이유로 tailwindCSS로 프로젝트를 진행하였다.
마주친 문제점 및 해결 방법
여러가지 문제들과 마주쳤다. 그 문제들과 해결 방법을 정리한다.
tailwindCSS의 적용과 mdx의 마크다운 스타일 리셋 이슈
tailwind의 전역 속성에는 기본적으로 reset.css가 적용되어있다. 이것은 @tailwind base;로 불러올 수 있다.
그러나 mdx를 사용하면 마크다운을 html로 변환시킬 수 있는데 이떄 변환된 마크다운에 tailwind로 인해 스타일 리셋이 일어난다.
이러한 현상을 회피하기위해 tailwindcss typography 라이브러리를 이용하였다.
prose 클래스를 추가하여서 마크다운이 적용되지 않는 문제를 해결하였다.(공식 문서 참고)
여기서 주의할 점은 tailwind.config.js에서 tailwind가 적용되는 경로가 잘 맞는지 확인해봐야한다.(한참을 해맸다..)
CSS blur처리 및 position fixed 이슈
backdrop-blur 속성을 사용하면 뒷배경만 흐림처리를 할 수 있다. 나는 nav bar에 이 효과를 적용하였다. 또한 nav bar를 고정시키기위해 position fixed를 사용하였으나, fixed를 사용하면 다른 url로 링크를 타고 넘어갔을때, 즉 포스트의 제목을 눌렀을때 최초 시점이 맨위로 이동하지 않았다. 그래서 sticky를 사용해보니까 링크를 눌렀을때 시점이 글의 맨위로 이동하였다.
gatsby-node.js 파일에서 createPage API를 이용한 페이지네이션 동적 생성 이슈
각각의 페이지네이션 페이지를 동적으로 생성하였지만, index파일에서 graphQL을 이용해 pageContext로 createPage에서 정의했던 context를 받아올 수 없었다. 정리하면, index에서 pageContext를 받아오는 방법을 몰라서, 동적 생성되는 2페이지, 3페이지 및 그이상의 페이지와 달리 1페이지만 따로 index파일에 정의하였다. slice메서드를 사용해 전체 mdx파일을 1페이지 만큼 불러오도록 잘라주었다. 지금은 이렇게 유지보수가 어렵게 해결하였지만, 더 깔끔하게 짜는 방법이 있을 것이다.
기능 구현시에 결과가 예상한대로 나오지 않는다면
꼭 터미널을 확인한다. 어떠한 오류인지 상세하게 나온다. 오류를 보지 않고 혼자 고민하다가 많이 해맸다. 사실 오류가 난지도 몰랐다.
새롭게 알게된 것들
React에서 children props
children props를 통해서 자식 컴포넌트에 접근할 수 있다.
lodash 라이브러리 사용
lodash library의 kebabCase()를 사용하면 url 주소를 kebabcase로 변형할 수 있다.(이부분은 내가 직접 util 함수를 따로 만들어도 될 것 같다.)
NodeJS path
path.join()과 path.resolve()의 차이점은 resolve를 쓸 경우 /를 절대경로로 처리, join은 상대경로로 처리한다.
React의 ref와 current 속성
ref는 DOM요소나 클래스 컴포넌트를 참조하는데 사용된다. ref를 사용하여 DOM요소에 접근하면
해당 요소의 속성과 메서드에 직접 접근할 수 있다. ref를 통해 참조된 요소는 current속성을 통해 접근할 수 있다.
Link 컴포넌트를 외부링크에 사용하면
외부링크에 연결하는 용도로 Link 컴포넌트를 사용하면 콘솔에 경고가 나온다. Link 컴포넌트는 internal link를 연결하는데 사용하는 용도라고한다. 따라서 외부 url에 연결하려면 html의 a태그를 사용하면 된다.
Gatstby 배포하기
gatsby 공식 문서에서 github pages로 검색한뒤 Deploying to a GitHub Pages subdomain at github.io라고 쓰인 제목의 부분을 참고했다. 배포 방법을 설명하면,
npm install gh-pages --save-dev로 gh-pages 패키지를 설치한다.- package.json에 코드를 추가한다.
{
"scripts": {
"deploy": "gatsby build && gh-pages -d public -b <배포할 브랜치 이름>"
}
}
- 여기서 배포할 브랜치 이름은 gh-pages로 하면 깔끔하다.
- 이후
npm run deploy를 실행하면 username.github.io로 블로그가 배포된 것을 확인할 수 있 다. - 깃허브 레포에서 settings-> pages-> branch 부분을 main에서 배포할 브랜치(gh-pages)로 수정해준다.
이렇게 배포가 가능한 이유는 아마도 나의 레포 이름이 username.github.io이기 때문에 가능한 것 같다.
배포 이후 이슈
배포를 하였지만, 또 하나의 이슈에 직면했다. 로컬 환경에서의 화면과 배포 사이트 화면의 전체적인 content의 크기가 다르게 보인다는 것이다. 배포 사이트 화면이 더 크게 보였다.(왜 이런 현상이..?)
타입스크립트를 사용했지만 사용하지 않은 것처럼..
이 프로젝트는 타입스크립트 파일들로 만들어졌지만, 마치 자바스크립트를 사용하듯이 TS를 거의 활용하지 못했다. TS로 타입을 정의하는 연습의 필요성을 느꼈다.
마치며
약 2주정도 시간을 투자해서 만들었는데, 막상 많은 기능이 있는 것은 아니지만 공식문서를 계속 읽고 구글링을 통하여 내가 원하는 결과물을 만들어 낸 것에 대해 만족한다. 다만 블로그 디자인이 다른 분의 개인 블로그를 카피한 것이어서 이부분이 아쉽게 느껴진다. (디자인은 너무 어렵다ㅜㅜ)