나만의 블로그 제작

계기

• 너무 코딩 테스트와 면접 준비에만 신경 쓰는 것 같아서
• 코딩 실력을 늘리거나, 유지하면서 뭔가 유의미한 결과를 가질 프로젝트는 어떤 게 있을까?
  • 나만의 블로그를 만들어보자!
• React로 블로그를 만들면서 천천히 이해를 해보자, 라는 마음
• 프론트도 직접 만들고, 서버도 직접 만들어 보자!!!!!!

소개

• Home(=Blog) : 블로그 메인 화면, 포스트 리스트와 태그 등을 보여준다.
• About : 내가 쓰는 기술, 툴 같은 것들을 간단히 소개
• Toys : CSS를 이용한 애니메이션 기능 등을 간단히 만들어둔 것들. 현재까지 다크모드, 시계, 플립카드 완성

구조

- src
    - common // 헤더와 같은 공용 컴포넌트
    - pages //
        - styles // css 파일들
        - items // 페이지에서 사용하는 하위 컴포넌트 모음
        페이지 컴포넌트들
    - utils // 서버 통신(api), 기타 시간 관련 함수와 같은 유틸
    App.js
    index.css
    index.js

고민한 것들 & 혼잣말

• 화면 배치 및 디자인
  • 화면을 어떻게 분할하고, 어디에 무엇을 배치하고, 비율을 어떻게...? 어렵다.
  • 사이트 전체 분위기를 결정할 테마는 무엇으로 하고, 또 구체적인 디자인은 어떻게?
  • 아무리 생각해도 고민이 끝나지 않아서, 전체 디자인 및 테마를 서너 번 정도 갈아 엎었다.(덕분에 일주일 정도 날린 듯. 아니, 더 날렸나...)
• 파일과 폴더 구조
  • 정답은 없다고 하지만 그래도 어떻게 하면 좀 깔끔하고 찾기 쉬울까...?
• 속도 개선
  • 배경 이미지를 사용하니 일부 환경에서 이미지가 뒤늦게 마운트되는 경우가 있더라. 보기 안 좋았다.
    • 이미지 크기를 줄이거나 통신 속도를 개선하려고 하다가 그냥 디자인을 뜯어고치면서 없애버렸다.
  • 번들 파일 크기를 줄이기 위해 직접 사용하던 이미지 파일을 버리고 url로 변경
    • 부스트 캠프에서 에러 모니터링 프로젝트를 진행할 때는 이거 줄여보겠다고 별짓 다하면서 밤새 구글링하고 고쳐보기도 했는데(웹팩을 직접 설정하는), 이 블로그는 CRA로 생성해서 웹팩을 건들지 않기로 했다.
  • 결국 서버에서 데이터를 가져오기 때문에 서버가 빨라야 한다는 생각을 할 수밖에 없었는데... 서버를 헤로쿠로 배포해서 좀 느리다...