SvelteKit load 정리[1] 타래 🧵

[1] client-side navigation 기준

1️⃣ server load 함수들은 병렬적으로 실행된다. 그리고 그 반환값이 합쳐져 하나의 HTTP 응답으로 돌아온다.

2️⃣ +page.ts, +layout.ts에서는 sibling server load 함수의 반환값을 data 속성을 통해 활용할 수 있다.

(이어서)

3️⃣ +page.svelte, +layout.svelte 컴포넌트에선 silbling, parent load 함수들의 반환값을 **모두** 활용할 수 있다.

4️⃣ await parent()는 load 함수에서 상위 load 함수들의 반환값이 필요할 때 활용한다. 병렬 실행을 막고 waterfall을 야기하므로 주의해서 사용해야 한다.

(이어서)

5️⃣ server load 함수는 반환값의 형태가 제한된다. 네트워크를 통해 전송돼야 하므로 devalue로 serialize 돼야하기 때문이다. JSON과 달리 RegExp, Date, Map 등을 반환할 수 있지만, Svelte 컴포넌트 등은 불가하다.

(이어서)

https://github.com/rich-harris/devalue

6⃣ load 함수 내에선 제공된 fetch를 활용해야 한다. SSR에 필수적일뿐더러, 내부 경로로 요청을 보낼 때 다음 이점이 있다.

(편의) 상대 경로를 사용 가능
(성능) HTTP 요청하지 않음

7️⃣ server load 함수는 서버에서 실행되므로 - HTTP 요청이 이뤄짐 - 쿠키를 get, set 할 수 있다.

(이어서)

8️⃣ server와 universal load 함수에서의 parent()는 **각각** 부모 server와 universal layout load 함수의 반환값을 불러온다. 애초에 서버에서 실행되는 load 함수는 서버에서 실행되는 load 함수들만 기다릴 수 있으며, 단일 페이지에는 load 함수 쌍만 여러 개 가질 수 있다.

(이어서)

9️⃣ load 함수에서는 @sveltejs/kit에서 제공하는 redirect, error를 throw 해야 한다. 후자는 가장 가까운 +error.svelte를 렌더링 한다.

9️⃣ load 함수는 함수가 활용한 의존성[1]이 바뀌었을 때만 재실행된다. 수동으로 invalidate 할 수도 있다. [1] url, params, route 등 https://kit.svelte.dev/docs/load#invalidation

SvelteKit - Loading data 문서 요약

HTTP 요청의 Origin 헤더 값을 살펴보고, 추가적으로 인증 관련 Cookie에 SameSite=strict를 설정해 CSRF를 방지할 수 있다.

물론 &lt;form&gt; 제출에 Origin을 포함하지 않거나 SameSite 속성을 지원하지 않는 클라이언트도 있으므로 별도로 대비해야 한다.

https://github.com/sveltejs/kit/issues/72#issuecomment-927143506

보안에 취약할 수 있는 cross-site form submit을 프레임워크 차원에서 막는 경우도 있다. SvelteKit은 기본적으로 다른 origin에서 제출된 양식을 거부한다. POST만 막는 이유는 &lt;form&gt;이 get, post, dialog 메서드만 지원하기 때문 https://github.com/sveltejs/kit/pull/6510

CSRF 막기: Origin 헤더, SameSite 쿠키

CORS는 CSRF 문제를 해결해 주지 않는다. CORS가 적용되지 않는 simple requests가 있기 때문이다. POST action으로 제출된 양식(form)이 대표적이다.

CORS가 설정돼있어도 cross-origin에서 submit 할 수 있으며, 이 과정에서 관련 쿠키가 모두 전송된다. HTTP Only와 Secure로 설정된 것도 (이어서)

서버에서 쿠키를 설정할 때 SameSite도 설정하자. CSRF를 막기 위해 나온 속성으로, Strict로 설정할 경우 다른 사이트에서 해당 쿠키가 포함된 HTTP 요청을 아예 보낼 수 없다. (물론 사용자의 클라이언트가 지원해야 되며, 지원 비율은 93.7%) https://caniuse.com/same-site-cookie-attribute

CSRF와 Cookie의 SameSite 속성

날 잡고 정리한 VS Code settings.json 파일

- 저장할 때 format, import 정렬
- Prettier로 포맷 (일부 설정 변경)
- Tab으로 들여쓰기 (2 공백 너비)
- LF 줄바꿈, 파일 끝에 빈 줄 추가
- Sticky Scroll 활성화
- 터미널 세션 비활성화

대체 텍스트 또는 Gist 참고 https://gist.github.com/hyunbinseo/7704f9538767c694800d0a46315b2254 https://twitter.com/hyunbinseo97/status/1613748384980144128 

Workspace 설정 파일[1]은 다음과 같이 작성해 커밋했다. User Settings를 최대한 존중[2]하면서 같은 방식[3]으로 코드가 포맷되도록 구성했다.

[1] .vscode/settings.json
[2] editor.tabSize 등
[3] 동일 설정 prettier 사용 

VS Code 설정값 (User, Workspace)

VS Code에서 'Configure Default Formatter' 대화상자가 표시되면 주의해야 한다. Workspace가 아닌 User Settings 파일에 추가되어 동기화되기 때문이다. (이어서) 

VS Code에선 1️⃣ 내장된 language-features 또는 2️⃣ Prettier를 사용해 파일을 포맷할 수 있다. User Settings에 defaultFormatter가 지정돼있으면? 매번 묻지 않고, 설정된 도구만을 사용해 파일을 다듬는다. 의도하지 않은 formatter가 사용될 수 있는 것이다. (이어서) 

그래서 전역 defaultFormatter를 prettier-vscode로 설정했다. 그리고 개별 워크스페이스에서 override하는 방식을 채택했다. 반대로 하고 싶었지만, VS Code의 language-features는 언어별로 이름이 달라 어쩔 수 없다. Prettier의 의견 표출이 너무 강할 때 opt-out하는 수밖에 (끝) 

VS Code Formatter 설정하기

TL;DR: 라이브러리의 의존성에 보안 문제가 생겼다고 해서 라이브러리를 업데이트해야 하는 건 아니다. package-lock.json 파일만 수정해도 되는 경우가 있다.

eslint-plugin-import
- tsconfig-paths
  - json5: ^1.0.1

json5 1.0.1에 보안 문제가 발생한 상황 (이어서)

https://github.com/import-js/eslint-plugin-import/issues/2649#issuecomment-1371179065

npm install 할 때 tsconfig-paths의 의존성으로 json5 v1.0.1을 설치한 사용자들에게 dependabot 보안 알림이 발송되었다. 캐럿 버전(^1.0.1)에 따라 v1.0.2를 설치해도 문제가 되지 않는다. 따라서 lock 파일의 1.0.1 ➡️ 1.0.2만 수정하면 보안 문제가 해결된다. (이어서) 

아래 과정을 거치면 dependencies의 dependencies가 최신 버전으로 설치되는 것을 확인할 수 있다. 기존에 설치된 모듈이 있다면 이를 바탕으로 lock 파일을 재생성하므로 2️⃣번 과정이 중요하다.

1️⃣ package-lock.json 파일 삭제
2️⃣ node_modules 폴더 삭제 ⭐️
3️⃣ npm install (lock 파일 재생성)

의존성 보안 문제와 패키지 업그레이드

Supabase의 .single()은 반환값이 1개가 아닐 경우 error를 반환한다. .limit(1)을 활용할 수 있다.

const { data, error } = await supabase
  .from('countries')
  .eq('id', 326)
  .single();

if (error) throw error;
data; // PK 값이 326인 국가가 반드시 있음

https://supabase.com/docs/reference/javascript/single

특정한 값을 조회할 때는 .maybeSingle()을 활용하면 된다. 반환된 데이터가 배열 형태가 아닌 게 포인트

const { data, error } = await supabase
  .from('countries')
  .eq('id', 326)
  .maybeSingle();

if (error) throw error(500);
data; // { } 또는 null 형태

https://supabase.com/docs/reference/javascript/maybesingle

PK 값으로 조회할 때 maybeSingle 활용하기 - Supabase

Google Workspace 체험판은 Business Standard (월 $12) 요금제로 제공됩니다. Starter (월 $6) 요금제로 변경하려면 다음 메뉴에 접속합니다. (이어서)

관리 콘솔 - 결제 - 더 많은 서비스 사용하기 - (카테고리) Google Workspace - Business Starter 체험판 시작

https://admin.google.com/ac/billing/catalog 

체험 기간이 남아있다면 새로운 Google Workspace 요금제를 무료로 사용해 볼 수 있습니다. 이 페이지에서 '탄력 요금제'를 선택해 체험 기간이 종료된 뒤 자동으로 결제되도록 하는 것을 추천드립니다. '연간 요금제'와 혜택이 동일합니다. (매월 결제, 최초 20명 ⋅ 12개월간 할인 제공) 

Google Workspace 요금제 변경 결과
- Business Standard ➡️ Starter 변경
- 2023-01-07부터 결제 (무료 체험 유지)
- 최초 20명 ⋅ 12개월간만 10% 할인 제공 

Google Workspace 요금제 변경

고용보험, 국민연금 비용을 지원해 주는 '두루누리' 사업을 정리하는 타래 🧵 

두루누리 지원은 '신규 가입 근로자'에게만 제공된다. 따라서 고용보험과 국민연금[1]을 6개월 이전에 상실했어야 한다.

[1] 사업장 가입자 기준. 개인 또는 지역 가입자는 해당 없음 

개별 근로자에게 36개월까지 제공된다. 과거에 지원받은 이력이 있어도 된다. 12개월 지원받은 적이 있다면, 앞으로 24개월을 더 지원받을 수 있다. 현시점에서 '신규 가입자'를 비롯한 조건만 만족하면 된다. 

두루누리 신규 가입자, 36개월 정리

윈도 텔레그램 앱 안에서 업데이트했는데, Chocolatey에서는 여전히 구 버전을 사용하는 것으로 표시되네 (4.5.0 ➡️ 4.5.1) 

프로그램 내에서 업데이트 기능을 제공할 경우, Chocolatey의 Pin 기능을 사용해 업그레이드를 제한할 수 있다. 텔레그램, 구글 드라이브 등에서 유용하다. https://docs.chocolatey.org/en-us/choco/commands/pin 