이번에 종강을 맞아 블로그를 새로 개편해봤습니다. React를 다른 프로젝트를 하면서 자주 사용하다보니, 이 블로그에서 고칠 부분이 잘 보였습니다. 그래서 상당히 많은 부분이 바뀌었습니다.

Component Structure

• 먼저 기존의 소스 구조는 jsx파일과 scss파일들을 전부 분리해놓은 구조였는데, 이제는 그렇게 하지 않고 각 컴포넌트별로 디렉토리를 새로 생성, 컴포넌트별 scss파일을 만들었습니다.

• 또한 scss파일을 생각 없이 작성했더니 자식 컴포넌트의 scss가 부모 컴포넌트에 영향을 미치는 문제가 있었습니다. 그래서 각 컴포넌트의 최상위 엘리먼트에 고유한 클래스 이름을 할당한 후에, 각 scss에서 전체를 그 클래스로 감쌌습니다.

  • ...
    import 'somecompoent.scss'
    ...
    return <div className="some-component">
    	<div className="inner">
            ASDF
        </div>
    </div>
    ...
    

  • // somecomponent.scss 
    .some-component{
        .inner{
            ...
        }
    }
    

  • 물론 React에서 scss module이 사용가능하기는 하지만, 여러가지 귀찮은 부분이 있어서 사용하지 않기로 했습니다.

• 추가적으로 UI를 잘 개편해서 이제는 블로그 메인 화면 좌측의 카테고리 리스트를 누르면 현재 보고 있는 카테고리가 볼드체로 표시됩니다. 이전에는 특정 카테고리를 보고 있을 경우 어떤 카테고리를 보고 있는지 알기 어려웠습니다.

• 이전에는 포스트 제목 밑에 포스트의 내용이 짧게 나왔습니다. 그런데 가만히 보니 별로 유익하지도 않은 데다 디자인도 예쁘지가 않아서 그냥 날렸습니다.

Project Structure

프로젝트 구조 자체도 많이 바뀌었습니다. 이전에는 frontend와 backend(?)가 합쳐진 구조였는데, frontend와 backend가 분명하게 나뉘도록 아예 디렉토리 자체를 따로 나누었습니다.

이때 backend란 일반적으로 웹에서 말하는 DB 등이 있는 backend가 아니라, 블로그를 컴파일할 때 사용되는 스크립트 등을 말합니다. 마땅히 표현할 방법이 없어 그냥 backend라고 명명해봤습니다.

또한 기존에는 블로그에서 포스트를 새로 작성한 후 컴파일하면 메타데이터가 frontend에 저장됐었습니다. 그러므로 매 포스트를 작성할 때마다 frontend 소스코드가 약간 바뀌고, 따라서 매번 새롭게 빌드를 해야 했었습니다. 그러나 이번에 블로그 구조를 개편하면서, frontend는 소스코드 변화가 전혀 없고 포스트 정보는 그와 별도로 업데이트될 수 있도록 구성했습니다.

따라서 이제는 포스트 작성과 블로그 구조 업데이트가 독립적으로 이루어질 수 있습니다.

CI/CD

블로그 구조가 front/back으로 나누면서 GitHub Action을 사용한 CI/CD 역시 새롭게 구성했습니다. 가장 큰 변화는 캐싱을 제대로 고쳤다는 점입니다. 이전에는 깃헙 액션 캐싱을 구글에서 발견한 소스를 그대로 가져다 썼었는데, 알고 보니 키 값을 잘못 줘서 캐싱이 전혀 되지 않고 있었습니다. 이것을 제대로 고치고 나니 빌드 속도가 10배정도 빨라졌습니다. 원래는 yarn install을 실행하는 데 1분이 넘게 걸리는 경우가 있었는데, 이제는 보통 3초 안에 해결이 됩니다. (진작 document를 읽을 걸 그랬습니다...)

그리고 마이너한 업데이트기는 합니다만, 이전에는 GitHub workflow의 각 step에 환경 변수가 지정돼있었습니다. 그런데 이렇게 하면 다른 사람이 이 리포지토리를 포크하여 사용할 때 어려움이 있을 것 같아, 최상단에 모든 환경 변수를 모았습니다.

추후 바꿔볼 점

이 블로그는 현재 master branch에 블로그 구조 및 post가 전부 저장됩니다. 그러나 이렇게 하면 (그러고 싶은 사람이 있는지는 모르겠지만) 다른 사람들이 이 블로그를 포크해서 사용하기가 어려울 것입니다. 그러므로 post정보가 저장되는 브랜치를 따로 지정하고, master branch에는 포스트 정보를 전부 지우면 어떨까 고민 중입니다.