8월 2주차 기록

August 11, 2024 • ☕️ 5 min read

weekly

배워가기

next.js app router vs page router

App Router

Next.js 13에서 등장
RSC(React Server Component)를 기반으로 구축되어 있다.
- 즉 서버 중심의 라우팅
전체 애플리케이션에 대한 전반적인 라우팅 및 탐색을 처리한다. URL을 기반으로 올바른 페이지를 렌더링하고 페이지간 전환을 관리한다.
_app.js 파일에 구현되어 전체 애플리케이션을 래핑한다.
app/ 디렉토리 내에 routes를 직접 정의해야 한다. (자유도가 높다)
getServerSideProps, getStaticProps, getInitialProps와 같은 메서드는 더이상 사용하지 않는 대신, RSC 기반으로 일반적인 방법으로 서버 데이터를 가져온다.
- 즉 빌드 시 데이터를 가져온다
- 클라이언트 데이터 페칭도 여전히 가능하다.

Pages Router

애플리케이션의 개별 페이지 내에 라우팅을 처리한다. 이를 통해 동적 경로를 만들고, 특정 콘텐츠를 렌더링하기 위한 경로 paramater에 접근할 수 있다.
각 개별 페이지 구성요소에 구현된다.

Ref

pnpm catalogs

pnpm v9부터 지원

pnpm monorepo에서 특정 패키지의 단일 버전만 사용할 때 사용한다.

Copy

# pnpm-workspace.yaml 
packages:
    - packages/*

# Define a catalog of version ranges.
catalog:
    react: ^18.3.1
    redux: ^5.0.1

Copy


// packages/example-app/package.json

{
    "name": "@example/app",
    "dependencies": {
    "react": "catalog:",
    "redux": "catalog:"
    }
}

Ref https://pnpm.io/catalogs

PNA CORS

비인증된 공인(public) 웹사이트에서, 사이트를 방문한 사용자의 와 같은사설 네트워크망(localhost(127.0.0.1) or 192.168.0.* 아이피) 엔드포인트에 엑세스하려 할때, 브라우저가 요청을 제한하는 새로운 보안 향상 WSC 사양을 말한다.
PNA 동작 메커니즘은 CORS(Cross-Origin Resource Sharing) 정책을 확장한 개념으로 적용된다. 그래서 사이트에서 사설 네트워크 서버의 허가를 우선 예비 요청(Preflight) 하고 브라우저가 요청을 승인한 경우에만, 공공 웹사이트에서 사설 네트워크 서버의 리소스에 엑세스가 가능하고 그렇지 않으면 CORS 에러가 뜨게 된다.
주로 공인 IP에서 사설/로컬 IP로의 낮은 수준으로 가는 요청을 할때 발생한다.
https가 적용되지 않은 사이트에서(SSL 인증서 없음) 발생할 수 있으며, 서버에서 Access-Control-Allow-Private-Network 헤더 설정을 통해 해결할 수 있다.

Ref

tar

Tape Archive 의 약자로, 여러 파일 및 디렉토리를 단일 아카이브 파일로 묶은 것

무손실 무압축 (압축 X) 방식을 사용하여 메타데이터 보존이 가능하다.

메타데이터 파일 및 디렉토리의 권한, 소유자, 그룹 등의 정보

tar 파일은 gzip으로 압축할 수 있으며, 압축 시 파일 형식은 tgz가 된다.

tar는 거의 모든 운영체제에서 사용 가능하며, 다른 운영 체제 간에 백업 및 파일을 전송할 때 유용하다.

‘타르볼’이라고도 불림

pnpm을 사용하는 레포에서, 패키지 배포 없이 로컬에서 빌드해서 바로 테스트하는 방법

pnpm build && pnpm pack >> pnpm pack을 하면 타르볼을 생성해준다.

YAML Scalars

YAML Scalar는 단순한 데이터 타입으로,

숫자 형식 (integer, float, exponential, etc.)
문자열
Boolean
Timestamp

를 표현할 때 사용된다.

YAML의 Scalar는 Block Scalar와 Flow Scalar로 나뉜다.

Block Scalar는 literal, folded 두 개의 scalar 스타일을 지원한다. 각각 |, >를 사용하여 표기한다.

[literal block]

Copy

summary: regular scalar
description: |
  This is my sentence with the literal scalar.
  And another sentence.
operationId: jasmint

[folded block]

Copy

summary: regular scalar
description: >
  This is my sentence with the folded scalar.
  And another sentence starts without a preceding line break.

  And a sentence starts with a preceding line break, because there are two consecutive line breaks preceding this line.
operationId: jasmint

Flow Scalar는 다음과 같이 사용한다. 인덴트를 통해서만 줄바꿈을 표기한다.

Copy

Summary: regular scalar
Description: This is my sentence with a flow scalar.
  And this is my next sentence.
operationId: scaly

Ref https://redocly.com/docs/yaml/blocks-and-flows

이것저것 모음집

PEFT - Parameter-Efficient Fine-Tuning of Billion-Scale Models on Low-Resource Hardware; 적은 수의 파라미터를 학습하는것만으로 모델 전체를 파인튜닝하는 것과 유사한 효과를 누릴 수 있도록 해준다. (Ref)