4월 2주차 기록

안녕, 호주 👋

배워가기

Nest.js @ApiTags

Nest.js에서 Swagger를 사용할 때 @ApiTags(NAME) 데코레이터를 사용하여 Swagger에서 태그에 따른 API를 보여줄 수 있다.

@ApiTags 를 사용하지 않으면 모두 default 하위로 들어간다.

git reset HEAD — .npmrc

git reset HEAD -- .npmrc shell command는 어떻게 해석할까?

• -- - git option과 분리해주는 키워드 (.npmrc는 command option이 아니기 때문)
• .npmrc를 state에서 unstaged 상태로 변경한다.

git add :/

git add :/ shell command는 어떻게 해석할까?

git add의 인자로는 pathSpec이 와야 한다.

pathSpec 파일과 폴더들의 세트를 특정지을 때 사용하는 패턴

예제에서 마지막 문자 :/는 루트를 의미한다.

pathSpec의 또다른 예시들은 다음과 같다.

• 파일 또는 디렉토리 이름: myfile.txt, mydir/
• 와일드카드 패턴: _.txt, \*\*/myfile._
• 정규식 패턴: myfile.txt
• 위 목록의 조합: mydir/\*.txt
• :/ 또는 :(top) - pathspec은 워킹트리의 루트를 가리킨다.

Function: length

자바스크립트에서 function object의 length는 default value가 지정되지 않은 파라미터 직전까지의 파라미터 갯수를 의미한다.

(function foo00() {}
  .length(
    // 0
    function foo01(x) {}
  )
  .length(
    // 1
    function foo02(x, y) {}
  )
  .length(
    // 2
    function foo02(x, y = 1) {}
  )
  .length(
    // 1
    function foo02(x, y = 1, c = 2) {}
  )
  .length(
    // 1
    function foo02(x, y = 1, c) {}
  ).length); // 1

Ref https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/length

Next.js SSR에서 caching을 커스텀하기

Next.js SSR에서 caching을 커스텀할 수 있다

export async function getServerSideProps({ req, res }) {
  res.setHeader(
    "Cache-Control",
    "public, s-maxage=10, stale-while-revalidate=59"
  );

  return {
    props: {},
  };
}

Ref https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props#caching-with-server-side-rendering-ssr

logout 요청을 GET이 아닌 POST로 보내는 이유

로그아웃 요청을 GET으로 노출하고 링크를 표시하면 이러한 프로세스가 페이지에서 링크를 미리 가져오라고 시도하는 동안 실수로 사용자를 로그아웃시킬 수도 있다

또한 로그아웃 시 내부적인 상태가 변하므로 POST를 사용한다

util vs helper

• util - 앱 전체에서 사용할 수 있는 코드 조각들. 이 작은 util 함수들을 합쳐서 큰 동작을 만들 수도 있다. 상태가 없어야 하고(stateless), 인스턴스화하지 않아도 되는 정적 함수여야 한다. (ex. lodash의 함수들)
• helper - 코드 설계와 관련된 코드 조각들. 컴포넌트의 bootstrap이나 설계 공학(?) 측면에서 사용한다. 상태를 가지고 있거나(stateful) 인스턴스화하여 사용할 수 있다.

Ref https://github.com/erikras/react-redux-universal-hot-example/issues/808

툴팁을 만드는 방법

1. position: absolute로 만들 수 있는 방법이 있다.

2. position: fixed로 portal로 만들 수 있는 방법이 있다. 1번은 쌓임 맥락에 갇힐 수 있다.

2번은 스크롤을 신경써야한다. 스크롤 될 때 툴팁의 위치가 달라져야한다.

이벤트 버스

이벤트 버스는 애플리케이션의 서로 다른 컴포넌트 간에 비동기식 메세지를 전달하는 데 사용되는 매커니즘이다. 이는 컴포넌트 간의 결합도를 낮추는 데 도움이 된다.

• 이벤트 버스와 Pub-Sub 패턴의 차이
  • 이벤트 버스는 특정한 구현체를 가리킨다.
  • Pub-Sub 패턴은 이벤트 전달 방식에 대한 개념적인 디자인 패턴이다.
  • 따라서 이벤트 버스는 Pub-Sub 패턴을 기반으로 구현할 수 있으며, 다른 메시징 패턴을 기반으로 구현할 수도 있다.

이것저것

• export RELEASE=XX - shell command에서 environment variable을 설정한다. printenv RELEASE로 출력할 수 있다.
• Jenkins의 Git Publisher plugin을 사용하여 빌드 이후 동작을 정의할 수 있다 (예: 커밋이나 태그 추가하기)
• HTML input 태그의 checked는 default value로, 변하지 않는다! 즉 type=”radio”인 input에서 선택 항목을 변경해도 checked 값은 옮겨가지 않는다. (Ref)
• 르블랑의 법칙 (Leblanc’s Law) - “Later equals never”, 나중은 결코 오지 않는다. 한번 작성한 쓰레기 코드를 나중에 수정하는 일은 결코 없다.

기타공유

Next 13.3 - Static Export for App Router

Next.js 13.3부터는 app/ 라우터로도 정적 파일 내보내기를 지원한다.

next build를 실행할 때, Next.js는 루트별로 HTML 파일을 생성한다. SPA를 개별 HTML 파일로 쪼개서, Next.js는 클라이언트 사이드에서 불필요한 자바스크립트를 로딩하지 않을 수 있다. 이를 통해 번들 사이즈를 줄이고 페이지 로딩 속도가 빨라진다.

정적 파일 내보내기는 app 라우터의 새로운 기능들 - 정적 라우팅 핸들러, Open Graph 이미지, 리액트 서버 컴포넌트 - 과 함께 동작한다:

이전에 pages/ 디렉토리에서 정적 파일 내보내기를 사용하기 위해서는 next export를 실행해야 했다. 하지만 next.config.js 옵션을 작성하고 output: 'export'가 명시되어 있다면 next.js는 out 디렉토리를 만들었다. 이제는 같은 옵션을 app router와 pages 디렉토리에도 적용할 수 있다. 즉 next export가 더 이상 필요하지 않게 되었다.

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: "export",
};

module.exports = nextConfig;

Ref https://nextjs.org/blog/next-13-3#static-export-for-app-router

Next.js OpenAI Doc Search Starter

GPT-3을 사용한 문서 검색 예시로, 여러 가지 문서 시스템에 편리하게 적용할 수 있을 듯

Ref https://vercel.com/templates/next.js/nextjs-openai-doc-search-starter

마무리

시드니로 돌아가 마지막 쇼핑을 과하게(…) 즐기고 🛍️ 한국으로 돌아왔다.

10시간 비행 너무 힘들었다 🫠 그래도 잠도 자고 넷플릭스로 영화도 3편이나 때렸다.

오랜만에 보는 단짝도, 아늑한 내 방도 반가워

그나저나 따뜻한 곳에 오래 있다와서 그런가 서울 너무 춥다 🥶