jiwoonkim / junekim.dev Goto Github PK

목표: 마크다운 내에 이모티콘을 깃헙처럼 사용할 수 있게끔

• 플러그인 사용 해보기: gatsby-remark-emoji

현재 prism.js을 통해 코드 블럭을 사용하고 있는데, 혹시 코드 블럭 스타일을 변경할 수 있는 방법이 있는지 고민

• 굳이 prism.js를 사용하여 코드 블럭을 만들어야 하는 이유 자세히 알아보기
• 코드 블럭에 syntax highlighting 스타일을 andromeda 테마를 사용하고 싶은데 방법 알아보기
• 직접 syntax highlighter 기능을 구현하는 방법 알아보기

Describe the Bug
도메인 네임을 더 편리한 jiwoonkim.github.io 로 변경하기
(현재 jiwoonkim.github.io/babydragon)

Expected Changes

1. babydragon 레포를 jiwoonkim.github.io로 변경
2. gatsby-config.js의 pathPrefix 설정 변경
3. gatsby-config.js의 gatsby-remark-copy-linked-files 플러그인의 option 중
   destinationDir 변경 (#8 와 85dd872 참고)

컨텐츠가 표시되는 body 부분의 현재 너비는 800px (@ full screen)인데,
글이 한 눈에 들어오지 않아 UI적으로 효과적이지 않은 것 같다.

• 현재 화면의 반으로 브라우저를 줄였을 때 정도의 너비 (700px 정도)에서 글이 잘 읽히는 것 같다
• Jbee님 블로그 등 다양한 블로그에서의 너비를 비교하기

참고하여 더 눈에 잘 들어오는 너비로 변경하기

문제: 현재 블로그 포스트 본문 내 Table에 스타일이 없어 가독성이 떨어진다

---

• Table 전체 박스 두르기
• Td 사이에 그리드 표시
• Thead 에 구분을 위해 색깔 적용하기(?)

---

적용 완료

• bootstrap 테이블 스타일 참고하여 테이블에 스타일 적용

About 페이지 작성하기

• 이력서 및 포토폴리오는 아예 따로 만들까 생각중
• 아예 about 링크를 그 페이지로 설정하기

컴퓨터구조 시리즈 정리

---

• 01.

기존 타이틀의 단어가 간혹 잘리는 오류가 생기기 때문에 word-break를 적용하지 않는 방향으로 수정하기

• word-break를 적용하지 않았을 때 너무 긴 단어로 타이틀의 UI가 깨지는 오류가 발생하지 않게끔 수정하도록 주의!

자바스크립트 포스트들을 다시 공부하며 우리말로 번역 및 정리하기

• 다른 사람에게 설명하듯이 정리하기

• 내용 리팩토링

객체지향 프로그래밍 시리즈 정리

---

• 01. 객체지향 프로그래밍과 자바 언어 소개

• 02. 클래스와 캡슐화

• 03. 자바 기본 문법

• 04. 상속

• 05. 다형성

• 06. 추상 클래스 인터페이스

• 07.

• 예외처리

• 패키지

• 컬렉션

• 제네릭 타입

• 그래픽 유저 인터페이스

• 스레드

• 애플릿가 네트워크 프로그래밍

새로운 디자인으로 블로그 리모델링하기

• home 페이지:
• about 페이지:
• category 페이지:
• category of 페이지
• post 페이지: 마크다운으로 작성한 블로그 포스트 템플릿
  • h3: blue
  • h4 black (bolded)
  • __{글}__: 기존의 bold 체를 벗어나서 medium 블로그처럼 하이라이트되게끔 (light blue)

Describe the Bug

• 메뉴 사이드 바에 현재 present한 링크 표시가 없음
• hover하는 아이콘 위에도 글귀 추가(?)

Expected Behavior

• 메뉴 사이드 바에 현재 present한 링크 표시 적용
  - 색깔 다르게 적용 or 아이콘 위에 current라는 글귀 추가
  - current인 아이콘은 hover 효과 적용 안 되게끔
• hover하는 아이콘 위에도 글귀 추가(?)

Describe the Bug
모든 태그 표시하는 페이지가 UI가 불편함

Expected Behavior

• 모든 태그 표시하는 페이지에서 워드 클라우드 형태로 태그들 표시
• 워드 클라우드 구현
  • 찾기 쉽게 모든 태그를 알파벳, 가나다 순으로 오름차순 정렬
  • 모든 태그는 돌리지 않은 바른 형태로 표시
  • 태그 관련 포스트의 개수에 따라 크기와 색깔 진하기가 달라지게끔
    • 단계적으로 절대적인 기준 도입: ex. 15개 넘으면 색깔 한 단계 높아지는 방식으로

블로그 컴포넌트를 잘 정리하여 gatsby-starter-blog를 바탕으로 한 start 템플릿으로 런칭할 수 있으면 좋겠다

체크리스트:

• 마크다운 파일 렌더링
• 컴포넌트 코드 정리
• 스타일 간략하게 정리
• 이미지 지원 (이외 미디어 파일도?)
• 워드 클라우드 기능 (?)

블로그 개발 과정 정리하기

• server-side rendering 제대로 공부
• static-site rendering 제대로 공부
• 템플릿 없이 gatsby.js starter 바로 사용한 이유
• 마크다운 파일을 렌더링하기 위한 설정
• 컴포넌트 개발(?)
• prism.js 설정
• 이미지 추가 설정

무조건 공식문서(!!) 참조 (추가자료는 부가적인 것)
참고자료 https://www.gatsbyjs.org
추가자료 https://reactgo.com/gatsby-advanced-blog-tutorial

자료구조 시리즈 정리

---

• 01. 배열
• 02. 연결 리스트
• 03. 스택과 큐
• 04. 그래프
• 05. 트리
• 06. 힙
• 07. 해시

...

gatsby-config.js 공부 겸 정리하기

• 불필요한 plugin 지우기
• 추가하고 싶은 plugin 살펴보고 추가하기

SEO 적용하여 블로그가 검색 가능하게 하기

• 구글에 등록(?)
• 트래픽 트래킹 적용해야 하나(?)
• 댓글 기능 추가(?)

Describe the Bug
페이지 크기에 따른 이미지 크기 설정

To Reproduce

Expected Behavior

이미지 가로 크기를 맞추는 기능 추가하기

1. 이미지 가로크기 > 페이지 가로크기

   • 이미지를 페이지의 가로 크기에 맞게 줄이기
   • 모바일 반응형으로도 설정하기

2. 이미지 가로크기 < 페이지 가로크기

   • 페이지 크기에 맞추어서는 안됨 bcuz 이미지가 쓸데없이 커짐
   • 중앙정렬하는 것이 좋을까?

서로 연결된 포스트들 (시리즈)의 경우, 그 다음 포스트로 바로 넘어갈 수 있는 링크 달기

• next 제목
• prev 제목

형태로

알고리즘 시리즈 정리

---

• 01. 탐색
• 02. 정렬
• 03. 그래프
  • 그래프 탐색 (DFS, BFS)
  • 최소 신장 트리 (MST)
  • 최단 경로 찾기
• 수학

프론트엔드 포커스 포스트들을 다시 공부하며 우리말로 번역 및 정리하기

• 다른 사람에게 설명하듯이 정리하기

---

• 01. 인터넷과 웹
• 02. 웹의 큰 흐름(?)
• 03. DNS

마크다운에서 블로그 내의 다른 포스트 링크를 걸고 싶다.

---

문제: 일단은 이미지를 링크하는 것과 동일한 방식으로 상대적인 파일경로로 마크다운 파일 (.md) 자체의 링크를 걸고 있지만, 그건 마크다운 파일 자체로 이동한다.

목표: 파일이 아닌 (파일이 블로그 페이지로 렌더링된 형식의) 페이지로 이동할 수 있는 방법이 필요. 그래서 한 포스트에서 다른 포스트로 이동할 수 있게 링크를 걸고 싶다.

운영체제 시리즈 정리하기

---

• 0. 운영체제 개요
• 1. 커널
• 2.

네트워크 시리즈 정리

---

• 01.

데이터베이스 시리즈 정리

---

• 01.

블로그 포스트 내의 내용을 검색할 수 있는 search 기능 구현하기

• search 아이콘 사이드 바에 추가(?)

커밋 메세지가 읽기 어려운 문제 있어 커밋 메세지마다 prefix를 붙이고자 한다

• ➕ add: 메세지: src와 관련된 코드 추가 및 변경 시
• 🔧 fix: 메세지: src와 관련하여 오류를 수정할 시
• 💄 style: 메세지: src에서 스타일과 관련된 코드 추가 및 변경 시
• 📝 write: [카테고리] 메세지: content 폴더 내의 포스트 생성 및 필기 수정 시

추가적인 고민

• 커밋 메세지를 영어로 적는 것이 나을까, 우리말로 적는 것이 나을까?
• 이모티콘을 포함하면 더 눈에 보기 좋을까, 아마추어 같을까?

Describe the Bug
이미지에 lazy loading 기능 지원하기

Expected Behavior
이미지에 lazy loading 기능 추가

문제: Header 컴포넌트 내의 Title 컴포넌트의 꾸밈 태그 < h1>와 < /h1> 관련 오류 해결하기

1. 한 줄 글자 양옆의 태그의 위치가 평행하지 않은 오류

   • 영문 또는 한글인지에 따라 오류가 나타나는 것 같기도 함
   • 한 줄 이상의 길이에도 대충 눈대중으로 위 아래 마진 설정이 아닌 제대로 계산된 스타일을 적용할 수 있으면 좋겠다

2. 특정 태그 관한 리스트 페이지에서 </h1> 꾸밈 태그에 초록색 하이라이트 스타일이 적용되는 오류

   • 블로그 내의 링크를 통해 접근 시 오류가 없으나, URL로 직접 접근 시 오류가 생김 : 예시 링크
   • develop 모드에서는 나타나지 않으나, 실제 deploy 후에만 일어난다

Describe the Bug
메뉴의 all post 링크가 크게 의미가 있는 것 같지 않아, 삭제 후 home 페이지에 최근 포스트 나열하는 방식으로 변경하고자 함

Expected Behavior

• 메뉴의 all post 카테고리 삭제
• home에 recent post를 나열
  • 최근 순서 (가장 최근 -> 가장 오래된)로 10개 정도의 포스트만 정렬하는 기능 구현

Describe the Bug
페이지에 이미지가 표시되지 않음

To Reproduce

1. 마크다운 파일에 <img> 태그를 사용하여 이미지 삽입
2. src는 상대경로 사용: ex. <img src='./_images/1.PNG' >
3. npm run develop하여 해당 페이지에 이미지 표시가 되지 않음을 확인

Expected Behavior

1. 포스트 (마크다운 파일) 이 속한 폴더에 _images 폴더 생성하여 사용할 이미지 저장하고
2. 마크다운 파일에 이미지 <img src='./_images/1.PNG' > 삽입하면
3. 페이지에 이미지 표시가 가능

• 추가: lazy loading 방식 구현 가능(?)

Describe the Bug
메뉴를 사이드바의 비교적 간단한 UI로 변경하기

• 기존 메뉴바가 블로그 전체의 UI를 두 부분으로 분리하여 페이지가 한 눈에 보이지 않는 불편함이 있음

Expected Behavrior
메뉴를 사이드바 (side bar)로 변경하여 좀 더 심플하면서도 한 눈에 보이는 UI로 변경

• 형태: 사이드 바는 태그가 반 잘린 도형의 모양으로 디자인
• 색깔: 도형은 기존의 핑크 컬러로, 아이콘의 색깔은 기존의 연한 노랑 적용
• 아이콘: 기존 메뉴 카테고리(home, about, categories, all posts)유지한 채, 아이콘 형태로 변경
• 효과: 스크롤 다운 시 사이드바가 숨겨지고, 스크롤 업 시 사이드바가 나오는 효과 적용

문제: 특정태그 페이지에서 표시되는 포스트 정렬방식 변경하기

Describe the Bug
수정 시간 순서 (가장 오래전 수정 -> 최근 수정)

Expected Behavior
알파벳, 가나다 순, 번호 오름차순 정렬 적용

• 특정 태그 페이지의 포스트들 정렬
  • 포스트 대부분이 [카테고리] 01. 제목와 같이 번호가 매겨져 있음
  • 같은 카테고리라면 한데 모아서 포스트의 번호 순서대로 정렬
  • 다른 카테고리라면, 크기 순서는 상관없을 것 같음

---

방법 고민:

1. gatsby-config에서 변경(?)
2. 정렬 알고리즘을 따로 구현하여 리스트 페이지에 적용하기

To do
이미지 표시를 위한 플러그인을 여럿 비교하여 더 적합한 것을 반영하기

• gatsby-remark-copy-linked-files
• gatsby-remark-copy-images
• gatsby-remark-image
• 그 외

Expected Behavior

1. 개발 모드에서 포스트의 이미지가 표시
   • 이미지 파일이 빌드된 결과물에 저장됨 (public 파일)
   • 마크다운에서 이미지 링크가 위 이미지 파일 경로와 일치
2. 배포된 블로그에서도 이미지가 표시