sckroll / sckroll.github.io Goto Github PK

• 헤더 메뉴를 내비게이션 드로어 형식으로 바꾸기
• 다음 페이지에 미디어 쿼리 적용
  • 메인 페이지
  • About
  • Post 리스트
  • Post 내용
  • Projects

• 태그, 업로드 일자가 겹치는 문제 해결
  • 태그를 위에, 업로드 일자를 아래에 위치
    • 일단 보류
• 이전/다음 포스트 이동 텍스트 버튼이 개행되는 문제 해결

• IntersectionObserver API를 사용하여 구현
• Vue에 적용하는 과정에서 버그가 발생하여 잠시 뒤로 미룬 상태
  • 화면에 보이는 영역만 포스트가 로딩되지 않고 모든 포스트를 불러오는 버그

• 소스 코드 블록을 마크다운 토글 기능을 이용하여 가릴 것 => #35

• 목차 부분을 컴포넌트로 분리
• 마지막으로 목차를 열고 닫은 상태를 브라우저에 저장, 포스트를 불러올 때 사용
• 목차 항목 디자인이 너무 단조롭다. 어떻게 개선할 수 없을까?
• 목차 컴포넌트 우측 끝에 있는 아이콘을 클릭하면 목차 부분을 여닫는 대신, 목차 컴포넌트의 헤더를 클릭하면 여닫을 수 있도록 사용성 개선

• 포스트의 일부 컨텐츠를 숨기거나 보여줄 수 있는 토글 기능 추가
• 노션의 토글 목록과 같은 기능
• 참고: https://computer-science-student.tistory.com/388

• 포스트 목차(TOC) 앵커를 클릭하면 앵커의 타겟(제목)이 헤더 메뉴와 겹치는 현상이 있음

• 위 현상을 아래와 같이 수정할 것

• 2048 클론
  • 리메이크?
• 관통 프로젝트 => #71
• 블로그 => #72
• 공통 프로젝트 => #73
• 각 프로젝트의 정보를 PDF로 변환하는 기능 추가: https://github.com/MrRio/jsPDF

• 한글 태그 추가

• 포스트 검색을 위한 라우트 생성 (/posts/search)
• 검색 결과가 많을 수도 있기 때문에, Lazy Loading을 검토해볼 것 => #28

• 자체 이미지를 몇 장 찍은 후 (혹은 무료 이미지를 가져온 후) 랜덤으로 썸네일 지정
• 혹은 geopattern 라이브러리 사용을 고려해볼 것

▲ 댓글 영역이 보이지 않고 이전/다음 포스트 링크의 스타일이 깨졌다.

▲ 댓글 기능을 제공하는 utterances와 관련해서 다음과 같은 문제가 발생했다. 이와 연관이 있지 않을까?

• 사각형 랜덤 패턴 방식 대신 포스트 내용 일부를 보여줄 것
• 적용 범위
  • 메인 페이지
  • 포스트 메인 페이지
  • 포스트 검색 결과 페이지
  • 페이지네이션

• 포스트 내용 검색
• 포스트 제목 검색
• 포스트 태그 검색
• 제목/내용/태그 스위치 기능 구현

• 스크롤 애니메이션 보강
• 기존의 마크다운 형식 대신 Vue 컴포넌트 사용
• 각각의 섹션을 그래픽으로 변경 및 내용 보강

• 코드 블록의 주석 텍스트가 가운데 정렬로 되어 있는 상태 해결
• 문단과 문단, 헤더와 문단 사이의 간격 조정

• 몇 번째 리뉴얼인지 모르지만 한 번 더 갈아엎자.
• 이전 랜딩 페이지처럼 최근 포스트 상단에 소개글을 추가
• 백그라운드에 사진보다는 GIF나 영상을 추가한다면 더 좋을듯?

• 구글 애널리틱스 추가
• 각 페이지의 타이틀, 메타데이터 변경
  • 타이틀 변경 후 utterance의 issue-term을 title로 변경할 것
• SEO 검사

로컬 IDE의 마크다운 파서는 수식을 $ 기호로 감싸서 표현할 수 있으나, nuxt/content의 마크다운 파서는 지원하지 않는 것으로 보이므로 $ 기호를 삭제하고 일반 코드 인라인 블록으로 대체할 것

576px 미만의 해상도에 최적화된 디자인을 페이지 전반에 적용

• 참고: 이미 viewpoint-xs라는 SCSS 믹스인으로 기능 구현은 해놓은 상태이므로 이를 응용할 것
• 헤더 메뉴
• 푸터 바
• 댓글 컴포넌트
• /
• /about
• /posts
• /posts/:slug
• /projects

• 프로젝트 리스트 아이템 디자인을 포스트 리스트 아이템 디자인으로 변경
• 포스트 아이템의 썸네일 이미지가 나타나게 하는 prop의 이름을 featured에서 다른 이름으로 변경
• 프로젝트 리스트 아이템은 모두 썸네일 이미지가 보여야 하므로 전부 해당 prop 적용

• SCSS 전역 변수를 별도 파일로 분리
• 모든 컴포넌트의 스타일을 scoped로 설정
  • scoped 상태에서 utterances 너비를 늘릴 수 없음
• 컴포넌트 SCSS 전환
  • 헤더 메뉴
  • 푸터
  • 포스트 검색 컴포넌트
  • 포스트 리스트
  • 포스트 미리보기 컴포넌트
  • 목차, 이전/다음 글, 댓글
• 뷰 페이지 SCSS 전환
  • 뷰 페이지는 scoped 적용하지 말 것
  • 레이아웃 (default, error)
  • 홈 페이지
  • about 페이지
  • posts 리스트 페이지
  • post 페이지
  • projects 페이지

▲ LeetCode 39번 문제

토글 코드를 복사하는 과정에서 문제가 발생한 것으로 보임

▲ LeetCode 3번 문제

• 굵은 글자를 나타내는 ** 표시가 그대로 노출되는 것을 볼 수 있음
• ** 뿐만 아니라 다른 마크업도 이럴 가능성이 높음

• 포스트 콘텐츠에서 다른 포스트로 이동할 수 있는 링크를 어떻게 할 것인가?
• dev 환경과 prod 환경의 경로가 다름을 인지할 것

컴포넌트 렌더링이 전혀 되지 않고, 콘솔 창에는 위와 같이 에러 메시지가 출력됨

• 기존의 그리드 뷰 외에 포스트의 제목과 날짜, 내용을 리스트 형태로 보여주는 뷰를 추가
• 해당 리스트 뷰를 기본값으로 설정, 그리드 뷰와 바꿀 수 있는 기능을 추가
• 모바일 환경에서는 리스트 뷰를 기본값으로 설정
• 그리드 뷰 / 리스트 뷰 여부를 로컬 스토리지에 저장
• 현재 보고 있는 뷰의 토글 상태를 아이콘의 색상으로 표시하기

• 404 에러가 뜨면 /posts 뒤에 붙는 URL 경로로 인해 정규표현식에 매칭이 되어, 랜딩 페이지로 인식하게 됨

  computed: {
    isLanding() {
      const path = this.$route.path
      return path === '/' || path.match(/\/posts\/\S+/)
    },
  },

• 포스트 리스트 페이지 (/posts)
• 포스트 검색 결과 => #27
• 페이지에 보여지는 포스트의 개수를 선택할 수 있는 기능 추가
  • 굳이...?

• 다크 모드가 켜진 상태에서 페이지를 새로고침하면 라이트 모드에서 다크 모드로 전환되는 효과가 생김
  • 즉, 화면이 번쩍이는 현상이 나타남

• 영문 디스플레이 폰트를 기존 나눔스퀘어에서 Metropolis로 변경
  • Gilroy로 변경하려 했으나, Light와 ExtraBold만 무료로 사용할 수 있음
  • 비슷한 모양의 모든 굵기에 대해 자유로운 이용이 가능한 Metropolis로 변경하기로 결정
• 한글 디스플레이를 포함한 모든 폰트를 기존 나눔스퀘어에서 Spoqa Han Sans Neo로 변경

• TIL 라우트 생성
• 배운 점을 짤막하게 적을 수 있는 기능 추가
• 기존의 TIL 태그가 붙은 포스트를 TIL 페이지로 이동
  • TIL 수준으로 짧지 않은 포스트는 TIL 태그 제거 후 유지
• 연관 있는 포스트가 있다면 TIL의 하단에 링크로 추가
• 반응형 디자인 적용

• 굳이 두 페이지를 나눌 필요가 없다고 판단함
• About 페이지에 있는 내용을 모조리 랜딩 페이지로 이동
• 랜딩 페이지 최상단에 인트로 섹션 추가

• 이미지를 지정하지 않으면 랜덤한(정확히는 해시 값에 따라) 패턴이 결정되는데, 생성할 때마다 매번 달라지니 일관성이 없어 보임
• 주제에 따라 패턴을 구분했으면 좋겠음
  • 알고리즘 언어 (JS, Python, Java 등)
  • 알고리즘 저지 사이트 (백준, 프로그래머스 등)
  • FE, BE
  • 잡설
  • 기타 기술 스택
• ex: 태그가 #algorithm이 붙으면 줄무늬가 나타나고, #java가 붙으면 갈색 계통의 그래픽이 표시됨
  • 즉, 둘 다 쓰면 갈색 줄무늬 그래픽이 썸네일로 표시됨

• 지금까지 쓴 포스트의 태그를 모두 수집, 사용 빈도를 기준으로 정렬
• 포스트 리스트의 최상단 혹은 최하단에 표시할 것

인용 블록도 다크 모드 색상을 적용하여 어둡게 만들 것

• 인트로 섹션의 소개 메시지를 확대
• 인트로 소개 메시지를 상단에, 나머지는 하단에 위치하도록 레이아웃 변경
• 인트로를 제외한 나머지 섹션의 제목을 좌측에서 상단으로 이동
• 스킬 섹션 디자인 변경
• 경험 섹션 디자인 변경

• 최상단 인사 메시지만 남기고 배경 삭제
• 최근 작성되거나 업데이트된 포스트만 리스트 형식으로 표시 -> #32

• .py, .java 등의 소스 코드 파일을 .md 파일처럼 불러올 수 있는지 찾아보기
• 만약 가능하다면, 포스트에 소스 코드 파일 내 텍스트를 붙여넣기
  • 소스 코드가 저장되는 디렉토리를 별도로 만들기

• 포스트의 카테고리를 분류하는 기능 추가
• 해당 카테고리에 대한 라우트를 별도로 만들 것

2가 2^(2+2/2)+2^2개!

• 이미지에 흰색이 들어갈 경우 위의 스크린샷처럼 이미지의 경계를 구분하지 못하는 문제 발생
• 경계 구분을 위해 포스트의 모든 이미지에 스타일링을 추가할 것
• 다크 모드일 때 스타일링도 고려할 것

• 기존에 사용하던 FontAwesome 대신 자체 아이콘을 추가
  • 아이콘 베이스 컴포넌트 생성
  • 피그마에서 만든 아이콘을 SVG로 저장 후 경로만 추출하여 각 컴포넌트에 담기
• 굳이 바꿀 필요는 없지만 디자인의 통일성을 위해 고려해볼 것

• PC 화면에서 태그 개수를 3개 이상으로 표시
• 상위 태그 3개에 대해 다른 색상으로 강조

• 로딩 컴포넌트를 구현하여, 사이트 내 모든 페이지를 이동할 때 표시
• 로딩 바로 구현할 것인지, 스피너 형태로 구현할 것인지 생각해볼 것

• 배포할 때마다 매번 수동으로 push-dir을 사용하기 번거로움
• GitHub Actions로 이를 자동화할 수 있지 않을까?

• 우측 상단 버튼 클릭 시 다크 모드 적용
  • 단순 버튼 대신 토글 스위치 버튼으로 변경
• 다크 모드 배경 색은 utterances의 github-dark 테마 색에 맞출 것
• 다크 모드에서 라이트 모드로 전환하는 버튼은 태양 아이콘으로 할 것
• 다크 모드 상태에 따라 utterances 색상도 바꿀 것
• 브라우저 상태바(크롬 모바일, 삼성 인터넷 등) 색상도 변경되도록 설정 (meta[name="theme-color"])

• @nuxt/color-mode 모듈 설치 후 nuxt.config.js에 추가
• Vue 컴포넌트 및 SCSS 코드를 컬러 모드 모듈에 맞게 변경
• 기존 다크 모드 관련 코드 삭제

위 스크린샷처럼 상단 여백과 하단 여백이 일치하지 않음

• URL이 /posts/post-title인 페이지에서 새로고침하면 /postspost-title로 리다이렉트되면서 404 오류가 뜨는 문제가 발생함