이 포스트가 열리지 않음. (포스트 제목: Webpack + TypeScript + React 세팅하기)

페이지 로드 후 내부 라우팅으로는 접근할 수 있음.

특수문자 인코딩 문제가 있어서 페이지 라우팅을 제대로 못해주는 것 같음.

마크다운에서 텍스트 정보를 추출하여 마크업 정보를 삭제한 요약본 얻어내기. 아래의 용도로 쓰일 예정:

1. Open Graph Protocol의 description 생성
2. 향후 다른 포스트 네비게이션 방식(ex: 태그별, 날짜별 등)에서 포스트 미리보기를 위함
3. 자동 태그 생성 등에 사용

https://favicon.io/favicon-converter/

언어가 nukograph인 codeblock은 그래프 영역으로 간주한다.

언어 명세

nukograph는 YAML 형식으로 작성하며 아래와 같은 필드를 갖는다. optional field의 경우 적혀있는 값이 기본값이다.

expressions: 20x^2 + \sin(1/x) # 표현할 수식(들). 배열로도 가능
width: 100% # optional, 문서 너비 대비 %
minWidth: 250px # optional, 픽셀
height: 100px # 픽셀
xAxis: true # optional, x축 표시 여부. n이 포함된 스칼라 수열이면 n축이 됨.
yAxis: true # optional, y축 표시 여부
tMin: -1 # optional
tMax: 1 # optional
nMin: 0 # optional
nMax: 100 # optional
resolution: 100 # optional, 얼마나 정교하게 그래프를 그릴 것인지
colors: black # optional, expression을 표현할 색상. 만약 Hexa 표현식(ex: #eef)을 사용할 경우 반드시 쌍따옴표로(") 묶을 것
camera: # optional
  x: 0 # optional
  y: 0 # optional
  xRange: 1 # optional, camera.x ± |camera.xRange| 를 렌더링
  yRange: 1 # optional, camera.y ± |camera.yRange| 를 렌더링
control: # optional
  scrollX: true # optional, x축으로 스크롤 가능 여부
  scrollY: true # optional, y축으로 스크롤 가능 여부
  zoomX: true # optinoal, x축으로 확대/축소 가능 여부
  zoomY: true # optinoal, y축으로 확대/축소 가능 여부
decorations: # optional, 강조하고 싶은 좌표들의 리스트
  - x: 0.5
    y: 0.5
    xGuide: true # optional, 해당 좌표에서 x축으로의 수선을 그릴지 여부
    yGuide: true # optional, 해당 좌표에서 y축으로의 수선을 그릴지 여부
    showValue: true # optional, 해당 좌표의 값 노출 여부
    label: # optional, 해당 좌표에 특별히 표시할 텍스트. #이 포함된 경우 반드시 쌍따옴표(")로 묶을 것

expression

nukograph expression은 LaTeX의 일부분과 유사한 문법을 가지며, 다음과 같은 기능들을 지원한다.

• 지정 변수는 x, y, t, 'n'를 지원한다.
• 반복용 변수는 지정 변수를 제외한
• 상수는 e pi를 지원한다.
• 사칙연산 (+, -, *, /)
  • 곱하기는 생략 가능
  • 벡터의 경우 elementwise하게 계산
• 지수연산 (^)
  • 벡터의 경우 elementwise하게 계산
• 나머지연산 (%)
  • 벡터의 경우 elementwise하게 계산
• 괄호 사용 (())
• 벡터 ([])
• 수열합과 곱
  • \sum_{variable}^{limit}{expression}
  • \product_{variable}^{limit}{expression}
  • 가장 루트에 있는 수열합/곱은 반드시 x, y, t, n에 관한 함수여야 하며 다른 반복용 변수가 포함돼 있으면 안된다.
• 함수
  • 문법은 name(arg1, arg2, ...)로 괄호가 반드시 필요
  • 스칼라 함수
    • 인자에 벡터가 들어갈 경우 elementwise하게 계산
    • 인자 1개: sin cos tan csc sec cot sinh cosh tanh asin acos atan log ln lg sqrt floor ceil round
    • 인자 2개: min max atan2
  • 벡터 함수
    • 인자 1개: length
    • 인자 2개: dot cross
      • 이때 cross의 인자가 2차원이면, 각 벡터의 세 번째 좌표를 0으로 append하고, 결과 벡터의 세 번째 값을 반환
      • 3차원이면, 평범하게 3차원을 반환

그래프 모드

Explicit 1D Function

• 변수로 x만 사용한 벡터가 아닌 표현식

Explicit 2D Density Function

• 변수로 x와 y만 사용한 벡터가 아닌 표현식

Implicit 1D Function

• 변수로 x와 y만 사용한 벡터가 아닌 등식

Polar Coordinate

• 변수가 t만 사용된 벡터가 아닌 표현식

Parametric Curve

• 변수가 t만 사용된 결과가 벡터인 수식
• 각각 x와 y를 표현
• 나머지 원소는 무시

Sequence

• 변수가 n만 사용된 스칼라 또는 벡터 수식

유입 사용자는 관계가 없으나, 사이트를 계속 돌아다니길 원하는 사용자는 매번 스크롤을 내려야 하므로 대단히 불편함.

상단에서 메뉴 보기를 누르면, 하단에 있는 메뉴가 위에도 떴으면 좋겠음.

• publish 브랜치 신설
  • Vercel은 publish 브랜치를 바라보도록 변경
• main은 에러 페이지 및 메인 페이지만 갖고, 나머지 포스트는 존재하지 않음
  • 그럴 일은 없겠지만, 다른 사람이 포크해 갈 때 내용물이 복제되지 않기 위함

문제점

• #41 을 수행하려면 두 가지 선택지가 있다.
  • Next.js v12.2.0에 추가된 Middleware API를 사용한다.
  • Custom Server를 띄운다
    • 그러나 Vercel에 배포할 경우 Custom Server를 지원하지 않는다
    • Custom Server를 직접 띄우는 것은 너무 비용이 크다.
• Next.js v12 버전으로 올라오면서 많은 것들이 개선되었고, 향후 기술부채를 줄이기 위해서 버전업은 해야 한다.
• Edge Runtime이 추가되면서 기존 Node.js 기반 코드와 호환이 더이상 안된다.
  • Web API에 근접한 것들로 전부 교체해야 함
  • Middleware를 사용하려면 Edge Runtime에서 돌려야 함

개선 계획

• Next.js v12.2.0 및 React v18 이상으로 업그레이드
• Node.js 기반 API 걷어내고 Edge Runtime 기반으로 교체

Posts API 개발

• #7, #10 등을 위해서는 API가 필요하기는 함
• 거의 대부분을 SSG에 의존하겠지만, Next.js의 행보를 보건데 API 완전 없이 현재 스타일로 개발하는 것은 무리가 있어보인다.
• #40 때문에 어차피 BFF를 하나 만들어야 한다.
• API를 재설계하도록 한다
  • 마크다운은 정적 파일 서빙으로 제공한다.
  • 마크다운 원본이 외부로 유출된다 하더라도 아무 문제가 없다
  • SSG 과정에서 이 API를 fetch하여 그 결과물을 사용하도록 변경한다

문제점

• Showdown Extension 작성 가이드 에 따르면, $는 ¨D로 escape됨
  • #16 작업 당시 이를 몰라서, showdown 처리 전에 $$ 블록만 따로 전처리했었는데 이제 그럴 필요가 없음
• #19 에서 작업한 것이 문서별로 맥락이 격리되지 않는 문제가 있음
  • 예를 들어 a.md 파일에서 foo 라는 heading을 사용 후, b.md 파일에서 foo 라는 heading을 또 사용한다고 가정해보자
  • SSG 페이즈에서는 전역변수 Counter에 중복을 카운트하는데, 파일이 달라도 같은 객체에서 숫자를 세는 것이 문제가 됨
  • 동작 자체는 큰 문제가 없으나, 만약 c.md 파일에서 foo라는 heading을 사용하고, 우연히 b보다 c가 먼저 렌더링 될 경우, 기존 링크가 다 깨져버림

개선 방향

• 파일별로 격리된 Parsing Context를 만들도록, Showdown을 한 번 더 래핑하도록 함

passHref가 참인 경우, Next.js Link가 기계적으로 자식에게 href를 넘겨주기 때문에 마크업 구조를 바꿔야 함.

요구사항

• 새로고침 시 스크롤 위치가 고정되도록 할 것
• 단, 주소에 해시가 있는 경우 해당 위치로 이동
• 게시글 제목을 클릭하면 해시가 삭제된 형태로 최상단 스크롤

참고

• https://nextjs.org/docs/migrating/from-react-router#scroll-restoration

현재는 루트 주소에서 참조를 하고 있는데, 이렇게 하면 특수 페이지로 디렉션을 못함.
따라서 /posts/:path로 변경할 것.

• Open Graph Support
• lang 속성 추가
• Link 컴포넌트에 passHref 속성 추가하여 SEO 개선 (참고: https://nextjs.org/docs/api-reference/next/link)

• 게시글의 Tag를 누르면, 해당 태그가 사용된 게시물만 필터링하여 목록으로 보여줌
• 가능하다면 Tag 검색 기능도 있었으면 좋겠지만, 이건 천천히 개선

• 댓글 달기
  • 대댓글 가능
• 댓글 달았을 때 메일로 알림 보내주기

서버가 별도로 필요, 댓글 부분은 SSR 제외

#32 에서 showdown-highlight 적용 영향으로 보임. 익스텐션에서 자동으로 highlightAuto를 설정하고 있어, 바이패스가 필요함.

Bloggify/showdown-highlight#41

여기에 개선 요청을 해두었고, 논의만 끝나면 바로 PR 작성 가능할 것으로 보임.

대상

• # 헤더들
• 네비게이터들

현재는 게시글 제목을 인코딩 한 것으로 URL을 사용하고 있다. 그런데 이 방식의 문제는 조금만 제목이 길어져도 URL이 극도로 지저분해진다는 것이다.

예시: https://nuko-library-v3.vercel.app/posts/dev/typescript/%25ED%2583%2580%25EC%259E%2585%25EC%25B6%2594%25EB%25A1%25A0/%25ED%2583%2580%25EC%259E%2585%25EC%258A%25A4%25ED%2581%25AC%25EB%25A6%25BD%25ED%258A%25B8%2520%25ED%2583%2580%25EC%259E%2585%2520%25EC%25B6%2594%25EB%25A1%25A0%2520%25EC%259D%25B4%25ED%2595%25B4%25ED%2595%2598%25EA%25B8%25B0%2520(1)

URL 단축은 다음과 같은 성질을 가져야 한다.

• 배포를 여러 번 하더라도, 동일한 경로의 글은 동일한 단축 URL을 갖는다.

기존 호환성을 보장하기 위해, 단축 URL이 아닌 접근에 대해서도 단축 URL로 리다이렉션해야 한다.

개선점

• 블록 소스코드인 경우, 소스코드를 복사할 수 있는 버튼이 우측 상단에 나타나면 좋겠음.
• 마우스 호버 시에만 나타남
• 모바일에서는 상시 노출

예시

https://developer.mozilla.org/ko/docs/Web/API/Node/appendChild

참고

• https://clipboardjs.com/

현재 상황

• h 요소의 전체 영역을 클릭 영역으로 인식
• 문자가 없는 영역에도 width 때문에 클릭 됨
• 텍스트만 복사하고 싶은 사람들을 화나게 만들 수 있음

개선 사항

• h 요소 왼쪽에 클릭 전용 요소 § 추가
• 평소에는 흐리게 보이다가, 마우스 호버 시 진하게 변함
• 기존 h 요소 클릭 시 동작을 그대로 이전

우수사례

prettier 공식 사이트

기타

• #17 이랑 연관
• 커스텀 트랜스포머를 달아야 할 것 같다.

개선점

• 블록 소스코드의 형식을 표시할 수 있었으면 좋겠음
• 형식이 정의되지 않은 경우에는 기존과 동일하게 표시

현재 상황

• main 업데이트 시, publish로 수동으로 PR 해야 함

개선 사항

• main 업데이트 시, 자동으로 publish로 브랜치 업데이트

기타

• 관련 이슈: #20
• Github Action 필요

Welcome 페이지에서 Welcome 포스트에 해당하는 링커 버튼이 하이라이트되지 않음.

• 좁은 화면에서는 스크롤이 내려가면 우측 상단에 위로가기 버튼을 노출.
  • 스크롤 할 때 엄지가 아래쪽에 있기 때문
• 넓은 화면에서는 #38 이 본 기능을 대체하기 때문에 노출하지 않음.

게시글 최상단 및 최하단에 공유 기능 추가

Dependency: #7

마크다운 구조를 분석하여, 트리를 자동으로 만들어서 제공.

• 넓은 화면에서는 오른쪽 화면 중앙에 노출
• 좁은 화면에서는 헤더 바로 아래에 노출

LaTeX 문법을 지원하여 렌더링 할 수 있도록 함

보기가 너무 답답함

게시물을 검색할 수 있는 페이지를 개발한다.

검색은 다음과 같은 알고리즘으로 찾는다.

1. 검색어에서 모든 특수기호를 제거
2. 공백으로 문자열 분리
3. 분리된 검색어를 공백과 특수기호를 제거한 게시글 제목으로 비교
   • 각각의 검색어가 온전히 매칭된 경우 2점 (ex: 게시글 to 게시글을활용한)
   • 각각의 검색어의 50% 이상이 매칭된 경우 1점 (ex: 게시글 to 공지게시방법)
4. 분리된 검색어를 공백과 특수기호를 제거한 게시글 태그와 비교, 점수 산정은 3번과 동일
5. 3번의 결과물을 먼저 보여주고 4번의 결과물을 뒤에 보여줌

검색어의 길이는 2 이상이어야 한다.

검색 결과는 게시글 제목과 태그 목록으로 보여준다.

프로덕션 빌드 최적화가 이루어지지 않는 것으로 보임.

각종 옵션 점검 및 배포 설정 확인할 것