행위 패턴(Behavioral Pattern) 중 하나로, 객체가 내부 상태(state) 변경에 따라 행동(behavior)과 상태 전이를 각각의 상태 객체에 위임하는 패턴입니다.

등장 배경

예를 들어 뽑기 기계를 개발할때, “동전 있음”, “동전 없음”, “상품 판매”, “상품 매진” 등의 상태는“동전 투입”, “동전 반환”, “손잡이 돌림”, “알맹이 내보냄” 등의 행동 에 따라 변경됩니다.

각각의 행동에 대한 함수를 구현해봅시다. 아래와 같은 고려사항이 있을 수 있습니다.

1. 현재 상태에 따라 행동을 다르게 구현한다.
2. 행동을 모두 마친 후의 상태에 따라 다음 상태를 정한다.

위와 같은 상황을 고려하여 구현하려면 행동 함수 내부의 많은 if-else가 필요합니다. 또한, 변경 사항이 발생(재고 보충, 특별 보너스 상품 지급 등등)하면 내부 코드를 전체적으로 고려하여 변경해야 합니다. (버그 발생 위험 높아짐)

이러한 문제를 해결하고자 각각의 상태에 대한 객체를 생성하고(NoCoinState, HasCoinState, SoldState, SoldOutState) 내부에서는 현재 상태에서 실행할 행동(insertCoin(), ejectCoin() ...)과 상태전이를 처리하도록 캡슐화 하여 각각의 객체에게 책임을 위임하는 패턴이 상태 패턴이 등장하였습니다.

이렇게 각각의 객체에게 위임하게 되면 OCP를 준수하게 되어 확장이 용이하고, SRP를 준수하게 되어 테스트가 용이해집니다.

핵심 아이디어

1. State Context의 뼈대를 만듭니다.
   1. 아래에서 만들 State Object를 보유하고 상태 전의를 관리하는 상태의 주인
2. State Interface를 생성합니다.
   1. 모든 행동 메서드 포함
3. State Interface로 각각의 State Object 생성합니다.
   1. 모든 행동 매서드 구현
   2. State Context를 참조
      1. constructor parameter로 주입 받음
      2. 상태 내부로 의존성 주입(DI)
      3. State Context 객체를 참조 = 상태 객체가 자신을 보유한 컨텍스트 객체를 조작할 수 있도록 주입된 Context 레퍼런스
      4. 상속, 구성 x
4. State Context의 내부를 다시 구현합니다.
   1. 각각의 상태를 생성 및 소유합니다. (new 사용, 구성 관계)
   2. 상태 전의를 위한 세터/케터를 구현합니다.
   3. 실제 외부에서 호출할 동작을 구현합니다.
5. 외부에서는 각각의 상태 객체를 바라볼 필요 없이, State Context만 바라봅니다.

• Context → State
  • 구성 관계 - Composition
  • Context가 State객체를 생성하여 소유
  • Context가 제거되면 State들도 같이 소멸(생명주기를 책임짐)
• State → Context
  • 연관/참조 관계 - Association/Reference
  • State는 외부의 Context를 참조
  • State는 Context의 생명주기를 책임지지 x
• 결국 서로 양방향으로 연관이 되어있지만 서로 다른 성격의 관계를 가집니다.

💡 구성 관계 vs 참조 관계

(1) 구성 관계
구성 관계는 소스 코드 내에서 new를 써서 내부에서 직접 인스턴스를 생성하고 그 객체의 생명주기를 자신이 책임집니다.
⇒ 부분(part)이 전체(whole)에 강하게 종속되어, 전체가 생성·파괴될 때 부분도 함께 생성·파괴되어야 할 때 사용

(2) 참조 관계
참조관계는 외부에서 만들어진 인스턴스를 단순히 constructor 파라미터로 받아와서 참조만 할당하여 사용만 할뿐, 생성/파괴 책임은 없습니다.
⇒ 한 객체가 다른 객체를 사용만 해야 할때 사용

실제 활용

State interface

export interface State {
  insertCoin(): void;
  ejectCoin(): void;
  turnCrank(): void;
  dispense(): void;
}

Context class

import { State } from './State';
import { NoCoinState } from './NoCoinState';
import { HasCoinState } from './HasCoinState';
import { SoldState } from './SoldState';
import { SoldOutState } from './SoldOutState';

export class GumballMachine {
  private noCoinState: State;
  private hasCoinState: State;
  private soldState:   State;
  private soldOutState: State;

  private state: State;
  private count: number;

  constructor(count: number) {
    this.count = count;
    this.noCoinState   = new NoCoinState(this);
    this.hasCoinState  = new HasCoinState(this);
    this.soldState     = new SoldState(this);
    this.soldOutState  = new SoldOutState(this);

    this.state = count > 0 ? this.noCoinState : this.soldOutState;
  }

  // 상태 전이를 위한 세터/게터
  setState(state: State) {
    this.state = state;
  }
  getNoCoinState()   { return this.noCoinState; }
  getHasCoinState()  { return this.hasCoinState; }
  getSoldState()     { return this.soldState; }
  getSoldOutState()  { return this.soldOutState; }

  // 알맹이 재고 차감
  releaseBall(): void {
    if (this.count > 0) {
      console.log('알맹이 나가는 중...');
      this.count--;
    }
  }

  // 외부에서 호출할 동작
  insertCoin()  { this.state.insertCoin();  }
  ejectCoin()   { this.state.ejectCoin();   }
  turnCrank()   {
    this.state.turnCrank();
    this.state.dispense();
  }

  getCount() { return this.count; }
}

각각의 State Object

import { State } from './State';
import { GumballMachine } from './GumballMachine';

export class NoCoinState implements State {
  constructor(private machine: GumballMachine) {}

  insertCoin(): void {
    console.log('동전이 투입되었습니다.');
    this.machine.setState(this.machine.getHasCoinState());
  }
  ejectCoin(): void {
    console.log('동전이 없습니다. 반환할 수 없습니다.');
  }
  turnCrank(): void {
    console.log('먼저 동전을 넣어주세요.');
  }
  dispense(): void {
    console.log('알맹이를 받을 수 없습니다.');
  }
}

// HasCoinState.ts
import { State } from './State';
import { GumballMachine } from './GumballMachine';

export class HasCoinState implements State {
  constructor(private machine: GumballMachine) {}

  insertCoin(): void {
    console.log('이미 동전이 있습니다. 추가로 넣을 수 없습니다.');
  }
  ejectCoin(): void {
    console.log('동전을 반환합니다.');
    this.machine.setState(this.machine.getNoCoinState());
  }
  turnCrank(): void {
    console.log('손잡이를 돌리셨습니다...');
    this.machine.setState(this.machine.getSoldState());
  }
  dispense(): void {
    console.log('알맹이를 받을 수 없습니다.');
  }
}

// SoldState.ts
import { State } from './State';
import { GumballMachine } from './GumballMachine';

export class SoldState implements State {
  constructor(private machine: GumballMachine) {}

  insertCoin(): void {
    console.log('잠시만 기다려주세요. 알맹이가 나가는 중입니다.');
  }
  ejectCoin(): void {
    console.log('이미 손잡이를 돌리셨습니다. 반환 불가합니다.');
  }
  turnCrank(): void {
    console.log('손잡이는 한 번만 돌려주세요.');
  }
  dispense(): void {
    this.machine.releaseBall();
    if (this.machine.getCount() > 0) {
      this.machine.setState(this.machine.getNoCoinState());
    } else {
      console.log('알맹이가 모두 소진되었습니다.');
      this.machine.setState(this.machine.getSoldOutState());
    }
  }
}

// SoldOutState.ts
import { State } from './State';
import { GumballMachine } from './GumballMachine';

export class SoldOutState implements State {
  constructor(private machine: GumballMachine) {}

  insertCoin(): void {
    console.log('더 이상 판매할 알맹이가 없습니다. 동전을 반환합니다.');
  }
  ejectCoin(): void {
    console.log('동전이 없습니다.');
  }
  turnCrank(): void {
    console.log('알맹이가 없어서 손잡이를 돌릴 수 없습니다.');
  }
  dispense(): void {
    console.log('알맹이가 없습니다.');
  }
}

실제 사용하는 부분

// main.ts (테스트)
import { GumballMachine } from './GumballMachine';

const machine = new GumballMachine(2);

machine.insertCoin();
machine.turnCrank();
// 동전이 투입되었습니다.
// 손잡이를 돌리셨습니다...
// 알맹이 나가는 중...
// 상태가 NoCoinState로 전이

machine.insertCoin();
machine.ejectCoin();
// 동전이 투입되었습니다.
// 동전을 반환합니다.

machine.insertCoin();
machine.turnCrank();
machine.insertCoin();
machine.turnCrank();
// 알맹이 나가는 중...
// 알맹이가 모두 소진되었습니다.
// 더 이상 판매할 알맹이가 없습니다. 동전을 반환합니다.
// 알맹이가 없습니다.

1. 경로

app 폴더 생성

root에 app폴더를 생성합니다.

app/ 디렉토리에 있는 폴더들이 각각 라우팅 경로를 의미합니다. 각각의 폴더는 반드시 page.js 파일을 가지고 있어야 합니다.

app/
  ├── page.js
  └── contact/
      └── page.js
  └── About/
      └── page.js

2. layout

layout를 정의

layout를 정의해줍니다. layout 파일은 하위 모든 경로에 공통적인 UI를 제공해줍니다.

RootLayout

pages 폴더의 layout인 RootLayout component는 필수입니다. 이 컴포넌트에 기존 _document.js와 app.js의 내용을 migration 해줍니다.

head

기존 next/head를 새로운 built-in SEO support인 Metadata로 변경해줍니다.

//before
import Head from 'next/head'

export default function Page() {
  return (
    <>
      <Head>
        <title>My page title</title>
      </Head>
    </>
  )
}

//after
import { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'My Page Title',
}

export default function Page() {
  return '...'
}

Data fetching

getServerSidePros/getStaticProps

기존 getServerSidePros와 getStaticProps는 fetch 함수로 대체해줍니다.

export default async function Page() {
  // Similar to `getStaticProps`.
  const staticData = await fetch(`https://...`, { cache: 'force-cache' })

  // Similar to `getServerSideProps`.
  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })

  // Similar to `getStaticProps` with the `revalidate` option.
  const revalidatedData = await fetch(`https://...`, {
    next: { revalidate: 10 },
  })

  return <div>...</div>
}

getStaticPaths

그리고 getStaticPaths는 generateStaticParmas로 대체해줍니다.

//before
import PostLayout from '@/components/post-layout'

export async function getStaticPaths() {
  return {
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
  }
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

  return { props: { post } }
}

export default function Post({ post }) {
  return <PostLayout post={post} />
}

//after
import PostLayout from '@/components/post-layout'

export async function generateStaticParams() {
  return [{ id: '1' }, { id: '2' }]
}

async function getPost(params) {
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

  return post
}

export default async function Post({ params }) {
  const post = await getPost(params)

  return <PostLayout post={post} />
}

Error

404.js

404.js는 not-found.js로 대체해줍니다.

공식 홈페이지에서 추천하는것 처럼 보이는 방식은 version이 안 맞는다는 경고가 뜬다. 이 플러그인은 업데이트가 안되어 있어서 버전이 안맞는다는 경고가 뜨며 어떤 글에서는 해당 플러그인이 아이콘 크기 버그 해결만을 위한 플러그인인이라고 하니 사용하지 않기로 결정했다.

yarn add gatsby-plugin-fontawesome-css

module.exports = {
  plugins: [`gatsby-plugin-fontawesome-css`],
}

react-fontawesome 패키지를 설치

Gatsby는 React 기반이기 때문에 React 전용 react-fontawesome 패키지를 설치

{
    "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^6.4.0",
        "@fortawesome/free-brands-svg-icons": "^6.4.0",
        "@fortawesome/free-regular-svg-icons": "^6.4.0",
        "@fortawesome/free-solid-svg-icons": "^6.4.0",
        "@fortawesome/react-fontawesome": "^0.2.0"
    }
}

dynamic 방법의 문제점

폰트를 사용하는 방법은 여러개가 있는데, 나는 공통 컴포넌트를 만들어 사용할것이기 때문에 string으로 props를 넘겨서 사용할 수 있는 dynamic 방법을 사용했다.

이 방법은 Babel Macros 플러그인 설정을 통해 사용할 아이콘을 일일이 import할 필요가 없으면서도 사용한 아이콘만 번들에 포함하도록 자동으로 번들 최적화하는 방법이다. 이 방법은 공식 홈페이지에서도 추천하는 방법!

대신 몇가지 설정을 해주어야 한다. yarn add babel-plugin-macros

babel.config.js

module.exports = function (api) {
     //여기에서 캐시 오류가 났기 때문에
    api.cache(true);
    return {
      plugins: ['macros'],
    }
}

babel-plugin-macros.config.js

module.exports = {
  'fontawesome-svg-core': {
    'license': 'free'
  }
}

그런데 여기서 충격적인 오류가 또 발생했다.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { icon } from '@fortawesome/fontawesome-svg-core/import.macro'
import { Color, FoundationProps } from "../../models/types";
import { SizeProp } from '@fortawesome/fontawesome-svg-core';
import colors from '../../constants/colors';

export type IconProps = {
  name:
  | "moon" | "bars"
  size?: SizeProp
  color?: Color;
};

const Icon = ({
  className,
  name,
  size = "4x",
  color = "primary3",
}: IconProps & FoundationProps) => {
  console.log(name)
  return (
    <span className={className}>
      <FontAwesomeIcon icon={icon({ name, style: 'solid' })} size={size} color={colors[color]} />
    </span >
  );
};

export default Icon;

@fortawesome/fontawesome-svg-core/import.macro는 icon 매크로를 호출할때, name 속성 지정할 수 있다. 내가 놓친 부분은 icon 매크로가 반환하는 아이콘 정보는 build time에 고정되게 된다는 것이였다.

내가 수행했던 방식은 build time이 아닌 runtime 중에만 동적으로 실제 name을 가져올 수 있었기 때문에, icon 매크로를 수행하는 build time에는 referenced icon을 알 수 있기 때문에 해당 오류가 발생했다.

Only string literals are supported for the name property (use a string here instead)

그래서 다시 다른 방법으로 고고뤼!

두가지 해결 방법

내가 생각한 해결방법은 아래 2가지 이다.

1. 각각 import 해주는 방식

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faMoon, faBars } from '@fortawesome/free-solid-svg-icons';

...

let selectedIcon = '';
if(props.name === "moon") selectedIcon= faMoon; 

...

2. 그대로 babel macro를 사용하면서 미리 icon 매크로로 name 지정하여 referenced icon을 가져온 후 객체에 저장해놓는 방법

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { icon } from '@fortawesome/fontawesome-svg-core/import.macro'

const icons = {
  moon: icon({ name: "moon", style: 'solid' }),
  bars: icon({ name: "bars", style: 'solid' }),
}

...

const selectedIcon = props.name[name];

...

최종 나의 선택은!

나는 추가로 여러가지의 아이콘을 가져올 예정이였기 때문에 하나하나 icon을 import 해주지 않으면서도 번들 최적화를 수행해주는 아래의 방식을 선택하였다.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { icon } from '@fortawesome/fontawesome-svg-core/import.macro'
import { Color, FoundationProps } from "../../models/types";
import { SizeProp } from '@fortawesome/fontawesome-svg-core';
import colors from '../../constants/colors';

const icons = {
  moon: icon({ name: "moon", style: 'solid' }),
  bars: icon({ name: "bars", style: 'solid' }),
}

export type IconProps = {
  name:
  | "moon" | "bars"
  size?: SizeProp
  color?: Color;
};

const Icon = ({
  className,
  name,
  size = "4x",
  color = "primary3",
}: IconProps & FoundationProps) => {
  return (
    <span className={className}>
      <FontAwesomeIcon icon={icons[name]} size={size} color={colors[color]} />
    </span >
  );
};

export default Icon;

📌 이 글은 emotion 공식문서의 Best Practices 참고하여 작성되었습니다.

스타일 재사용 하기

어떤 애플리케이션을 개발하는데 에러메세지 스타일이 여러 컴포넌트에서 반복적으로 사용되며, 해당 에러메세지는 폰트사이즈가 다른 여러버전이 존재한다고 가정해봅시다.

이러한 스타일을 재사용하기 위해 스타일을 공유하는 방법은 두가지가 있습니다.

1. css objects를 export 해주기

export const errorCss = css({
  color: 'red',
  fontWeight: 'bold'
})

// Use arrays to compose styles
export const largeErrorCss = css([errorCss, { fontSize: '3rem' }])
export const mediumErrorCss = css([errorCss, { fontSize: '2rem' }])
export const smallErrorCss = css([errorCss, { fontSize: '0.5rem' }])

import { errorCss, largeErrorCss, mediumErrorCss , smallErrorCss} from '...'

return (
    <p css=[errorCss, {fontSize: '5rem'}]>Failed!!!!!!!</p>
    <p css={largeErrorCss}>Failed!!!</p>
    <p css={mediumErrorCss}>Failed!!</p>
    <p css={smallErrorCss}>Failed!</p>
)

2. 컴포넌트 재사용 해주기

아래처럼 컴포넌트 자체를 재사용 해줄 경우 좀 더 반복적이 코드를 줄일 수 있습니다.

export function ErrorMessage({ className, children }) {
  return (
    <p css={{ color: 'red', fontWeight: 'bold' }} className={className}>
      {children}
    </p>
  )
}

export function LargeErrorMessage({ className, children }) {
  return (
    <ErrorMessage css={{ fontSize: '3rem' }} className={className}>
      {children}
    </ErrorMessage>
  )
}

📌 css={}로 넘긴 css object는 하위컴포넌트의 className으로 넘어감

import { ErrorMessage, LargeErrorMessage} from '...'

return (
    <ErrorMessage css={{ fontSize: '5rem' }}>Failed!!!!!!!</ErrorMessage>
    <LargeErrorMessage>Failed!!!</LargeErrorMessage>

동적으로 스타일 주기

만약 다른 스타일은 동일하지만 backgroud-style만 달라지는 경우에 어떻게 구현할 수 있을까요?

만약 동적으로 스타일을 줄 수 없다면 아래와 같이 중복되는 코드를 계속해서 작성해야 할 것입니다.

<style>
  .css-1udhswa {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-style: url(https://i.pravatar.cc/150?u=0);
  }

  .css-1cpwmbr {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-style: url(https://i.pravatar.cc/150?u=1);
  }

  .css-am987o {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-style: url(https://i.pravatar.cc/150?u=2);
  }
</style>

이를 style props를 사용한다면 쉽게 해결 할 수 있습니다.

1. style 코드에서는 var(변수명) 형태로 사용
2. element에서는 style={{'변수명' : 값}} 으로 넘겨주면 됩니다.

   .avatar {
   border-radius: 50%;
   width: 40px;
   height: 40px;
   background-style: var(--background-style);
   }
   

function Avatar({ imageUrl }) { return <div className="avatar" style={{ '--background-style': imageUrl }} /> }

> 만약 typescript를 사용한다면 style={{ ['--background-style' as any]: imageUrl }} 이렇게 사용해주면 된다.



## Theming 사용하기
dark mode, light mode를 개발하는 방법중에 emotion의 ThemeProvider을 사용하는 방법이 있습니다.

#### 1. App top level에 ThemeProvider 추가해주기
```jsx
import { ThemeProvider } from '@emotion/react'

const theme = {
  colors: {
    primary: 'hotpink'
  }
}

render(
  <ThemeProvider theme={theme}>
    <App.js>
  </ThemeProvider>
)

2-1. useTheme 사용하기

import {useTheme } from '@emotion/react'

const theme = {
  colors: {
    primary: 'hotpink'
  }
}

function SomeText(props) {
  const theme = useTheme()
  return <div css={{ color: theme.colors.primary }} {...props} />
}

2-2. css 에서 theme 활용해주기

import {useTheme } from '@emotion/react'

const theme = {
  colors: {
    primary: 'hotpink'
  }
}

function SomeText(props) {
  return <div css={theme => ({ color: theme.colors.primary })}>some other text</div>
}

ThemeProvider는 Context API로 전체 테마를 바꾸는 것입니다. 그런데 이는 CSS 변수 접근 방식과 비교하면 아래의 두가지 단점이 존재합니다.

1. DX 하락: 코드가 복잡해짐
2. 성능 하락: ThemeProvider 접근 방식을 사용하면 모든 구성 요소의 스타일을 업데이트해야 하며 브라우저는 해당 업데이트를 페인트함, 그러나 CSS 변수 접근 방식을 사용하면 스타일을 단일 구성 요소(본문)로 업데이트한 다음 브라우저에서 해당 업데이트를 페인트함

참고

• 반씩 쪼개는 탐색
• 정렬 된후에 탐색
• 1억이면 30번 정도 탐색하면 됨

시간 복잡도

순차탐색이 O(N)이라면 이진탐색은 O(logN)이다.

그래서 언제 이진탐색을 풀어야 할까?

• 만약 범위가 억이 넘어가는게 존재할 경우
• 데이터 정렬 뒤에 다수의 쿼리를 날려야 할 경우

풀기1 : 원하는게 arr에 있니?

const binarySearch = (arr, target, start, end) => {
    //탐색 실패(값 없음)
      if(start > end) return -1;
      let mid = parseInt((start+end)/2);
      //만약 찾았다면 현재 index return
      if(arr[mid] === target) return mid;
      //start target mid end
      else if(arr[mid] > target) return binarySearch(arr, target, start, mid-1);
      //start mid target end
      else if(arr[mid] < target) return binarySearch(arr, target, mid+1, end);
}

풀기2: 정렬된 배열에서 특정 원소의 개수 구하기

추후에 세그먼트 트리와 같은 복잡한 알고리즘에서 활용됨

c나 python에서는 lowerBound(), upperBound()라는 함수를 사용해서 해결할 수 있지만, javascript는 직접 구현해야함

cont lowerBound = (arr, target, strat, end) => {
    while(start < end){
        let mid = parseInt((start+end)/2);
          if(arr[mid] >= target) end = mid;
          else start = mid + 1;
    }
      return end;
}

const upperBound = (arr,taret, start, end) => {
    while(start < end){
        let mid = parseInt((start+end)/2);
          //start target arr[mid] end
          //start target mid mid mid mid arr[mid] end
          if(arr[mid] > target) end = mid;
          //start arr[mid] target1 target2 end => start: target1
          //start target1 arr[mid] target2 end => start: target2
          else start = mid + 1;
    }

      return end;
}

풀기3: 파라메트릭 서치

다른 고급 알고리즘 문제랑도 연결됨

단조증가함수

• 단조 증가 함수란 x <= y 이면 f(x) <=f(y)인 함수를 의미합니다.
• 이진탐색 함수는 정렬된 배열을 다루기 때문에 단조 증가 함수입니다.

파라메트릭 서치

• 최적화 문제를 여러개의 결정문제로 바꾸어 해결하는 기법

  최적화 문제: 최댓값, 최솟값을 찾는것 저럼 특정한 조건을 만족하는 알맞은 값을 빠르게 찾는 문제

실제 문제

• 2512

본문

1. React query key Enum으로 관리하기

// hooks/items.hooks.ts
import { useQuery } from "react-query";

export enum ServerStateKeysEnum {
  Items = 'items'
} 

2. React query cutom hook으로 감싸기

데이터 계층과 프레젠테이션 계층을 분리하여 관심사를 명확히 구분할 수 있습니다. 이 말은 즉, API fetch function을 React 컴포넌트에서 가져올 필요가 없다는것을 의미합니다.

// hooks/items.hooks.ts
import { useQuery } from "react-query";

export enum ServerStateKeysEnum {
  Items = 'items'
} 

export const useGetItems = () =>
  useQuery(
    ServerStateKeysEnum.Items,
    () => fetch('https://example.com/feedbacks'),  //Simple fetch function
  );

// components/SomeComponent.tsx

import React from "react";
import { useGetItems } from "hooks/items.hooks.ts";

export const SomeComponent: React.FC = () => {
  const { data: items } = useGetItems();
  return <>{ items }</>
}

그리고 이렇게 custom hook으로 만들면 해당 데이터를 props drilling 할 필요가 없어집니다. 자식 컴포넌트에 props로 데이터를 넘길 필요 없이 각 컴포넌트에서 custom hook을 불러오면 됩니다.(stale time을 잘 활용하면 불필요한 api 호출 막을 수 있음)

// components/SomeComponent.tsx

import React from "react";
import { useGetItems } from "hooks/items.hooks.ts";

export const SomeComponent: React.FC = () => {
  const { data: items } = useGetItems();
  return (<>
    <h1>You have {items.length} items</h1>
    {/* 이것은 item에 관심이 없는 일부 중간 구성 요소이며
        item에 관심이 있는 손자 구성 요소에 도달하기 위해 데이터를 전달할 필요가 없습니다.
    */}
    <SomeRandomChildComponent /> 
  </>);
}

// components/SomeGreatGrandChildrenComponen.tsx

import React from "react";
import { useGetItems } from "hooks/items.hooks.ts";

export const SomeGreatGrandChildrenComponen: React.FC = () => {
  const { data: items } = useGetItems();
  return (<>{items}</>);
}

3. stale time option을 통해 네트워크 비용 감소

위에서 잠깐 언급한 stale time을 잘 활용하면 불필요한 api 호출 막을 수 있음은 아래의 config로 지정할 수 있습니다. 해당 옵션은 프로젝트 전체의 option, 각 useQuery의 option으로 모두 지정할 수 있습니다.

// app.tsx
import { QueryClient, QueryClientProvider } from 'react-query';

const queryCache = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      retry: false,
      staleTime: 30000,
    },
  },
});

const App = () => (
    <QueryClientProvider client={queryCache}>
      <FirstSiblingComponent />
      <SecondSiblingComponent />
    </QueryClientProvider>
);

4. 수동으로 캐시 무효화

만약 products list를 수정할 수 있는 어드민 페이지가 있다고 가정해봅시다.

처음 api에서 products를 불러온 후 staleTime을 infinity로 지정한 후 수정 및 추가 작업을 한 후에만 다시 가져오도록 하고 싶을땐 어떻게 해야 할까요? 바로 react query의 invalidateQueries 매서드를 활용하면 됩니다.

// hooks/items.hooks.ts
import { useMutation, useQueryClient } from "react-query";
import {postCreateNewItem} from './items.api';
import { useQuery } from "react-query";

export enum ServerStateKeysEnum {
  Items = 'items'
} 

export const useGetItems = () =>
  useQuery(
    ServerStateKeysEnum.Items,
    () => fetch('https://example.com/feedbacks'),  //Simple fetch function
  );

export const useCreateItem = () => {
  const cache = useQueryClient();
  return useMutation(postCreateNewItem, {
    onSuccess: () => {
      cache.invalidateQueries(ServerStateKeysEnum.Items);
    }
  });
};

5. custom hook에서 option custom 하기

custom hook으로 useQury, useMutation을 작성하여 활용하려고 하는데 각 컴포넌트마다 옵션이 다른경우가 존재합니다.

5-1. useQuery의 enabled 옵션

만약 useQuery의 경우, 특정 상황에서는 해당 api를 요청하지 않아도 되는 경우 enabled 옵션을 컴포넌트에서 정해야 할 수 있습니다.

// hooks/items.hooks.ts
import { useQuery, UseQueryOptions } from "react-query";

export enum ServerStateKeysEnum {
  Items = 'items'
} 

export const useGetItems = (options?: UseQueryOptions) =>
  useQuery(
    ServerStateKeysEnum.Items,
    () => fetch('https://example.com/feedbacks'),  //Simple fetch function
    {
      ...options
    }
  );

// components/SomeComponent.tsx
export const SomeComponent: React.FC<{ hasValidSubscription: boolean }> = ({
  hasValidSubscription
}) => {
  const { data: items } = useGetItems({
    enabled: hasValidSubscription //If hasValidSubscription === false, query won't be executed
  });
  return (<>{items}</>);
}

5-2. useMutation onError, onSuccess

useMutation의 경우 만약 에러처리, 성공처리가 모든 컴포넌트에서 같다면 custom option이 불 필요하지만 만약 컴포넌트마다 에러처리, 성공처리를 다르게 해주어야 한다면 custom option으로 지정해줄 수 있습니다.

// hooks/items.hooks.ts
import { useMutation } from "react-query";
import {patchItem} from './items.api';
import { useRenderToastMessage } from '../some-helper-hooks/useRenderToastMessage';

export const useMutateItem = (options?: UseMutationOptions) => {
  const toast = useRenderToastMessage();
  return useMutation(patchItem, {
    onSuccess: () => {
      toast.render({
        theme: 'success',
        message: 'Item successfully modified'
      });
    },
    onError: () => {
      toast.notify({
        theme: 'error',
        children: 'Could not modify item'
      });
    },
  });
};


// components/SomeComponent.tsx
export const SomeComponent: React.FC = () => {
  const { mutate } = useMutateItem({
   onSuccess: () => {
      toast.render({
        theme: 'success',
        message: 'Item successfully modified'
      });
    },
    onError: () => {
      toast.notify({
        theme: 'error',
        children: 'Could not modify item'
      });
    },
  });

  const { data } = mutate();
  return (<>{data}</>);
}

(+) 실시간..

실시간 업데이트

staleTime: 30000, // 30초 동안 캐시된 데이터를 사용
queryInvalidationInterval: 60000, // 1분마다 서버에 재요청하여 캐시 갱신

vs 소켓

react query deevtool을 보면 다음과 같이 fresh, stale, fetching, inactive라는 상태가 존재합니다.

fresh(:신선한) > 데이터 그대로 사용 가능(현재 DB 저장된 데이터와 같은 데이터) stale(:신선하지 않은) > 데이터 새로 fetching 필요(현재 DB 저장된 데이터와 다른 데이터) inactive > 현재 컴포넌트에서 사용 x

가장 먼저 react query에서 캐시가 유효하다라는 말은 QueryCache 객체의 queries 배열과 queriesInMap 객체에 데이터가 저장되어 있는 상태를 의미합니다.

기본적으로 위의 3가지 상태(fresh, stale, inactive)는 모두 저장은 되어있는 데이터(캐싱 데이터)이며, 아래 2가지의 상황에 따라 상태를 구별한 것입니다.

1. 현재 컴포넌트 사용되는지 유무
2. refectcing이 필요한지

만약 이 캐시가 현재 DB 저장된 데이터와 같아서 그대로 사용 가능한 경우라면 api를 새로 refectcing하지 않아도 되는 fresh 상태를 의미하고, DB 데이터가 새로 업데이트 되어 refectcing이 필요한 stale 상태라고 합니다.

따라서 stale일 경우에 refectcing이 되는데요. 여기서 무조건 stale라고 해서 실시간으로 api가 refectcing 되는 것이 아니라 아래와 같은 상황일 경우 refectcing이 진행됩니다.

• 새로운 Query Instance가 마운트 될 때 (페이지 이동 후 등의 상황)
• 브라우저 화면을 다시 focus 할 때
• 인터넷이 재연결되었을 때
• refetchInterval이 설정되어있을 때

Why

여기서 왜 cache에 더해 여러가지 캐시의 상태들이 필요한지에 대한 의문이 들수 있습니다.

1. UX개선

잘 정리해주신 블로그 덕분에 의문점이 해결되었습니다. 블로그의 내용을 정리하자면 stale상태를 활용한다면 cache를 다시 불러오는 그 비어있는 타임에 loading 페에지가 아닌 stale상태 데이터를 보여줌으로서 사용성을 높이는 목적을 달성할 수 있습니다. (마치 배포할때 블루, 그린과 같은 너낌!)

이미지 출처: https://www.timegambit.com/blog/digging/react-query/03

2. 네트워크 비용 감소

만약 아래와 같은 경우에 react query를 사용하지 않는다면 불필요한 네트워크 비용이 발생할 수 있습니다.

• api에서 불러온 후 바뀌지 않는 데이터
• post, put, delete가 발생한 경우에만 refetcing 필요
• 변경사항을 네트워크 요청 없이 직접 수정해줄 수 있는 경우

따라서 이러한 경우 react query의 여러가지 설정을 적절히 사용해준다면 네트워크 비용을 크게 감소시킬수 있습니다.

How

1. Time 설정

📌 staleTime

fresh에서 stale로 가는 시간(api 호출을 n초 있다가 다시 해)

📌 cacheTime

inactive가 된 후 메모리에 남아있는 시간(이 시간이 지나면 가비지 컬렉터에 의해 제거됨)

2. default 설정

QueryClient의 defaultOptions에 staleTime과 cacheTime 지정해줄수 있습니다.

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60,
      cacheTime: 1000 * 60 * 5,
    }
  },
});

const App = ({ Component, pageProps }: AppProps) => {
  return (
    <QueryClientProvider client={queryClient}>
      <Component {...pageProps} />
    </QueryClientProvider>
  );
};

3. 상황별 설정

📌 api에 호출이 필요하지만 최초 호출 후 바뀌지 않는 정적 데이터

staleTime, cacheTime을 Infinity로 지정

📌 post, put, delete 할때만 다시 호출이 필요한 경우

invalidateQueries() 메서드 활용 invalidateQueries 메서드는 캐싱된 쿼리를 무효화하는 메서드입니다.

어떤 상태의 데이터를 무효화 할것인지는 refetchType(active, inactive, all, none)으로 지정해줄수 있습니다. 기본값은 active입니다.

useMutation(api.commonService.postLikeData, {
  onSuccess: (data) => queryClient.invalidateQueries(['getVideoData', data.newsId]);
}

install

npm i react-query

queryClient생성 후 QueryClientProvider로 감싸기

import "./App.css";
import Products from "./pages/Products";
import {
  QueryClient,
  QueryClientProvider,
} from 'react-query'


function App() {
  const queryClient = new QueryClient()

  return  <QueryClientProvider client={queryClient}><Products /></QueryClientProvider>;
}

export default App;

Component에서 사용하기

기존 useEffect와 단순 await, async와 비교해봅시다!

1. get: useQuery

const Products = () => {
  const [products, setProducts] = useState<Product[]>([]);

  const query = useQuery('products', getProduct);
  console.log(query);

  //기존 코드
  // const fetchPosts = async () => {
  //   const res: AxiosRequestConfig<{ products: Product[] }> = await getProduct();

  //   setProducts(res?.data?.products ?? []);
  // };

  // useEffect(() => {
  //   fetchPosts();
  // }, []);

Devtools 사용하기

App.tsx에 ReactQueryDevtools을 import해주어 사용합니다.

import "./App.css";
import Products from "./pages/Products";
import { QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from 'react-query/devtools'

function App() {
  const queryClient = new QueryClient();

  return (
    <QueryClientProvider client={queryClient}>
      <ReactQueryDevtools initialIsOpen={false} />
      <Products />
    </QueryClientProvider>
  );
}

export default App;

서버에서 데이터를 많이 다루어야 하는 어플리케이션에서는 axios를 많이 활용해야 합니다. 만약 axios를 모듈화 하지 않는다면 반복적인 코드를 작성해야 하고 일관되지 않는 코드를 작성할 수 있습니다.

또한, axios의 타입을 잘 활용한다면 자동 완성 기능과 사이드 이펙트를 줄일 수 있습니다.

How

1. 폴더 구조

저는 기본적인 보일러 플레이트 코드와 공통적인 타입 지정 부분은 config.ts에 작성해주었습니다. 그리고 실제 api는 api 폴더 하위에 도메인 별로 파일을 만들어서 작성했습니다.

2. config.ts

저는 axios의 baseurl, timeout, header등을 활용하여 create하고 get, post, put, delete 등의 타입을 지정해주는 부분을 config.ts에 작성했습니다.

import axios, { Axios } from "axios";
import { AxiosRequestConfig, AxiosResponse } from 'axios';

const server: Axios = axios.create({
    // baseURL: '',
    // headers: {},
    // timeout: 1000,
});

const http = {
    get : <T = any, R = AxiosResponse<T>, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R> => {
        return server.get(url, config);
    },
};
export default http;

타입은 /node_modules/axios/index.d.ts를 참고하였습니다.

3. api 요청

그리고 실제 api를 요청하는 url, config 등은 도메인 별로 파일을 나누어 작성해주었습니다.

import http from "../config"

export const getProduct = () => {
    return http.get('/products');
}

4. Component 활용

그리고 실제 Compoenet에서는 아래와 같이 활용하였습니다.

const Products = () => {
  const [products, setProducts] = useState<Product[]>([]);

  const fetchPosts = async () => {
    const res: AxiosRequestConfig<{ products: Product[] }> = await getProduct();

    setProducts(res?.data?.products ?? []);
  };

  useEffect(() => {
    fetchPosts();
  }, []);
...

mock service worker는 Service Worker를 사용하여 네트워크 호출을 가로채는 API 모킹(mocking) 라이브러리입니다. 한마디로 브라우저를 속여 마치 백엔드 API인척 가짜 데이터를 제공해줄 수 있는 라이브러리입니다.

이미지 출처

Why

1. 빠른 개발

프론트엔드 개발은 프로세스 순서의 가장 마지막에 위치해 있습니다. 그로인하여 실제 개발 프로젝트에서 기획, 백엔드 개발이 완료될때까지 대기하다가 개발이 뒤로 밀려 완성도가 낮아지는 경우가 존재합니다.

그런데 만약 프론트엔드 개발자가 미리 api를 개발하고 테스트 할 수 있는 환경이 제공된다면 어떨까요? 만약 백엔드 개발과 프론트 개발이 병렬적으로 협업하게 되어 의존성을 떨어트리게 된다면 빠른 개발이 가능한 환경이 제공될 것입니다. 이는 개발의 완성도를 높일 수 있는 발판이 될 것입니다.

2. 테스트 신뢰도

테스트를 할때 발생하는 외부 요인(네트워크, 서버)들이 존재합니다. 이는 테스트의 일관성과 신뢰도를 떨어트릴수 있습니다.

그에 반해 msw는 외부 요인의 영향을 받지 않기 때문에 일관된 테스트를 진행할 수 있습니다.

How

1. Install

npm install msw --save-dev

2. 요청 가로채기

request에 따른 mock response를 보내기 위해서는 먼저 요청을 intercept 해야 합니다. 여기서 필요한 것은 predicate, resolver 함수 입니다. 이 두가지를 msw에서 제공하는 http 함수에 알맞게 보내면 됩니다.

2-1. 하나씩 보내기

import { http, HttpResponse } from 'msw'

http.get(
  '/pets',
  ({ request, params, cookies }) => {
    return HttpResponse.json(['Tom', 'Jerry', 'Spike'])
  }
)

2-2. 한번에 여러개 보내기

export const handlers = [
  http.get('/pets', petsResolver),
  http.post('https://api.github.com/repo', repoResolver),
]

path 관련된 정규식 사용 가능합니다.

// Intercept all GET requests to "/user":
// - GET /user
// - GET /user/abc-123
// - GET /user/abc-123/settings
http.get('/user/*', userResolver)

3. 응답 보내기

3-1. staus code + text

import { http, HttpResponse } from 'msw'

export const handlers = [
  http.get('/apples', () => {
    return new HttpResponse(null, {
      status: 404,
      statusText: 'Out Of Apples',
    })
  }),
]

3-2. Mocking headers

import { http, HttpResponse } from 'msw'

export const handlers = [
  http.post('/auth', () => {
    return new HttpResponse(null, {
      headers: {
        'Set-Cookie': 'mySecret=abc-123',
        'X-Custom-Header': 'yes',
      },
    })
  }),
]

3-3. text

import { http, HttpResponse } from 'msw'

export const handler = [
  http.get('/name', () => {
    return new HttpResponse('John')
  }),
]

3-4. json

import { http, HttpResponse } from 'msw'

export const handlers = [
  http.post('/auth', () => {
    // Note that you DON'T have to stringify the JSON!
    return HttpResponse.json({
      user: {
        id: 'abc-123',
        name: 'John Maverick',
      },
    })
  }),
]

실제 적용

1. 설치와 init

msw를 설치한 후 브라우저 service worker를 등록해주기 위해서는 init이 필요합니다.

npm install msw --save-dev
npx msw init public/ --save

init 명령어를 실행하면 public 폴더 하위에 mockServiceWorker.js 파일이 자동 생성됩니다.

2. 필요한 파일 만들기

msw는 hanlders를 만들고 browser에 setup 해주고 setup한 server를 start 해주는 과정이 필요합니다. 이를 위해서 server(mocks)폴더에 browser, handlers 파일을 만들어줍니다.

3. handlers 작성

아주 간단하게 products를 가져오는 handler를 생성하고 handlers에 포함시켜줍니다.(모듈화 안한 코드)

import { http, HttpResponse } from "msw";

interface Product {
  id: number;
  brand: string;
  name: string;
  price: number;
  rate: number;
  review: number;
}

const products: Product[] = [
  {
    id: 1,
    brand: "LG전자",
    name: "LG스타일러 5벌+1벌 S5MBAUE 블랙미러+실내제습",
    price: 1235440,
    rate: 19,
    review: 344,
  },
  {
    id: 2,
    brand: "아엠홈",
    name: "비침없는 도톰 레이스/쉬폰커튼(나비주름/핀형/봉집)",
    price: 41600,
    rate: 40,
    review: 31258,
  },
  {
    id: 3,
    brand: "동원",
    name: "동원참치 85g*12캔 3종 (라이트스탠다드/고추/콘참치)",
    price: 17980,
    rate: 25,
    review: 4475,
  },
  {
    id: 4,
    brand: "LG전자",
    name: "LG 디오스 식기세척기 오브제컬렉션 DUBJ2EAL",
    price: 929900,
    rate: 26,
    review: 250,
  },
  {
    id: 5,
    brand: "LG전자",
    name: "비스포크 WF24B9600KE+DV20B9760CE 오토오픈도어",
    price: 2242719,
    rate: 7,
    review: 22,
  },
];

const productsResolver = () => {
  return HttpResponse.json({ products });
};

export const handlers = [http.get("/products", productsResolver)];

4. borwers에 setUp 해주기

위에서 작성한 handlers를 setup 해줍니다.

import { setupWorker } from 'msw/browser'
import { handlers } from './handlers';

export const server = setupWorker(...handlers);

Service Worker는 브라우저에만 사용할 수 있습니다. 따라서 jest와 같이 node에서 사용하려면 따로 server setupServer함수를 작성하여 setup해주어야 합니다.

5. start해주기

main.tsx에서 setUp한 Worker를 불러온 후 start 해줍니다.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";

const root = ReactDOM.createRoot(document.getElementById("root")!);

const mock = async () => {
  const { server } = await import("./server/browser");
  server.start();
};

mock().then(() => {
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
});

정상적으로 mockServer가 실행되었다면 크롬 개발자도구에 Mocking enabled. 라는 글자를 확인 할 수 있습니다.

6. axios를 통해 mock api 호출하기

import Typography from "../atoms/Typography";
import colors from "../atoms/Color";
import { useEffect, useState } from "react";
import axios from "axios";

interface Product {
  id: number;
  brand: string;
  name: string;
  price: number;
  rate: number;
  review: number;
}

const Products = () => {
  const [products, setProducts] = useState<Product[]>([]);

  const fetchPosts = async () => {
    const res = await axios({
      method: "get",
      url: "/products",
    });

    setProducts(res.data.products);
    console.log(res);
  };

  useEffect(() => {
    fetchPosts();
  }, []);

  return (
    <section
      css={{
        border: `1px solid ${colors["black"]}`,
        display: "grid",
        gridTemplateColumns: "repeat(4, 23%)",
        justifyContent: "space-between",
      }}
    >
      {products.map((product: Product) => (
        <div
          key={product.id}
          css={{
            display: "flex",
            flexDirection: "column",
            alignItems: "start",
          }}
        >
          <Typography variant="h4" color="gray1">
            {product.brand}
          </Typography>
          <Typography variant="h2">{product.name}</Typography>
          <div>
            <Typography variant="h1B" color="primary">
              {product.rate}
            </Typography>
            <Typography variant="h1B">{product.price}</Typography>
          </div>
          <Typography variant="h4B" color="gray2">
            {`리뷰 ${product.review}`}
          </Typography>
        </div>
      ))}
    </section>
  );
};

export default Products;

css를 모듈화 하는 방법

• 장점: 이름이 중복되어도 scope를 지역적으로 제한하여 번들링 한 후에는 겹치지 않음
• 단점: 별도로 많은 CSS 파일 필요

  CSS 전처리기 활용(SCSS)

CSS-in-JS

javascript 안에서 css를 정의하는 방법입니다. 코드를 구성하는 더 나은 방법으로는 코로케이션 이 있습니다. 이는 단일 컴포넌트에 관련된 모든 것을 같은 위치에 두는 것입니다. CSS-in-JS는 이러한 코로케이션 방법을 사용할 수 있습니다. 가장 유명한 CSS-in-JS 라이브러리에는 styled-components, emotion 가 있습니다.

코로케이션에 대해 자세히 알아보기: https://kentcdodds.com/blog/colocation

emotion

emotion의 사용 방법을 간단하게 살펴보려고 합니다.

css함수

emotion은 css함수를 사용합니다. import를 해주고 css Prop(css 함수)를 사용하기 위한 준비를 해줍니다.

// JSX Pragma
/** @jsxImportSource @emotion/react */
//css 함수
import { css } from '@emotion/react';

css Prop을 사용하는 방법

1. babel preset

   {
   "presets": ["@emotion/babel-preset-css-prop"]
   }

2. jsx pragma

   /** @jsx jsx */
   import { jsx } from '@emotion/react'

3. 플러그인

위 세가지의 방법중 하나를 선택해서 css prop을 사용할 준비를 합니다. 두가지 모두 React.createElemet 대신 emoion's jsx 함수로 컴파일 되도록 해줍니다.

https://emotion.sh/docs/css-prop#babel-preset

기본 사용법

html에 태그에 css 속성을 넘기고 해당 속성에 css 함수의 결과값을 넘깁니다.

html에 태그에는 css 속성이 없지만 위에서 React.createElemet 대신 emoion's jsx 함수로 컴파일 되도록 해주었기 때문에 사용 가능

css 함수의 결과값을 넘기는 방법은 2가지가 있습니다.

1. css 함수에 문자열 넘기기

function App() {
    return <div css={css`
        backgroud: yellow;
    `}>노란색 영역</div>
}

2. css 함수에 객체 넘기기(css 함수 생략 가능)

function App() {
    return <div css={css({
          backgroud: "yello";
      })}>노란색 영역</div>
}
//css 함수 생략
function App() {
    return <div css={{
          backgroud: "yello";
      }>노란색 영역</div>
}

스타일을 지정할때 보통 css에서 사용하는 케밥 케이스(rocket-launch-duration)가 아닌 자바스크립트에서 사용하는 카멜 케이스(rocketLaunchDuration) 사용

가변 스타일링1 : 하나의 속성값

1. 기본적인 버튼 스타일

   const Button({children}) => {
    return (
        <button css={
          다른 스타일...
        }>
            {children}
        </button>
    );
   }
   

function App() { return Button; }

export default App;

2. 컬러가 정의되어 있는 객체 추가(하나의 속성값)
```jsx
const colors = {
    default = "rgb(36, 41, 47)",
    danger = "rgb(207, 34, 46)",
    outline = "rgb(9, 105, 218)",
}

const Button({children}) => {
    return (
        <button css={
          다른 스타일...
        }>
            {children}
        </button>
    );
}

function App() {
    return <Button>Button</Button>;
}

export default App;

3. Button 컴포넌트의 props 추가(아무 이름)

   const colors = {
    default = "rgb(36, 41, 47)",
    danger = "rgb(207, 34, 46)",
    outline = "rgb(9, 105, 218)",
   }
   

const Button({children, variant="defualt"}) => { return ( <button css={ 다른 스타일... }> {children} ); }

function App() { return ( Button; Button; Button; ); }

export default App;

4. 받은 props 속성을 스타일에 적용
```jsx
const colors = {
    default = "rgb(36, 41, 47)",
    danger = "rgb(207, 34, 46)",
    outline = "rgb(9, 105, 218)",
}

const Button({children, variant="defualt"}) => {
    return (
        <button css={
          다른 스타일...,
          color: colrs[variant],
        }>
            {children}
        </button>
    );
}

function App() {
    return (
      <Button variant="defualt">Button</Button>;
      <Button variant="danger">Button</Button>;
      <Button variant="outline">Button</Button>;
    );
}

export default App;

가변 스타일링2 : 여러개의 속성값

1. 기본적인 버튼 스타일

   const Button({children}) => {
    return (
        <button css={
          다른 스타일...
        }>
            {children}
        </button>
    );
   }
   

function App() { return Button; }

export default App;

2. 사이즈 정의되어 있는 객체 추가(여러개의 속성)
```jsx
const sizeStyles = {
  sm: {
      fontSize: '12px',
    padding: '3px 12px'
  },
  md: {
      fontSize: '14px',
    padding: '5px 16px'
  },
  lg: {
      fontSize: '16px',
    padding: '9px 20px'
  }
}

const Button({children}) => {
    return (
        <button css={
          다른 스타일...
        }>
            {children}
        </button>
    );
}

function App() {
    return <Button>Button</Button>;
}

export default App;

3. Button 컴포넌트의 props 추가(아무 이름)

   const sizeStyles = {
   sm: {
      fontSize: '12px',
    padding: '3px 12px'
   },
   md: {
      fontSize: '14px',
    padding: '5px 16px'
   },
   lg: {
      fontSize: '16px',
    padding: '9px 20px'
   }
   }
   

const Button({children, size='sm'}) => { return ( <button css={ 다른 스타일... }> {children} ); }

function App() { return ( Button; Button; Button; ); }

export default App;

4. 받은 props 속성을 스타일에 적용(여러개의 속성이 객체로 담겨있기 때문에 `스프레드 연산자 사용`)
```jsx
const sizeStyles = {
  sm: {
      fontSize: '12px',
    padding: '3px 12px'
  },
  md: {
      fontSize: '14px',
    padding: '5px 16px'
  },
  lg: {
      fontSize: '16px',
    padding: '9px 20px'
  }
}

const Button({children, size="sm"}) => {
    return (
        <button css={
          다른 스타일...,
          ...sizeStyles[size]
        }>
            {children}
        </button>
    );
}

function App() {
    return (
      <Button size="sm">Button</Button>;
      <Button size="md">Button</Button>;
      <Button size="lg">Button</Button>;
    );
}

export default App;

Bootstrap, Material, Tailwind

1. 초기 구축 서비스에서 설계를 잘 하고 싶다.
2. 설계가 잘 된 프로젝트에 투입 되었을때 잘 흡수하고 스며들고 싶다.

내가 하고 싶은 설계는 재사용성을 높여 협업에 도움을 주어서 개발 속도를 향상시키고, 추후에 유지보수 비용도 줄일 수 있는 설계를 하고 싶다.

Why

내가 이런 생각을 하게 된 계기는 다음과 같다.

1. 처음 내가 작성한 코드를
2. 추후에 팀원이 비슷하다며 로직과 디자인을 추가
3. 다른 팀원도 비슷하다며 로직과 디자인을 추가
4. 갑자기 내 코드가 작동하지 않음
5. 내가 작성했지만 현재는 알아볼 수 없는 복잡한 컴포넌트가 됨
6. 작성한 팀원에서 가서 물어보고 다시 해석해야 해서 간단한 로직이나 디자인 추가에도 많은 시간이 듬

이런 경험을 하면서 만약 설계를 처음부터 잘 했다면 정말 좋았겠다 라는 생각을 하게 되었고, 설계가 정말 중요하다는 사실을 깨달았다.

How

설계 기법의 종류(디자인 패턴, 아키텍쳐 등등)

설계 기법은 정말 다양하다. 심지어 유명한 디자인 패턴이나 설계 아키텍쳐도 사용하는 기업이나 개인마다 조금씩 의미를 다르게 두어 사용하거나 프로젝트의 성향에 따라 다르게 사용한다.

MVC, MVVM, Container-Presenter, Props Drilling과 FLUX 패턴, Atomic, VAC 패턴 Headless Component, Compound Component, Custom Hook

정말 다양하지만 이러한 패턴들은재사용성을 높이고 기능과 디자인을 분리하는 목적을 추구하고 있다는 것이 공통점이다.

따라서 우선 특정 디자인 패턴, 아키텍쳐 패턴을 사용하겠다는 생각보다는 실제 예시에서 어떻게 재사용성을 높이고 디자인과 기능을 분리할지에 대해 먼저 생각해보았다.

1. 재사용성을 높이자!

예를 들어 위와 같은 디자인을 받았다고 가정해보자! 가장 먼저 해당 디자인의 기본 요소(Atoms)를 생각해보면 Input, Button, Text이다. 이렇게 기본 요소를 분리하고 이들을 조합하여 사용한다면 재사용성을 높일 수 있을것이다.

따라서 재사용성을 높이기 위해서는 Atomic Design 패턴을 선택했다.

2. 조합방식에 대해 고민해보자!

공통되는 기능과 디자인

• input의 기본 디자인과 기능

다른 디자인

• 하단 text(validation)
• 오른쪽 button
• input내부에 value옆에 붙은 문자열(원)

다른 기능

• 버튼 클릭 기능
• validation 체크 기능

이처럼 공통되는 기능이 있으면서 조금 다른 디자인과 기능을 가진 컴포넌트들의 재사용성을 높이기 위해서는 molecules으로 잘 조합하고 프로젝트 특징에 따라 cutom hook이나 compound component를 사용하면 좋을꺼 같다.

3. 정리해보자면

Atomic으로 나누기();
customHook으로 기능 분리();

if(조합해야 하는 경우의 수가 많음 || 반복적으로 쓰이는 횟수가 애매) {
    compound component로 조합 준비();
}

molecules 만들기();

Result

위의 방법으로 설계를 한다면 전에 구현했던 방식보다 더 좋은 프로젝트 유지보수가 될꺼 같다.

아직 완벽한 설계방식은 아니지만 내가 추구하는 목적에 한발짝씩 다가가야 겠다.

추구하는 목적: 재사용이 높으면서 다양한 비즈니스 요구에도 쉽게 적용할 수 있는 구조

Why

디자인 시스템이 가지는 이점은 다음과 같습니다.

1. 재사용성
2. 일관성
3. 확장성, 빠른 신규 개발 가능(빠른 성장 가능)

How

1. 디자인 원칙 정하기

디자인 시스템을 구축하기 위해서는 전체적인 디자인 원칙을 잡아야 합니다. 이 원칙을 기반으로 전체적인 서비스 디자인의 일관성을 유지하여 디자인 시스템의 재사용성이 높아질 수 있는 방향으로 나아가야 합니다.

여기서 중요한점은 모든 도메인이나 상황에 쉽게 활용 할 수 있는 디자인 에셋을 만드는 것이 중요합니다. 뿌리가 깊은 나무가 흔들리지 않는 것처럼 잘 만든 디자인 에셋이 효율적인 디자인 시스템을 만들 수 있습니다.

2. 순서대로 디자인 시스템 구축하기

위에서 컨셉을 정했다면 하나씩 디자인 시스템을 구축합니다.

1. UI 기본 요소 : 컬러 팔레트, 텍스트 스타일, 크기, 아이콘 등등
2. UI 구성 요소 : 버튼, 칩, 컨트롤, 인풋 등등

UI 구성 요소를 활용하여 모든 도메인이나 상황에서 자주 사용되는 더 큰 요소도 만들어 재사용하면 좋다. atomic 디자인 패턴으로 생각해봤을때 atomics, molecules, organisms, template 중에서 어디까지 디자인 시스템으로 만들지에 대해 고민해봐도 좋을꺼 같다.

Result

빠르게 변화하고 빠르게 성장하는 시대에서 빠른 개발은 큰 무기가 될 수 있습니다. 탄탄한 기반이 다져진 디자인 시스템으로 다양한 프로젝트를 쉽게 만들 수 있다면 무한한 성장이 가능할 것입니다.

참고 자료 : https://medium.com/coupang-engineering/introducing-coupangs-design-system-baeb117949f1

npm create vite 명령어 실행

npm create vite@latest headless-component-app -- --template react

npm install 및 실행

npm install
npm run dev

vite의 다른점

• 무조건 .jsx 확장자를 사용해야 한다.
• index.html이 public폴더에 없고, root로 빠져있다.
• index.js가 아닌 main.jsx를 사용
• server를 실행하기 위해서는 npm run dev를 사용한다.

Vue.js는 하나의 화면에는 실제 수많은 컴포넌트로 설계 되어 구성되어져 있기 때문에 컴포넌트들 간에는 부모 컴포넌트와 자식 컴포넌트의 관계가 존재합니다.

부모-자식 컴포넌트의 관계가 많아질 경우 최상위에 부모 컴포넌트의 state의 값을 변경하기 위해 하위의 있는 자식들은 계속해서 인자로 넘겨 줘야 한다는 꼬리 물기 식의 불필요한 코드가 반복적으로 생길 수 있습니다.

이러한 단점을 보안하기 위해 VUEX, PINIA와 같은 상태 관리 라이브러리가 등장했습니다. 이러한 라이브러리들은 모든 컴포넌트에 대한 중 앙 집중식 저장소 역할을 합니다.

상태관리 라이브러리 비교

vue.js의 상태관리 라이브러리로는 VUEX를 흔히 사용하지만, VueConf Toronto 2021 에서 Vue 의 창시자 Evan You 가 직접 등장해 추천 하는 상태 관리 플러그인을 Vuex 가 아닌 Pinia 로 공표하여 PINIA가 주목받고 있는 추세입니다.

https://npmtrends.com/pinia-vs-vuex

이 둘의 차이점은 크게 3가지로 나눌 수 있습니다.

1. Composition API

첫번째로 pinia에서는 Vue3의 Composition API에 코드 작성 방식을 제공하고 있습니다. 따라서 기능별로 나누어 개발할 수 있기 때문에 좀 더 논리적 관점에서의 개발이 가능하게 됩니다.

1-1. Optional

// stores/list.js
import { defineStore } from "pinia";
export const useListStore = defineStore("list",{ 
  state:()=>({list:[]}),
  actions: {
    addList(param){
      this.list.push(param); 
    }
    //addList: (param) => this.list.push(param);
  }, 
  getters: {
      getAllList(state){ 
        return state.list;
      }
      //getAllList: (state) => state.list
  } 
});

1-2. Composition

// stores/list.js
import { defineStore } from "pinia"; 
import { ref, computed } from "vue";
export const useListStore = defineStore("list", () => { 
  const list = ref([]);
  function addList(param) {
      list.value.push(param);
  }
  const getDataAll = computed(() => list.value);
  return { list, addList, getDataAll };
});

2. 생성 가능한 Store의 갯수

2-1. VueX

어플리케이션의 규모가 커지면 관리해야 할 요소의 성격이 완전히 다른 경우가 종종 생깁니다. VueX는 하나의 Store만 가질 수 있기 때문에 이처럼 성격이 다른 경우에도 하나의 파일에서 관리해야 합니다.

이때 VueX에서는 namespaced modules를 이용하여 폴더를 구분한 후 성격에 따른 state와 method를 분리하여 구현할 수 있습니다. 아래와 같 이 폴더를 구분할 경우 폴더 이름이 곧 Vuex 네임스페이스가 됩니다.

namespace를 생성한후에 실제 컴포넌트에서는 다음과 같이 사용합니다.

<template>
  <Home />
</template>
<script>
    import { mapMutations, mapState } from "vuex";
    export default { 
      name: "MainPage", 
      components: {
          Home: () => import("@/components/pages/home"), 
      },
      methods: {
          //첫번째 인자에 namespace 이름을 넘겨준다. 
        ...mapMutations("ansData", ["mutateANSData"]),
      }, 
    };
</script>

2-2. pinia

pinia는 이와 비교하여 여러 개의 store를 가질 수 있기 때문에 namespaced modules 역시 사용하지 않습니다. 이처럼 Vuex와 비교했을 때 Pinia는 간결한 구조를 가지지만 namespaced 되어 독립된 store 객체를 가진다는 컨셉은 유효합니다

import Vue from "vue";
import { useCartStore } from "./stores/cart"; 
import { useUserStore } from "./stores/user";

export default defineComponent({ 
  name: "App",
  setup() {
    const user = useUserStore(); 
    const cart = useCartStore();

    function addItemToCart() { 
      cart.addItem(user.name);
    } 
    ...

3. Mutation 유무

3-1. VueX

VueX에서는 Store라는 저장소에 컴포넌트 간 공유할 data 속성인 state를 정의합니다. 이렇게 정의한 state 데이터를 변경할 수 있는 로직을 각각 Component에서 정의할 수도 있지만, 공통되는 로직을 매번 따로 정의할 경우, 가독성이 떨어지고 성능이 떨어질 수 있습니다. 따라서 Mutations, Actions, Getters 를 사용하여 공통으로 사용되는 로직을 한곳에서 관리합니다.

이 3가지는 공통으로 사용되는 로직을 한곳에서 관리한다는 공통점이 가지지만, 아래와 같은 차이점을 가지고 있습니다.

Mutations 의 성격상 안에 정의한 로직들이 순차적으로 일어나야 각 컴포넌트의 반영 여부를 제대로 추적할 수가 있기 때문에 동기적인 작업 만 수행할 수 있습니다. 따라서 비동기적인 로직을 수행하기 위해서는 Action 내부에 Mutations 을 commit하는 등의 작업을 추가로 진행해야 한다.

/* store.js */
import Vue from 'vue' import Vuex from 'vuex'
Vue.use(Vuex);
export default new Vuex.Store({ state: {
count: 0, },
    mutations: {
        increment(state) {
            state.count++;
        },
        decrement(state) {
            state.count--;
} },
    actions: {
      incrementAsync ({ commit }) {
        setTimeout(() => {
          commit('increment')
}, 1000) }
} })

3-2. pinia

pinia에서는 비동기적, 동기적 로직 모두 action에서 수행할 수 있기 때문에 mutations이 없습니다. 따라서 불필요한 코드가 줄고, 좀 더 간결한 코드를 작성할 수 있습니다.

// stores/list.js
import { defineStore } from "pinia";
export const useListStore = defineStore("list",{ state:()=>({count:0}),
actions: {
    incrementAsync () {
        setTimeout(() => {
          state.count++;
        }, 1000)
} }
});

우리 프로젝트에는 Pinia를 도입하기로 결정..!

내가 진행했던 프로젝트에서 Pinia를 도입한 이유를 다시 정리해보면 다음과 같습니다!

1. Composition API 활용: Pinia는 Vue 3의 Composition API를 적극적으로 활용하여 코드를 작성할 수 있게 해줍니다. 이는 기능을 논리적으로 나누어 개발할 수 있게 하며, 더 직관적이고 효율적인 코드 작성이 가능하게 합니다.

2. 다중 Store 지원: Pinia는 여러 개의 Store를 가질 수 있어서 애플리케이션 규모가 크고 성격이 다른 부분을 더 효과적으로 관리할 수 있습니다. 이는 Vuex에서는 namespaced modules를 사용해야 하는데, Pinia에서는 별도의 네임스페이스 없이 여러 개의 독립된 Store를 사용할 수 있습니다.

3. 간결하고 명확한 코드: Pinia는 비동기 및 동기적 로직을 모두 처리할 수 있는 actions를 제공하며, mutations가 없어서 코드가 더 간결해지고 가독성이 향상됩니다. 이는 특히 비동기 작업을 처리할 때 불필요한 코드를 줄일 수 있게 도와줍니다.

이로 인해 Pinia를 도입함으로써 프로젝트의 유지보수성과 확장성을 향상시키며, 개발 생산성을 높일 수 있었습니다.

const FetchDate = () => {
    const [isLoading, setIsLoading] = useState(true);
      const [isError, setIsError] = useState(false);
      const [user, setUser] = useState(null);


      //당연한 소리겠지만 민약에 return을 하게 되면 더이상 밑의 코드가 실행되지 않기 때문에 아래 useEffect는 실행되지 않습니다!
      if(isLoading){
        return <h2>Loding...</h2>;
    }

      //최초 랜더링때 fectch data 불러오기
      useEffect(()=>{
        const fetchUser = async() => {
            try{
                const resp = await fetch(url);
                  //fetch에서는 404를 에러로 판단하지 않음..
                  if(!resp.ok) {
                    setIsError(true);
                      setIsLoading(false);
                      return;
                }
                  const user = await resp.json();
                  setUser(user);
            } catch (error) {
                setIsError(true);
            }
            setIsLoading(false);
        }
        fetchUser();
    }, []);

      //조건부 랜더링
      if(isLoading){
        return <h2>Loding...</h2>;
    }
      if(isError){
        return <h2>There was an error...</h2>;
    }

      //일반적인 return(조건에 걸리지 않을때!)
      return (
        <section>
            <h2>{user.name}</h2>
          </section>
    )
}

mounted, unmounted 일때 함수 실행

기본 예제

const ToggleButton = () => {
    const [toggle, setToggle] = useState(false);

      return (
        <div>
            <button onClick={()=>setToggle(!toggle)}>
              toggle component
            </button>
            {toggle && <RandomComponent />}
          </div>
    );
}

const RandomComponent = () => {
      //useEffect에 의존성 배열은 빈 배열로 주면 최초 랜더링될때만 함수가 실행된다.
    useEffect(()=>{
          const intId = setInterval(()=>{
              console.log('hello from interval');
        }, 1000);

          //useEffect 내부에서 리턴한 콜백은 언마운트시 실행된다.
          return () => {
            clearInterval(intId);
        }
    }, []);

      return <h1>Random Component</h1>;
}

export default ToggleButton;

window eventListner

const RandomComponent = () => {
    useEffect((()=>{
        const someFunc = () => {
            ...
        }
        //만약 이벤트 등록만 하게 되면 해당 함수가 계속해서 쌓기게 된다.
        window.addEventListner('scroll', someFunc);
        //그렇기 떄문에 unmounted 할때 반드시 remove 해줘야 한다.
        window.removeEventListner('scroll', someFunc);
    }), []);

    return <h1>hello</h1>;
}

Docs 읽어보기

https://react.dev/learn/you-might-not-need-an-effect

저는 react docs의 reference를 참조하였습니다.

Hook

먼저 전체적인 hook의 공통점에 대해 살펴보겠습니다.

• hook은 반복문이나 조건절에서 call 할 수 없습니다. 반드시 컴포넌트의 top level에서 call 해야 합니다.

useState

useState는 컴포넌트의 state를 추가할 수 있게 해주는 React의 Hook입니다. 기본 형태는 아래와 같습니다.

const [something, setSomething] = useState(initialState);

set function이란 위의 예시에서 setSomthing처럼 useState의 return값을 의미합니다. 이 함수는 state를 업데이트 시켜주고 리랜더링을 트리거 합니다.

📌 useState Deep Dive

1️⃣ set function은 반드시! 다음 랜더에 state를 업데이트 해줍니다.

만약에 같은 set function에서 state를 읽으려고 한다면 방금 업데이트 한 값이 아닌 이전 값이 읽어지게 됩니다. 그 이유는 react는 set function을 모든 이벤트 핸들러가 끝난후 일괄 수행(batch) 해주기 때문에 이미 실행된 코드(실행 컨테스트에서 push, pop)된 부분에서는 set 함수가 적용되지 않습니다.

function handleClick() {
  console.log(count);  // 0

  setCount(count + 1); // Request a re-render with 1
  console.log(count);  // Still 0!

  setTimeout(() => {
    console.log(count); // Also 0!
  }, 5000);
}

2️⃣ set function 내부에서 updater funtion을 지정해주면 이전값을 반영하여 계산한다.

function handleClick() {
  setAge(age + 1); // setAge(42 + 1)
  setAge(age + 1); // setAge(42 + 1)
  setAge(age + 1); // setAge(42 + 1)
}

function handleClick() {
  setAge(a => a + 1); // setAge(42 => 43)
  setAge(a => a + 1); // setAge(43 => 44)
  setAge(a => a + 1); // setAge(44 => 45)
}

만약 이전 state를 기반으로 set function을 업데이트 해주고 싶다면 set function 내부에 updater function을 넘겨주면 됩니다. 보통 만약 state가 age라면 첫글자인 a를 argument 이름으로 짓는데 prevAge, prevValue 등등 맘대로 지어도 됩니다..!

내부 동작

3️⃣ 만약 같은 값을 update해주면 리랜딩 되지 않습니다.

만약 Object.is 비교로 같은 값을 업데이트 해주게 되면 리액트는 최적화를 위해서 리 랜더링을 스킵합니다.

4️⃣ react는 state 업데이트를 일괄처리 합니다.(batch)

리액트는 중복적인 리랜더링을 방지하기 위해서 모든 event handler가 모두 수행된 후에 set function들을 한번에 수행합니다. (만약 강제로 일찍 업데이트 해야 한다면 flushSync를 사용)

5️⃣ 렌더링 중에 상태를 업데이트 해야 하는 경우!

일반적으로 리액트에서 상태는 이벤트 핸들러나 라이프사이클 메소드를 통해 이루어집니다. 그런데 어떠한 상황에서는 랜더링 중에 상태를 업데이트 해야 하는 경우가 존재합니다.

그 대표적인 예시로 props에 넘어온 값을 상태로 업데이트 해주어야 하는 경우입니다. 이러한 경우 현재 넘어온 props와 현재의 state값을 비교하여 다른 경우(상태를 추척)에 상태를 업데이트 해줍니다.

import { useState } from 'react';

function CounterDisplay({ count }) {
  const [prevCount, setPrevCount] = useState(0);

  if (prevCount !== count) {
    setPrevCount(count);
    console.log(`Count changed from ${prevCount} to ${count}`);
  }

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

이렇게 동작할때에는 React는 해당 컴포넌트의 랜더링을 즉시 취소하고 새로운 상태로 다시 랜더링을 합니다. 그래서 두 번의 완전한 렌더링이 발생하는 것이 아니라, 렌더링이 중간에 중단되고 다시 시작되는 형태입니다.

여기서 주의해야 할 점은 이 패턴이 오동작하거나 무한 루프에 빠질 수 있는 상황이 발생할 수 있으므로, 사용 시에는 신중해야 합니다. 이 패턴은 특별한 상황에서만 필요하며, 일반적인 경우에는 피하는 것이 좋습니다.

6️⃣ 무한 로딩 될 수 있는 코드

const Example = () => {
    const [value, setValue] = useState(0);

      const sayHello = () => {
        console.log('hello');
          setValue(value+1);
    }

    sayHello();
      return (
      <div>
        <h1>value: {value}</h1>
      </div>
    ); 
};

export default Example;

example component내부에서 sayHello함수가 실행되는데 이 함수는 리랜더링 될때마다 실행이 됩니다. 그리고 setState는 리랜더링을 트리거합니다. 따라서 랜더링 될때마다 호출되는 sayHello 내부에 랜더링을 트리거 하는 set function이 존재하면 무한 루프에 빠지게 됩니다.

결론적으로 useState를 사용할때 신경써야할 부분을 정리해보면 아래와 같다

1. Object.is 비교시 같으면 리랜더링이 안된다.
2. set function 내부에서 즉각적으로 상태를 반영해야 한다면 콜백 함수로 작성한다.
3. 무한 루프에 빠지지 않도록 주의한다

자바스크립트 엔진은 싱글 스레드로 동작합니다. 자바스크립트 엔진은 콜스택과 힙으로 구성되어 있습니다. 이렇게 이루어진 엔진은 콜 스택을 통해 요청된 작업을 순차적으로 실행합니다. 결론적으로 자바스크립트 엔진만으로는 비동기 작업을 수행할 수 없습니다.

• 콜 스택: 실행 컨텍스트 스택

• 힙: 객체가 저장되는 메모리 공간(실행 컨테스트에서 참조)

자바스크립트 엔진 구동하는 환경 동작(비동기 🅾️)

따라서 비동기 동작은 자바스크립트 엔진이 구동하는 환경인 브라우저 또는 node.js에서 담당합니다.

브라우저로 예를 들어보면 브라우저는 태스크 큐와 이벤트 루프를 제공합니다.

• 태스크 큐: 비동기 함수가 일시적으로 보관되는 영역

• 이벤트 루프: 콜 스택과 태스크 큐를 반복적으로 확인하는 작업을 함. 콜 스텍이 비었고, 태스크 큐에 함수가 있으면 태스큐에 있는 함수를 콜 스택으로 이동시킨다.

동작 순서 예시

gif: https://talkwithcode.tistory.com/89

1. 서버 가동하는데 오랜 시간이 걸림
2. 느린 피드백(HMR을 사용해도)

그 결과 개발자의 생산성이 현저히 떨어지게 됩니다.

vite가 이전 도구들과 다른점

1. 사전 번들링

기존도구들은 먼저 번들링 된 후에야 서버를 구동할 수 있었습니다. 그로인해서 모듈이 커질수록 낮은 서버 구동 속도를 가지게 됩니다. 이를 개선할 수 있도록 *vite는 사전 번들링을 제공합니다. *

vite는** plain javascript(라이브러리 소스, dependencies)는 사전 번들링 ** 합니다. 이때 esbuild 도구를 사용하는데 이 도구는 Webpack, Parcel과 같은 기존의 번들러 대비 10-100배 빠른 속도를 제공합니다.

출처: https://ko.vitejs.dev/guide/why.html

2. 브라우저에서 지원하는 ES Modules(ESM) 사용

vite는 non-plain javascript(Source code)는 native ESM를 사용한다. 이것은 본질적으로 브라우저가 번들러의 작업의 일부를 차지할 수 있도록 합니다.

native-esm은 중복 import로 인한 중복 네트워크 통신이 발생할 수 있습니다. 이로인하여 여전히 비 효율적인 부분이 있습니다. 이러한 비효율성을 개선하려면 트리 세이킹, 지연 로딩 및 파일 분할 등의 작업이 필요합니다. 이를 위해서는 번들링 과정이 여전히 필요합니다. vite는 이때 rollup을 사용합니다.

vite의 개발환경과 프로덕션 환경에서의 번들링

Vite는 개발과 프로덕션 환경에서 다르게 동작하는데, 이를 통해 개발 중에는 빠른 개발 속도를 유지하면서 프로덕션 환경에서는 최적화된 번들을 생성할 수 있습니다.

1. 개발 환경:

   • 개발 서버에서는 Hot Module Replacement (HMR)을 활용하여 빠른 반복 개발을 지원합니다.
   • 코드는 필요할 때마다 브라우저에서 동적으로 컴파일되고 제공되므로 빠른 개발 환경을 제공합니다.
   • 브라우저가 요청하는 파일이나 모듈이 변경될 때, 필요한 부분만 다시 컴파일되고 갱신됩니다.

2. 프로덕션 환경:

   • 프로덕션 빌드에서는 Vite는 트리쉐이킹(Tree-Shaking)과 같은 최적화 기술을 사용하여 불필요한 코드를 제거하고 최종 번들을 최적화합니다.
   • 코드 분할(Splitting)을 통해 사용되지 않는 코드는 번들에 포함되지 않도록 합니다.
   • 최종 결과물은 프로덕션 환경에 최적화된 작은 번들로 생성됩니다.

개발 환경에서도 Vite는 코드 분할(Code Splitting)을 적극적으로 활용하고, 트리 쉐이킹(Tree-Shaking)과 같은 최적화 기술을 일부 적용합니다. 하지만 이러한 최적화는 주로 프로덕션 빌드에서 더 강력하게 작동합니다.

프론트단에서는 webpack, rollup 등의 모듈 번들러를 사용합니다. 모듈 번들러는 여러 가지 모듈들을 하나의 번들로 묶어서 최적화된 형태로 전송하고, 웹 애플리케이션의 성능을 향상시키는데에 사용됩니다. 모듈 번들러와 관련된 트렌드는 아래와 같습니다.

Esbuild, Rollup 및 Webpack은 모듈 번들러이자 빌드 도구로 사용되며, Parcel, Snowpack, Vite는 주로 빠른 개발 환경을 제공하면서 번들링도 수행하는 도구입니다.

모듈번들러를 사용하면 왜 어플리케이션의 성능이 향상될까?

그렇다면 모듈번들러를 사용하면 왜 어플리케이션의 성능이 향상될까요? 그 이유에 대해 알아봅시다!

1. 네트워크 성능 개선

여러 개의 모듈이나 파일을 별도로 로드하면 각각의 HTTP 요청이 발생하게 되어 네트워크 부하가 발생할 수 있습니다. 번들링을 통해 모듈들을 하나로 묶어 전송하면, HTTP 요청의 수를 줄이고 네트워크 성능을 개선할 수 있습니다.

2. 리소스 최소화

번들러는 불필요한 코드를 제거하고 코드를 압축하여 번들의 크기를 최소화합니다. 이는 브라우저가 더 빨리 번들을 다운로드하고 해석할 수 있도록 도움을 줍니다.

트리 쉐이킹, 압축(UglifyJS, Terser 등과 같은 도구)

3. 모듈 간의 의존성을 파악하여 최적화된 순서 적용

번들러는 모듈 간의 의존성을 파악하고, 이를 고려하여 최적화된 순서로 모듈을 번들로 묶습니다. 이는 브라우저에서 모듈을 효율적으로 로드하고 실행할 수 있도록 돕습니다.

모듈 A:

// 모듈 A
import { foo } from './moduleB';
export function myFunction() {
  return foo();
}

모듈 B:

// 모듈 B
export function foo() {
  return 'Hello from module B';
}

모듈 C:

// 모듈 C
import { myFunction } from './moduleA';
console.log(myFunction());

이 상황에서 번들러는 다음과 같은 순서로 모듈을 번들로 묶을 수 있습니다.

1. 모듈 B 번들링: 모듈 B는 의존성이 없으므로 먼저 번들링됩니다.
2. 모듈 A 번들링: 모듈 A는 모듈 B에 의존하고 있으므로, 번들러는 모듈 B의 번들이 먼저 로드되도록 순서를 조정하여 모듈 A를 번들링합니다.
3. 모듈 C 번들링: 모듈 C는 모듈 A에 의존하고 있습니다. 번들러는 모듈 A의 번들이 먼저 로드되도록 순서를 조정하여 모듈 C를 번들링합니다.

3. 브라우저 캐싱 활용: 번들링된 파일은 하나의 파일로 묶여 있기 때문에 브라우저에서 캐싱을 효과적으로 활용할 수 있습니다. 변경된 모듈만 새로 다운로드하고, 나머지는 캐시를 활용하여 로드할 수 있어 초기 로딩 속도를 개선합니다.

TODO: https://sinnerr0.medium.com/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EB%B2%88%EB%93%A4%EB%A7%81%EC%9D%98-%EC%A7%84%ED%99%94-c951444e5fdf