웹드루아 - 웹 개발자 드루아

이번 프로젝트는 TDD 방식을 진행하기로 결정했고, 이를 설정하기 위해 개념을 먼저 정리하고자 합니다.

TDD란 무엇인가?

TDD는 작성하고자 하는 코드가 어떤 일을 할 것인지 묘사하고 동작을 검증할 수 있는 테스트 코드를 먼저 작성한 후 테스트를 진행하며 개발하는 방법입니다. 이를 도식화하면 다음과 같습니다.

TDD를 통해 코드의 퀄리티를 높일 수 있고, 빠른 피드백을 통해 개발 시간을 단축할 수 있습니다. 또한 문서의 역할을 하는 테스트를 먼저 작성하기 때문에 더 좋능 문서화가 가능합니다.

테스트의 종류

테스트는 단위 테스트, 통합 테스트/스냅샷 테스트, e2e 테스트 이렇게 구분할 수 있습니다.

단위 테스트

함수를 직접 호출해 원하는 리턴값이 나오는지 확인하는 테스트 입니다. 테스트 단위가 작아 매우 빠르게 테스트를 진행할 수 있고, 어느 부분에 문제가 있는지 단번에 찾을 수 있습니다.

통합 테스트/ snapshot 테스트

한 컴포넌트의 UI 및 동작 방식을 테스트합니다. 통합 테스트와 스냅샷 테스트는 살짝의 차이가 있는데요. 하나의 목적을 기준으로 구분된 컴포넌트들이 올바른 동작을 하는지 확인하는 것을 통합테스트라고 하고, 테스트 전 컴포넌트의 스냅샷을 저장해두고 이후 컴포넌트의 마크업 및 스타일이 바뀌지 않는지 확인하는 것을 스냅샷 테스트라고 합니다.

컴포넌트 하나당 하나의 스냅샷 테스트를 구현하는 것이 좋다고 하네용

e2e 테스트

최상위에서 진행되는 테스트입니다. 제작한 프로젝트 전체의 동작 과정에 오류가 없는지 확인하는 테스트이기 때문에 매우 오래 걸리고 디버깅에는 어려운이 있습니다. 하지만 각 컴포넌트 사이의 문제를 파악하고 해결하는데 용이합니다.

TDD를 적용하는 방법

먼저 TDD의 사이클을 다음과 같습니다.

1. 실패하는 테스트 코드를 작성

2. 테스트를 성공하게 하는 코드 구현

3. 리팩토링

하지만 이 내용만으론 어떻게 TDD를 진행해야 하는지 감이 잡히지 않습니다. 이를 조금 더 쉽게 파악할 수 있게 도와주는 로버트 C 마틴의 글은 이렇습니다.

• 실패하는 테스트 없이 코드를 넣지 않기 (테스트 코드 작성 전에는 코드 작성 금지)
• 실패가 생기면 테스트 작성 멈추기 (새로운 테스트를 작성하는 과정에서 지금까지 작성한 테스트 중 실패가 발생한다면 새로운 테스트 작성을 멈추기 해결하기)
• 실패한 테스트를 넘기면 즉시 코딩 멈추기(테스트 실패 상태에서 코드를 계속 작성하는 것은 금지되고, 실패한 테스트를 해결할 때까지 코딩을 멈추기)
• 리팩토링 이후 반복
• 한 사이클은 10~60초

한 사이클을 굉장히 빨리 돌려야 한다는 것에 놀랐습니다. 즉 테스트를 가장 작게 넣어서 하나씩 빠르게 해결하며 개발하는 것이 좋은 TDD 방식 중 하나라는 것이죠.

TDD 시작 전 다음 마음가짐을 가지고 시작하는게 좋다고 합니다.

• 최소 단위 테스트 : 테스트는 가장 작게 넣어야 합니다.
• 테스트 대상의 고립 : 테스트 대상은 다른 컴포넌트에 의존성이 없어야 합니다.
• 테스트의 문서 역할 : 다른 문서가 없어도 테스트를 읽으면 우리의 코드를 다른 개발자가 바로 쓸 수 있도록 작성해야 합니다.

이제 적용 예시를 알아보면 좋을것 같습니다.

TDD 적용 예시

프로젝트에서 검색 기능을 구현하고 해당 기능을 TDD 방식으로 개발해봅시다.

1. 요구사항 분석 및 테스트 케이스 정의

요구사항 :

• 사용자는 검색 바에 검색어를 입력할 수 있어야 합니다.
• 사용자가 검색어를 입력하면 해당 검색어에 맞는 프로그램 목록이 표시되어야합니다.

테스트 케이스 :

1. 검색 바가 렌더링 되어야 합니다.
2. 검색어를 입력할 수 있어야 합니다.
3. 검색어 입력 시, 프로그램 목록이 필터링 되어야 합니다.

2. 테스트 코드 작성 (실패 상태)

SearchPage 컴포넌트가 있다 가정하고 테스트를 작성합니다.

// pages/SearchPage/SearchPage.test.tsx

import React from 'react';
import {render, screen, fireEvent} from '@testing-library/react';
import '@testing-library/jest-dom';
import SearchPage from './SearchPage';

describe('SearchPage 테스트', () => {
	test("검색 바가 렌더링되어야 합니다", ()=>{
    	render(<SearchPage/>); // 페이지 렌더링
    	const searchInput - screen.getByPlaceholderText(/search/i) 
        // search가 포함된 placehoder를 가진 요소 불러오기
    	expect(searchInput).toBeInTheDocument(); // 불러온 요소가 존재하는지 확인
    });
    
    test("검색어를 입력할 수 있어야 합니다", () => {
    	render(<SearchPage/>);
    	const searchInput = screen.getByPlaceholderText(/search/i);
    	fireEvent.change(searchInput, { target: { value: 'React' } }); // 검색 바에 React 입력
    	expect(searchInput).toHaveValue('React'); // React 검색 값을 가지고 있는지 확인
    });
    
    test("검색어 입력 시, 프로그램 목록이 필터링되어야 합니다", () => {
    	render(<searchPage/>);
        const searchInput = screen.getByPlaceholderText(/search/i);
        fireEvent.change(searchInput, {target: {value: 'React'}});
        
        // 필터링된 프로그램 목록이 화면에 표시되어야 함
        const filterProgram - screen.getByText(/React Program/i/);
        expect(filterProgram).toBeInTheDocument();
    });
});

3. 기능 구현 : 테스트가 성공하도록 기능 코드를 작성합니다.

// pages/SearchPage/SearchPage.tsx

import React, { useState } from 'react';
import ProgramList from '../../components/ProgramList/ProgramList';

const SearchPage = () => {
  const [query, setQuery] = useState('');

  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    setQuery(e.target.value);
  };

  return (
    <div>
      <h1>Program Search</h1>
      <input
        type="text"
        placeholder="Search"
        value={query}
        onChange={handleSearch}
      />
      <ProgramList query={query} />
    </div>
  );
};

export default SearchPage;

프로그램을 보여주는 ProgramList 컴포넌트도 만들어 줍시다.

// components/ProgramList/ProgramList.tsx

import React from 'react';
import { usePrograms } from '../../hooks/usePrograms';

const ProgramList = ({ query }: { query: string }) => {
  const { data: programs, isLoading, error } = usePrograms();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error fetching programs</div>;
  }

  const filteredPrograms = programs.filter((program: any) =>
    program.name.toLowerCase().includes(query.toLowerCase())
  );

  return (
    <ul>
      {filteredPrograms.map((program: any) => (
        <li key={program.id}>{program.name}</li>
      ))}
    </ul>
  );
};

export default ProgramList;

이렇게하여 모든 테스트를 통과하게 만들어 줍니다. jest --watchAll을 통해 코드를 저장할 때마다 테스트할 수 있도록 해놓고 해야합니다.

4. 리팩토링

코드를 개선하고 중복을 제거하는 리팩토링을 수행합니다.

위의 내용을 생가해봤을때, 검색 입력 처리 로직을 useSearch 커스텀 훅으로 추출할 수 있습니다.

// src/hooks/useSearch.ts
import { useState } from 'react';

export const useSearch = () => {
  const [query, setQuery] = useState('');

  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    setQuery(e.target.value);
  };

  return { query, handleSearch };
};

// pages/SearchPage/SearchPage.tsx
import React from 'react';
import ProgramList from '../../components/ProgramList/ProgramList';
import { useSearch } from '../../hooks/useSearch';

const SearchPage = () => {
  const { query, handleSearch } = useSearch();

  return (
    <div>
      <h1>Program Search</h1>
      <input
        type="text"
        placeholder="Search"
        value={query}
        onChange={handleSearch}
      />
      <ProgramList query={query} />
    </div>
  );
};

export default SearchPage;

이렇게 한 사이클을 돌렸습니다.

이후 CI/CD 파이프라인에 테스트를 추가하여 코드 변경 시 자동으로 테스트를 실행하고 오류를 알려줄 수 있도록 하면 더 좋습니다.

이를 기반으로 저도 실제 프로젝트에 적용해 볼 예정이고, 그 과정도 추후에 작성하겠습니다. 감사합니다.

 안녕하세요! 정말 오랜만에 포스팅을 하네요..하핳 취업 준비하면서 과제도 있고, 면접도 계속 보러 다니느라 적을 시간이 많이 없었습니다ㅠㅠ 결과가 좋진 않았지만..어쨌든 다시 일주일에 두 번 정도씩은 꾸준하게 포스팅할 것 같습니다. 오늘 글은 이번에 새로 시작하는 프로젝트 환결 설정하는 과정을 기록하려고 합니다. 위의 기술 스택을 사용하는 분들에게 도움이 됐으면 좋겠네요:)

먼저 위의 기술들을 왜 사용하는지 정리하고 가겠습니다.

기술 스택 선정 이유

1. Vite

ES build를 사용해 종속성을 미리 묶으며 기존 번들링보다 훨씬 빠르게 빌드를 진행할 수 있도록 해줘서 사용합니다.

더 자세한 내용은 아래 글을 참고해주세요! 이데 대해 설명하는 글도 작성하겠습니다.

2. Tailwind CSS

미리 설정된 유틸리티 클래스를 사용해 빠른 스타일링이 가능하고 사용되지 않는 CSS 클래스를 빌드 과정에서 제거하여 최종 파일 크기가 작아지는 이점이 있어 사용합니다.

3.  TanStack Query

효율적인 API 통신을 위해 사용합니다.

4. Zod

TypeScript는 런타임 단계에서는 타입 에러를 잡을 수 없는 한계가 있습니다. 이를 보완하는 Zod를 이용해 타입 안정성을 유지하고 API 응답 결과 체크를 위해 사용합니다.

5. Zustand

새로운 프로젝트는 기업과 협업하여 그들의 문제를 함께 해결하는 과정이기에 프로젝트의 규모가 작습니다. 그렇기에 패키지 설치 후 빠르게 Store를 만들어 상태 관리를 할 수 있는 Zustand를 사용합니다.

6. Jest, RTL, MSW

이번 프로젝트를 TDD 방식으로 진행하게 되어 테스트 코드를 작성하기 위해 Jest와 RTL을 사용합니다. MSW는 외부 API 모킹을 위해 사용합니다.

개발 환결 설정

1. 프로젝트 초기화

npm create vite@latest {이름} -- --template react-ts

 Vite를 이용해 Reat + TypeScript 기반 프로젝트 초기화

2. 필요 패키기 설치

Tailwind CSS 설치 및 초기화

설치

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Tailwind CSS를 설치해줍니다. postcss와 autofixer는 Tailwind CSS를 사용하기 위해 설치하는 패키지입니다.

post CSS : TailwindCSS는 PostCSS 플러그인 형태로 작동하기 때문에 설치해야합니다. Tailwind가 제공하는 유틸리티 클래스들을 자동으로 생성하고, 필요한 경우 최적화합니다.

autoprefixer : postCSS 플러그인 중 하나로, CSS에 자동으로 공급업체 접두사(vendor prefixes)를 추가하여 여러 브라우저 간의 호환성을 보장해줍니다. 예를 들어, Flexbox, Grid와 같은 최신 CSS 기능은 일부 구형 브라우저에서 직접 지원하지 않고, -webkit-이나 -ms-와 같은 공급업체 접두사가 필요합니다. autoprefixer가 이를 자동으로 추가해줍니다.

초기화

npx tailwindcss init

postcss.config.cjs 파일을 만들어 아래의 설정 코드를 입력해 줍니다.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

tailwind.config.js 파일을 만들어 아래의 설정 코드를 입력해 줍니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

cjs 파일을 사용하는 이유 : Node.js는 package.json에 "type": "module"이 있는 경우, 모든 .js 파일을 ECMAScript 모듈로 해석합니다. 때문에 그냥 js파일로 만들 경우에는 module이라는 변수가 정의되지 않은 상태에서 읽게되며 ECMAScript 모듈로 해석됩니다. 하지만 PostCSS 설정 파일은 CommonJS 형식을 사용해야 하기 때문에 cjs 파일로 만들어줘 위와 같은 문제가 발생하지 않도록 방지합니다.

ts 파일로 설정하고 싶다면 Config를 import 해서 해주면 됩니다. 예시는 아래와 같습니다.

import { Config } from 'tailwindcss'

const config: Config = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

export default config

tailwind.config.ts의 경우 파일을 인식하지 못할 경우를 대비해 postcss.config.js 파일에 다음 코드를 추가해 줘야합니다.

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: { config: './tailwind.config.ts' },
    autoprefixer: {},
  },
}

마지막으로 글로벌 css 파일에 다음 코드를 추가하면 됩니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

TanStack Query 설치 및 설정

설치

npm i @tanstack/react-query

설정

main.tsx에 기본 설정을 해 줍니다.

QueryCilent와 QueryCilentProvider를 불러와 App을 감싸줍니다.

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import "./index.css";

const queryCilent = new QueryClient();

createRoot(document.getElementById("root")!).render(
  <QueryClientProvider client={queryCilent}>
    <StrictMode>
      <App />
    </StrictMode>
  </QueryClientProvider>
);

Zod 설치

npm i zod

▼ Zod 사용 방법 예시

import { z } from 'zod'

const UserSchema = z.object({
  name: z.string(), // 문자열인지 검사
  age: z.number().min(18), // 18 이하의 숫자인지 검사
})

type User = z.infer<typeof UserSchema>

Zustand 설치

npm i zustand

설치 후 바로 스토어를 만들어 사용해 주면 됩니다.

▼ 스토어 예시

// src/store.ts
import create from 'zustand'

interface BearState {
  bears: number
  increase: () => void
}

export const useBearStore = create<BearState>((set) => ({
  bears: 0,
  increase: () => set((state) => ({ bears: state.bears + 1 })),
}))

Jest & RTL 설치 및 설정

설치

npm i jest @testing-library/react @testing-library/jest-dom @types/jest ts-jest jest-environment-jsdom

• jest: JavaScript 테스트 프레임워크
• @testing-library/react: React 컴포넌트 테스트 라이브러리
• @testing-library/jest-dom: Jest용 DOM 사용자 정의 매처
• @types/jest: TypeScript 환경에서 Jest의 타입 정의
• ts-jest: TypeScript 코드를 Jest에서 사용할 수 있도록 하는 프리셋
• jest-environment-jsdom: Jest 환경을 JSDOM으로 설정 (브라우저 환경 시뮬레이션)

설정

jest.config.ts 파일 생성

export default {
  testEnvironment: "jsdom",
  transform: {
    "^.+\\.tsx?$": "ts-jest",
  },
  moduleNameMapper: {
    "^.+\\.svg$": "jest-svg-transformer",
    "\\.(css|less|sass|scss)$": "identity-obj-proxy",
  },
  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
};

jest.setup.ts

import "@testing-library/jest-dom";

다음으로 ts 설정 파일을 변경 해줘야합니다. vite로 React + Ts 프로젝트를 생성할 경우 tsconfig.app.json과 tsconfig.node.json 파일이 생성되기 때문에 기존 방식과 조금 다르게 설정을 해줘야 합니다.

위의 방식은 tsconfig.json 파일이 공통적인 설정을 공유하고 참조를 관리하는 용도로 사용합니다. 각 하위 파일은 각 프로젝트에 ts 설정을 해주기 위해 사용됩니다. 공통 설정은  tsconfig.base.json을 통해 관리해줍니다.  설정 과정을 작성해보겠습니다.

tsconfig.app.json에 Jest와 RTL 관련 타입 정의를 추가하여 Jest와 RTL을 프로젝트 전반에서 사용할 수 있도록 해주면 됩니다.

tsconfig.app.json

{
  "compilerOptions": {
    ...

    /* Bundler mode */
    ...

    /* Linting */
    ...

    /* Jest and RTL types */
    "types": ["jest", "@testing-library/jest-dom"]
  },
  "include": ["src"]
}

이렇게 설정한 후 script에 test를 추가하여 test 코드를 작성한 후 npm run test로 테스트를 진행할 수 있습니다.

MSW 설치 및 설정

설치

npm i msw

설정

msw가 2.x로 업그레이드 하면서 에러 방지를 위해 설치해줘야 하는 것들이 생겼습니다.

제가 작성한 위의 포스팅을 보면 왜 해당 에러가 발생하고 어떻게 해결했는지 나와있습니다. 아래의 글은 발생하는 에러들을 해결할 때 참고한 공식문서입니다. 자세한 내용은 위의 글을 통해 확인해 주시면 감사하겠습니다. 지금은 설정해야 하는 것들만 작성하고 넘어가겠습니다.

jest.config.ts에 아래 코드 추가

export default {
  testEnvironmentOptions: {
    customExportConditions: [''],
  },
}

jest.polyfills.js 파일을 만들어 아래 코드 작성

// jest.polyfills.js
/**
 * @note The block below contains polyfills for Node.js globals
 * required for Jest to function when running JSDOM tests.
 * These HAVE to be require's and HAVE to be in this exact
 * order, since "undici" depends on the "TextEncoder" global API.
 *
 * Consider migrating to a more modern test runner if
 * you don't want to deal with this.
 */
 
const { TextDecoder, TextEncoder } = require('node:util')
 
Object.defineProperties(globalThis, {
  TextDecoder: { value: TextDecoder },
  TextEncoder: { value: TextEncoder },
})
 
const { Blob, File } = require('node:buffer')
const { fetch, Headers, FormData, Request, Response } = require('undici')
 
Object.defineProperties(globalThis, {
  fetch: { value: fetch, writable: true },
  Blob: { value: Blob },
  File: { value: File },
  Headers: { value: Headers },
  FormData: { value: FormData },
  Request: { value: Request },
  Response: { value: Response },
})

이렇게 한 후 핸들러 파일과 서버 파일을 만들어 사용하면 됩니다.

React Router 설치와 설정

마지막으로 React Router를 설치하고 라우팅 해준 후 마무리 하겠습니다.

설치

npm install react-router-dom

설정

먼저 router.tsx 파일을 따로 만들고 createBrowserRouter를 이용해 라우터 설정을 해 준니다.

import { createBrowserRouter } from "react-router-dom";
import App from "../App";

export const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
]);

이후 main.tsx에서 라우터 파일과 RouterProvider를 불러와 아래와 같이 설정해 주면 됩니다.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { RouterProvider } from "react-router-dom";
import { router } from "./routes/router.tsx";
import "./index.css";

const queryCilent = new QueryClient();

createRoot(document.getElementById("root")!).render(
  <QueryClientProvider client={queryCilent}>
    <StrictMode>
      <RouterProvider router={router} />
    </StrictMode>
  </QueryClientProvider>
);

이상입니다.

옵저버빌리티란 무엇인가?

 옵저버빌리티란 외부 출력만을 이용해 내부 상태를 측정할 수 있는 기능을 말합니다. 기존 모니터링이 '무엇인 언제 일어났는가'에 초점을 둔다면, 옵저버빌리티는 '왜 어떻게 일어났는가'까지 파악할 수 있도록 도움을 주는 것입니다. 즉 예상하지 못했던 숨겨진 이슈까지 발견해 주는게 모니터링과 가장 큰 차이점이며, 이러한 옵저버빌리티는 복잡한 IT 인프라에 대한 포괄적이고 통합된 가시정을 제공해 주고 심층적인 분석까지 가능하게 해주는 것이죠.

 좀 더 쉽게 말하자면 기업의 IT 인프라와 그 인프라 위에서 운영되는 어플리케이션, 그리고 이 어플리케이션에 접속하는 사용자들을 전방위적으로 모니터링하고 장애가 발생했을 때, 원인은 무엇이며, 어떻게 대처해야하는지 알려주는 기술이 옵저버빌리티입니다. 현재의 복잡해진 클라우드 기반의 어플리케이션의 장애 원인을 파악하는 데 있어서 모니터링만으로는 어려움이 있기에 어플리케이션의 구성 요소뿐만 아니라 구동하는 인프라의 상태, 최종 사용자 기기, 사용자 행동애 대한 로그를 분석해서 정확한 문제를 파악하고 개선하기 위한 해결책을 알려주는 옵저버빌리티가 나온 것이죠.

 이러한 옵저버빌리티는 위에서 언급한 것처럼 로그(Log) , 상대 정보(Metrics), 이벤트(Event), 추적 정보(Traces) 등의 여러 관점에서 인프라를 파악하고 분석하게 되는데, 이를 위해서는 곳곳에 흩어진 다른 정보들을 단순 데이터가 아닌 자산의 형태로 한 곳에 모으는 작업을 먼저 해야합니다. 이를 바탕으로 그 정보들의 맥락과 연관성을 파악할 수 있어야 하며, 이렇게 시스템을 한 눈에 파악할 수 있는 능력을 갖추었을 떄 자산에 대한 가시성을 확보했다고 할 수 있습니다.

 옵저버빌리티를 구축한다면, 클라우드 환경에서의 자신 및 취약점 관리 또한 한층 효과적으로 수행 가능해집니다. 운영하고 있는 자산 대상 및 범위를 정확하게 파악할 수 있기에 관리가 수월해지고, 이후 위협탐지시스템을 활용한 위협에 대한 정확도 평가 및 중요도 분류 작업도 수행할 수 있게 됩니다. 서비스 가용성, 사용 빈도, 편의성, 기존 공격에 유효성 이력 등 여러 요소를 종합적으로 평가해 대응 우선순위와 방법에 관한 선제적인 전략 수립이 가능해지기 때문에 효과적인 위협탐지 프로세스를 정립할 수 있습니다.

 이러한 옵저버빌리티의 가치를 제대로 파악하기 위해선 단순히 복잡해진 오늘날의 IT 인프라 환경을 너머 그간 IT 시스템이 어떻게 변화했는지에 대한 흐름을 이해하는 것이 좋습니다. IT 서비스는 매우 빠르고 크게 확장되어 왔으며, 이러한 규모는 고정된 환경으로는 감당할 수 없게 되었습니다. 즉 처리해야하는 트랜잭션 사용자 수가 과거와 비교가 안될 정도로 증가했기 때문에 이를 감당하기 위해서 새로운 시스템을 도입해야했던 것이죠. 이러한 문제의 해결책으로 등장한 것이 바로 클라우드입니다. 클라우드는 컴퓨터 리소스를 필요에 따라 사용할 만큼만 할당 받아 쓸 수 있는 방식을 이용하여 달라지는수요에 유연하게 대응할 수 있는 구조를 가졌기에 위의 문제를 해결할 수 있었습니다.

 하지만 기존 온 프레미스 시스템들을 클라우드로 이전하는 과정에 어려움이 있었습니다. 모놀리식 아키텍처(단일 코드 베이스 어플리케이션)를 통째로 클라우드로 전환하는 것은 구조적으로 쉽지 않았기에 하나의 큰 어플리케이션을 작게 분리할 필요가 생겼습니다. 이런 목적으로 생겨난 것이 바로 하나의 시스템을 작은 마이크로 단위로 나눠 개발하는 마이크로ㅅ비스 아키텍터(MSA)입니다. 이렇게 클라우드 기반의 서비스로 기존 서비스들이 전환되면서 모니터링해야 하는 구성이 자연스럽게 변화된 것입니다. 

 이렇게 가속화되는 클라우드 전환과 MSA의 확산으로 훨씬 복잡해진 IT 및 개발 환경 내에서 인프라 전체를 확인해야하는 것은 필수가 되었고, 동시에 옵저버빌리티가 각광받게 된것이죠.

옵저버빌리티와 모니터링

 하지만 옵저버빌리티가 있다고 모니터링이 필요하지 않은 것은 아닙니다. 모니터링은 옵저버빌리티를 달성하는 데 사용하는 기법 중 하나가 되었습니다. 옵저버빌리티는 복잡한 시스템을 얼마나 잘 이해할 수 있는지에 대한 접근 방식이고 모니터링은 이 접근 방식을 돕기위해 취하는 조치인 것이죠.

 모니터링에 대해 간단히 알아보자면 상태 정보(Metrics)를 기반으로 현재 측정된 위험요소를 기반으로 잘못될 가능성이 있나 없나 파악하여 알려주는 것입니다. 즉, 시스템 상의 상태 변화를 지속적으로 감시, 처리, 분석, 표현하여 어플리케이션 운영자가 해당 어플리케이션에 발생한 장애를 빠르게 파악하고 대처하는 데 도움을 주는 기능인 것입니다.

간단하게 옵저버빌리티에 대해 공부한 내용을 정리해 봤습니다. 글 읽어주셔서 감사합니다 :)

저번 글에 이어서 진행하겠습니다.

불러올 데이터를 넣어줬으니 이제 데이터 Fetching을 해보겠습니다. 보통 데이터를 Fetching하는 방법은 API Layer와 Database queries를 이용한 두 가지 방법이 있는데 이는 이 글을 작성한 이후에 설명하는 글을 작성하겠습니다.

계속해서 프로그램을 만들어 보겠습니다. 

    10. 데이터를 사용하기 위해 dashboard 페이지 수정

// /app/dashboard/page.tsx

import { Card } from '@/app/ui/dashboard/cards';
import RevenueChart from '@/app/ui/dashboard/revenue-chart';
import LatestInvoices from '@/app/ui/dashboard/latest-invoices';
import { lusitana } from '@/app/ui/fonts';
 
export default async function Page() {
  return (
    <main>
      <h1 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
        Dashboard
      </h1>
      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
        {/* <Card title="Collected" value={totalPaidInvoices} type="collected" /> */}
        {/* <Card title="Pending" value={totalPendingInvoices} type="pending" /> */}
        {/* <Card title="Total Invoices" value={numberOfInvoices} type="invoices" /> */}
        {/* <Card
          title="Total Customers"
          value={numberOfCustomers}
          type="customers"
        /> */}
      </div>
      <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
        {/* <RevenueChart revenue={revenue}  /> */}
        {/* <LatestInvoices latestInvoices={latestInvoices} /> */}
      </div>
    </main>
  );
}

• ReavenueChart 주석을 풀고 fetchRevenue에서 revenue를 가져와 선언한 후 ReavenueChart 컴포넌트 내부 주석 풀어주기
• LatestInvoices 주석을 풀고 fetchLatestInvoices에서 latestInvoices를 가져와선언한 후 LatestInvoices 컴포넌트 내부 주석 풀어주기
• Card 주석을 풀고 fetchCardData에서 totalPaidInvoices, totalPendingInvoices, numberOfInvoices, numberOfCustomers를 가져와 선언

Next.js fetch는 기본적으로 캐싱을 해주는데 캐싱하지 않고 최신데이터를 불러오고 싶다면

import { unstable_noStore as noStore } from 'next/cache'

위와 같이 import 해 준 후에 fetching 함수 내부의 최상단에 noStore()를 선언해 주면 됩니다.

만약에 API로 가져오는 거라면 fetch(url, {cache: 'no-store' })를 해주면 됩니다.

수정된 최종 dashboard/page.tsx 코드

// /app/dashboard/page.tsx

import { Card } from '@/app/ui/dashboard/cards';
import RevenueChart from '@/app/ui/dashboard/revenue-chart';
import LatestInvoices from '@/app/ui/dashboard/latest-invoices';
import { lusitana } from '@/app/ui/fonts';
import { fetchCardData, fetchLatestInvoices, fetchRevenue } from '../lib/data';

export default async function Page() {
  const revenue = await fetchRevenue();
  const latestInvoices = await fetchLatestInvoices();
  const {
    totalPaidInvoices,
    totalPendingInvoices,
    numberOfInvoices,
    numberOfCustomers,
  } = await fetchCardData();

  return (
    <main>
      <h1 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
        Dashboard
      </h1>
      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
        <Card title="Collected" value={totalPaidInvoices} type="collected" />
        <Card title="Pending" value={totalPendingInvoices} type="pending" />
        <Card title="Total Invoices" value={numberOfInvoices} type="invoices" />
        <Card
          title="Total Customers"
          value={numberOfCustomers}
          type="customers"
        />
      </div>
      <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
        <RevenueChart revenue={revenue} />
        <LatestInvoices latestInvoices={latestInvoices} />
      </div>
    </main>
  );
}

    11. dashboard 폴더에 loding.tsx 만들고 그룹화하기

(overview) : Route Groups

loding.tsx 파일을 특정 폴더에 만들 경우 하위의 모든 폴더(페이지)에 적용이 됩니다. 이를 (overview) 폴더를 만들고 해당 폴더에 넣어서 하위 폴더까지 적용하지 않고 loding.tsx 파일을 만든 폴더엔만 적용할 수 있습니다.

dashboard 폴더에 (overview) 폴더를 만들고 page.tsx와 loding.tsx 파일을 넣어줬습니다.

    12. Suspense 태그를 이용해 dashboard에서 데이터를 보여주는 컴포넌트들을 동적으로 로딩해주기

위의 작업을 하기 위해서 원래 dashborad(대시보드)의 page.tsx에서 데이터를 fetching하고 데이터를 가시화하는 컴포넌트에 넣어주던 방식을 각 데이터 가시화 컴포넌트 자체에서 데이터를 fetching 하는 방식으로 바꿔줍니다.

데이터를 가시화 하는 컴포넌트(RevenueChart, LatestInvoices, Card)가 props를 받는 구조를 없애고 각자의 내부에서 데이터를 fetching하는 방식으로 수정합니다.

여기서 Card 컴포넌트들은 card.tsx로 들어가면 CardWrapper이 만들어져 있습니다. 여기서 아래 주석들을 해제하고 필요한 데이터를 fetchCardData에서 가져와 선언하여 연결해주면 됩니다. 그리고 CardWrapper를 Suspense로 덮어줍니다.

fallback에 대한 컴포넌트들은 ui 폴더의 skeletons.tsx 파일에 만들어져 있습니다. 각 컴포넌트에 맞게 fallback에 넣어주면 됩니다.

완성된 대시보드의 페이지 컴포넌트 코드입니다.

// /app/dashboard/page.tsx

import CardWrapper, { Card } from '@/app/ui/dashboard/cards';
import RevenueChart from '@/app/ui/dashboard/revenue-chart';
import LatestInvoices from '@/app/ui/dashboard/latest-invoices';
import { lusitana } from '@/app/ui/fonts';
import { Suspense } from 'react';
import {
  RevenueChartSkeleton,
  LatestInvoicesSkeleton,
  CardsSkeleton,
} from '@/app/ui/skeletons';

export default async function Page() {
  return (
    <main>
      <h1 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
        Dashboard
      </h1>
      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
        <Suspense fallback={<CardsSkeleton />}>
          <CardWrapper />
        </Suspense>
      </div>
      <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
        <Suspense fallback={<RevenueChartSkeleton />}>
          <RevenueChart />
        </Suspense>
        <Suspense fallback={<LatestInvoicesSkeleton />}>
          <LatestInvoices />
        </Suspense>
      </div>
    </main>
  );
}

    13. invoices 페이지 만들기 검색했을때 url의 쿼리스트링에 연결될 수 있도록 설정 

먼저 invoices 페이지를 컴포넌트 코드를 작성해 줍니다.

// /app/dashboard/invoices/page.tsx

import Pagination from '@/app/ui/invoices/pagination';
import Search from '@/app/ui/search';
import Table from '@/app/ui/invoices/table';
import { CreateInvoice } from '@/app/ui/invoices/buttons';
import { InvoicesTableSkeleton } from '@/app/ui/skeletons';
import { Suspense } from 'react';

export default function Invoices({
  searchParams,
}: {
  searchParams: {
    query?: string;
  };
}) {
  console.log(searchParams?.query);

  return (
    <div>
      <div className="w-full">
        <h1 className="flex w-full items-center justify-between">Invoices</h1>
      </div>
      <div className=" mt-4 flex items-center justify-between gap-2 md:mt-8">
        <Search placeholder="Search invoices..." />
        <CreateInvoice />
      </div>

      {/* <Suspense key={query + currentPage} fallback={<InvoicesTableSkeleton />}>
        <Table query={query} currentPage={currentPage} />
      </Suspense> */}

      <div className=" mt-5 w-full justify-center">
        {/* <Pagination totalPages={totalPages}/> */}
      </div>
    </div>
  );
}

그리고 Search를 수정하여 input 창에 값을 입력했을 때 url에 쿼리스트링에 넣어주는 코드를 작성합니다.

<원래 코드 ▼>

// /app/ui/search.tsx

'use client';

import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
import { usePathname, useSearchParams, useRouter } from 'next/navigation';

export default function Search({ placeholder }: { placeholder: string }) {
  return (
    <div className="relative flex flex-1 flex-shrink-0">
      <label htmlFor="search" className="sr-only">
        Search
      </label>
      <input
        className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
        placeholder={placeholder}
      />
      <MagnifyingGlassIcon className="absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
    </div>
  );
}

< 수정한 코드 ▼ >

// /app/ui/search.tsx

'use client';

import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
import { usePathname, useSearchParams, useRouter } from 'next/navigation';

export default function Search({ placeholder }: { placeholder: string }) {
  const searchParams = useSearchParams();
  const pathname = usePathname():
  const {replace} = useRouter();
  
  const handleSearch = (value: string) => {
  	const params = new URLSearchParams(searchParams);
    if (value) {
    	params.set('query', value);
    }
    else {
    	params.delete('query');
    }
    replace(`${pathname}`?${params.toString()});
  }
  
  return (
    <div className="relative flex flex-1 flex-shrink-0">
      <label htmlFor="search" className="sr-only">
        Search
      </label>
      <input
        className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
        placeholder={placeholder}
        onChange={ (e) => {
        	handleSearch(e.target.value)
        }}
        defaultValue={searchParams.get('query')?.toString()}
      />
      <MagnifyingGlassIcon className="absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
    </div>
  );
}

수정한 코드를 살펴보면 onChange를 이용해 input 값을 가져오고 그 값을 params에 넣어서 useRouter replace를 이용해 url에 추가하는 방식을 사용하고 있습니다.

    14. Table과 Suspense 주석을 풀고 검색되는지 확인

// /app/dashboard/invoices/page.tsx

import Pagination from '@/app/ui/invoices/pagination';
import Search from '@/app/ui/search';
import Table from '@/app/ui/invoices/table';
import { CreateInvoice } from '@/app/ui/invoices/buttons';
import { InvoicesTableSkeleton } from '@/app/ui/skeletons';
import { Suspense } from 'react';

export default function Invoices({
  searchParams,
}: {
  searchParams: {
    query?: string;
    page?: string;
  };
}) {
  console.log(searchParams?.query);
  const query = searchParams?.query || '';
  const currentPage = Number(searchParams?.page) || 1;

  return (
    <div>
      <div className="w-full">
        <h1 className="flex w-full items-center justify-between">Invoices</h1>
      </div>
      <div className=" mt-4 flex items-center justify-between gap-2 md:mt-8">
        <Search placeholder="Search invoices..." />
        <CreateInvoice />
      </div>

      <Suspense key={query + currentPage} fallback={<InvoicesTableSkeleton />}>
        <Table query={query} currentPage={currentPage} />
      </Suspense>

      <div className=" mt-5 w-full justify-center">
        {/* <Pagination totalPages={totalPages}/> */}
      </div>
    </div>
  );
}

Search 컴포넌트에서 useRouter를 이용해 searchParams를 보내줬기 때문에 invoices 페이지에서 props로 받아와 currentPage와 query를 정의하고 Suspense로 감싼 Table 컴포넌트의 주석을 풀어줍니다. 이렇게 하면 검색창에 입력된 값이 사용자 정보와 일치한다면 데이터를 가지고 옵니다. 

정보를 불러오는 함수를 보면 입력된 query를 사용자의 모든 정보와 비교하여 일치하는 데이터가 하나라도 있으면 불러오는 것을 알 수 있습니다.

검색 과정을 파악해 보자면, 검색창에 입력된 값을 쿼리스트링으로 보내고 각 컴포넌트에서 해당 쿼리스트링의 값을 받아와 일치하는 데이터를 보여주는 방식입니다. 강사님도 말씀해 주시긴 했는데 이런 방식보다 그냥 입력창에 입력된 값으로 데이터를 바로 찾아와서 화면에 보여주는게 더 낫지 않을까 싶네요. 하지만 useSearchParams와 usePathname을 이용해 자식 컴포넌트에서 부모 컴포넌트로 데이터를 보낼 수 있는 방법론적인 면에서는 알아두면 좋다고 하셨습니다.

    15. Invoice 데이터에 대한 생성, 수정, 삭제 기능 만들기

a. 데이터 생성

먼저 CreateInvoice 컴포넌트를 클릭했을 때 이동하는 /dashboard/invoices/create 페이지를 만들어 줍니다.

// /app/dashboard/create/page.tsx

import Form from '@/app/ui/invoices/create-form';
import Breadcrumbs from '@/app/ui/invoices/breadcrumbs';
import { fetchCustomers } from '@/app/lib/data';

export default async function Page() {
  const customers = await fetchCustomers();

  return (
    <main>
      <Breadcrumbs
        breadcrumbs={[
          { label: 'invoices', href: 'dashboard/invoices' },
          {
            label: 'Create Invoice',
            href: 'dashboard/invoices/create',
            active: true,
          },
        ]}
      />
      <Form customers={customers} />
    </main>
  );
}

이렇게 완성해주고 Create invoice 버튼을 클릭하면 다음과 같은 화면이 표시됩니다.

그리고 Create Invoice 버튼을 클릭했을 때 데이터가 추가될 수 있도록 //app/lib 폴더에 actions.ts 파일을 만들어 데이터를 보내주는 함수를 만들어 줍니다. 

// /app/lib/actions.ts

'use server';

import { z } from 'zod';
import { sql } from '@vercel/postgres';
import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';

const FormSchema = z.object({
  id: z.string(),
  customerId: z.string(),
  amount: z.coerce.number(),
  status: z.enum(['pending', 'paid']),
  date: z.string(),
});

const CreateInvoice = FormSchema.omit({ id: true, date: true });

export async function createInvoice(formData: FormData) {
  const { customerId, amount, status } = CreateInvoice.parse({
    customerId: formData.get('customerId'),
    amount: formData.get('amount'),
    status: formData.get('status'),
  });
  const amountInCents = amount * 100;
  const date = new Date().toISOString().split('T')[0];

  await sql`
  INSERT INTO invoices (customer_id, amount, status, date)
  VALUES (${customerId}, ${amountInCents}, ${status}, ${date})
  `;

  revalidatePath('/dashboard/invoices');
  redirect('/dashboard/invoices');
}

여기서 zod 라이브러리는 스키마 선언 및 데이터 검증을 위해 사용하는 라이브러리입니다. zod를 사용해 FormSchema를 선언하고 이를 통해 폼 데이터를 검증하기 위해 zod를 사용하고 있습니다.

z를 이용해 폼 데이터의 구조와 유형을 정의합니다.

그리고 CreateInvoice를 선언하며 인보이스 생성 시 필요한 필드만 포함한 스키마를 만들어줍니다.

이후 폼 데이터에서 필요한 필드를 검증하고 추출합니다. 

여기서 z.coerce.number()는 문자열을 숫자로 변환해 줍니다.

그리고 Form 컴포넌트에 action 속성이 지정되어 있지 않기 때문에 action 속성에 crateInvoice 함수를 연결해 주면 Create Invoice 버튼을 클릭했을 때, 입력한 데이터가 DB로 들어간 것을 확인할 수 있습니다.

b. 데이터 수정

// app/dashboard/invoices/page.tsx 의 Table 컴포넌트에서 UpdataInvoice 함수 찾아서 이동 주소 올바르게 바꾸기

edit 페이지 만들기

// /app/dashboard/invoices/[id]/edit/page.tsx

import Form from '@/app/ui/invoices/edit-form';
import Breadcrumbs from '@/app/ui/invoices/breadcrumbs';
import { fetchCustomers, fetchInvoiceById } from '@/app/lib/data';

export default async function Page({ params }: { params: { id: string } }) {
  const id = params.id;
  const [invoice, customers] = await Promise.all([
    fetchInvoiceById(id),
    fetchCustomers(),
  ]);

  return (
    <main>
      <Breadcrumbs
        breadcrumbs={[
          { label: 'Invoices', href: '/dashboard/invoices' },
          {
            label: 'Edit Invoice',
            href: `/dashboard/invoices/${id}/edit`,
            active: true,
          },
        ]}
      />
      <Form invoice={invoice} customers={customers} />
    </main>
  );
}

데이터를 업데이트 해주는 함수 actions.ts 파일에 추가하기

// /app/lib/actions.ts

const UpdateInvoice = FormSchema.omit({ id: true, date: true });

export async function updateInvoice(id: string, formData: FormData) {
  const { customerId, amount, status } = UpdateInvoice.parse({
    customerId: formData.get('customerId'),
    amount: formData.get('amount'),
    status: formData.get('status'),
  });
  const amountInCents = amount * 100;

  await sql`
  UPDATE invoices
  SET customer_id = ${customerId}, amount = ${amountInCents}, status = ${status}
  WHERE id = ${id}
  `;

  revalidatePath('/dashboard/invoices');
  redirect('/dashboard/invoices');
}

위에서 create 페이지를 포면 각 페이지에 맞는 Form 컴포넌트가 준비되어 있다는 것을 알 수 있습니다. 그렇기에 edit 페이지에 대한 Form 컴포넌트가 updateInvoie 함수를 사용할 수 있도록 코드를 수정해 줘야 합니다. 그리고 updateInvoice 함수는 폼 데이터뿐만 아니라 id 값도 파라미터로 받고 있기 때문에 invoice.id를 바인드해준 후에 form 태그의 actiondp 넣어줍니다.

이렇게 하면 수정 기능도 완성입니다.

c. 데이터 삭제

삭제는 id를 가져와서 id에 일치하는 데이터를 삭제해 주면 되기 때문에 생성과 수정보다 간단합니다.

delete 버튼을 클릭했을 때는 따로 페이지를 이동하지 않기 때문에 

 여기서 바로 수정해 줍니다.

deleteInvoice 함수를 만들었다 가정하고 id를 함수에 반환해주고 button 태그를 form으로 감싼 후에 action에 바인드 처리한 함수를 넣어주면 됩니다.

그리고 actions.ts 파일에 deleteInvopice 함수를 만들어 주면 삭제 기능 완성입니다.

// /app/lib/actions.ts

export async function deleteInvoice(id: string) {
  await sql`
  DELETE FROM invoices
  WHERE id = ${id}
  `;

  revalidatePath('/dashboard/invoices');
  redirect('/dashboard/invoices');
}

여기까지 간단한 대시보드 프로그램을 함께 만들고 강의를 마무리 했습니다. 조금 아쉬웠던 점은 SPA 구현이 Suspense 사용해 Streaming 페이지를 구현하는 것을 얘기하는 것 같더라고요ㅠㅠ SPA 구현에 대해 자세히 배우지 못한 것 같아 아쉬움이 남았습니다. 그래서 Next.js 없이 React만 이용해 SPA를 구현하는 방법을 공부해서 구현한 후에 정리해서 올릴 예정입니다. 긴 글 읽어주셔서 감사합니다.