12월 2주차 기록

배워가기

vite dev cli options

Ref https://ko.vite.dev/guide/cli

vite의 환경변수와 모드

vite는 import.meta.env 객체를 이용해 환경 변수에 접근할 수 있도록 하고 있으며, 이는 빌드 시 정적으로 대체됩니다. 기본적으로 아래와 같은 환경 변수를 제공한다.

• import.meta.env.MODE: 현재 앱이 동작하고 있는 모드

• import.meta.env.BASE_URL: 앱이 제공되는 베이스 URL이며, 이 값은 base 설정에 의해 결정된다.

• import.meta.env.PROD: 앱이 프로덕션에서 실행 중인지 여부(개발 서버 실행 혹은 프로덕션 빌드 시 NODE_ENV='production'로 설정)

• import.meta.env.DEV: 앱이 개발 환경에서 실행 중인지 여부이며, 항상 import.meta.env.PROD와 반대되는 값을 가진다.

• import.meta.env.SSR: 앱이 서버에서 실행 중인지 여부

Ref https://ko.vite.dev/guide/env-and-mode

react-testing-library act vs waitFor

• act - 동기 실행을 보장

  • 목적: React 컴포넌트에서 상태나 DOM이 업데이트될 때, 모든 업데이트가 완료되었음을 보장하기 위해 사용된다.
  • 사용 시점:
    • 테스트 중 상태 업데이트나 DOM 변화가 있을 때.
    • 주로 이벤트 핸들러를 호출하거나 직접적으로 상태를 변경하는 경우.

• waitFor - 비동기 실행 처리

  • 목적: 비동기 작업이 완료될 때까지 기다린다.
  • 사용 시점:
    • 비동기 작업 (e.g., API 호출, setTimeout, 애니메이션 등)이 완료되기를 기다릴 때.
    • 상태 변경이 비동기적으로 이루어지는 경우.

Ref https://github.com/onmyway133/blog/issues/971

Content Security Policy (CSP)

특정 유형의 보안 위협을 예방하거나 최소화하는 데 도움이 되는 기능이다. 웹사이트에서 브라우저로 이어지는 일련의 지침으로 구성되어 있으며, 이 지침은 웹사이트를 구성하는 코드가 허용하는 작업에 제한을 두도록 브라우저에 지시합니다.

다음과 같이 작성할 수 있다.

Content-Security-Policy: default-src 'self'; img-src 'self' example.com

Ref https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

module scss에서 & 의미

간단한 nesting

다음 코드는

.parent {
  .child {}
}

다음과 같다.

.parent {
  & .child {}
}

두 방식 모두 다음과 같이 컴파일된다.

.parent .child {}

pseudo class로 사용하기

다음 코드는

.button {
  &:visited { }
  &:hover { }
  &:active { }
}

다음과 같다.

.button:visited { }
.button:hover { }
.button:active { }

&을 >, +, ~와 함께 쓰기

다음 코드는

.button {
  & > span { }
  & + span { }
  & ~ span { }
}

다음과 같다.

.button {
  > span { }
  + span { }
  ~ span { }
}

맥락에 따라 선택하기

다음 코드는

.button {
  body.page-about & { }
}

다음과 같다.

body.page-about .button {}

page-about 요소의 자식에 있는 button만 선택한다.

변형시키기

다음 코드는

.btn {
  &-primary {}
  &-secondary {}
}

다음과 같이 컴파일된다.

.btn-primary {}
.btn-secondary {}

Ref

• https://css-tricks.com/the-sass-ampersand/#aa-qualifying-based-on-context
• https://sass-lang.com/documentation/style-rules/parent-selector/#in-sassscript

이것저것 모음집

• react-hook-form의 setValue - useFormContext에서 setValue를 두 번 호출했을 때, 두 번째의 호출만 적용될 가능성이 있다. setValue는 비동기로 작동하며, 같은 필드에 대해 두 번 호출하면 이전 호출이 덮어쓰기 당할 수 있다.

• httpOnly 쿠키 - 자바스크립트를 통해 쿠키에 접근할 수 없게 되어, 악성 스크립트를 통해 쿠키 값에 접근하는 것을 막아준다.

• CSS에서 dvh - ios에서 모바일 주소 표시줄 영역 가려지지 않게 height를 설정하는 단위 cf) svh, lvh (Ref)

• 모든 git remote의 stale 참조 제거하기

  Copy

  git remote | xargs -n 1 git remote prune

기타공유

🐣

마무리

모오든 일정들이 겹쳐 무진장 바빴던 한 주

잠도 제대로 못 자고

아니 하루를 정신없이 보내고 머리 붙이면 핸드폰 볼 힘도 없이 바로 잠드는

그치만 또 청춘이라 포장하며 활기찬 연말 보내고 마는

재밌는 나!