presentKey

nvm - Node.js 버전 관리 도구

presentKey — Thu, 12 Feb 2026 22:07:31 +0900

NVM(Node Version Manager)

여러 개의 Node.js 버전을 설치하고, 프로젝트마다 간편하게 버전을 전환할 수 있게 해주는 도구

windows에서 설치

https://github.com/coreybutler/nvm-windows/releases

Releases · coreybutler/nvm-windows

A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows

github.com

nvm-setup.exe 파일 다운로드

명령어

node 버전 설치

nvm install 19.9.0

node 버전 제거

nvm uninstall 19.9.0

설치된 node 버전 목록

nvm ls

node 버전 전환

nvm use 22.13.1

.nvmrc 파일

프로젝트 루트 .nvmrc 파일에 특정 버전이 기록되어 있다면, use 명령어를 사용해 간단하게 버전을 전환할 수 있습니다.

// .nvmrc 파일 내용
19.9.0

nvm use

nvm에 .nvmrc에 명시된 버전이 설치되어 있지 않은 경우, nvm install을 먼저 해야 합니다.

code splitting, react lazy

presentKey — Wed, 27 Nov 2024 23:05:12 +0900

code splitting

react 프로젝트를 빌드하면, 모든 코드(컴포넌트, 스타일)를 하나 또는 여러 개의 파일로 묶는 번들링 과정을 거치게 된다.

사용자가 사이트에 접속하면 이 번들링된 파일을 다운받는데, 사용자에게 당장 필요하지 않은 파일들도 함께 포함되어 다운로드 된다.

메인 페이지('/')만 이용하는 사용자도 '/user', '/setting' 페이지 등의 코드가 포함된 파일을 다운받는다.

번들 사이즈가 커지면 초기 로드 시간이 오래 걸리기 때문에 서비스에 악영향을 끼칠 수 있다. 이 문제를 해결하기 위해 필요한 코드만 다운받을 수 있게하는 code splitting을 적용해 볼 수 있다. react는 dynamic import를 위한 lazy() 함수를 제공하고 있다.

라우트별 code splitting

import HomePage from './pages/Home/HomePage';
const NotFoundPage = lazy(() => import('./pages/NotFound/NotFoundPage'));
const SearchPage = lazy(() => import('./pages/Search/SearchPage'));
const FeedbackPage = lazy(() => import('./pages/Feedback/FeedbackPage'));

기존	lazy 적용

메인 페이지를 제외한 나머지 페이지에 lazy 적용 시, js 파일이 여러 파일로 분할된 것을 확인할 수 있다.

이제 사용자가 '/search' 진입 시, 검색 페이지 컴포넌트를 네트워크 요청을 통해 동적으로 가져온다.

Icon code splitting

날씨 아이콘을 모두 import하여 DayIcons, NightIcons 객체로 매핑하고 있다. 이로 인해 화면에 표시되지 않는 아이콘(비/눈)들까지 모두 로드되고 있다.

import DayClearIcon from './DayClearIcon';
import DayCloudyIcon from './DayCloudyIcon';
import DaySnowIcon from './DaySnowIcon';
import NightClearIcon from './NightClearIcon';
import NightCloudyIcon from './NightCloudyIcon';
import NightSnowFlurriesIcon from './NightSnowFlurriesIcon';
import NightSnowIcon from './NightSnowIcon';
(...import 낮/밤Icon from '';)

/**
 * 시간대별 날씨 아이콘 표시
 */
const WeatherIcon = ({ fcstTime, skyStatus, rainType }: WeatherIconProps) => {
  const hour = Number(fcstTime.slice(0, 2));
  const icons = hour >= 6 && hour <= 18 ? DayIcons : NightIcons;
  let Icon;

  if (rainType === 'NONE') Icon = icons[skyStatus];
  else Icon = icons[rainType];

  return Icon ? <Icon /> : <img src='' alt='' />;
};

export default WeatherIcon;

const DayIcons = {
  CLEAR: DayClearIcon,
  PARTLY_CLOUDY: DayPartlyCloudyIcon,
  CLOUDY: DayCloudyIcon,
  RAIN: DayRainIcon,
  RAIN_DROP: DayRainDropIcon,
  RAIN_AND_SNOW: DayRainAndSnowIcon,
  RAIN_AND_SNOW_FLURRIES: DayRainAndSnowFlurriesIcon,
  SHOWER: DayShowerIcon,
  SNOW: DaySnowIcon,
  SNOW_FLURRIES: DaySnowFlurriesIcon,
};

const NightIcons = {
  CLEAR: NightClearIcon,
  PARTLY_CLOUDY: NightPartlyCloudyIcon,
  CLOUDY: NightCloudyIcon,
  RAIN: NightRainIcon,
  RAIN_DROP: NightRainDropIcon,
  RAIN_AND_SNOW: NightRainAndSnowIcon,
  RAIN_AND_SNOW_FLURRIES: NightRainAndSnowFlurriesIcon,
  SHOWER: NightShowerIcon,
  SNOW: NightSnowIcon,
  SNOW_FLURRIES: NightSnowFlurriesIcon,
};

다음과 같이 lazy를 적용하면, 화면에 보여지는 아이콘들만 로드할 수 있다.

const WeatherIcon = ({ fcstTime, skyStatus, rainType }: WeatherIconProps) => {
  const hour = Number(fcstTime.slice(0, 2));
  const icons = hour >= 6 && hour <= 18 ? DayIcons : NightIcons;
  let Icon;

  if (rainType === 'NONE') Icon = icons[skyStatus];
  else Icon = icons[rainType];

  return Icon ? (
    <Suspense fallback={<IconLoading $width={24} $height={24} />}>
      <Icon />
    </Suspense>
  ) : (
    <img src='' alt='' />
  );
};

export default WeatherIcon;

const DayIcons = {
  CLEAR: lazy(() => import('./DayClearIcon')),
  PARTLY_CLOUDY: lazy(() => import('./DayPartlyCloudyIcon')),
  CLOUDY: lazy(() => import('./DayCloudyIcon')),
  RAIN: lazy(() => import('./DayRainIcon')),
  RAIN_DROP: lazy(() => import('./DayRainDropIcon')),
  RAIN_AND_SNOW: lazy(() => import('./DayRainAndSnowIcon')),
  RAIN_AND_SNOW_FLURRIES: lazy(() => import('./DayRainAndSnowFlurriesIcon')),
  SHOWER: lazy(() => import('./DayShowerIcon')),
  SNOW: lazy(() => import('./DaySnowIcon')),
  SNOW_FLURRIES: lazy(() => import('./DaySnowFlurriesIcon')),
};

날씨 아이콘과 동일하게 동작하는 다른 아이콘들에게도 lazy를 적용한 결과, index 번들 파일의 크기(597kb → 499.36kb)가 줄어들었다.

개선 결과

브라우저 네트워크 탭에서 확인한 결과

	개선 전	개선 후
transferred	629 kB	558 kB
resources	1.9 MB	1.7 MB

개발 및 배포 환경(클라이언트) -> 서버 쿠키 전송 문제

presentKey — Thu, 26 Sep 2024 03:31:50 +0900

문제 상황

이전 글에서 서버 → 클라이언트(localhost)로 쿠키 전송 문제를 해결했었다

그런데 클라이언트 → 서버로 POST 요청을 보냈는데 쿠키가 전송되지 않고 있었다.

왜냐하면 서버(https://custom-domain.com)에서 생성한 쿠키의 도메인은 [ custom-domain.com ] 이고, 클라이언트 도메인은 [ localhost ] 로 같은 도메인이 아니기 때문에 전송되지 않았던 것이다. (+ SameSite: Lax)

로그인 인증을 구현하기 위해선 도메인을 일치시킬 필요가 있었다.

✅ (개발 환경) 백엔드 서버를 로컬에서 띄우자

개발 환경에서 위 문제를 해결하기 위해 백엔드 서버를 로컬에서 띄우기로 했다. 그러면 클라이언트는 http://localhost:5173 이고, 서버는 http://localhost:8080이 될 것이다.

서버(http://localhost:8080)로 api 요청을 보내 쿠키가 생성되면 클라이언트(http://localhost:5173)로 전달된 쿠키의 도메인은 [ localhost ] 가 된다. 이제 도메인이 일치하기 때문에 GET, POST 등 모든 요청에 대해 클라이언트 → 서버로 쿠키가 전송된다.

✅ (배포 환경) 서브 도메인 설정

기존 프론트 도메인이 [ front-service.com ]이고, 백엔드 서버 도메인이 [ custom-domain.com ] 이면 같은 도메인이 아니기 때문에 쿠키 전송이 안 될 것이다. 그래서 프론트와 백의 도메인을 일치시켜야 한다.

기존의 서버 도메인 [ custom-domain.com ] 을 사용자들이 서비스에 접속할 수 있는 주소로 변경하고, 서버는 서브 도메인을 적용해 [ api.custom-domain.com ] 으로 변경했다. 추가로 api.custom-domain.com 서버에서 생성한 쿠키는 api.custom-domain.com 에서만 유효하기 때문에 쿠키의 domain 속성 domain=custom-domain 을 설정해줘야 한다.

하지만 최신 브라우저로 확인해보면 별도의 domain 속성을 지정하지 않아도 도메인과 서브도메인간 쿠키 전송이 잘 되고있다. (파이어폭스는 저장된 쿠키가 보이지는 않지만 api 요청 시, 쿠키가 잘 전송되고 있다.)

서브 도메인
서브 도메인은 도메인 이름 앞에 붙는 추가적인 식별자이다.
api.example.com, m.example.com, admin.example.com 등 모두 example.com 도메인의 서브 도메인이다.

쿠키 domain 속성

- 도메인 속성 지정하지 않았을 때
기본적으로 쿠키가 설정된 서버의 도메인에만 적용됩니다. ex) api.example.com에서 생성된 쿠키는 api.example.com에서만 유효하고, example.com 및 다른 서브 도메인에서는 전송되지 않습니다.
(최신 브라우저에서는 지정하지 않아도 쿠키 전송이 되는거 같습니다.)

- 도메인 속성 지정
domain=example.com 으로 설정하면 example.com 및 다른 서브 도메인에서도 쿠키가 전송됩니다.

백엔드 → 프론트엔드(localhost) 쿠키 전송 문제

presentKey — Sun, 15 Sep 2024 23:14:41 +0900

출처

이미지 출처: https://www.devyummi.com/page?id=66934f448a005e7d8f32213a

문제 상황

이미지 출처: https://www.devyummi.com/page?id=66934f448a005e7d8f32213a

로그인 책임을 백엔드가 맡고 있는 카카오, 구글 소셜 로그인을 구현중이였다.

소셜 로그인 성공 시, 백엔드에서 생성한 jwt 토큰 쿠키가 브라우저(localhost)에 저장되어야 하는데 저장이 되고 있지 않았다.

‍♀️ 첫 번째 시도

개발 환경
- 프론트엔드
  - http://localhost:5173
  - window.location.href = 'http://1.11.111.11:8080/oauth2/authorization/kakao';
    - 소셜 로그인 버튼 클릭 시, 페이지 이동
    - http프로토콜
    - 서버 주소(아이피): 1.11.111.11:8080 (해당 주소는 실제 서버 아이피가 아님)
- 백엔드
  - 쿠키 설정
    - SameSite = lax
    - secure = false

위 환경에서 테스트 시, 클라이언트 localhost에 jwt 토큰 쿠키가 저장되지 않고 http://1.11.111.11:8080 서버쪽에 쿠키가 저장되었다.

‍♀️ 두 번째 시도

서버와 localhost 도메인이 달라 쿠키가 저장되지 않는다고 생각했다. 백엔드의 쿠키 설정을 수정해보았다.

쿠키 설정
- SameSite = none
- secure = true

첫 번째 시도와 마찬가지로 서버쪽에 쿠키가 저장되었다. 다음 설정들도 클라이언트쪽으로 쿠키가 전송되지 않았다.

클라이언트 localhost https 적용
백엔드 쿠키 설정 domain:localhost 지정

간단히 쿠키 속성에 대해 알아보자

domain
- 쿠키가 전송될 수 있는 도메인을 지정하는 속성
- domain=test.com으로 설정하면, test.com과 sub.test.com에서도 쿠키가 전송된다.
secure
- 쿠키가 https 연결에서만 전송되도록 한다.
HttpOnly
- 자바스크립트로 쿠키를 읽거나 수정할 수 없도록 한다.
SameSite
- Strict: 오직 같은 사이트에서의 요청에만 전송된다.
- lax: 같은 사이트에서의 요청 및 Get 요청, 링크 이동 등에는 쿠키가 전송된다. 단, POST, PUT, DELETE 요청은 쿠키가 전송되지 않는다.
- none: 모든 사이트 간 요청에서 전송된다. 단 secure=true 속성이 설정되야 한다.

‍♀️ 세 번째 시도(성공)

서버 주소를 아이피가 아닌 도메인으로 설정했다. 그 결과 브라우저 localhost에 jwt 토큰 쿠키가 정상적으로 저장되었다.

개발 환경
- 프론트엔드
  - http://localhost:5173
  - window.location.href = 'https://custom-domain.com/oauth2/authorization/kakao';
    - 아이피 주소가 아닌 도메인으로 변경
- 백엔드
  - 쿠키 설정
    - SameSite = lax
    - secure = true

첫 번째 시도에서는 왜 쿠키를 전달받지 못했을까?

먼저 localhost는 특수한 도메인으로 간주된다. SameSite가 lax 또는 strict로 설정된 경우, 일부 브라우저 localhost는 서버에서 보내준 쿠키를 저장할 수 있다. 또한, secure=true로 설정되었어도 https가 아닌 http 환경에서 secure 쿠키가 동작할 수 있다. (firefox의 경우 strict로 설정된 경우 쿠키가 저장되지 않았다.)

localhost가 보안 정책에서 조금 느슨하다면, 첫 번째 시도에서 쿠키는 localhost에 저장되어야 한다. 하지만 저장되지 않았는데 이 이유를 gpt는 다음과 같이 답했다.(100% 신뢰하지 마세요!)

브라우저는 IP 주소와 도메인 이름을 다르게 처리할 수 있습니다.
IP 주소로 접속했을 때와 정상적인 도메인 이름으로 접속했을 때 브라우저는 쿠키의 SameSite, Secure 속성을 다르게 적용할 수 있습니다.
특히, 도메인 이름이 아닌 IP 주소로 접근하면 쿠키가 SameSite=Strict나 SameSite=Lax 설정에서 쿠키 전송이 차단될 가능성이 더 높습니다.
IP 주소는 브라우저의 보안 모델에서 도메인처럼 신뢰되지 않을 수 있으며, 특히 보안 쿠키 정책이 더 엄격하게 적용될 수 있습니다.

브라우저 정책 상 IP 주소(http://1.11.111.11:8080/oauth2/authorization/kakao)로 접근하여 쿠키 전송이 차단될 걸로 보인다.

두 번째 시도에서는 왜 쿠키를 전달받지 못했을까?

SameSite = None으로 설정하여 모든 사이트간 쿠키가 전송되지만, http 프로토콜을 사용하는 백엔드(http://1.11.111.11:8080)가 secure = true 쿠키 설정이 되어 있어 전송되지 않았다.

케이스 정리

window.location.href = http://1.11.111.11:8080~~~
- SameSite = lax, secure = false: 1.11.111.11 서버에 jwt 토큰 쿠키 저장 (localhost로 전송 X)
- SameSite = none, secure = true: 1.11.111.11 서버에 jwt 토큰 쿠키 저장 (localhost로 전송 X)
window.location.href = 'https://custom-domain~~~
- SameSite = lax, secure = false: localhost에 jwt 토큰 쿠키 저장
- SameSite = lax, secure = true: localhost에 jwt 토큰 쿠키 저장
- SameSite = none, secure = true: localhost에 jwt 토큰 쿠키 저장

touch-action css 속성

presentKey — Thu, 5 Sep 2024 20:10:40 +0900

문제 상황

스와이프 동작을 통해 snackbar를 없애는 Pointer 이벤트 로직을 구현했다. 데스크탑에서는 정상적으로 스와이프가 되었지만, 모바일에서는 snackbar가 화면 밖으로 이동하지 못하는 현상이 있었다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

✅ 문제 해결

모바일 브라우저는 터치 이벤트를 감지하면 스크롤 동작, 줌 등 기본 동작을 우선 처리하려고 해서 직접 구현한 스와이프 터치 반응이 제한될 수 있다고 한다.

touch-action: none 속성을 추가하여 브라우저의 기본 터치 동작을 차단하고 직접 구현한 터치 동작을 우선적으로 처리하도록 변경했다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

touch-action: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

auto: 브라우저가 터치 동작을 자동으로 처리합니다.

none: 모든 터치 동작을 비활성화합니다.

pan-x: 수평 방향의 스크롤만 허용합니다.

pan-y: 수직 방향의 스크롤만 허용합니다.

pinch-zoom: 확대/축소 제스처를 허용합니다.

manipulation: 스크롤과 확대/축소만 허용하고 다른 제스처(더블 탭) 등은 차단합니다.

Exclude와 Omit

presentKey — Thu, 5 Sep 2024 01:07:12 +0900

Exclude

유니언 타입에서 특정 타입을 제거할 때 사용하는 유틸리티 타입.

유니언 타입은 여러 타입 중 하나가 될 수 있는 값을 의미한다.

type Fruit = 'apple' | 'banana' | 'orange'

type MyFruit = Exclude<Fruit, 'orange'> // 'apple' | 'banana'

MyFruit는 orange를 제외한 apple과 banana를 타입으로 가집니다.

Omit

객체 타입에서 특정 속성을 제거한 새로운 타입을 생성하는 유틸리티 타입.

type Person = {
  name: string;
  age: number;
  email: string;
};

type PersonName = Omit<Person, 'age' | 'email'>; // { name: string }

PersonName은 age, email 속성이 제거된 { name: string } 타입을 가집니다.

emotion의 theme 타입 정의하기 (typeof 연산자)

presentKey — Tue, 20 Aug 2024 23:04:18 +0900

// theme.ts
export const theme = {
  colors: {
    blueGrey: colors.blueGrey,
    red: colors.red,
  },
};

// colors.ts
export const colors = {
  blueGrey: {
    50: '#F9FAFB',
    100: '#EBEEF2',
    200: '#CED5DF',
    300: '#B2BECC',
    400: '#95A7BA',
    500: '#788DA3',
    600: '#627384',
    700: '#53616F',
    800: '#434D58',
    900: '#323941',
  },
  red: {
    300: '#FFA59B',
    600: '#D62D36',
    700: '#B32A2E',
  },
};

프로젝트 내에 사용될 색상을 지정한 뒤 사용해보면 다음과 같은 type 오류가 발생한다.

@emotion/react에 선언된 Theme 타입을 보면 빈 객체로 선언되있기 때문에 colors 속성 존재를 모르기 때문이다.

현재 프로젝트에 맞게 Theme 인터페이스를 확장할 필요가 있다.

typeof: https://www.typescriptlang.org/ko/docs/handbook/2/typeof-types.html

typeof 연산자를 통해 theme 객체의 타입(구조)를 그대로 가져와 ThemeType을 만들어준다.

그 다음 emotion.d.ts 파일을 생성하여 Theme을 ThemeType으로 확장시키면 type오류가 사라진다.

// theme.ts
export const theme :Theme = {
  colors: {
    blueGrey: colors.blueGrey,
    red: colors.red,
  },
};

export type ThemeType = typeof theme;

// emotion.d.ts
import { ThemeType } from '@/styles/theme';
import '@emotion/react';

declare module '@emotion/react' {
  export interface Theme extends ThemeType {}
}

하지만 blueGrey 900이 string으로만 표시되기 때문에 정확히 어떤 값을 갖는지 알 수 없다.

colors 객체에 as const 키워드를 붙여 객체의 각 요소를 리터럴 타입으로 유지할 수 있다.

리터럴 타입: 문자열이나 숫자에 정확한 값을 지정하는 것

// colors.ts
export const colors = {
  blueGrey: {
    50: '#F9FAFB',
    100: '#EBEEF2',
    200: '#CED5DF',
    300: '#B2BECC',
    400: '#95A7BA',
    500: '#788DA3',
    600: '#627384',
    700: '#53616F',
    800: '#434D58',
    900: '#323941',
  },
  red: {
    300: '#FFA59B',
    600: '#D62D36',
    700: '#B32A2E',
  },
} as const; // as const 키워드!

as const 전

as const 후

Context API 리렌더링 되는 경우 알아보기

presentKey — Tue, 13 Aug 2024 01:57:52 +0900

참고

1. https://solo5star.dev/posts/42/

2. https://velog.io/@velopert/react-context-tutorial#%EA%B0%92%EA%B3%BC-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8-%ED%95%A8%EC%88%98%EB%A5%BC-%EB%91%90%EA%B0%9C%EC%9D%98-context%EB%A1%9C-%EB%B6%84%EB%A6%AC%ED%95%98%EA%B8%B0

3. https://velog.io/@dahyeon405/Context-API%EC%9D%98-%EB%A6%AC%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%8C%80%ED%95%9C-%EC%98%A4%ED%95%B4

Provider 내부에 컴포넌트가 있는 경우 (<Text />)

const CounterValueContext = createContext(0);
const CounterActionContext = createContext({
  increase: () => {},
  decrease: () => {},
});

export function CounterProvider({ children }: { children: React.ReactNode }) {
  const [counter, setCounter] = useState(0);
  const increase = () => setCounter((prev) => prev + 1);
  const decrease = () => setCounter((prev) => prev - 1);
  console.log('Counter Provider');

  return (
    <CounterValueContext.Provider value={counter}>
      <CounterActionContext.Provider value={{ increase, decrease }}>
        <Text />
        {children}
      </CounterActionContext.Provider>
    </CounterValueContext.Provider>
  );
}

export function useCounter() {
  const value = useContext(CounterValueContext);
  return value;
}

export function useSetCounter() {
  const value = useContext(CounterActionContext);
  return value;
}

export default function ContextPage() {
  console.log('Context Page');
  return (
    <CounterProvider>
      <Plus />
      <Number />
      <Minus />
      <Hello />
    </CounterProvider>
  );
}

// Text.tsx
export default function Text() {
  console.log('Text');
  return <h3>Counter Text</h3>;
}

// Plus.tsx
export default function Plus() {
  const { increase } = useSetCounter();
  console.log('Plus');

  return <button onClick={increase}>+</button>;
}

// Minus.tsx
export default function Minus() {
  const { decrease } = useSetCounter();
  console.log('Minus');

  return <button onClick={decrease}>-</button>;
}

// Number.tsx
export default function Number() {
  const count = useCounter();
  console.log('Number');

  return <div>{count}</div>;
}

// Hello.tsx
export default function Hello() {
  console.log('Hello');
  return <div>Hello!</div>;
}

<Hello /> 컴포넌트를 제외한 <Text />, <Plus />, <Minus />, <Number /> 컴포넌트 모두 counter 상태가 변경될때마다 리렌더링이 발생한다.

<Text />는 CounterProvider의 내부 상태가 변경되었기 때문에 리렌더링되었고, 리렌더링 되면서 increase, decrease 함수도 새로 만들어지기 때문에 context의 값을 바라보고 있는(useCounter, useSetCounter) 모든 자식 컴포넌트들이 리렌더링 되었다.

리렌더링을 막는 방법

context의 값을 사용하고 있지 않은 <Text />의 리렌더링을 막는 방법은 <Text /> 컴포넌트에 React memo 를 적용하거나 <Hello /> 컴포넌트처럼 children으로 렌더링 하는 방법이 있다.

increase, decrease 함수를 사용하고 있는 컴포넌트의 리렌더링을 막는 방법은 useMemo를 적용한 actions 객체를 만들어서 전달하는 것이다. 이러면 <CounterProvider />, <Number /> 컴포넌트만 리렌더링 된다.

export function CounterProvider({ children }: { children: React.ReactNode }) {
  const [counter, setCounter] = useState(0);
  const actions = useMemo(
    () => ({
      increase() {
        setCounter((prev) => prev + 1);
      },
      decrease() {
        setCounter((prev) => prev - 1);
      },
    }),
    [],
  );
  console.log('Counter Provider');

  return (
    <CounterValueContext.Provider value={counter}>
      <CounterActionContext.Provider value={actions}>
        {children}
      </CounterActionContext.Provider>
    </CounterValueContext.Provider>
  );
}

increase, decrease 각 함수에 useCallback을 적용해 value = {{ increase, decrease }} 로 전달한 경우, 렌더링 최적화가 적용되지 않는다. 왜냐하면 <CounterProvider />가 리렌더링 되면서 increase, decrease 함수는 메모이제이션 됐지만, value로 전달하는 객체는 새로 만들어지기때문에 최적화가 되지 않는다.

만약 increase 함수 하나만 전달한다면 useCallback만으로 최적화할 수 있다.

children으로 컴포넌트를 렌더링 한 경우

export function CounterProvider({ children }: { children: React.ReactNode }) {
  const [counter, setCounter] = useState(0);
  const actions = useMemo(
    () => ({
      increase() {
        setCounter((prev) => prev + 1);
      },
      decrease() {
        setCounter((prev) => prev - 1);
      },
    }),
    [],
  );
  console.log('Counter Provider');

  return (
    <CounterValueContext.Provider value={counter}>
      <CounterActionContext.Provider value={actions}>
        {children}
      </CounterActionContext.Provider>
    </CounterValueContext.Provider>
  );
}

export default function ContextPage() {
  console.log('Context Page');
  return (
    <CounterProvider>
      <Text>
        <HeadingNumber />
      </Text>
      <Plus />
      <Number />
      <Minus />
      <Hello />
    </CounterProvider>
  );
}

// Text.tsx
export default function Text({ children }: { children: React.ReactNode }) {
  console.log('Text');

  return (
    <h3>
      Counter Text
      {children}
    </h3>
  );
}

// HeadingNumber.tsx
export default function HeadingNumber() {
  const count = useCounter();
  console.log('Heading Number');

  return <span> ★ {count} ★</span>;
}

// Hello.tsx
export default function Hello() {
  console.log('Hello');
  const count = useCounter();

  return <div>Hello!</div>;
}

- <Text />는 children으로 <HeadingNumber /> 컴포넌트를 렌더링한다.

- <Hello />는 count 상태를 가지지만 사용하지 않는다.

count 상태가 변경되면 <Counter Provider />와 useCounter()를 사용한 <Heading Number />, <Number />, <Hello /> 컴포넌트만 리렌더링 된다. (actions는 useMemo를 적용했기 때문에, <Plus /> <Minus /> 컴포넌트는 리렌더링 발생하지 않음)

<Text />는 <HeadingNumber />가 리렌더링 되었어도 context 값을 사용하지 않기 때문에 리렌더링 되지 않는다.

위 경우들을 통해 Context API의 모든 자식 컴포넌트들이 리렌더링 되는 것은 아니라는 사실이다!

하나의 context provider로 값과 함수를 사용한다면?

const CounterContext = createContext({
  counter: 0,
  actions: { increase: () => {}, decrease: () => {} },
});

export function CounterProvider({ children }: { children: React.ReactNode }) {
  const [counter, setCounter] = useState(0);
  const actions = useMemo(
    () => ({
      increase() {
        setCounter((prev) => prev + 1);
      },
      decrease() {
        setCounter((prev) => prev - 1);
      },
    }),
    [],
  );
  const value = useMemo(() => ({ counter, actions }), [counter, actions]);
  console.log('Counter Provider');

  return (
    <CounterContext.Provider value={value}>{children}</CounterContext.Provider>
  );
}

export function useCounter() {
  const value = useContext(CounterContext);
  return value;
}

// Plus.tsx
export default function Plus() {
  const {
    actions: { increase },
  } = useCounter();
  console.log('Plus');

  return <button onClick={increase}>+</button>;
}

// Minus.tsx
export default function Minus() {
  const {
    actions: { decrease },
  } = useCounter();
  console.log('Minus');

  return <button onClick={decrease}>-</button>;
}

하나의 provider를 통해 값을 전달하고 있는 경우 context의 값을 사용하고 있는 모든 컴포넌트에서 리렌더링이 발생한다. actions는 useMemo를 적용했어도, counter가 변경될 때마다 value의 useMemo dependencies가 바뀌기 때문이다.

그래서 상태가 자주 변경되는 경우에는 값과 상태 변경 함수 provider를 분리하여 관리하는게 좋다.

react 프로젝트 세팅(prettier, stylelint, .vscode, path alias)

presentKey — Tue, 6 Aug 2024 19:31:11 +0900

설치 환경

pnpm + vite + react + typescript + vscode

prettier

prettier는 나 또는 팀원들이 작성한 코드를 일관된 스타일로 작성하도록 도와주는 도구이다.

vscode setting에서 개인 설정을 적용할 수 있고, 팀원들의 코드 스타일을 맞추려면 프로젝트 루트 폴더에 .prettierrc.json 파일을 생성하고 원하는 설정을 넣어주면 된다.

(프로젝트 prettierrc.json이 vscode 세팅보다 우선순위가 높다.)

{
  "singleQuote": true,
  "jsxSingleQuote": true,
  "semi": true,
  "printWidth": 80
}

prettier 옵션: https://prettier.io/docs/en/options

stylelint + scss + .vscode(extensions.json, settings.json)

1. 설치 및 세팅

stylelint는 css 작성 규칙을 정해 오류를 방지하고 일관된 스타일로 작성하도록 도와주는 도구이다.

pnpm add -D stylelint stylelint-config-standard-scss
pnpm add -D stylelint-config-recess-order

- stylelint-config-standard-scss: scss를 위한 stylelint 표준 구성

- stylelint-config-recess-order: css 속성을 정렬하는 구성

프로젝트 루트 폴더에 .stylelintrc.json 파일을 생성하고 규칙 등등을 설정할 수 있다.

{
  "extends": [
    "stylelint-config-standard-scss",
    "stylelint-config-recess-order"
  ],
  "ignoreFiles": ["src/index.scss"],
  "rules": {
    "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": true,
    "selector-class-pattern": "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
    "selector-pseudo-class-no-unknown": [
      true,
      {
        "ignorePseudoClasses": ["global"]
      }
    ],
    "keyframes-name-pattern": "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
    "max-nesting-depth": 3,
    "no-descending-specificity": null
  }
}

stylelint rule: https://stylelint.io/user-guide/rules

2. 실행

package.json 파일에 stylelint script를 추가합니다.

"pnpm stylelint" 명령어를 입력하여 규칙에 어긋나는 css 코드들을 확인할 수 있다. 하지만 매번 명령어를 입력해야 하는 번거로움이 있다.

  "scripts": {
    ...,
    "stylelint": "stylelint '**/*.{css,scss}' --fix"
  },

3. extenstion

명령어 필요 없이 코드 작성 중에 바로 확인할 수 있도록 도와주는 "stylelint" extenstion이 있다.

(scripts - stylelint는 제거해도 괜찮습니다.)

extenstion 설치 후, vscode 설정(settings.json)에 다음 옵션을 추가한다.

{
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "stylelint.validate": ["css", "scss"],
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": "explicit"
  }
}

그러면 이제 바로바로 vscode에서 문제를 확인할 수 있다. 그리고 stylelint 규칙 중 autofixed 표시가 있는 규칙은 저장 시, 자동으로 수정된다.

- 프로젝트 설정 공유

위와 같은 개발 환경 세팅을 팀원들과 공유하려면 어떻게 해야할까?

프로젝트 루트 폴더에 .vscode 폴더를 통해 관리하면 된다.

함께 사용해야 할 extension이 있는 경우 "작업 영역에 추가 권장 사항"을 클릭하면 extensions.json 파일에 추가된다. 이러면 해당 extension이 없는 팀원은 vscode 알림으로 설치 권고를 받게된다.

vscode setting은 settings.json 파일을 생성하여 필요한 옵션들을 넣어주면 프로젝트 팀원 간 설정이 공유된다.

path alias 설정

path alias는 경로에 별칭을 붙이는 것으로, "../../../compoents/Box" 와 같은 경로를 "@components/Box" 표현으로 변경할 수 있다.

vite.config.ts 파일을 열어 다음 속성을 설정합니다.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  ...,
  resolve: {
    alias: [{ find: '@', replacement: resolve(__dirname, 'src') }],
  },
});

"path"를 사용하기 위해서 @types/node가 필요하다.

pnpm add -D @types/node

추가로 tsconfig.json도 설정해줘야 하는데, 현재 vite으로 react 설치 시 tsconfig.app.json, tsconfig.json, tsconfig.node.json 세 개의 파일이 존재한다. 그 중 tsconfig.app.json에 설정해주면 된다.

{
  "compilerOptions": {
    ...,
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  ...,
}

animation, transition event

presentKey — Wed, 19 Jun 2024 20:04:37 +0900

Animation 이벤트

https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event

CSS 애니메이션이 시작, 종료, 반복될 때 발생하는 이벤트이다.

animationstart
animationend
animationiteration

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

// react
export default function EventPage() {
  const animationStart = () => console.log('animation start');
  const animationEnd = () => console.log('animation end');
  const animationIteration = () => console.log('animation iteration');

  return (
    <div>
      <h3>animation event</h3>
      <div
        className={styles.box}
        onAnimationStart={animationStart}
        onAnimationEnd={animationEnd}
        onAnimationIteration={animationIteration}
      ></div>
    </div>
  );
}

// css
.box {
  width: 100px;
  height: 100px;
  background-color: #5f9ea0;
  animation: spin 2s;
  animation-iteration-count: 3;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Transtion 이벤트

https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event

CSS 트랜지션이 시작, 종료, 취소될 때 발생하는 이벤트이다.

transtionstart
transitionend
transitioncancel

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

// react
// transitionEnd 이벤트 외 지원하지 않는 이벤트는 직접 등록해야 한다.
export default function EventPage() {
  const divRef = useRef<HTMLDivElement>(null);
  const transitionStart = () => console.log('transition start');
  const transitionEnd = () => console.log('transition end');
  const transitionCancel = () => console.log('transition cancel');

  useEffect(() => {
    const divElement = divRef.current;
    if (!divElement) return;
    divElement.addEventListener('transitionstart', transitionStart);
    divElement.addEventListener('transitioncancel', transitionCancel);

    return () => {
      divElement.removeEventListener('transitionstart', transitionStart);
      divElement.removeEventListener('transitioncancel', transitionCancel);
    };
  }, []);

  return (
    <div>
      <h3>animation event</h3>
      <div
        className={styles.box2}
        ref={divRef}
        onTransitionEnd={transitionEnd}
      ></div>
    </div>
  );
}

// CSS
.box2 {
  width: 100px;
  height: 100px;
  background-color: #5f9ea0;
  transition: transform 2s ease;
}

.box2:hover {
  transform: scaleX(2);
}