chayeoi / blog

😀 My personal blog

Hi, I'm Chanyeon.

I'm a frontend enginieer in Seoul, interested in building useful and beautiful things.

blog's Issues

소개 화면에 사용되는 내용 포맷을 일반 문자열로 변경

• gatsby.config.js의 siteMetadata.about.content의 포맷을 배열에서 일반 문자열로 변경한다.

포스트 상세 화면에서 제목 요소 링크 클릭 시 헤더에 의해 선택된 제목이 가려지는 현상

• CSS의 :target 선택자를 이용하여 URL에 매칭된 요소에 오프셋을 추가하여 헤더 요소의 아랫 부분으로 링크의 포커스가 이동하도록 변경

SEO 적용

하위 작업

• 기본 meta 태그 적용
  • meta[name="keywords"]
  • meta[name="description"]
  • meta[name="author"]
• link[rel="canonical"]를 적용하여 표준 페이지 설정
• 페이지 단위로 소셜 meta 태그(og, twitter) 적용
  • meta[property="og:title"]
  • meta[property="og:description"]
  • meta[property="og:image"]: 제공된 소셜 프리뷰 이미지를 적용하되, 없을 경우 기본 이미지를 적용한다.
  • meta[property="og:site_name"]: 웹 사이트의 이름으로, "CHNY Blog" 적용
  • meta[property="og:url"]: 페이지 표준 URL로, https://chny.world 적용
  • meta[property="og:type"]: https://ogp.me/#types 참고
  • meta[name="twitter:title"]
  • meta[name="twitter:description"]
  • meta[name="twitter:image"]
  • meta[name="twitter:creator"]
• robots.txt
• sitemap.xml

참고

• TryGhost/gatsby-starter-ghost
• 표준 페이지 설정, link rel=canonical

방문자는 About 화면에서 내 소개를 확인할 수 있다. (태블릿)

• 태블릿 스크린 구간에서 유동 레이아웃 적용

포스트의 섹션 제목에 인라인 코드 블록을 적용할 경우 폰트 사이즈가 작게 보이는 현상

• 인라인 코드 블록이 적용된 제목에 대해서도 정상 폰트 크기로 렌더링하도록 변경

방문자는 목록 화면에서 특정 태그를 클릭하여 해당 태그를 가진 포스트 목록을 검색할 수 있다.

• 목록 화면에서 등록된 태그 목록 확인
• 태그 선택 시 해당 태그를 가진 포스트 목록만 필터링하여 나열
• 태그를 중복 선택할 수 있다.

방문자는 현재 읽고 있는 포스트에서 이전 글 또는 다음 글로 바로 이동할 수 있다.

• previous, next 데이터 쿼리를 통한 페이지네이션 적용

포스트 상세 화면에서 각 목차의 제목이 같을 경우 동시에 active 표시되는 현상

포스트 상세 화면 UI 개편

• 포스트 상세 화면의 상단 헤더 영역의 커버 이미지와 제목 영역을 분리
• 커버 이미지 양 옆에 마진 설정

MDX 문서 내부 링크에 대해 변경된 theme 색상 적용

• mdx.light, mdx.dark에 대해 변경된 theme 색상 적용

방문자는 블로그에 방문했을 때 제일 먼저 포스트 목록을 확인할 수 있다. (태블릿)

• 포스트 목록 화면에 태블릿 스크린 구간에서 유동형 레이아웃 적용

방문자는 About 화면에서 내 소개를 확인할 수 있다. (데스크톱)

• 데스크톱 스크린 구간에서 고정 레이아웃 적용

theme의 primary 색상 변경

• light, dark 모드에서 가독성이 높은 색상으로 primary color를 변경한다.
  • theme의 primary color를 좀 더 밝은 파랑색 계열인 #2979ff로 변경
  • light, dark 모드에서 동일한 primary 색상 적용

방문자는 포스트에 코멘트를 남길 수 있다.

• GitHub 코멘트 기능 추가

Progressive Web App 설정

• display 속성을 standalone으로 업데이트
• 오프라인 환경 지원

MDX에서 보여지는 이미지 설정 추가

• gatsby-remark-images에 showCaptions: true로 설정
• figure와 figcaption이 p의 후손 요소로 위치하지 않도록 변경
• 이미지의 max-width 변경
• 이미지 zoom 설정
• 'src/models'에서 인터페이스 내보내기 방식 변경

다크 모드 변경 시 브라우저 상단 바 색상이 변경되지 않는 현상

• 테마 변경에 따라 theme-color 메타 태그의 content 속성을 동적으로 변경하도록 함

IE11 관련 버그

• HTMLElement.current

• HTMLElement.appendChild

• 커버 이미지 리사이징 문제

gatsbyjs/gatsby#21139

다크 모드에서 화면 새로고침 시 일시적으로 깜빡이는 현상

• 다크 모드에서 화면 새로고침 시 초기에 light 모드로 렌더링된 후 다크 모드로 변경하기 때문에 발생하는 깜빡임 현상 해결

방문자는 포스트 상세 화면에서 더 보기 버튼을 눌러 포스트 목록을 더 불러올 수 있다.

infinite 스크롤로 구현 시 모든 포스트 목록을 불러와야만 하단 footer 영역을 확인할 수 있기 때문에 '더 보기' 형태로 구현.

• 기본적으로 10개의 포스트만 노출해야 한다.
• 더 보기 버튼 클릭 시 10개의 포스트 목록을 더 불러와야 한다.
• 불러올 목록이 없을 시 더 보기 버튼을 노출하지 않아야 한다.
• 더 보기 버튼 클릭 후 포스트 목록을 더 불러오기 전의 마지막 포스트로 포커싱을 이동해야 한다.

`gatsby-plugin-netlify` 플러그인 설정

• Netlify의 '_headers'와 '_redirects'를 자동 생성하기 위한 `gatsby-plugni-netlfiy' 플러그인 설정

Facebook 앱 ID meta 태그 설정

• meta[content="fb:app_id"] 추가

PWA 지원 추가 설정

• apple-mobile-web-app-title
• apple-mobile-web-app-capable
• apple-touch-startup-image: 각 디바이스 사이즈에 맞는 스플래시 이미지 추가
• application-name
• notch 영역의 검은 색 배경 제거
• 앱 아이콘의 검은 색 배경 제거
• 앱 아이콘에 나타나는 테두리 선 제거를 위해 파비콘 변경
• 홈 화면에서 나타나는 앱 이름을 chny.world로 변경

[
  {
    name: 'apple-mobile-web-app-capable',
    content: 'yes',
  },
  {
    name: 'apple-mobile-web-app-status-bar-style',
    content: 'default',
  },
]

참고

• Tinder
• 아이콘들과 브라우저 색상들 | Web Fundamentals
• apple-mobile-web-app-status-bar-style: 'black', 'black-translucent'...

방문자는 블로그에 방문했을 때 제일 먼저 포스트 목록을 확인할 수 있다. (데스크톱)

• 포스트 목록 화면에 데스크톱 스크린 구간에서 고정형 레이아웃 적용

aws Route53 & SSL 설정

• Route53 도메인 구매 및 연결
• Netlify를 통한 SSL 설정

방문자는 내용을 검색하여 포스트를 검색할 수 있다.

• 목록 화면에 검색 필드 추가
• Algolia를 이용한 Full text search 적용
• 검색어 입력에 debouncing 적용
• 매칭된 가정통신문 목록을 나열

theme 스타일 변경

• 변경된 Code syntax highlighting 스타일 적용
• 다크 모드에서 가독성을 높이기 위한 변경된 primary 색상 적용
• 선택된 텍스트 영역에 대해 primary.light 색상 적용

MDX에서 코드 live editing 적용

• react-live를 이용하여 MDX에서 코드 live editing 적용

블로그 포스트의 디렉토리 구조 변경

• 블로그 포스트의 디렉토리 구조를 다음 형식으로 구조화

  posts/
    post-1/
      assets/
        cover.png
        image-1.png
      index.md
    post-2/
      assets/
        cover.png
        image-1.png
      index.md
  

Google Analytics 연동

• GA 대시보드에서 앱 생성
• gatsby.config.js에 ga 플러그인을 이용하여 Tracking ID 추가
  • .env.* 파일을 이용하여 클라이언트 사이드에서 환경 변수를 사용할 수 있도록 설정. git에서 tracking하지 않도록 설정할 것
  • dotenv 설정을 통하여 서버 사이드에서 환경 변수를 사용할 수 있도록 설정
  • Netlify에 환경 변수 값 입력

웹 마스터에 블로그 등록

• 구글
• 네이버
• 다음

`www.chny.world`에 대한 SSL 인증서 설정

방문자는 본문 바로가기 링크를 통해 내비게이션 링크를 건너뛸 수 있다.

• SkipLink를 클릭 시([href="#content"]), 본문(main#content)로 이동할 수 있도록 링크를 제공한다.

방문자는 포스트가 끝나는 마지막 부분에서 글 작성자의 간략한 정보를 확인할 수 있다.

• 포스트 마지막 부분에 글 작성자 정보를 나타내는 컴포넌트를 추가한다.

웹 브라우저로 접속 시 PWA 전환 유도

• Javascript를 사용하여 PWA가 아닌 형태로 접속한 유저에 대하여 앱 설치 프롬프트 노출

참고

• Add to Home Screen | Pete LePage, Web Fundamentals
• Patterns for Promoting PWA Installation (mobile) | PJ Mclachlan, Web Fundamentals

화면 우측 상단의 저장소 링크 제거

• theme 변경 버튼이 추가됨에 따라 모바일 뷰에서 헤더 영역이 좁아지는 문제에 따른 불필요한 저장소 링크 제거

블로그 포스트 화면 이동 시 새로고침이 발생하는 현상

클라이언트 사이드 라우팅 방식으로 블로그 포스트 화면 시에도 새로고침이 발생하여 다크 모드에서 라이트 모드의 잔상이 보이는 등의 현상이 발생함

Netlify 서브도메인으로 접속 시 메인 도메인으로 리다이렉트

• 루트 디렉토리에 _redirects 파일을 생성하고 다음 내용을 추가

  https://chny.netlify.com/* https://chny.world/:splat 301!
  

NOT FOUND 화면 대응

• NOT FOUND 화면 UI 개발

방문자는 RSS 피드를 구독할 수 있다.

• RSS 피드 구독 기능 추가

화면 새로고침 시 스크롤 위치를 기억하지 못하고 초기화되는 현상

• 화면이 새로고침되었을 때 스크롤 위치를 기억하도록 변경

참고

• gatsby-plugin-offline 사용 유무에 따라 새로고침 동작에 차이가 발생
• gatsbyjs/gatsby#12560 (gatsby가 내부적으로 의존하고 있는 scroll-behavior와 연관. gatsby-plugin-offline 플러그인을 사용하지 않는 경우에도 화면 새로고침을 빠르게 재실행할 경우 화면 최상단으로 이동되는 현상 발생)

방문자는 전체 섹션 중 현재 읽고 있는 섹션이 어디인지 확인할 수 있다.

• IntersectionObserver API를 활용한 scrollspy 적용

Netlify CMS 적용

자잘한 수정

• 'src/components/mdx/index.tsx'의 확장자를 '.ts'로 변경
• 'asynchronous-javascript.mdx'에 사용된 커버 이미지 교체
• 'gatsby-config.js'에서 polyfill 플러그인의 indentation 수정
• README 업데이트
• frontmatter에서 createdAt → publishedAt으로 변경
• 모바일 뷰포트 UI 수정
  • 헤더 영역의 제목 폰트 크기를 1.875rem으로 변경
  • 소개 화면에서 부제목 폰트 크기를 1.75rem으로 변경
  • 소개 화면에서 이름 폰트 크기를 1.5rem으로 변경
• post-header.tsx → headline.tsx로 변경

방문자는 블로그의 라이트, 다크 테마를 변경할 수 있다.

• 테마 변경 버튼 UI 추가
• 테마 변경 버튼 클릭 시, light와 dark 테마 toggling

앱 favicon 교체

• 앱 favicon 교체

RSS 피드 화면에서 발생하는 에러 메세지 제거

• SEO 네이버 웹 마스터 수집 실패 시 해결 방안 (1) - RSS 내용에 따라 특수 문자를 제거하여 에러를 해결한다.

블로그 meta 데이터 변경

• SNS 공유 및 브라우저 상단 타이틀을 다음 형식에 따라 보여지도록 변경
  • 홈 화면: CHNY.WORLD
  • 그 외: {제목} | CHNY.WORLD

방문자는 About 화면에서 내 소개를 확인할 수 있다. (모바일)

• 프로필 이미지 추가
• 간단한 소개

포스트 상세 화면 스타일링

• Global
  • secondary 색상 변경
• Post
  • 테이블 요소 스타일링
  • 인용 요소 스타일링