ziglog

Search by

Home
2월 4주차 기록

2월 4주차 기록

February 24, 2024 • ☕️☕️ 10 min read

weekly

배워가기

Test Mocking 항상 나쁠까?

테스트에서 mocking은 독립적인 테스트를 위해 개발자가 값을 임의로 설정하는 것을 의미하며, 테스트에서 필수 불가결한 요소중 하나다.

테스트에서 mocking은 다음과 같은 장점을 갖는다.

테스트 하고자 하는 모듈을 다른 컴포넌트나 디펜던시들에서 독립적으로 분리할 수 있다.
네트워크 요청이나 데이터베이스 쿼리 등을 대체하여 테스트 실행을 빠르게 할 수 있ㄷ.
예측 가능하고 일관된 데이터를 사용하여 테스트가 쉬워진다.

하지만 mocking 데이터를 오남용하는 것은 다음과 같은 문제를 초래할 수 있다.

mocking 데이터와 실제 데이터 사이의 간극을 매우지 못할 수 있으며, 테스트에서 거짓 양성 또는 거짓 음성을 유발한다.
실제 동작을 테스트하지 못하므로 테스트의 커버리지와 신뢰성을 낮춘다.
mock 데이터를 만드는 데 외부 코드를 사용하여 테스트의 유지보수를 어렵게 하며 복잡성을 높인다.

-> 결국 테스트에서 Mocking도 아무렇게나 사용하지 말고 꼭 필요한 순간에, 적절하게 사용해야 한다~

Ref https://medium.com/@queenskisivuli/why-mocking-data-is-a-bad-practice-for-testing-a20d2d7104aa

패턴 매칭

데이터를 검색할 때 특정 패턴이 출현하는지, 또한 어디에 출현하는지 등을 특정하는 방법의 일종

패턴 매칭은 검색, 분석, 정규화, 추출 등 다양한 응용 분야에서 사용하고 있으며, 자바스크립트에서도 정규표현식을 활용하여 문자열에서 특정 패턴을 찾아 검색, 추출, 대체 등을 수행할 때 사용되는 개념이다.

직접 패턴 매칭 기능을 활용하면 데이터의 값, 자료구조, 타입 등 여러가지 유형의 패턴으로 검색을 수행할 수 있고, 특정 데이터 구조에서 원하는 값을 추출할 수도 있다. 이는 적은 양의 코드로 많은 양의 데이터를 읽고 다루기에 아주 좋은 표현 방법이며, 이로 인해 코드의 가독성과 유지보수성도 향상시킬 수 있다.

Ref https://www.kimcoder.io/blog/ts-pattern

html `<aside>` 태그

조금 떨어진 위치에 있는 컨텐츠를 표시할 때 사용한다. aside 컨텐츠는 이를 둘러싼 컨텐츠와 간접적으로 연결되어 있어야 한다.

cf) 브라우저에서 뭔가 특별한 시각적 요소로 처리하는 것은 아니다.

Ref https://www.w3schools.com/tags/tag_aside.asp

`` vs ``

: 시각적
: 시각적 + 의미적

👩‍🏫 를 사용해 텍스트를 꾸미면 안된다. 대신 CSS font-weight를 사용해 굵은 글씨체를 적용하거나,  요소를 사용해 특별히 중요한 텍스트를 나타낸다.

 : 중요한 글

 : 약간의 강조가 필요한 글

 : 관련성이 있는 글

 : 아무런 의미도 갖지 않으므로 다른 요소가 적합하지 않을 때만 사용한다.

라니… 오늘도 html 태그 하나 배워가내…

Ref https://stackoverflow.com/questions/271743/whats-the-difference-between-b-and-strong-i-and-em

RHF(React-Hook-Form) 이모저모

RHF의 formSubmitting 프로퍼티
- form이 submit될 때까지 다른 동작을 하지 못하게끔 제어할 수 있다
RHF의 동작 방식
- 비제어 방식으로 동작하기 때문에 성능이 좋다 (ref로 input등을 관리)
  - 🤔 왜?
  - 제어 컴포넌트는 React에서 form의 값을 제어한다는 의미로, 사용자가 input에 입력할 때마다 리렌더링이 발행하기 때문에 성능상의 이슈가 발생할 수 있다. (그래서 throttling이나 debouncing을 사용하기도 한다.)
- mode로 동작 방식을 바꿀 수도 있다 ({ mode: ‘onChange’ })
- watch를 사용하여 원하는 값이 바뀌었을 때 reaction을 할 수 있다

👩‍🏫 form에 제어 컴포넌트 vs 비제어 컴포넌트 어떻게 사용하는 게 좋을까?

제어 컴포넌트

유효성 검사

실시간으로 필드 검사

조건에 따라 버튼의 활성화 여부가 바뀌는 경우

비제어 컴포넌트

값을 한번만 가져오면 될 때

제출 시에만 유효성 검증을 할 때

RHF과 다른 UI library를 같이 쓰고 싶다면
- <Controller> 컴포넌트를 사용하여 컨트롤할 수 있다

매번 헷갈리는 package.json 버전 표시

~version
- Approximately equivalent to version
- patch 버전 촥촥 올라갈 수 있다. (major/minor ❌)
- 예시: ~1.2.3 일 때 npm i 하면
  - 버전이 1.2.3 일 수 있음 🙆‍♀️
  - 버전이 1.2.300 일 수 있음 🙆‍♀️
  - 버전이 1.3.0 일 수 없음 ❌
^version
- Compatible with version
  - minor/patch 버전 촥촥 올라갈 수 있다.. (major ❌)
  - 예시: ^1.2.3 일 때 npm i 하면
    - 버전이 1.2.3 일 수 있음 🙆‍♀️
    - 버전이 1.2.300 일 수 있음 🙆‍♀️
    - 버전이 1.3.0 일 수 있음 🙆‍♀️
    - 버전이 2.0.0 일 수 없음 ❌

메이저 버전이 0 이라면 캐럿(^)을 이용하더라도 패치버전만 올리는 것을 허용합니다. 이유는 메이저 버전이 0 일 때는 마이너 버전이 올라가면서 Breaking Changes가 자주 일어나는게 보편적이기 때문이다.

Ref https://jeonghwan-kim.github.io/series/2019/12/09/frontend-dev-env-npm.html#55-버전의-범위

ValidityState

제한 조건에 따라 요소가 갖게 되는 검증 상태. 왜 요소의 값이 검증에 실패했는지 알려준다.

cf) ValidityState의 valueMissing

요소에 required 속성이 지정되어 있다.
값이 없을 때 true가 된다.

Ref

useId

React 18 버전부터 uuid를 생성해주는 hook이 생겼다, 이름하야 useId

더 이상 외부 라이브러리에 의존할 필요도 없고, nextId++와 같이 앱의 메모리에서 숫자를 하나씩 늘려 id를 배정하는 generator 함수도 필요없다고 한다. useId가 incrementing counter보다 나은 점은, useId는 서버 렌더링도 지원하기 때문이라는 😲

IE가 아니라면, native API로 사용할 수 있는 Crypto의 randomUUID() 메서드도 있다. https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID

Ref https://react.dev/reference/react/useId

UX 라이팅 가이드라인 - ‘한 문장일 경우에는 마침표를 사용하지 않는다’

예시)

은행을 선택해주세요. ❌
은행을 선택해주세요 ✅
사용자의 텍스트 스캐닝을 돕고
텍스트를 간결하고 가독성 좋게 만들기 위해서

라고 한다…

잘 모르겠음. 영문 vs 한글의 차이가 있는 것 같기도.

Ref https://m3.material.io/foundations/content-design/style-guide/grammar-and-punctuation

이것저것 모음집

Object.isFrozen() - 객체가 Object.freeze()되었는지 알려준다. 참으로 직관적인 네이밍. freeze()시킬 때와 같은 동작으로 검사하겠지? (Ref)

기타공유

SafeTest: 넷플릭스의 혼합 E2E Testing Library

넷플릭스에서 Playwright + Jest/Vitest + React를 혼합한 E2E Testing Library를 공개했다.

테스트 러너이자
브라우저 자동화 라이브러리이자
UI 프레임워크

인… 아주 멋진…

Copy

import { describe, it, expect } from 'safetest/jest';
import { render } from 'safetest/react';

import { Header } from './components/header';

describe('App', () => {
  it('renders the app', async () => {
    const { page } = await render();
    await expect(page.locator('text=Welcome to The App')).toBeVisible();
  });

  it('can render a regular header', async () => {
    const { page } = await render(<Header />);
    await expect(page.locator('text=Logout')).toBeVisible();
    await expect(page.locator('text=admin')).not.toBeVisible();
    expect(await page.screenshot()).toMatchImageSnapshot();
  });

  it('can render an admin header', async () => {
    const { page } = await render(<Header admin={true} />);
    await expect(page.locator('text=Logout')).toBeVisible();
    await expect(page.locator('text=admin')).toBeVisible();
    expect(await page.screenshot()).toMatchImageSnapshot();
  });
});

위와 같이 작성하면, SafeTest에서 다음과 같은 구조로 테스트를 만들어준다.

Copy

{
  "App": {
    "renders the app": async () => { /* ... */ },
    "can render a regular header": async () => { /* ... */ },
    "can render an admin header": async () => { /* ... */ },
  }
}

꽤 멋져보이긴 하는데, 그렇게 획기적인지는 모르겠다. 그냥 배워야 할 게 하나 더 생긴 느낌

(안 배울 예정)

Ref

TC39 stage3 - Set의 새로운 feature들

주로 두 Set(집합) 객체 사이의 관계, 연관성을 기반으로 한 기능들로,

union
intersection
difference
isSubsetOf

등이 포함되었다.

근데 왜 원래 있는 줄 알았지. 역시 생길 법 했나보다.

~~집합 너무 어려워요…~~

Ref

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set#set_composition

React Labs 2024

react 19
react labs
react canaries
react conf

모조리 공지

React도 Canary가 있는 줄 몰랐네. 아니 이제 만들었다는 소리인 것 같다 ㅎ
React 19라니. 아직 18도 제대로 안 써봤는데. 이게 16학번으로 입학하여 어느덧 19학번을 맞이하는 느낌인 걸까? 왠지 섭섭해~

Ref https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024

2024 React Trend

Astro (React와 함께)
인증 (React에서)
tRPC를 이용한 풀스택 React 애플리케이션
React 서버 컴포넌트와 Next.js
TanStack Router for SPA React
Vercel, React를 Edge로 밀어붙이다
React용 번들러: Turbopack 대 Vite
React 컴파일러 (React Forget으로 알려짐)
Biome
Headless UI 라이브러리 for React

React Forget 이름부터 뭔가 간지나잖아. 망할 useCallback과 useMemo의 늪을 벗어날 수 있다니?

그런데 그러면 필시 React 19를 써봐야 할지어니

Ref https://news.hada.io/topic?id=13489

2024 Vue Trend

2월 말이나 돼서야 여기저기서 ‘우리의 올해 목표’ 따위를 공개하는 시즌이 된 것인가?

Ref https://velog.io/@sehyunny/insights-and-trends-in-vuejs-2024

마무리

인간은 적응의 동물… 우테코 코드리뷰에 일주일 만에 그럭저럭 적응해버린 나

이렇게 많은 일을 하려면 많은 체력이 뒷받침되어야 해서 매일 나가지만 폭설 또는 그 여파로 꽁꽁 얼어버린 바닥에 좌절하는 나

2n년 차에 서울이 지긋지긋해져 경기도에 살겠다고 다짐한지 한 달도 지나지 않았건만 무시무시한 8호선을 경험하고 대체 이 나라 어디서 살아야 하나 다시금 고민에 빠진 나

한국 살기 너무 힘들다

Relative Posts:

2월 5주차 기록

March 2, 2024

2월 3주차 기록

February 18, 2024

지그의 개발 블로그

2월 4주차 기록

배워가기

Test Mocking 항상 나쁠까?

패턴 매칭

html <aside> 태그

<b> vs <strong>

RHF(React-Hook-Form) 이모저모

매번 헷갈리는 package.json 버전 표시

ValidityState

useId

UX 라이팅 가이드라인 - ‘한 문장일 경우에는 마침표를 사용하지 않는다’

이것저것 모음집

기타공유

SafeTest: 넷플릭스의 혼합 E2E Testing Library

TC39 stage3 - Set의 새로운 feature들

React Labs 2024

2024 React Trend

2024 Vue Trend

마무리

html `<aside>` 태그

`<b>` vs `<strong>`