국밥 개발자

[React] 'react-virtuoso' Windowing 최적화하기 (스크롤 성능개선, 뒤로가기 처리)

차노도리 — Sat, 28 Sep 2024 21:49:51 +0900

Windowing의 개념

Windowing은 가상화 기법의 일종으로, 대량의 데이터를 렌더링 할 때 성능을 최적화하기 위해 사용되는 방법 중 하나이다.
화면 전체를 한 번에 렌더링 하는 대신, 화면에 보이는 영역과 오버스캔 영역만 렌더링 한다.

주로 리스트나 테이블에서 수천 개 이상의 아이템을 렌더링해야 할 때 사용되며, 화면에 보이는 항목들만 렌더링 하고 사용자가 스크롤할 때 새로운 항목을 점진적으로 렌더링 하는 방식이다. 이 과정에서 보이지 않는 항목은 메모리와 DOM에서 제외되어 성능이 최적화된다.

Windowing 장점

수천 개의 리스트 아이템을 한 번에 렌더링 하지 않고, 화면에 보이는 부분만 렌더링 하므로 DOM 크기가 줄어들어 렌더링 성능과 초기 로딩 속도가 크게 개선된다.

Windowing 단점

사용자가 빠르게 스크롤 시 아이템이 제대로 렌더링 되지 않아서 깜빡임 현상이 발생할 수 있다. (Over Scan을 통하여 어느 정도 해결 가능)
작은 리스트에서 Windowing 적용하는 계산 비용이 오히려 성능을 저하시킬 수 있다.

React Windowing 라이브러리 비교

라이브러리 비교 요약

라이브러리	특징	장점	단점	적합한 상황
React Window	경량화된 가상화 라이브러리	간단한 사용법, 가벼운 성능	복잡한 기능 부족	간단한 리스트나 그리드가 필요할 때
React Virtualized	기능이 풍부한 가상화 라이브러리	다양한 고급 기능 제공, 유연성	복잡하고 무거운 사용법	대규모 데이터 및 복잡한 레이아웃이 필요할 때
Virtuoso	가변 크기 항목에 최적화된 라이브러리	가변 크기 처리, 자동 스크롤 관리	매우 대규모 데이터 처리에 부족할 수 있음	동적 데이터를 다루는 프로젝트

react-virtuoso 선택 이유

컴포넌트의 크기가 동적으로 변하는 상황이 많았기 때문에, 가변 크기의 컴포넌트를 자동으로 처리해 주는 라이브러리 선택

react-virtuoso 적용하기

공식 문서 : https://virtuoso.dev/

Getting Started with React Virtuoso | React Virtuoso

React Virtuoso is a set of React components that display large data sets using virtualized rendering. The Virtuoso components automatically handle items with variable sizes and changes in items' sizes.

virtuoso.dev

라이브러리 설치

npm install react-virtuoso

Virtuoso 적용하기

Virtuoso Props
- useWindowScroll : 브라우저의 기본 스크롤바를 활용하여 스크롤
- totalCount : 전체 데이터의 총길이를 설정
- data : 렌더링 할 데이터 리스트
- overscan : 화면에 보이지 않는 영역에 미리 렌더링 할 높이
- itemContent : data 리스트를 순회하면서 각 항목을 렌더링 할 컴포넌트를 정의

import { Virtuoso } from "react-virtuoso";
interface WindowingScrollTemplateProps {
  datas: data[];
}
export default function WindowingScrollTemplate({
  datas,
}: WindowingScrollTemplateProps) {
  return (
    <Virtuoso
      useWindowScroll
      totalCount={datas.length || 0}
      data={datas || []}
      overscan={3000}
      itemContent={(itemIndex, item) => {
        return <ItemComponent data={item} key={`item-${itemIndex}`} />;
      }}
    />
  );
}

페이지 이동후 스크롤 복원하기

스크롤 이벤트가 발생할 때 현재 화면에 보이는 아이템의 인덱스를 저장해 두었다가, 뒤로 가기를 통해 페이지에 다시 접근할 경우 저장된 정보에 맞춰 스크롤 위치를 복원할 수 있다.

Virtuoso에서 스크롤 초기 설정을 위한 주요 Props

initialTopMostItemIndex
- 초기 렌더링 시, 데이터 리스트의 특정 인덱스를 기준으로 스크롤 위치를 설정한다.
initialScrollTop
- 초기 렌더링 시, 픽셀 단위로 스크롤 위치를 설정한다.
- document에서는 initialTopMostItemIndex를 권장하고 있으며, 이는 인덱스 기반으로 보다 안정적인 스크롤 제어를 제공
- 렌더링 완료 전에 스크롤이 이동되어 예상대로 동작하지 않는 경우가 있는 거 같다.

Virtuoso에서 사용할 추가 Props

itemsRendered : 리스트가 렌더링 될 때 호출되며, 보이는 DOM 정보를 제공한다. 이 정보를 활용해 현재 보이는 아이템들을 추적할 수 있다.
isScrolling : 스크롤이 이동 중인지 멈췄는지 여부를 나타낸다. 스크롤이 멈췄을 때 특정 작업을 트리거할 수 있다.

initialTopMostItemIndex를 활용한 스크롤 복원 방법

itemsRendered를 사용하여 리스트가 렌더링 될 때 보이는 아이템의 정보를 저장한다. 이를 통해 화면에 보이는 아이템의 인덱스를 추적할 수 있다.

isScrolling을 활용해, 스크롤이 멈췄을 때 현재 스크롤 위치를 저장한다. 스크롤 이벤트가 끝난 시점에 정확한 인덱스나 스크롤 위치를 저장하는 것이 중요하다.

주의사항

뒤로 가기를 통해 페이지에 다시 접근하지 않았을 경우에는, 저장된 스크롤 값을 제거하는 로직이 필요하다. 페이지 이동 시 상태를 관리하여 불필요한 스크롤 복원이 일어나지 않도록 해야 한다.
itemsRendered에서 제공되는 아이템 정보의 offsetTop 값은, useWindowScroll를 사용하는 경우에도 기본 브라우저 스크롤의 offsetTop 값이 아닌 Virtuoso 내부의 offsetTop 값을 반환한다. 이 점을 고려하여 스크롤 복원 로직을 작성해야 한다.

예시 코드)

import { Virtuoso } from "react-virtuoso";
import { useRef } from "react";

interface WindowingScrollTemplateProps {
  datas: data[];
}

export default function WindowingScrollTemplate({
  datas,
}: WindowingScrollTemplateProps) {
  const scrollInfoCookie = getCookie(SCROLL_INFO);
  const virtuosoRef = useRef<HTMLDivElement | null>(null);
  const viewItemRef = useRef<data[]>([]);

  const handleItemRender = (items: data[]) => {
    viewItemRef.current = items;
  };

  // 현재 가운데에 있는 아이템의 Index 찾기
  const handleFindViewIndex = () => {
    const scrollY = window.scrollY;
    const innerHeight = window.innerHeight;
    const virtuosoOffsetTop = virtuosoRef.current?.offsetTop || 0;

    if (!virtuosoRef.current || viewItemRef.current.length === 0) {
      return;
    }

    const viewportMiddle =
      Math.round(scrollY + innerHeight / 2) - virtuosoOffsetTop;

    const visibleItem = viewItemRef.current.find(
      (item) =>
        item.offset <= viewportMiddle &&
        item.offset + item.size >= viewportMiddle
    );

    const scrollIndex = visibleItem?.index;

    if (!scrollIndex || scrollIndex <= 1) {
      clearCookie(SCROLL_INFO);
      return;
    }

    setCookie(SCROLL_INFO, JSON.stringify({ scrollIndex }));
  };

  return (
    <div ref={virtuosoRef}>
      <Virtuoso
        useWindowScroll
        totalCount={datas.length}
        data={datas}
        overscan={3000}
        itemsRendered={handleItemRender}
        isScrolling={(isScrolling) => {
          if (!isScrolling) {
            handleFindViewIndex();
          }
        }}
        {...(scrollInfoCookie?.scrollIndex > 0 && {
          initialTopMostItemIndex: {
            index: scrollInfoCookie.scrollIndex,
            align: "center",
          },
        })}
        itemContent={(itemIndex, item) => (
          <ItemComponent data={item} key={`item-${itemIndex}`} />
        )}
      />
    </div>
  );
}

스크롤이 많을 경우 페이지 성능비교 (약 1,200건의 데이터 리스트 렌더링)

랜더링 해야할 DOM이 많을 경우Windowing에 장점이 부각된다.

체크 방법	네트워크 요청 시간 비교	리소스 양
데이터 캐싱되어있는 경우 렌더링 비교	약 9.5초 -> 약 2초	약 43 MB -> 약 2 MB
데이터 캐싱 안 되어있는 경우 렌더링 비교	약 12 초 -> 약 6초	약 46 MB -> 약 5MB

데이터 캐싱 되어 있을 때 네트워크 요청 비교

윈도윙 미 적용 (데이터 캐싱 되어있음)

윈도윙 적용 (데이터 캐싱 되어있음)

데이터 캐싱 안되어 있을 때 네트워크 요청 비교

윈도윙 미 적용 (데이터 캐싱 안되어있을 때)

윈도윙 적용 (데이터 캐싱 안되어 있을 때)

결론

대량의 DOM 요소를 렌더링 하는 페이지에서는 Windowing 기술을 도입함으로써 네트워크 요청 시간이 단축되고, 렌더링 성능을 크게 개선할 수 있다. 특히 수천 개 이상의 리스트나 데이터를 효율적으로 처리할 때 유용하다.

하지만 DOM 요소가 적거나 데이터 양이 작은 페이지에서는, 불필요한 연산이 추가되므로 오히려 성능 저하를 일으킬 수 있다. 따라서 데이터 양과 사용 시나리오를 고려해 적절한 상황에서 Windowing을 적용하는 것이 중요하다.

또한, 초기 화면 진입 시의 스크롤 위치에 대한 고민도 필요하다. 사용자가 페이지를 다시 방문하거나 뒤로 가기를 통해 접근할 때, 스크롤 복원과 관련된 로직은 성능과 사용자 편의성을 동시에 고려해한다.

[structuredClone] Js 깊은 복사 쉽게 하기(Deep Copy)

차노도리 — Fri, 26 Apr 2024 23:56:30 +0900

얕은 복사 (Shallow Copy)

기본 데이터 타입의 경우 그 값이 그대로 복사한다.
객체와 같은 참조 타입의 경우 메모리 주소만 복사한다. (원본데이터와 복사 데이터가 서로에게 영향을 미친다)

ex) 얕은 복사 예시

const obj = { a: 1, b: { c: 2 } };
const shallowCopy1 = { ...obj };
const shallowCopy2 = Object.assign({}, obj);

console.log(shallowCopy1.b.c);  // 2
shallowCopy1.b.c = 3;
console.log(obj.b.c);  // 3 (원본 객체도 영향을 받음)
shallowCopy2.b.c = 4;
console.log(obj.b.c);  // 4 (원본 객체도 영향을 받음)

깊은 복사 (Deep Copy)

기본 데이터 타입뿐만 아니라, 객체와 같은 참조 타입의 경우에도 독립된 복사본을 만든다.

1. JSON.parse(JSON.stringify(obj))

단점

JSON으로 변환 가능한 데이터 타입만 처리할 수 있다. (undefined, Symbol 타입은 복사되지 않음)
객체의 구조가 크고 복잡할 경우 코드가 길어지고 가독성이 떨어질 수 있다.

const obj1 = { a: 1, b: { c: 2 } };
const deepCopy1 = JSON.parse(JSON.stringify(obj1));

deepCopy1.b.c = 3;

console.log(obj1.b.c);  // 2 - 원본 객체는 영향받지 않음
console.log(deepCopy1.b.c);  // 3

const obj2 = {
  number: 1,
  undefinedValue: undefined,
  symbolValue: Symbol("unique")
};

const deepCopy2 = JSON.parse(JSON.stringify(obj2));

console.log(deepCopy2);   // {number: 1} - JSON으로 변환 가능한 데이터만 복사

2. lodash - cloneDeep(obj)

단점

라이브러리 설치 및 라이브러리에 대한 의존성 생김

import _ from 'lodash';
const obj = { a: 1, b: { c: 2 } };
const deepCopy = _.cloneDeep(obj);

deepCopyWithLodash.b.c = 3;
console.log(obj.b.c);  // 2
console.log(deepCopy.b.c);  // 3

3. structuredClone(obj)

다른 깊은 복사에 비해 빠르고 효율적이다.
https://developer.mozilla.org/en-US/docs/Web/API/structuredClone

structuredClone() global function - Web APIs | MDN

The global structuredClone() method creates a deep clone of a given value using the structured clone algorithm.

developer.mozilla.org

const obj = {
  number: 1,
  undefinedValue: undefined,
};

const deepCopy = structuredClone(obj);
deepCopy.number = 2;

console.log(obj);       // { number: 1, undefinedValue: undefined }
console.log(deepCopy);          // { number: 2 ,undefinedValue: undefined}

깊은 복사 성능 비교

결과 )

JSON.parse(JSON.stringify)	0.040 ms	0.051 ms	0.156 ms	1.099 ms	110.561 ms
cloneDeep	0.452 ms	0.808 ms	3.387 ms	8.761 ms	174.174 ms
structuredClone	0.563 ms	0.571 ms	0.751 ms	3.051 ms	169.150 ms

결론 (개인적인 생각)

JSON.parse
- 성능이 가장 좋다.
- Json으로 파싱 가능한것만 복사가 가능하다.
- 코드가 길어져서 가독성이 떨어질수 있다.
cloneDeep
- 외부 라이브러리에 의존하여 추가적인 설치가 필요하다.
- 성능이 안좋다.
- 코드가 간결하여 가독성이 좋다.
structuredClone
- 추가적인 설치 없이 바로 사용 가능하다.
- 다른 서드파티 라이브러리에 비해 성능이 비교적 좋다.
- 코드가 간결하여 가독성이 좋다.

[Rust] 메모리 관리, 소유권 규칙 정리

차노도리 — Sun, 14 Apr 2024 21:06:42 +0900

https://www.rust-lang.org/

Rust Programming Language

A language empowering everyone to build reliable and efficient software.

www.rust-lang.org

Rust 메모리 관리

Rust는 가비지 컬렉터(GC)를 사용하지 않으면서도 안전한 메모리 관리를 수행한다.
컴파일러가 소유권 규칙을 강제함으로써, 메모리 할당 및 해제를 자동으로 관리한다.
개발자는 메모리 해제를 직접 처리할 필요가 없다.
런타임 성능 저하 없이 메모리 안정성을 보장한다.

Rust 소유권 규칙

모든 값은 소유자(owner)를 가지며, 한 시점에 단 하나의 소유자만이 존재할 수 있다.
소유자가 스코프를 벗어나면, 그 값은 자동으로 해제된다.

Stack 영역

컴파일 시점에 크기가 결정된다. 함수가 호출될 때 자동으로 할당되며, 함수가 종료될 때 자동으로 해제된다.
기본 데이터 타입(정수, 부동 소수점, 불리언, 문자 등)과 고정된 크기를 가진 튜플(기본 데이터 타입으로만 구성된 경우)이 스택 영역에 저장된다.
스택 영역에 저장된 데이터는 값이 복사되어 다른 변수에 할당될 때 원본 데이터 자체가 복사된다.

ex) Stack영역 소유권 이동이 되지 않고 데이터 복사 예시

let x = 3;
let y = x;  // Stack 영역에 있는 데이터 복사 시, 데이터 자체가 복사되

println!("x ={}", x);   // 사용 가능
println!("y ={}", y);

Heap 영역

런타임 시점에 크기가 결정되며, 동적으로 메모리가 할당된다.
힙 영역의 데이터를 이동하거나 복사할 때는 소유권이 넘어가거나 명시적으로 clone()을 사용하여 데이터를 복사해야 한다.

ex) Heap 영역 소유권 이동 예시

let str1 = String::from("스트링 생성");
println!("str1 = {}", str1);

let str2 = str1;    // heap 메모리 str1 소유권 str2로 넘어감
let str3 = str2.clone();    // str2의 데이터를 복사하여 str3를 생성

println!("str1 = {}", str1);    // 소유권이 str2로 넘어가서 str1은 사용할 수 없음
println!("str2 = {}", str2);
println!("str3 = {}", str3);

ex) 함수 사용 예시

  // 함수 테스트
{
    let number = 31;
    owner_function_number(number);
    println!("데이터가 복사되서 소유권 넘어가지 않음 {}", number);

    let str1 = String::from("스트링 생성");
    owner_function_string(str1);
    println!("소유권 넘어감 {}", str1); // 소유권이 넘어가서 사용 불가
}


fn owner_function_number(number: i32) {
    println!("소우권 테스트 number : {}", number)
}

fn owner_function_string(str: String) {
    println!("소유권 테스트 String : {}", str)
}

소유권을 넘겨주지 않고 임대하는 방법

`&`(참조)를 사용하여 소유권을 넘기지 않고 넘기거나, 받을 수 있다.
기본 값은 immutable이어서 mutable시 명시해서 넘겨줘야 한다.
`&mut`(변경 참조)는 한 스코프 내에서 하나만 존재할 수 있다.

{
    let mut str1 = String::from("스트링 생성");
    owner_function_rent_string(&str1);
    println!("소유권 임대해서 넘어감 {}", str1);
    owner_function_rent_mut_string(&mut str1);
}

fn owner_function_rent_string(str: &String) {
    println!("소유권 임대 테스트 String : {}", str)
}

fn owner_function_rent_mut_string(str: &mut String) {
    str.push_str("mutable");
    println!("mutable 테스트 String : {}", str)
}

[TypeScript] Component Polymorphic하게 사용하기

차노도리 — Sat, 27 Jan 2024 18:08:15 +0900

잘못된 Polymorphic Component 예시

component 타입에 따라 필요한 props가 다름.
모든 props가 선택적(optional)으로 처리되어, 런타임에 필요한 props가 누락될 수 있음

ex)

import React, { MouseEventHandler } from "react";

type ButtonType = "button" | "a";

interface ButtonProps {
  component: ButtonType;
  href?: string;
  onclick?: MouseEventHandler<HTMLAnchorElement & HTMLButtonElement>;
  children: React.ReactNode;
}

const Button = ({ component, href, onclick, children }: ButtonProps) => {
  return component === "a" ? (
    <a href={href}>{children}</a>
  ) : (
    <button onClick={onclick}>{children}</button>
  );
};

export default Button;

개선된 Polymorphic Component 예시

제네릭 타입을 사용하여 컴포넌트의 타입을 명확하게 정의
각 component 타입에 맞는 적절한 props를 전달할 수 있도록 강제
props 사용으로 인한 런타임 오류의 가능성을 줄일 수 있음

ex)

type ButtonType = "button" | "a";

type PolymorphicComponentProps<
  T extends ButtonType,
  PropsType = Record<string, unknown>
> = {
  component?: T;
} & PropsType &
  React.ComponentPropsWithoutRef<T> & {
    ref?: React.ComponentPropsWithRef<T>["ref"];
  };

interface ButtonProps {
  children: React.ReactNode;
}

const PolymorphicButton = <T extends ButtonType = "button">({
  component,
  children,
  ...props
}: PolymorphicComponentProps<T, ButtonProps>) => {
  const Component = (component ?? "button") as React.ElementType;

  return (
    <Component className="button" {...props}>
      {children}
    </Component>
  );
};

export default PolymorphicButton;

정리

잘못된 polymorphic 컴포넌트 사용 시, component 타입에 따라 필요한 props가 명확하지 않아 오류가 발생할 수 있음
개선된 접근 방식을 통해, 각 component 타입에 맞는 적절한 props를 강제함으로써 타입 안전성을 향상시킬 수 있음

[MFA] Module Federation 다른 서버 TypeScript Type 추론 Example (명시적 정의, @module-federation/typescript)

차노도리 — Sun, 21 Jan 2024 21:48:41 +0900

Module Federation에서 Remote App 모듈 사용 시 Type 추론이 자동으로 되지 않는다.

방법 1. 명시적으로 정의하여 타입 추론

Monorepo프로젝트 진행 중일 경우 Remote App 경로를 명시적으로 정의하여 타입 추론이 가능하다.
장점
- 경로 명시적으로 정의되어 있어, 어떤 컴포넌트에서 오는지 쉽게 파악 가능
- 실제 경로를 참조하여 오류를 최소화할 수 있음
- tsconfig 설정만으로 간단하게 사용가능
단점
- 모노레포 구조에서만 사용 가능

{
  // ...생략
  "compilerOptions": {
    // ...생략
    "paths": {
      "gugbab_component_app/Button": ["../gugbab-component-app/src/components/Button"]
    }
  }
}

방법 2. @module-federation/typescript 활용하여 타입 추론하기

Remote App 서버가 구동 중일 때 사용 가능
Host App에서 Remote App의 타입 정보를 가져와서 추론
https://github.com/module-federation/typescript
장점
- Remote App의 타입 정보를 최신 상태로 관리하기 쉽다.
- Monorepo 뿐만 아니라 Multirepo 구조에서도 적용 가능
단점
- 타입 정보를 원격 서버에서 직접 가져오기 때문에, 원격 서버가 구동 중이어야 한다.
- 외부 라이브러리에 의존하게 되어, 라이브러리 업데이트나, 호환성 영향을 받을 수 있다.

Host App, Remote App 공통 작업

@module-federation/typescript 모듈 받기
webpack config `FederatedTypesPlugin`에 기존 federationConfig 추가하기

ex) webpack.config.js

const { FederatedTypesPlugin } = require("@module-federation/typescript");
// ...생략

module.exports = (_, argv) => ({
  // ...생략
  plugins: [
    // ...생략
    new ModuleFederationPlugin(federationConfig),
    new FederatedTypesPlugin({ federationConfig }),
  ],
});

Host App 추가 작업

tsconfig에 타입 경로 추가하기

{
  "compilerOptions": {
    // ...생략
    "paths": {
      "*": ["./@mf-types/*"]
    }
  }
}

HostApp Remote App 모듈 사용 시 Type 추론 가능

[Error]React - DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

차노도리 — Thu, 18 Jan 2024 00:12:48 +0900

React를 프로젝트를 진행하며 페이지 이동시 아래 에러 발생

DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

에러 발생 소스

ex)

{data &&(<ins/>)}

에러 발생 원인

조건부 랜더링시 react에서 ins태그를 node로 인식하지 못함

해결 방법

react에서 node로 인식 할 수 있는 태그로 감싸줌

ex)

{data &&(<span><ins/></span>)}

[MFA] Module Federation란? Basic Example

차노도리 — Sun, 7 Jan 2024 23:04:47 +0900

Module Federation

webpack5에 도입된 고급 모듈 통합 기능
서로 다른 애플리케이션이 런타임에 필요한 코드를 공유할 수 있게 해 준다.
각각의 애플리케이션들이 서로 독립적으로 개발되고 배포될 수 있다.
필요한 코드만 실시간으로 로드하기 때문에 애플리케이션의 성능을 최적화할 수 있다.
https://webpack.kr/concepts/module-federation/

Module Federation 구성요소

Host

다른 애플리케이션(remote)으로부터 모듈을 로드하고 사용하는 주체이다.

Remote

Host에 로드될 수 있는 모듈을 제공한다.
독립적으로 배포 및 업데이트가 될 수 있다.

Shared

Host와 Remote 애플리케이션 간에 공유되는 의존성을 의미한다.
중복된 코드의 로딩을 방지하고, 일관된 종속성 관리를 가능하게 한다.

MonoRepo - Module Federation Example

워크스페이스 설정

gugbab-main-app : Host App
gugbab-compont-app : Remote App

packages:
  - 'apps/gugbab-component-app'
  - 'apps/gugbab-main-app'

프로젝트 생성

create mf-app : 기본 설정의 module federation app을 쉽게 생성할 수 있다.
- https://github.com/jherr/create-mf-app

Module Federation 설정하기

플러그인 구성

웹팩 설정 파일에서 ModuleFederationPlugin을 사용하여 host, remote 애플리케이션 설정을 정의한다.
ex) apps/gugbab-component-app/webpack.config.js
- name : 노출되는 이름
- filename: 생성되는 entry 파일 명
- expose : 노출되는 모듈 정보

module.exports = (_, argv) => ({
  ... 생략
  plugins: [
      new ModuleFederationPlugin({
        ... 생략
        name: "gugbab_component_app",
        filename: "remoteEntry.js",
        exposes: {
          "./Button": "./src/components/Button",
        },
      }),
  ],
});

원격 엔트리 파일 생성

Remote 애플리케이션에서 자체적인 빌드 과정을 통해 remote 엔트리 파일을 생성한다. (ex. remoteEntry.js)
엔트로 파일로 Remote 애플리케이션의 인터페이스 역할과, Host 애플리케이션에서 접근할 수 있게 해 준다.

모듈 노출

expose옵션을 통하여 Host 애플리케이션에서 로드할 수 있게 모듈을 노출시킨다.
ex) apps/gugbab- main-app/webpack.config.js
- remotes : import 할 모듈 정보
- Ex) [import시 불러올 변수명] : "[RemoteApp정의된 name]@[RemoteApp주소]/[RemoteApp Entry파일명]"

module.exports = (_, argv) => ({
  ... 생략
  plugins: [
    new ModuleFederationPlugin({
      name: "gugbab_main_app",
      filename: "remoteEntry.js",
      remotes: {
        gugbab_component_app:
          "gugbab_component_app@http://localhost:3001/remoteEntry.js",
      },
    }),
  ],
});

```

동적모듈 연결

Host 애플리케이션은 Remote 애플리케이션의 remoeteEntry를 참조하여 모듈을 동적으로 로드한다.
주로 import() 문으로 로드하여 코드베이스에 통합한다.

const Button = React.lazy(() => import("test/Button"));

const App = () => (
  <div className="container">
    <Button>Gugbab Module Federation Test Button</Button>
  </div>
);

[MFA]Nginx Reverse Proxy Server특징 example(pnpm+turborepo+vite)

차노도리 — Mon, 1 Jan 2024 19:58:32 +0900

Reverse Proxy Server

클라이언트 요청을 받아 백앤드 서버로 전달하고, 서버의 응답을 클라이언트에게 다시 전달하는 중간 서버 역할
로드 밸런싱을 통하여 트래픽을 여러 서버에 분산시키고, 적절한 서버로 라우팅 한다.
캐싱을 이용하여 동일한 응답을 두에 있는 서버에 다시 요청하지 않을 수 있음
외부 사용자로부터 내부의 서버를 숨겨 보안에 도움을 준다.
SSL/TLS암호화를 사용하여 안전한 데이터 전송을 보장한다.

Nginx Reverse Proxy Server 특징

이벤트 기반, 비동기 아키텍처로 설계되어 높은 동시 연결을 효율적으로 처리한다.
적은 메모리와 CPU 사용으로 더 많은 트래픽을 처리할 수 있다.
효과적인 로드 밸런싱 기능과 강력한 캐싱 기능을 통해 서버 부하를 줄이고 응답 시간을 단축한다.

Nginx Reverse Proxy Server Example

프로젝트 생성

pnpm + turborepo 사용

pnpm init

pnpm add turbo -D

워크스페이스 설정

apps : nginx 서버 생성 예정
services : 여러 파이크로 서비스 생성 예정

ex) pnpm-workspace.yaml

packages:
  - 'services/*'
  - 'apps'/*

turborepo 설정파일 작성

ex) turbo.json

{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "dev": {
      "cache": false,
      "persistent": true
    }
  }
}

Nginx

Nginx 프로젝트 생성
Nginx proxy config 설정
Nginx 띄우기 (Docker 이미지로 띄울 예정)

1. Nginx 프로젝트 생성

// 프로젝트 생성 위치에서
// ex) apps/nginx-app
pnpm init

2. Nginx Proxy Config 설정

ex) apps/nginx-app/proxy-server.conf

upstream 할 서버 정의

service_home로 upstream 요청 시 3001번 포트로 proxy 시킴
service_sub로 upstream 요청 시 3002번 포트로 proxy 시킴

upstream service_home {
    server host.docker.internal:3001;
}
upstream service_sub {
    server host.docker.internal:3002;
}

서버 블록 정의

3000번 포트의 '/sub/'로 접근 시 upstream에 정의된 services_sub를 호출함
그 외의 경우 upstream에 정의된 services_home 호출

server {
    listen 3000;
    location /sub/ {
        proxy_pass http://service_sub;
    }
    location / {
        proxy_pass http://service_home;
    }
}

3. Nginx 띄우기 (Dcoker Image로 띄우기)

ex) apps/nginx-app/Dockerfile

도커 script 작성

FROM nginx:1.25.3-alpine

COPY proxy-server.conf /etc/nginx/conf.d/proxy-server.conf

EXPOSE 3000

ex) apps/nginx-app/package.json

빌드, 실행 스크립트 추가

"scripts": {
"build": "docker build -t nginx-app .",
"dev" : "docker run -p 3000:3000 nginx-app",
...
},

service

각 서비스 생성
외부 서버에서 접근 가능하게 설정파일 수정

1. 각 서비스 생성

// 프로젝트 생성할 위치에서
// ex) services/service-home
pnpm create vite@latest services-home --template vanilla-ts

// ex) services/service-sub
pnpm create vite@latest services-sub --template vanilla-ts

2. 외부 서버에서 접근 가능하게 수정

ex) services/service-home/vite.config.ts

import { defineConfig } from "vite";

export default defineConfig({
  base: "/",
  server: {
    // 어디서든 접근 가능하게 설정
    host: true,
    port: 3001,
  },
});

ex) services/service-sub/vite.config.ts

import { defineConfig } from "vite";

export default defineConfig({
  base: "/sub/",
  server: {
    // 어디서든 접근 가능하게 설정
    host: true,
    port: 3002,
  },
});

테스트

3000 nginx서버와 2개의 서비스 3001,3002 잘 연결되어 있음
3000에서 호출 시 2개의 서비스(service_home : 3001, service_sub : 3002)를 호출하는 걸 확인할 수 있음

[MFA] 트랜스파일러(Transpiler), 번들러(Bundler) 특징 (Babel, SWC, webpack, Vite)

차노도리 — Mon, 25 Dec 2023 22:13:18 +0900

트랜스파일러(Transpiler)

JS 코드를 다른 버전의 JS 코드로 변환하는 도구
주로 ES6이상의 JS를 지원하지 않는 브라우저 환경에서 ES6이상의 문법을 사용할 수 있게 해주는 도구

장점

지속적으로 업데이트되는 브라우저나, Node.js 환경에서 최신문법을 사용하더라도 이전 버전의 JS로 변환하여 여러 환경에서 코드를 실행할 수 있다.
ECMAScript 표준을 사용할 수 있게 해 줘 표준화된 코드를 작성하고 유지할 수 있다.
다양한 플러그인을 지원하여 사용자가 필요한 트랜스파일 과정을 제어할 수 있다.

폴리필(Polyfill)

최신 자바스크립트의 기능을 구식 자바스크립트 코드로 똑같이 구현한 코드

대표적인 트랜스 파일러

Babel

https://babeljs.io/
최신 자바스크립트 문법을 브라우저가 이이해할 수 있게 변환해 주는 대표적인 트랜스 파일러
설정파일에 plugin, preset의 정의하여 설정 파일을 바탕으로 문법을 변환한다.
plugin : 하나의 특정한 변환 또는 특정 기능을 수행 하는 모듈
preset : 관련된 plugin의 묶음

SWC

https://swc.rs/
Rust로 만들어진 빠른 컴파일 속도를 가진 트랜스 파일러
- 컴파일 : 고수준의 언어를 기계어나 저수준 언어로 변환하는 과정
ECMAScript 표준 및 TypeScript를 지원한다.

번들러(Bundler)

웹 애플리케이션 여러 파일(HTML, CSS, JS, 이미지)을 하나의 번들 파일로 합치는 과정
애플리케이션의 로딩 속도를 개선하고 성능을 향상시키는데 도움을 준다.

번들러 장점

번들링을 진행하며 프로젝트 자원을 최적화 한다. (코드 압축, 이미지 최적화, 환경 변수 처리 등)
여러 개의 파일을 하나의 파일로 결합함으로써 네트워크에서의 로딩 속도를 최적화한다.
큰 번들 파일을 사용함으로써 브라우저 캐싱 효율이 향상된다.
코드 분할을 통해 애플리케이션의 논리적 부분을 나눌 수 있고, 초기 로딩 속도를 향상시켜 UX를 개선할 수있다.

대표적인 번들러

webpack

https://webpack.kr/
애플리케이션의 파일들을 모듈 단위로 분리하고 의존성 그래프를 생성하여 번들 파일로 묶어주는 도구
다양한 loader와 plugin을 통해 유연한 설정이 가능하다.
모듈 페더레이션 기능을 제공 (추후 글 작성 예정..)
설정 옵션
- entry: 번드링 프로세스에서 시작점을 나타내는 설정
- output : 번들링된 결과물의 파일 경로와 이름등을 설정
- loaders : js,json파일 이외에 파일을 처리할 수 있도록 도와주는 설정
- plugins : 번들 최적화, 에샛관리, 환경 변수 주입등 작업 설정
- mode : 실행되는 환경에 따라 모드를 설정

Rollup

https://rollupjs.org/
표준 모듈 시스템 문법으로 작성된 여러개의 파일로 이루어진 코드를 묶어 주는 역할을 한다.
라이브러리 제작을 위한 번들러로 많이 사용된다.

esbuild

Go 를 기반으로 만들어진 빠른 빌드 속도와 효율적인 번들링하는 트랜스 파일러
- 빌드 : 소스 코드 및 리소스를 프로덕션 환경에서 실행 가능한 형태로 변환하는 과정 (컴파일, 번들링 등을 포함)
작은 라이브러리를 만드는용도로 사용
다른 번들러에 비해 일브 플러그인이 부족할수 있다. (아직 1버전 출시 안됨.)

Vite

https://ko.vitejs.dev/
웹 프로젝트 개발 경험에 초점을 맞춰 개발된 빌드 도구
Vite가 Webpack 보다 빠른 이유
- 콜드 스타트 방식으로 개발 서버를 구동할 때, dependencies와 source code 두 가지 카테고리로 나누어 시작 시간을 개선
  - (콜드 스타트 : 최초로 시행되어 이전에 캐싱한 데이터가 없는 경우)
- 로컬 개발시 ESM 방식을 사용하여 로컬 서버 구동 속도가 매우 빠르다.
  - (ESM : 모듈화 문법인 import,export를 별도의 도구 없이 브라우저 자체에서 소화해 낼수 있는 모듈 방식)
- 웹팩은 처음 로컬 서버를 시작할 때 관련 있는 모듈들을 번들링 해서 메모리에 적재하는 시간이 필요하다. 비트는 필요한 모듈을 빠르게 번들링해서 사용한다.
node 18버전 이상 필요

[SEO] 캐노니컬 태그 (Canonical tag) 특징 사용법

차노도리 — Mon, 18 Dec 2023 23:29:30 +0900

캐노니컬 태그

중복 콘텐츠의 문제를 해결하고 검색 엔진 최적화를 돕기 위해 사용되는 태그

캐노니컬 태그 특징

동적 페이지나 여러 URL로 접근 가능한 페이지에서 주된 페이지를 지정하여 중복 콘텐츠를 방지한다.
중복 콘텐츠를 방지하여 검색 엔진의 혼란을 줄여 페이지 랭킹을 향상할 수 있다.

캐노니컬 태그 주의사항

올바르지 않은 주소 사용으로 검색 엔진의 최적화를 방해할수 있다.
모든 페이지에 동일한 캐노니컬 태그 사용시 중요한 페이지에 대한 랭킹이 희석될 수 있다.

캐노니컬 태그 사용법

<!-- <link rel="canonical" href="캐노니컬할 URL"> -->
<link rel="canonical" href="https://puk0806.tistory.com/109">

[MFA] NX 특징 , NX Cache Example

차노도리 — Sun, 26 Nov 2023 23:14:37 +0900

https://nx.dev/

Nx: Smart, Fast and Extensible Build System

Nx is a smart, fast and extensible build system which comes with first class monorepo support and powerful integrations.

nx.dev

NX 특징

현재 가장 많은 기능을 제공하는 모노레포 빌드 시스템 도구
개발자 생산성 향상, CI 성능 최적화, 코드 품질 유지를 위한 도구
단일 워크스페이스 혹은 전체 워크스페이스드에 대한 태스크를 수행할 수 있다.
- 단일 워크스페이스 태스크 실행: nx[명령어] [app이름]
- 전체 워크스페이스 태스크 실행 : nx run-many -t [명령어]
작업의 결과에 대한 캐싱 기능을제공한다.
모노레포 안에 있는 모든 패키지 간의 의존성 그래프를 생성한다.

NX Cache Exmaple

1. NX 설치

pnpm -w add nx -D

2. NX 캐싱, 오케스트레이션 설정

ex) package.json

{
  "name": "08_gugbab-nx-test",
  ...
  "nx": {
    "targets": {
      "build": {
      	# 캐싱 유무
        "cache": true,
        # 캐싱할 대상
        "dependOn":[
          "^build"
        ],
        # 빌드 결과물 생성 위치
        "outputs": [
          "{projectRoot}/dist/**/*"
        ]
      }
    }
  }
}

3. 캐싱 테스트

캐싱 안되어있을 때 (6s)

캐싱되어있을 때 (88ms)

[MFA] Node 패키지 매니저, 워크스페이스 개념(soft-navigation,hard-navigation)

차노도리 — Sun, 19 Nov 2023 12:44:49 +0900

Npm

package.json을 사용하여 프로젝트 의존성 및 구성을 관리한다.
프로젝트에 필요한 외부 라이브러리나 도구들을 손쉽게 추가하고 관리할 수 있다.
패키지들 간의 의존성을 자동으로 해결해 준다.
스크립트를 정의하여 빌드, 테스트, 시작등 작업을 간편하게 실행할 수 있다.
한 번에 하나씩 순차적으로 설치한다. (npm5부터는 병렬설치로 개선)
lock파일의 도입으로 정확한 의존성 해결과 패키지 설치를 보장한다.
- 모든 환경에서 동일한 패키지 버전이 사용되어 일관된 동작이 가능해진다.
- 이전에 설치된 패키지를 캐싱하여 더 빠른 재설치가 가능하다.
- 패키지 버전을 명시적으로 기록하여 예상치 못한 업그레이드 방지하여 프로젝트의 안정성과, 보안 측면이 좋다.
워크스페이스 기능을 도입되었다. (npm7버전 부터 제공)

Yarn

package.json 외에도 yarn.lock 파일을 사용하여 프로젝트 의존성 및 구성을 관리한다.
여러 패키지를 동시에 가져와서 설치하도록 최적화되어 있다.
워크스페이스 기능을 도입되었다.
기본적으로 명시적인 의존 관계를 나태내야 사용이 가능하다.
node_mouels에 패키지를 저장하는 방식이 아니라 패키지를 압축하여 한 개의. yarn/cache 폴더에 수평적으로 저장한다.
- 수평적으로 존재하기 때문에 빠르게 찾을 수 있다.
- 압축 파일을 설치하여 설치가 빠르다.
- 팬텀 디펜던시가 발생하지 않는다.

Pnpm

의존성을 효율적으로 관리하는데 초점을 맞춘 패키지 관리자이다
워크스페이스 기능을 제공한다.
패키지 의존성을 하나의 디렉터리에 설치하여 엄격한 의존 관리가 가능
시스템 내에 단일 패키지 스토어에 모든 의존성을 보관하여 디스크 공간이 절약하고, 하드 네비게이션 과정을 통하여 설치 속도가 빠르다.
소프트 네비게이션을 사용하여 프로젝트의 직접적인 의존성만 모듈 디렉토리의 루트에 추가한다.

워크스페이스 기능이란?

하드 네비게이션과, 소프트 네비게이션을 통하여 디스크 공간을 절약한다
- 하드 네비게이션
  - 여러 프로젝트 간에 공통 의존성을 하드 네비게이션으로 생성하여 사용
  - 파일의 사본 역할을 하여 원본 파일이 삭제되더라도 하드 네비게이션에 데이터가 포함되어 있어서 데이터에 엑세스 가 가능하다.
- 소프트 네비게이션
  - 하나의 프로젝트가 여러 프로젝트에 공유될 때 심볼릭 링크를 사용
  - 소프트 링크는 파일 이름에 대한 포인터를 참조하는 역할을 하여 원본 파일이 삭제되거나 이동할 경우 동작하지 않는다.
  - 심볼릭 링크 : https://en.wikipedia.org/wiki/Symbolic_link
모든 프로젝트의 의존성 버전을 통합적으로 관리한다.
단일 코드베이스에서 모든 프로젝트를 함께 빌드하고 테스트할 수 있다.

[투포인터] 백준-1806 부분합 골드4 (Python)

차노도리 — Mon, 13 Nov 2023 23:19:30 +0900

백준-1806 : 부분합

https://www.acmicpc.net/problem/1806

1806번: 부분합

첫째 줄에 N (10 ≤ N < 100,000)과 S (0 < S ≤ 100,000,000)가 주어진다. 둘째 줄에는 수열이 주어진다. 수열의 각 원소는 공백으로 구분되어져 있으며, 10,000이하의 자연수이다.

www.acmicpc.net

풀의

입력 받은 값의 구간합 배열을 만든다.
투포인터를 이용하여 왼쪽은 구간합 시작점 오른쪽은 구간합의 끝점으로 사용한다.
- 구간합의 값이 S 보다 작을 경우 오른쪽 포인터를 이동
- 목표 합 보다 크고 길이가 짧은 경우 정답을 갱신
- 구간합의 값이 S 보다 클 경우 왼쪽 포인터를 이동 한다.
구간 합을 못찾을 경우 0을 반환

코드 (Python)

import sys

def input():
    return sys.stdin.readline().rstrip()

n, s = map(int, input().split())

numList = list(map(int, input().split(" ")))
sumList = [0] * (n + 1)

result = n + 1
rightIndex = 0

for i in range(n):
    sumList[i + 1] = sumList[i] + numList[i]

for leftIndex in range(n):
    # 구간합이 목표 보다 작을 경우 오른쪽 index 증가
    while rightIndex < n and sumList[rightIndex + 1] - sumList[leftIndex] < s:
        rightIndex += 1
    # 구간합 목표를 달성하면 정답 갱신
    if rightIndex < n and sumList[rightIndex + 1] - sumList[leftIndex] >= s:
        result = min(result, rightIndex - leftIndex + 1)

# 구간합을 못찾을 경우
if result > n:
    result = 0

print(result)

[MFA] 모노레포(Mono Repo)란? 장단점

차노도리 — Sat, 28 Oct 2023 23:36:33 +0900

모노레포 란?

하나의 레파지토리에서 여러 프로젝트, 모듈 또는 패키지를 관리하는 개발 방식
모든 소스 코드를 중앙화하여 관리하고 필요한 패키지를 공유하여 사용할 수어 코드의 재사용성과 개발의 협업을 용이하게 만든다.

모노레포 장점

중복 코드를 줄이고, 공통 모듈을 사용으로써 코드의 재사용서 높인다.
모든 서비스가 동일한 환경에서 작동하므로 일관성을 유지하고 호환성을 확보할 수 있다.
코드의 히스토리를 추적하기 쉽다.
다른 서비스를 수정 시 추가적인 배포 없이 테스트하고, 함께 빌드 배포를 할 수 있다.

모노레포 단점

레파지토리가 크기가 무거워질 수 있다.
여러 서비스와 모듈을 포함하여 레퍼지토리의 복잡성을 증가시킬 수 있다.
권한 관리와 보안 설정이 중요하다.

모노레포 경험하면서 느낀 점 아쉬웠던 점

다른 서비스나 공통 모듈의 변경이 필요할 때, 추가적인 배포 없이 신속하게 변경을 확인할 수 있어서 개발 생산성이 향상되었다.
다양한 모노레포 관리 도구가 존재한다는 사실을 알게 되었고, 이 도구들의 특징과 장단점을 파악하고 활용하는 것이 중요하다는 것을 느꼈다.
https://monorepo.tools/
NX를 사용하면서 느낀 점
- https://nx.dev/
- 로컬 캐싱 기능을 통해 동일한 로컬에서 동일한 작업을 여러 번 빌드하거나 테스트하지 않고 이전 결과를 재사용할 수 있어 개발자의 생산성을 향상시킨다.
- 로컬 환경에서 테스트를 병렬로 실행하고 변경된 부분만 테스트하는 등의 기능을 제공하여 코드 변경 후 빠른 피드백을 받을 수 있다.
- 코드 제너레이터로 페이지, 템플릿 등을 빠르게 생성할 수 있다.
서브 도메인과 공통 모듈 정의를 잘하지 않고 프로젝트를 진행하면 코드의 중복, 유지보수 등 문제 가 발생할 수 있다. (가장 중요하다고 생각)

[AWS] Kinesis - Kinesis Data Streams 기본 개념 용어 정리

차노도리 — Thu, 26 Oct 2023 15:07:55 +0900

https://docs.aws.amazon.com/streams/latest/dev/introduction.html

What Is Amazon Kinesis Data Streams? - Amazon Kinesis Data Streams

What Is Amazon Kinesis Data Streams? You can use Amazon Kinesis Data Streams to collect and process large streams of data records in real time. You can create data-processing applications, known as Kinesis Data Streams applications. A typical Kinesis Data

docs.aws.amazon.com

Kinesis Data Streams

대규모 실시간 데이터 스트림을 수집, 처리, 분석해 주는 서비스
aws의 여러 서비스와 통합하기 쉽다. (Kinesis Firehose을 사용하여 S3, Redshift, Opensearch 등으로 전송할 수 있다.)
스트림을 여러 샤드로 분할하여 데이터를 분산 처리하고 다양한 응용 프로그램이 데이터를 읽을 수 있도록 한다.

Kinesis Data Streams 장점

실시간으로 데이터를 처리할 수 있다.
데이터 양에 따라 쉽게 스트림의 처리 능력을 확장할 수 있다.
여러 AWS의 다른 서비스와 쉽게 통합이 가능하다.
설정된 보존 기간 동안 데이터를 유지하고, 보관이 가능하다.

Kinesis Data Streams 단점

비용 관리가 필요하다.
설정 관리를 위해 AWS 서비스에 대한 이해와 구성이 필요하다.
실시간 데이터 처리 시스템을 설계하고 구현이 복잡할 수 있다.

Kinesis 도입 체크

대규모 실시간 데이터를 처리해야 하는 경우
다양한 AWS 다른 서비스와 통합 할 경우
실시간 데이터를 분석하고 모니터링이 필요한 경우

Kinesis Data Streams 용어 정리

스트림(Strema)

시간 순서에 따라 순차적으로 흐르는 데이터 시퀀스를 관리한다.
고유한 이름을 가지고 데이터 레코드를 저장하는 컨테이너 역할을 한다.
데이터 흐름을 관리한고, 프로듀서가 생성한 데이터 레코드를 스트림에 저장하며, 컨슈머가 데이터를 읽어 처리하게 도와준다.
사용자가 브로커를 직접 관리하지 않고 데이터를 저장하고 스트림을 생성, 설정 및 관리에 집중할 수 있게 해 준다.

샤드(Shard)

데이터 레코드를 저장하고 처리하는 단위
스트림은 하나 이상의 샤드로 구성된다.
읽기의 경우 초당 최대 5개 트랜잭션, 초당 최대 2MB
쓰기의 경우 최대 1000개의 레코드, 초당 최대 1MB

데이터 레코드(Data Record)

데이터 스트림에 저장되는 데이터 단위
시퀀스 번호, 파티션키, 본문으로 구성되며 변경할 수 없는 데이터로 구성된다.
최대 크기는 1MB까지 가능하다.

파티션 키(Partition Key)

데이터 레코드를 스트림의 샤드에 분배하는 데 사용되는 키
샤드는 고유한 키를 가지고 있는다.
데이터 코드의 순서를 보존하며, 연관성 있는 데이터를 그룹화하는데 유용하다.

시퀀스 번호(Sequence Number)

데이터 레코드의 고유한 식별자
데이터 레코드가 스트림을 따라 전파될 때 순서를 추적하는 데 사용한다. (일반적으로 시간에 따라 증가)

프로듀서(Producer)

레코드를 생성하여 데이터 스트림에 레코드를 넣는다.

컨슈머(consumer)

데이터 스트림에서 레코드를 가져와 처리하는 역할을 한다.

[MFA] 마이크로 프론트엔드 아키텍처 특징 장,단점

차노도리 — Sun, 22 Oct 2023 23:33:09 +0900

마이크로 프론트엔드 특징

독립적으로 제공 가능한 프론트엔드 애플리케이션이 더 큰 전체로 구성되는 아키텍처 스타일
전통적인 모놀리식 웹 애플리케이션 아키텍처를 보완하기 위해 사용되는 개발 패턴
애플리케이션을 작은 독립적인 서브 애플리케이션으로 분할하고, 서브 애플리케이션을 모아 하나의 애플리케이션으로 구성하는 방법
독립된 기술 스택을 가지며, 개발, 테스트 및 배포가 독립적으로 이루어질 수 있다.
서로 다른 애플리케이션에 느슨하게 결합되어, 하나의 애플리케이션에서 변경을 할 때 다른 부분에 미치는 영향을 최소화한다.
큰 규모의 애플리케이션을 더 쉽게 관리하고 확장할 수 있다.

장점

덜 복잡하고, 적은 양의 코드를 관리하여 코드의 품질을 높일 수 있다.
배포의 범위가 줄어들어 빌드 및 배포 시간이 줄고, 장애 파급 범위가 작아진다.
단일 장애 위험을 피할 수 있다.
커뮤니케이션 비용이 줄어든다.
점진적으로 업그레이드 하기에 용이하다.
애플리케이션을 자유롭게 조립하여 제공할 수 있다.
서비스 별로 주도적으로 자유롭게 기술 스택을 선택할 수 있다.
서비스 별로 독립적으로 작업 할 수 있기 때문에 개발 주기가 빨라진다.

단점

전체적인 리소스의 크기가 커져서 성능 저하에 주의해야 한다.
중복된 코드가 발생할 수 있다.
초기 구축 비용이 발생한다.
다양한 마이크로 프론트엔드 간의 통합 과정에서 추가적인 복잡성이 발생할 수 있다.
런타임에 동적으로 통합하는 관정에서 문제가 발생할 수 있다.

마이크로 프론트 도입 체크

프로젝트 규모가 클 경우
- 코드를 수정한 후 사이드 이펙트로 인한 버그가 발생한다.
- 새로운 기능을 위해 기존 코드를 활용하기 어렵다.
- 간단한 수정 사항을 적용하기 위한 통합, 테스트, 빌드 및 배포 시간이 점점 길어질경우
- 작업을 위한 커뮤니케이션이 많아질 경우
- 동일한 기능 개발을 위해 여러 곳의 작업자가 필요한 경우
기능적으로 마이크로 앱으로 분해가 가능한 경우
런타임에 여러 가지 마이크로 앱을 선택적으로 조립해서 제공해야 하는 경우

[Svelte] Svelte특징, Svelte Start Example

차노도리 — Sun, 24 Sep 2023 21:49:10 +0900

https://svelte.dev/

Svelte • Cybernetically enhanced web apps

complete Built-in scoped styling, state management, motion primitives, form bindings and more — don't waste time trawling npm for the bare essentials. It's all here.

svelte.dev

Svelte

JavaScript 프레임워크이다.
간결한 코드로 코드베이스로 개발 시간 단축과, 높은 가독성을 가진다.
컴파일 과정에서 코드 최적화 작업을 진행하여 런타임 성능을 향상 시켜 애플리케이션 반응속도 가 빠르다. (No virtual Dom)
변수나 상태변화를 명시적으로 추적하거 관리할 필요 없이, 컴파일 단계에서 자동으로 감지되며, UI를 업데이트 된다. (Truly reactive)
Api가 많지 않아서 낮은 러닝 커브를 가진다.

Svelte 프로젝트 생성

https://github.com/sveltejs/template

GitHub - sveltejs/template: Template for building basic applications with Svelte

Template for building basic applications with Svelte - GitHub - sveltejs/template: Template for building basic applications with Svelte

github.com

npx degit sveltejs/template [프로젝트명]

[HTTP 완벽 가이드]2장 URL과 리소스

차노도리 — Wed, 20 Sep 2023 22:48:06 +0900

2장 URL과 리소스

2.1 인터넷의 리소스 탐색하기

URL
- 브라우저가 정보를 찾는데 필요한 리소스의 위치를 가리킨다.
- 스킴 : 웹 클라이언트가 리소스에 어떻게 접근하는지 알려준다.
- http:/https : 하이퍼 텍스트 전송 프로토콜
- ftp: 파일 전송 프로토콜
- javascript : URL내 JavaScript코드
- mailto : 전자 메일주소
- ssh : 보안 쉘
- 참고 : https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web
서버 주소 :
- 서버의 위치로, 웹 클라이언트가 리소스 어디에 호스팅 되어있는지 알려 준다.
리소스 경로
- 서버에 존재하는 로컬 리소스들 중에서 요청받은 리소스가 무엇인지 알려준다.
- ex)

서버 경로 : www.joes-hardware.com
리소스 경로 : /seasonal/index-fall.html

2.1.1 URL이 있기 전 암흑의 시대

ftp.joes-hardware.com에 위치한, pub디렉터리의 complete-catalog.xls 파일을 공유하는 방법

URL을 사용 안 할 경우

ftp.joes-hardware.com에 FTP로 접속한다.
익명 사용자로 로그인을 한다.
pub 디렉터리로 이동한다.
complete-catalog.xls을 내려받는다.

URL을 사용할 경우

브라우저에서 ftp://ftp.joes-hardware.com/pub/complete-catalog.xls 열어본다.

2.2 URL 문법

<스킴>://<사용자이름>:<비밀번호>@<호스트>:<포트>/<경로>;<파라미터>?<질의>#<프래그먼트>

스킴
- 리소스를 가져오려면 어떤 프로토콜을 사용하여 서버에 접근해야 하는지 가리킨다.
- 알파벳으로 시작되어야 한다.
- 스킴의 끝은 ':'문자로 구분한다.
- default : 없음
사용자 이름
- 리소스에 접근하기 위한 이름
- default : anonymous
비밀번호
- 사용자의 비밀번호
- default : (IE : IEUser, Chrome : chrome@example.com)
호스트
- 리소스를 호스팅 하는 서버의 호스트 명이나 IP 주소
- ex)
- 호스트 명 : http://www.joes-hardware.com:80/index.html
- IP : hjttp://161.58.228.45:80/index.html
- default : 없음
포트
- 리소스를 호스팅 하는 서버가 열어놓은 포트 번호
- default : 스킴에 따라 다르다. (HTTP 기본 포트 : 80)
경로
- 리소스가 서버 내 어디에 있는지를 가리킨다.
- default : 없음
파라미터
- 파라미터는 key, value의 쌍을 이룬다.
- ';'을 통해서 구분한다.
- ex) ftp:prep.ai.mit.deu/pub/gnu;type=d
- default : 없음
질의
- 애플리케이션 파라미터를 전달하는 데 사용한다.
- URL 끝의 '?'로 구분한다.
- 특정 문자를 제외하고는 포맷에 제약사항은 없다.
- ex) http:www.joes-hardware.com/inventory-check.cgi?item=12731&color=blue
- default : 없음
프래그먼트
- 리소스의 조각이나 일부분을 가리키는 이름
- URL이 특정 객체를 가리키는 경우 사용된다.
- 프래그먼트 필드는 서버에 전달되지 않고, 클라이언트에서만 사용된다.
- URL 끝의 '#'로 구분한다.
- ex) http://www.joes-hardware.com/tools.html#drills
- default : 없음

2.3 단축 URL

2.3.1 상대 URL

URL의 종류
- 절대 URL
- 리소스에 접근하는데 필요한 모든 정보를 가지고 있다.
상대 URL
- URL을 짧게 표시하는 방법으로, URL의 모든 정보를 담고 있지 않다.
- 모든 정보를 얻기 위해서는 기저(base)라고 하는 다른 URL을 사용해야 한다.
- ex) http://www.joes-hardware.com/tools.html

    <a href="./hammers.html" />
    
    <!-- 
    - 기저 URL : http://www.joes-hardware.com
    - 상대 URL : /hammers.html
    - 새로운 절대 URL : http://www.joes-hardware.com/hammers.html 
    -->

상대 URL을 절대 URL로 변환하기

2.4 안전하지 않은 문자

안전한 전송
- 정보가 유실될 위험 없이 URL을 전송할 수 있는 것
- 알파벳 외의 문자도 포함하려고 URL 인코딩 규칙이 생겨남
- 예약된 문자들은 URL에서 사용하려면 사전에 인코딩을 해야 한다.
- 이스케이프를 문자를 이용해 특정 문자를 인코딩 함으로써 완성도를 높였다.

  '~' -> %7
  ' ' -> %20
  '%' -> %25

2.6 미래

URL: 특정 시적에 어떤 것이 위치한 곳을 알려준다.
URN : 객체가 옮겨지더라도 항상 객체를 가리킬 수 있는 이름을 제공
지속 통합 자원 지시자 (PURL)을 사용하면 URL로 URN 기능을 제공할 수 있다.
- PURL : 리소스의 실제 URL목록을 관리하고 추적하는 리소스 위치 중개 서버를 두고, 해당 리소스를 우회적으로 제공
URN으로 주소 체계를 바꾸는 건 표준 체계를 바꾸는 것이 큰 작업이라 계속 사용 중

2.7 추가 정보

참고 : [W3C](https://www.w3.org/)
참고 : [ietf](https://www.ietf.org/)
참고 : [PURL](http://purl.oclc.org)

[HTTP완벽 가이드] 1장 HTTP 개관

차노도리 — Sat, 16 Sep 2023 21:31:19 +0900

1. 1 HTTP: 인터넷의 멀티미디어 배달부

HTTP

웹 서버로부터 정보를 브라우저에 전달하는 역할
신뢰성 있는 프로토콜로, 신뢰성 있는 데이터 전송을 보장한다.

1.2 웹 클라이언트와 서버

웹서버

웹콘텐츠가 존재하는 곳 (HTTP 서버)
웹 서버는 인터넷의 데이터를 저장하고, HTTP 클라이언트가 요청한 데이터를 제공한다.

클라이언트 요청과정

URL 주소 중 도메인 네임 부분을 운 서버에서 검색한다.
DNS 서버에서 해당 도메인 네임에 해당하는 IP주소를 찾아 사용자가 입력한 URL정보와 함께 전달한다.
브라우저는 HTTP 프로토콜을 사용하여 요청 메시지를 생성하고 HTTP 요청 메시지는 TCP/IP프로콜을 사용하여 서버로 전송된다.
서버는 response 메시지를 생성하여 다시 브라우저에게 데이터를 전송한다.
브라우저는 response를 받아 파싱하여 화면에 렌더링한다.

1.3 리소스

웹 리소스

웹 서버 파일 시스템의 파일
정적 파일: 텍스트 파일, HTML 파일, 이미지/동영상 파일, 그 외 파일
동적 콘텐츠 리소스: 사용자, 요청한 정보, 시간에 따라 다른 콘텐츠 생성

1.3.1 미디어 타입

MIME(Multipurpose Internet Mail Extensions)

HTTP 전송객체에 붙는 데이터 포맷 라벨
이메일 호환을 위해 설계되었음
주타입 / 부타입

HTML: text/html
plain ASCII: text/plain
JPEG: image/jpeg
GIF: image/gif
퀵타임: video/quicktime
ppt: application/vnd.ms-powerpoint

1.3.2 URI

URI(uniform resource identifier)

서버 리소스 이름

1.3.3 URL

URL(uniform resource locator)

특정 서버의 리소스에 대한 구체적인 위치
스킴(scheme): 프로토콜 (http://, https://)
서버의 주소: (www.joes-hardware.com)
웹 리소스: (/specials/saw-blade.gif)

1.3.4 URN

URN(uniform resource name)

리소스 이름
URI는 URL, URN을 포함한다.

1.4 트랜잭션

HTTP 트랜잭션

요청 명령과 응답 결과로 구성

1.4.1 메서드

GET: 서버에서 클라이언트로 지정한 리소스를 보내라.
PUT: 클라이언트에서 서버로 보낸 데이터를 지정한 이름의 리소스로 저장하라.
DELETE: 지정한 리소스를 서버에서 삭제하라.
POST: 클라이언트 데이터를 서버 게이트웨이 애플리케이션으로 보내라.
HEAD: 지정한 리소스에 대한 응답에서, HTTP 헤더 부분만 보내라.
그 외 CONNECT, **OPTIONS**, TRACE, **PATCH** - [mdn http methods
참고 : (https://developer.mozilla.org/ko/docs/Web/HTTP/Methods)

1.4.2 상태 코드

200: ok. 요청이 성공적으로 되었습니다.
302: 다시 보내라, 다른 곳에 가서 리소스를 가져가라.
404: 요청받은 리소스를 찾을 수 없습니다.
참고 : (https://developer.mozilla.org/ko/docs/Web/HTTP/Status)

1.4.3 웹페이지는 여러 객체로 이루어질 수 있다.

하나의 페이지에서 대량의 HTTP 트랙잭션 수행 가능

1.5 메시지

요청 메시지

웹 클라이언트에서 웹 서버로 보낸 HTTP 메세지
시작줄: 요청 - 무엇을 해야 하는지 / 응답: 무슨일이 일어났는지
헤더: 요청에 들어가는 HTTP 헤더는 HTTP 헤더의 기본 구조를 따릅니다. (구분자 :)
본문: 메시지 본문 (이미지, 비디오, 오디오, 응용 소프트웨어)
참고 : (https://developer.mozilla.org/ko/docs/Web/HTTP/Messages#%EC%8B%9C%EC%9E%91_%EC%A4%84)

1.6 TCP 커넥션

TCP(Transmission Control Protocol)

전송 제어 프로토콜

1.6.1 TCP/IP

오류 없는 데이터 전송
순서에 맞는 전달
조각나지 않는 데이터 스트림

1.6.2 접속, IP 주소 그리고 포트번호

TCP 커넥션: 전화 거는 것과 비슷 (서버에 연결)
80 포트: HTTP 서버

1.7 프로토콜 버전

HTTP/0.9, HTTP/1.0, HTTP/1.0+, HTTP/1.1, HTTP/2.0
HTTP/2.0: 책에서는 진행중이라고 되어있지만, 현재 상용

1.8 웹이 구성요소

프락시(proxy): 클라이언트와 서버 사이에 위치한 HTTP 중개자
캐시: 많이 찾는 웹페이지를 클라이언트 가까이에 보관하는 HTTP 저장소
게이트웨이: 다른 애플리케이션과 연결된 특별한 웹 서버
터널: 단순히 HTTP 통신을 전달하기만 하는 특별한 프락시
에이전트: 자동화된 HTTP 요청을 만드는 준지능적(semi-intelligent) 웹 클라이언트

1.8.1 프락시

클라이언트의 모든 HTTP 요청을 받아 (요청을 수정한 뒤에) 서버에 전달
보안을 위해 사용

1.8.2 캐시

자주 찾는 것의 사본을 저장해 두는, 특별한 종류의 프락시 서버

1.8.3 게이트웨이

게이트웨이는 다른 서버들의 중개자로 동작하는 특별한 서버
주로 HTTP 트래픽을 다른 프로토콜로 변환하기 위해 사용

1.8.4 터널

터널은 두 커넥션 사이의 raw 데이터를 그대로 전달해주는 HTTP 애플리케이션

1.8.5 에이전트

사용자를 위해 HTTP 요청을 만들어주는 클라이언트 프로그램

HTTP 완벽 가이드 책

[React] useEffect 내부에서 비동기 처리하기

차노도리 — Sun, 13 Aug 2023 20:42:28 +0900

비동기 작업을 수행하는 함수 정의하여 호출한다.

ex1) useEffect 내부에서 비동기 처리할 함수 생성후 호출

useEffect(() => {
    (async () => {
      const checkStep = await accessStepCheck();
      if (checkStep === 'NONE') {
        setIsStepLoading(true);
        return;
      }
      accessMove(checkStep);
    })();
  }, []);

ex2) useEffect에서 비동기 처리할 함수 호출

  const accessCheckAndMove = async () => {
    const checkStep = await accessStepCheck();
    if (checkStep === 'NONE') {
      setIsStepLoading(true);
      return;
    }
    accessMove(checkStep);
  };

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

[React] Sentry란? React+Sentry - Error Monitoring Example

차노도리 — Sun, 30 Jul 2023 23:18:19 +0900

https://sentry.io/welcome/

Application Performance Monitoring & Error Tracking Software

Self-hosted and cloud-based application performance monitoring & error tracking that helps software teams see clearer, solve quicker, & learn continuously.

sentry.io

Sentry

오류 및 이슈 모니터링 및 오길 플랫폼
실시간으로 소프트웨어의 문제를 감지하고 해결할 수 있도록 도와주는 서비스
주요 기능
- 소프트웨어에서 발생하는 오류와 예외 사황을 모니터링하고 수집하여 실시간으로 알려준다.
- 사용자가 정의한 이벤트를 로깅하여 어떤 상황에서 추적할 수 있어 디버깅과 서능 문제를 분석하는데 되움이 된다.
- Slack, 이메일 등 다양한 방식으로 알림을 설정할 수 있다.
- 오류 및 이슈에 대한 상세 정보를 제공하고, 이슈의 상태를 추적하고 해결과정을 기록한다.

Sentry 설치

yarn add @sentry/react @sentry/tracing

npm install --save @sentry/react @sentry/tracing

Sentry 초기화

index 부분에 Sentry 설정 초기화 부분 추가
Sentry.inti() : Sentry를 설정하고 여러 기능을 활성화시킴
- dsn : Sentry에서 제공하는 고유한 DNS값 입력
- integrations : Sentry에서 제공하는 통합 설정 부분
  - Sentry.BrowserTracing: 브라우저에서 발생한느 트랜잭션을 추적하도록 허용
    - tracePropagetionTargets: 어떤 URL에서 분산 추적을 사용할지 설정
  - Sentry.Replay: 브라우저의 세션 재생 기능을 제공하여 사용자들이 겪는 환경 와 오류 상황을 디버깅하는데 도움을 준다.
- tracesSampleRate : 성능 모니터링을 위한 트랙잭션 샘플링 비율 설정
- replaySessionSampleRate : 세션 재생을 위한 샘플링 비율
- replayOnErrorSampleRate : 오류가 발생하는 세션에 대해서 세션 재생 샘플링 비율을 설정

ex) index.js

import * as Sentry from "@sentry/react";

Sentry.init({
  dsn: "고유DNS",
  integrations: [
    new Sentry.BrowserTracing({
      tracePropagationTargets: ["localhost"],
    }),
    new Sentry.Replay(),
  ],.
  tracesSampleRate: 1.0, 
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0, 
});

Sentry 수동으로 보고 하기

try-catch 등으로 애플리케이션 내부에서 처리돼서 Sentry로 전달되지 않는다.
Sentry.captureException()를 사용해서 따로 Sentry에 전달 가능하다.

try {
  if (layerInfo.layerList.length > 10) {
    ...
    throw new Error("레이어 개수 초과");
  }
} catch (error) {
  ...
  // 발생한 에러를 Sentry에 보고합니다.
  Sentry.captureException(error);
}

Sentry 이슈 확인

[NestJS] Pipe란? Pipe Validation Example

차노도리 — Fri, 21 Jul 2023 21:58:52 +0900

Pipe

들어오는 요청 데이터를 변환하거나, 유효성 검사를하여 컨트롤로러 전달하기전에 데이터를 가공하는 기능을 수행한다.
들어오는 데이터의 유효성을 미리 검사하여 컨트롤러에서 불필요한 작업을 방지할수있다.
컨트롤러에 반복되는 유혀성 코드를 줄이고, 유효성 검사와 데이터 변환등의 공통 작업을 한곳에서 처리할수있다.

파이프 사용 범위

Global Pipes:
- 애플리케이션 레벨의 파이프를 적용할떄 사용한다.
- 클라이언트에서 들어오는 모든 요청에 적용된다.
Handler-level Pipes
- @usePipes()라는 데코레이터 사용
- 특정 핸들러 메서드에 적용할때 사용
- 핸들러 메소드에 적용되는 파이프로 매개변수에 적용하여 요청 데이터의 변환 또는 유혀성 검사를 수행한다.
Parameter-level Pipes:
- @Param(),@Query, @Body 같은 데코레이터와 함께 사용하여 파라미터에 파이프를 적용한다.
- 특정 매개변수에 적용되는 파이프로 데이터 변환 또는 유효성 검사를 수행할 수 있다

https://jakekwak.gitbook.io/nestjs/overview/pipes

Pipes - nestjs

import { PipeTransform, Injectable, ArgumentMetadata, BadRequestException } from '@nestjs/common'; const types: Function[] = [String, Boolean, Number, Array, Object];

jakekwak.gitbook.io

파이프에 필요한 모듈

class-validator

입력 데이터를 유효성 검사를 제공하는 라이브러리
참고) https://github.com/typestack/class-validator

class-transformer

데이터를 원하는 형식으로 변환하는 기능을 제공하는 라이브러리
참고) https://github.com/typestack/class-transformer

파이프에 필요한 모듈 설치

npm install class-validator class-transformer --save

Built-in Pipes Example

- 규칙 생성

import { IsNotEmpty } from 'class-validator';
...

/**단어 만들기 Request*/
export class CreateVocaBffRequest {
  /**
   * 영어 단어명
   *
   * example: word
   */
  @IsNotEmpty()
  word: string;
  
  ...
}

Custom Pipe Example

PipeTransform를 implements받아서 구현
transform()메소드
- 첫번쨰 인자(value) : 파이프가 변환할 값의 타입
- 두번째 인자(metadata: 요청과 관련된 메타데이터

- custom pipe 생성

import { ArgumentMetadata, PipeTransform } from '@nestjs/common';
...

export class VocaValidationPipe implements PipeTransform {
  transform(value: Voca, metadata: ArgumentMetadata) {
    ...
    
    return value;
  }
}

@UsePipes로 파이프 적용

  // Built-in Pipe
  @Post('/')
  @UsePipes(ValidationPipe)
  createVoca(
    @Body() createVocaBffRequest: CreateVocaBffRequest,
  ): Promise<CreateVocaBffResponse> {
	...
  }
  
  // Custom Pipe
  @Post('/')
  @UsePipesVocaValidationPipe)
  createVoca(
    @Body() createVocaBffRequest: CreateVocaBffRequest,
  ): Promise<CreateVocaBffResponse> {
	...
  }

[NestJS] Module, Controller, Service, Provider 란? Example

차노도리 — Sun, 16 Jul 2023 23:06:45 +0900

Module

애플리케이션의 기능과 관련된 컴퍼넌트를 구조화 하는대 사용한다.
'@Module' 데코레이터를 사용하여 정의한다.
provider(service,repository), controller, module 등을 포함할 수있다.

모듈 만들기

nest g module [모듈명]

nest g module vocas

Controller

클라이언트의 요청을 처리하고 응답을 반환하는 역할을한다.
'@Controller' 데코레이터에 경로를 지정하여 해당 컨트롤러의 라우팅 경로를 설정
Handler : @Get, @Post, @Delete등의 데코레이터를 사용하여 요청 메서드를 지정한다.
비지니스 로직을 구현하고 Service를 호출하여 데이터 조작 및 비지니스 로직을 처리한다.
Module의 controllers에 등록해서 사용한다.

controller 만들기

nest g controller [컨트롤러명]

nest g controller vocas

Service

비지니스 로직을 구현하고, 데이터 조작, 외부 api 호출등 같은 작업을 처리하는 클래스
Controller에서 호출되어 컨트롤러와 데이터베이스, 외부 리소스 사이의 상호작용을 한다.
'@Injectable' 데코레이터를 사용하여 정의
Module의 providers에 등록해서 사용한다.

service 만들기

nest g service [서비스명]

nest g service vocas

Provider

의존성 주입을 위해 사용되는 클래스이다.
'@Injectable' 데코레이터를 사용하여 정의한다.
주로 service,repository,factory,외부 api 등을 나타낸다.

Example

app에 Module에 Module 등록 예시

ex) app.module.ts

...

@Module({
  imports: [VocasModule],
  controllers: [],
  providers: [],
})
export class AppModule {}

Module에 Contorller,service 등록 예시

ex) vocas.module.ts

...

@Module({
  controllers: [VocasController],
  providers: [VocasService],
})
export class VocasModule {}

Controller 예시

ex) vocas.controller.ts

생성자에 private 접근 제한자 사용시 암묵적으로 클래스 프로퍼티로 선언된다.

...

@Controller('vocas')
export class VocasController {
  // 생성자에 private 접근 제한자 사용시 암묵적으로 클래스 프로퍼티로 선언된다.
  constructor(private vocasService: VocasService) {}

  @Get('/')
  getAllVocase(): Promise<GetAllVocasResponse> {
    ...
    return this.vocasService.getAllVocas();
  }
  ...
}

Service 예시

ex) vocas.service.ts

...

@Injectable()
export class VocasService {
  ....

  async getAllVocas(): Promise<GetAllVocasResponse> {
    ...
    return vocas;
  }
  ...
}

[Nest]NestJS란? Express 차이점, NestJS Start

차노도리 — Sat, 15 Jul 2023 22:02:44 +0900

https://docs.nestjs.com/

Documentation | NestJS - A progressive Node.js framework

Nest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with TypeScript and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Rea

docs.nestjs.com

NestJS

Node.js를 기반으로 한 프레임워크
TypeScript를 기본 언어로 지원한다.

NestJS , Express 차이점

구조
- NestJs : 모듈화된 아키텍처를 강조하여 프로젝트 구조를 일관성 있게 유지한다.
- Express: 구조에 대한 강제 사항이 없이 개발자가 직접 프로젝트 구조를 설계하고, 미들웨어와 라우팅을 직접 관리해야 한다.
Typescript
- NestJs: 기본적으로 TypeScrip를 지원한다.
- Express: JavaScript 기반으로 설계되어 있으며, TypeScript를 사용하기 위해 별도의 설정 작업이 필요하다.
의존성 주입 (Dependency Injection)
- NestJs: 기본적으로 의존성 주입을 제공한다.
- Express : 의존성 주입을 내장하고 있지 않으며, 개발자가 필요한 경우 직접 구현을 해야 한다.
Testing
- NestJS: 테스팅을 위한 기능을 내장하고 있으며, 유닛 테스트와 통합 테스를 쉽게 작성할 수 있다.
- Express: 테스트를 위해 별도의 라이브러리나 프레임워크를 선택해야 한다.

NestJS 클라이언트 설치

npm i -g @nestjs/cli

NestJS 프로젝트 생성

nest new [프로젝트명]

nest new gugbab-nest-test

[Git 교과서] 11장 서브모듈

차노도리 — Wed, 12 Jul 2023 00:22:52 +0900

서브 모듈

저장소 하나가 다른 깃 저장소를 포함하는 형태를 의미한다.
규모가 큰 저장소를 여러 개로 분리하여 운영할 수 있도로 해준다.
공통되는 모듈을 분리하여 관리하여 생산성을 높이고 관리를 편하게 할 수 있다.

서브 모듈 추가

git submodule add 원격저장소URL 폴더이름

원격 저장소가 chlid 폴더로 복제된다.
서브 모듈의 설정 파일인. gitmodules에 추가됨
- path : 폴더명
- url : 자식 저장소의 원격 주소 url

부모 저장소 복제

부모 저장소를 clone을 할 경우 sub module 저장소까지 clone 되지 않는다.
sub module 폴더로 이동후 서브 모듈 초기화 이후 업데이트를 진행해줘야 한다.

git clone 부모 저장소

cd child

git submodule init

git submodule update

부모 저장소 업데이트

자식 저장소에 코드 커밋이 발생하면 부모 저장소에서도 커밋이 발생한다.
부모 저장소를 pull해도 서브 모듈은 자동으로 갱신되지 않아서 따로 업데이트를 진행해 주어야 한다.

git submodule update

[Tspec] TypeScrip 기반 OpenApi Spec,Swagger 만들기

차노도리 — Sun, 9 Jul 2023 22:42:00 +0900

Tspec

TypeScript 타입과 JSDoc 기반으로 OpenApi를 자동으로 생성하게 해주는 라이브러리

https://ts-spec.github.io/tspec/

Tspec | Tspec

Tspec Type-driven API Documentation Auto-generating REST API document based on TypeScript types

ts-spec.github.io

Tspec 사용 방법

1. 의존성 주입

npm install tspec
yarn install tspec

2. 타입 지정하기

주의사항
- never 등 특정 타입들 인식 못하는 버그 있음
- 알리아스로 import 하면 타입 인식 못하고 string으로 나오는 버그 있음

ex) type.ts

/** 회원 종류 KEY */
export type CodeEnumsMemberType =
  | "ANY"
  | "CORPORATION"
  | "FRANCHISE"
  | "NONE"
  | "PERSONAL";

/**
 * 로그인 요청 Reqeust
 */
export interface LoginBffRequest {
  /**
   * 회원 아이디
   *
   * example: gugbab01
   **/
...
}

/**
 * 로그인 요청 Response
 */
export interface LoginBffResponse {
  /**
   * 아이디
   *
   * example: gugbab01
   **/
...
}

...

3. swagger router 정의하기

import { Tspec } from "tspec";
import {
  LoginBffRequest,
  LoginBffResponse,
  UserInfoResponse,
  UserLeaveRequest,
} from "../type/sampleType";

export type UserApiSpec = Tspec.DefineApiSpec<{
  tags: ["회원"];
  basePath: "/api";
  paths: {
    "/member": {
      get: {
        summary: "로그인 회원정보 조회";
        responses: { 200: UserInfoResponse };
      };
      patch: {
        summary: "회원 탈퇴";
        body: UserLeaveRequest;
        responses: { 200: true | false };
      };
    };
    "/member/login": {
      post: {
        summary: "회원 가입";
        body: LoginBffRequest;
        responses: { 200: LoginBffResponse };
      };
    };
  };
}>;

4-1OpenApi Spec 확인하기

tspec generate : OpenApi Spec json 파일을 생성
- --specPathGlobs : 읽을 패턴 지정
- --outputPath : OpenApi Spec 저장 경로 위치
- --oepnapiTitle: 생성된 문서의 title

"scripts": {
	...
	"tspec": "tspec generate --specPathGlobs ./**/*.ts --outputPath ./gugbab-tspec.json --openapiTitle 'Gugbab Tspec'"
  },

4-2 미들 웨어를 통해서 swagger-ui, mock 데이터 설정하기

import express from "express";
import { Tspec, TspecDocsMiddleware } from "tspec";

const server = express();

const options: Tspec.InitTspecServerOptions = {
  specPathGlobs: ["./router/**/*.ts"],
  specVersion: 3,
  openapi: {
    title: "Gugbab Tspec",
  },
  debug: false,
  ignoreErrors: true,
};

const router = express.Router();

router.get("/member", (req, res) => {
  res.status(200).json({
    userName: "국밥",
    memberType: "PERSONAL",
    mobileNumber: "032-1234-1234",
  });
});

router.post("/member/login", (req, res) => {
  res.status(200).json({
    userId: "gugbab",
    userName: "국밥",
    memberType: "PERSONAL",
    mobileNumber: "032-1234-1234",
  });
});
router.patch("/member", (req, res) => {
  res.status(200).json(true);
});

async function initServer() {
  server.use("/api", router);
  server.use("/docs", await TspecDocsMiddleware(options));

  server.listen(9000);
}

initServer();

결과 화면

[Git 교과서] 10장 배포 관리와 태그

차노도리 — Fri, 7 Jul 2023 11:54:38 +0900

버전

프로그램을 수정하거나 개선할 때마다 코드를 구분하려고 부여된 식별자
첫 번째 자리
- 메이저 버전으로 큰 기능을 변경했을 때 변경
- 첫 자리가 0으로 시작하면 아직 초기 개발 중인 제품이라는 의
- 메이저 번호 변경 시 하위 버전과 호환성 낮아질 수 있음
두 번째 자리
- 마이너 번호 메이저 버전에서 기능 추가/ 변경 사항이 있을 때 수정
세 번째 자리
- 패치 버전. 버그 수정 등 미미한 변화가 있을 때 사용

특정 커밋의 해시 값을 가리키는 꼬리표
코드 배포 관리를 위해 주로 사용
꼬리표 이름과 정보를 포함함
Lightweight 태그
- 가장 기본적인 태그. 버전 이름만 있음
annotated 태그
- 주석이 달린 태그
-a
- 태그 버전
- 태그 이름은 중복해서 생성할 수 없다.
-m
- 메세지를 작성할 수 있다.
-d
- 태그 삭제.
- 태그는 단순히 커밋의 포인터이므로, 실제 커밋은 삭제되지 않는다.

show
- 태그의 상세 정보를 확인한다.
checkout
- 태그를 이용하여 체크아웃 할때 사용한다.
- 태그를 통하여 체크아웃을 할때 추가 커밋이 불가능하다.
- 추가커밋 작업이 필요하다면 태그기반으로 새로운 브랜치를 생성한다.
push
- 태그를 동기화 할때 사용한다.

// 태그 생성
git tag 태그이름 

// 태그 버전 생성
git tag -a 태그버전

// 메세지와 같이 태그 생성
git tag -a 태그버전 -m 메세지

// 태그 목록 조회
git tag 

// 태그 삭제
git tag -d 태그버전

// 태그 상세 정보 확인
git show 태그버전

// 특정 커밋 태그
git tag -a 태그버전 커밋ID

// 태그를 사용한 체크아웃
git checkout 태그이름

// 태그 브랜치
git checkout -b 브랜치이름 태그이름

// 태그 공유
git push 태그이름

// 전체 태그를 동기화
git push origin --tags

//원격 저장소로 공유된 태그를 삭제
git push --delete origin 태그이름

[DevOps] Jenkins Slave Node 추가 Example

차노도리 — Sun, 2 Jul 2023 00:43:19 +0900

Slave Node 추가하기

Jenkins 관리 -> Nodes and Clouds
- nodes 추가하기
  - Number of executors : 노드에서 동시에 수행할 수 있는 최대 빌드의 수
  - Remote root directory : 노드의 디렉터리 경로
  - Labels : 해당 노드를 라벨링할 키 값
  - Usage : Jenkins 마스터가 해당 노드를 선택하는 규칙 지정
  - Launch method : 노드의 접속 방법

Slave에 접속 가능하면 해당 서버의 정보들이 확인이 가능하다.

ex) 결과 화면

[DevOps] gitHub Actions CICD - pipeline Example

차노도리 — Sat, 1 Jul 2023 00:10:01 +0900

Github Action

GitHub에서 제공하는 지속적인 통합 (Continuous Integration) 및 지속적인 배포 (Continuous Deployment) 서비스

파이프 라인 만들기

.github/workflows 디렉토리에 저장된다.
name : 파이프 라인 이름 설정
on : 파이프라인이 동작할 event Trigger 설정
jobs: WorkFlow의 job 목록

ex) build.yml

# 파이프 라인 이름 설정
name: GUGBAB_GIT_FLOWER_CI

# Event Trigger 설정
on:
  push:
  pull_request:
  # Action 탭에서 Workflow실행 가능 설정
  workflow_dispatch:

# WorkFlow의 job 목록
jobs:
  build:
    # workflow가 실행될 환경
    runs-on: ubuntu-latest
    steps:
      - name: Set up Node.js environment
        uses: actions/setup-node@v3
        with:
          node-version: 18
          check-latest: true
          registry-url: https://registry.npmjs.org/
      - name: Run a one-line script
        run: echo Hello, world! git-flower PipeLine
      - name: Checkout repository
        uses: actions/checkout@v3              
      - name: Print current working directory
        run: |
          pwd
          ls
      - name: Perform a build
        run: |
          yarn install
          yarn build

actions 결과

[DevOps] SonarQube - Jenkins + SonarQube 연동, Gradle Project 정적 분석 Example

차노도리 — Fri, 30 Jun 2023 00:15:17 +0900

https://www.sonarsource.com/products/sonarqube/

Code Quality Tool & Secure Analysis with SonarQube

Empower development teams with a code quality & security solution that deeply integrates into your enterprise environment that enables you to deploy Clean Code securely, consistently and reliably.

www.sonarsource.com

SonarQube

정적 코드 분석과 코드 품질 관리를 지원하는 오픈 소스 플랫폼
이슈, 결함, 코드 복잡성등을 분석하여 코드의 품질을 평가하고 개선하여 품질을 향상
버그 발견, 취약성 검사등을 수행한다.

sonarqube token 생성

로그인 default Id : admin , default pw : admin
My Account -> Security -> User Token 생성

Jenkins + Sonaqube 연동

Plugin 설치

Jenkins 관리 -> plugins
- SonarQube Scanner 설치

Sonarqube 토큰 등록

Jenkins 관리 -> Credentials
- sonaqube Token 등록

Jenkins Config 설정

Jenkins 관리 -> Systme
- SonaQube servers 추가

Gradle Project + SonarQube 적용

프로젝트 플러그인 추가
소나 빌드 실행하기
- ex) gradle sonarqube

https://docs.sonarqube.org/latest/analyzing-source-code/scanners/sonarscanner-for-gradle/

SonarScanner for Gradle

docs.sonarqube.org

ex) bulid.gradle

plugins {
    ...
    id("org.sonarqube") version "4.1.0.3113"
}

...

sonarqube {
    properties {
        property 'sonar.host.url', 'sonarqube 주소'
        property 'sonar.login', '생성된 토큰 Key'
    }
}

분석 결과 화면

[Git 교과서] 9장 복귀

차노도리 — Thu, 29 Jun 2023 17:29:03 +0900

코드를 되돌리는 방법

reset
revert

reset

커밋을 기준으로 이전 코드로 되돌리는 방법
기록한 커밋을 취소한다.

reset 명령어

git reset [option] [커밋ID]
- soft
  - 스테이지 영역을 포함한 상태로 복원한다.
  - add 명령어로 스테이지 영역에 올려 커밋을 실행하기 직전의 단계로 되돌린다.
- mixed
  - 스테이지 영역을 포함하지 않은 상태로 복원합니다.
  - Default 옵션 값이다.
  - add 명령어로 스테이지 영역에 다시 올려서 커밋을 진행해야한다.
- hard
  - 실제 파일이 삭제된 이전 상태로 복원합니다.
  - 복귀 시작의 커밋 상태와 해당 커밋의 워킹 디렉터리까지 모두 되돌린다.
- 스테이지 reset
  - 스테이지 영역 파일을 다시 unstage 상태로 만들때 사용
  - git reset [파일이름]

revert

공개한 저장소에서 이전 상태를 되돌리려고 할때 사용
기존 커밋을 남겨 두고 취소에 대한 새로운 커밋을 생성한다.
한 번에 한커밋만 취소가 가능하다.

revert 명령어

git revert [커밋ID]

리셋과 리버트 비교

둘 다 동작을 취소하고 과거 상태로 되돌릴 때 사용한다.
리버트와 리셋은 이전 커밋 정보를 삭제하는지 여부에 대한 차이점이 있다.
원격 저장소에 공개한 커밋이라면 특정 커밋을 삭제하는 것은 다수의 사용자와 공유하는 저장소의 커밋 기록이 깨질 수 있기 때문에 revert를 사용하는 것이 좋다.

[DevOps] Jenkins Pipeline Example

차노도리 — Tue, 27 Jun 2023 00:12:18 +0900

Jenkins Pipeline

Declarative
- 구문이 간결하고 가독성이 좋다.
- 구조와 흐름을 명시적으로 선언한다.
- 자동으로 스테이징과 로깅을 처리한다.
Scripted
- 자유로운 스크립팅이 가능하다.
- 복잡한 로직과 동적 작업 흐름 구성이 가능하다.
- 가독성과 유지 보수성이 낮을 수 있다.

Jenkins Pipeline Example

pipeline item 생성
pipeline script 작성

ex)

pipeline {
  ## 실행 가능한 agent 지정
  agent any   
  ## 파이프 라인 정의, 스테이지 블록 설정 영역
  stages {
    stage('Compile') {
      steps {
        echo "Compiled successfully!";
      }
    }
    stage('Code Analysis') {
      steps {
        echo "Code Analysis completed successfully!";
      }
    }
    stage('Deploy') {
      steps {
        echo "Deployed successfully!";
      }
    }
  }
  ## 파이프라인의 단계가 모두 실행된 후에 추가행되느 작업 정의 영역
  post {
    always {
      echo "This will always run"
    }
    success {
      echo "This will run when the run finished successfully"
    }
    failure {
      echo "This will run if failed"
    }
    unstable {
      echo "This will run when the run was marked as unstable"
    }
    changed {
      echo "This will run when the state of the pipeline has changed"
    }
  }
}

빌드 결과

[DevOps] Jenkins Pipeline 시각화 Delivery Pipeline example

차노도리 — Mon, 26 Jun 2023 18:08:46 +0900

Jenkins Delivery Pipeline

지속적 통합(CI) 도구를 사용하여 소프트웨어 제공 과정을 자동화하고 시각화하는 기능을 제공하는 플러그인

Plugin 설치

Jenkins 관리 -> plugins -> Delivery Pipeline 설치

Item Pipeline 연결

ex) gugbab-eureka-server main gradle jenkins -> Project gugbab-api-gateway main gradle jenkines

Delivery Pipeline View 만들기

Delivery Pipeline Veiw 만들기
Pipelines에 시각화할 컴퍼넌트 추가하기

시각화 결과 화면

[DevOps] Ansible Playbook - K8s Script 실행 example

차노도리 — Thu, 22 Jun 2023 00:06:09 +0900

K8s script 만들기 참고

https://puk0806.tistory.com/84

[DevOps] Kubernetes yml - Deployment, Services 만들기 Example

Kubernetes yml apiVersion :Kubernetes API의 버전 kind :리소스의 종류 metadata :name 등리소스에 대한 메타데이터 spec :컨테이너 이미지, 포트, 환경 변수 등 세부 사항 deployment ex) deployment.yml ## Kubernetes API의 버

puk0806.tistory.com

Ansible 서버 K8s 접근 권한 추가

Ansible 서버 접속
hosts파일에 접근할 k8s 서버 호스트 설정
k8s가 있는 서버에 ssh 키 복사
- ssh Key 추가 ssh-copy-id [k8s서버]

Ansible Playbook

ex) playbook.yml

- name: gugbab-ansible-k8s-cicd-deployment-playbook
  hosts: kubernetes

  tasks:
    - name: create test gugbab deployment
      command: /usr/local/bin/kubectl kubectl apply -f /Users/puk0806/K8s/gugbab-devops-deployment.yml

[DevOps] Kubernetes yml - Deployment, Services 만들기 Example

차노도리 — Wed, 21 Jun 2023 19:42:07 +0900

Kubernetes yml

apiVersion :Kubernetes API의 버전
kind :리소스의 종류
metadata :name 등리소스에 대한 메타데이터
spec :컨테이너 이미지, 포트, 환경 변수 등 세부 사항

deployment

ex) deployment.yml

## Kubernetes API의 버전
apiVersion: apps/v1
## 리소스의 종류
kind: Deployment
## name등 리소스에 대한 메타데이터
metadata:
  name: gugbab-cicd-deployment
## 컨테이너 이미지, 포트, 환경 변수 등 세부 사항
spec:
  selector:
    matchLabels:
      app: gugbab-cicd-devops-project
  replicas: 2
  template:
    metadata:
      labels:
        app: gugbab-cicd-devops-project
    spec:
      containers:
      - name: gugbab-cicd-devops-project
        image: puk0806/gugbab-cicd-project-ansible
        imagePullPolicy: Always
        ports:
        - containerPort: 8080

Service

deployment를 외부에서 사용할 수 있게 서비스 생성

ex) service.yml

apiVersion: v1
kind: Service
metadata:
  name: gugbab-cicd-service
  labels:
    app: gugbab-cicd-devops-project
spec:
  selector:
    app: gugbab-cicd-devops-project
  type: NodePort
  ports:
    - port: 8080
      targetPort: 8080
      nodePort: 32000

K8s yml 파일 실행

kubectl apply -f [파일명]

[Git 교과서] 8장 병합과 충돌

차노도리 — Tue, 20 Jun 2023 22:45:17 +0900

병합

분리된 브랜치를 한 브랜치로 합치는 작업

자동 병합

원본 기준으로 두 파일의 변경 이력을 비교하여 변경된 파일 내용이 발견되면 자동으로 수정된 코드 내용을 병합
자동으로 반영하지 못하는 것들은 충돌이 발생

병합 방식

merge
- fast--forward 병합
  - 브랜치 경로가 일직선일 경우의 브랜치에서 병합 작업을 할 때
  - 자식 branch의 시작 커밋을 부모 branch 이후의 커밋으로 가리킨다.
- 3-way 병합
  - 공통 조상을 가지는 두 자식branch를병합하는 방식
  - git은 공통 조상 커밋을 자동으로 찾아주며, 공통 조상을 기준으로 branch를 병합한다.
  - 병합을 성공적으로 완료한 후 새로운 커밋(병합 커밋)을 새로 생성한다.
rebase
- 시간 순의 순차적 나열이 아닌 기준 브랜치의 마지막 커밋으로 재정렬
- 두 브랜치 서로 비교하지 않고 순차적으로 커밋 병합
- 보통 master or main 브랜치에는 사용하지 않는 것으로 한다.
  - 잘못 활용할 경우 소스 이력이 꼬일 수 있다.

충돌

충돌의 원인은 다른 사람과 같은 위치의 코드를 동시에 수정시에 발생
충돌을 해결하면, 파일은 modified 상태가 되는데, 이를 다시 스테이지 영역에 등록하고 병합 커밋을 직접 만들어야 한다.

[DevOps] K8s - Kubernetes 란? Kubernetes 기본 명령어

차노도리 — Mon, 19 Jun 2023 00:22:46 +0900

https://kubernetes.io/

Production-Grade Container Orchestration

kubernetes.io

Kubernetes

컨테이너 오케스트레이션 플랫폼으로서 대규모의 애플리케이션을 관리하고 배포하기 위한 플랫폼

오케스트레이션

컨테이너 기반의 애플리케이션을 운영할 때, 애플리케이션의 배포, 확장, 로드 밸런싱, 모니터링, 장애 복구 등 다양한 작업을 효율적으로 관리하는 것

Kubernetes 특징

컨테이너화 된 애플리케이션 구동
서비스 디시크버리와 로드밸런싱 기능
스토리지의 오케시트레이션 기능
자동화된 배포 기능
환경 변수, 스크릿 파일 등을 사용하여 애플리케이션을 구성 관리

Kubernetes 할 수 없는기능

소스 코드 배포, 빌드 기능
로깅, 모니터링 서비스

K8s - Pod

애플리케이션을 위해 서로 상호 작용해야 하는 컨테이너들의 논리적 집합
K8s의 배포 및 실행되는 기본 실행 단위

K8s - Deployment

파드의 배포 및 관리를 위한 K8s의 리소스
ReplicaSet을 기반으로 Pod의 복제본을 관리한다.
롱링 업데이트, 롤백, 스케일링 등의 기능을 제공한다.

K8s - Services

Replicated된 Pods의 네트워크 노출과 로드벨런싱을 관리

K8s Minikube 설치

Minikube - 테스트용도나 개발용도로 간단하게 사용할수있는 K8s 버전

K8s 기본 명령어

사용 가능한 노드 목록 확인
- kubectl get nodes
사용 가능한 파드 목록 확인
- kubectl get pods
현재 배포 중인 리소스 목록 가져오기
- kubectl get deployments
현재 사용 중인 services 목록 가져오기
- kubectl get services
pod 생성
- kubectl run [pods명] --image=[이미지명] --port=[포트번호]
pod 상세 정보 확인
- kubectl describe pods [pods명]
pod 삭제
- kubectl delete pod/[pods명]
deployment 생성
- kubectl create deployment [deployment명] --image=[이미지명]
deployment Scale 변경
- kubectl scale deployment [deployment명] --replicas=[pods수]
deployment 삭제
- kubectl delete deployment.apps/[deployment명]

// 사용 가능한 노드 목록 확인
kubectl get nodes 
// 사용 가능한 파드 목록 확인
kubectl get pods 
// 현재 배포 중인 리소스 목록 가져오기
kubectl get deployments
// 현재 사용 중인 services 목록 가져오기
kubectl get services

// Nginx 서버 실행
kubectl run gugbab-nginx --image=nginx --port=80
// pod 상세 정보 확인
kubectl describe pods gugbab-nginx
// pod 삭제 삭제
kubectl delete pod/gugbab-nginx

// deployment 생성
kubectl create deployment gugbab-nginx --image=nginx
// deployment Scale 변경
kubectl scale deployment gugbab-nginx --replicas=2
// deployment 삭제
kubectl delete deployment.apps/gugbab-nginx

[Git 교과서] 7장 Stash

차노도리 — Thu, 15 Jun 2023 22:06:12 +0900

Stash

커밋되지 않은 변경 내용을 임시 저장할 수 있는 기능이다.

Stash 명령어

 * 코드 저장
   
   git stash // 현재 작업들을 임시 스택 영역에 저장
   
   git stash save // git stash와 동일하나, 하단과 같이 메세지를 함께 저장 가능
   
   git stash save "WIP: 메시지~~~" // 각각의 스태시 구별할 수 있도록 메시지 추가 가능
   
   git stash --keep-index // 스테이지 영역의 파일들을 제외하고 스태시
   
   git stash --include-untracked // 등록되지 않은 untracked 상태의 파일을 스태시로 생성 ( 단축어: -u )
   
   * 임시 저장 영역의 스택 목록
   
   git stash list // 스태시 스택 조회
   
   git stash show // 최신 스태시와 현재 워킹 디렉터리 간 차이 간략하게 출력
   
   git stash show -p stash@{0} // 스태시와 현재 워킹 디렉터리 간 상세한 차이 출력
   
   * 임시 저장한 스태시 불러오기
   
   git stash pop // 최신 스태시 가져오기 (가져오기 + 제거)
   
   * 스태시 복원으로 충돌
   
   git stash branch test // 새로운 브랜치 생성과 동시에 스태시의 임시 작업 내용 복원
   
   * 스태시 복사
   
   git stash apply // 스택에서 제거하지 않은 채로 가져오기
   
   git stash apply stash@{1} // 특정 중간 작업 지정하여 적용
   
   * 스태시 삭제
   
   git stash drop

Clean

워킹 디렉터리에 있는 추적되지 않는 파일들을 찾아 삭제하는 것

    git clean // 삭제 명령은 민감해서 몇 가지 옵션을 같이 사용해야 함
    
    git clean -f // 강제 청소
    
    git clean -n // clean 명령어를 사용하여 잘못 삭제하는 것을 미연에 방지하고자 파일을 가상으로 미리 처리해 보고 사용자에게 확인 요청
    
    git clean -d // 추적되지 않는 파일만 별도록 삭제
    
    git clean -x // .gitignore에 등록한 파일까지 같이 삭제하고 싶을 때 사용

[IaC] Ansible Playbook Example

차노도리 — Mon, 12 Jun 2023 00:03:52 +0900

Ansible Playbook

사용자가 원하는 내용을 미리 작성해 놓은 파일

Playbook 사용법

playbook yml 작성
ansible-playbook [playbook명] 실행

ansible hosts 추가 예시

ansible의 멱등성 때문에 playbook을 여러번 실행해도 같은 설정이 여러번 적용되지 않는다.

ex) ansible hosts 추가 예시

[IaC] Ansible이란? Ansible config,SSH 설정, module Test

차노도리 — Sun, 11 Jun 2023 00:24:53 +0900

Iac - Infrastructure as Code

인프라의 정보를 스크립트를 통해서 관리하는 것
버전 관리를 통한 리소스 관리가 가능하다.

https://www.ansible.com/

Ansible is Simple IT Automation

Ansible is the simplest way to automate apps and IT infrastructure. Application Deployment + Configuration Management + Continuous Delivery.

www.ansible.com

Ansible

SSH를 통해 대상 서버에 접속하여 작업을 수행한다.
에이전트 없이 동작한다.
여러개의 서버를 효율적으로 관리할 수 있게 해주는 환경 구성 자동화 도구

Ansible에서 관리할 서버 설정

/etc/ansible/hosts - 관리할 서버 등록

Ansible에서 접속 SSH Key 생성

키 생성
- ssh-keygen
키 복사
- ssh-copy-id root@[접속할 서버 IP]

ex)추가 인증 없이 접속 가능

Ansible module 실행 옵션

-i (--inventory-file) : 적용될 호스트들에 대한 파일 정보
-m (--module-name) : 모듈 설택
-k (--ask-pass) : 관리자 암호 요청
-K (--ask-become-pass) : 관리자 권한 상승
--list-hosts : 적용되는 호스트 목록

ex) module 사용 예시

[CICD] Jenkins - 다른 SSH 서버 + Docker Contaner 배포 하기

차노도리 — Thu, 8 Jun 2023 22:13:27 +0900

Plugin 설치

Publish Over SSH 설치

SSH 설정 추가하기

Jenkins 관리 -> System -> Publish over SSH -> SSH Servers 추가
- hostname : localhost를 사용하면 안 됨.
- password추가, Port 확인하기
- Test Configuration - 접속 가능 테스트 가능하다.

Jenkins Items 생성

빌드 후 조치 -> Send build artifacts over SSH 설정 추가
Exec command : 복사 이후 실행될 명령어

[CICD] Jenkins - git CICD 설정, build Trigger example

차노도리 — Wed, 7 Jun 2023 00:17:49 +0900

Jenkins - Git Docker Config 설정방법

https://puk0806.tistory.com/76

[CICD] Jenkins - Git,Maven,Gradle Plugins 설정 Docker 배포 Example

Jenkins Start 설명 https://puk0806.tistory.com/75 [CICD] Docker Container - Jenkins Start Example https://www.jenkins.io/ Jenkins Easy installation Jenkins is a self-contained Java-based program, ready to run out-of-the-box, with packages for Windows, Li

puk0806.tistory.com

CICD

지속적인 통합으로 여러 개발자 들이 동시에 작업하는 경우 발생할 수 있는 코드 충돌이나 통합 오류를 방지하기 위한 개발 방법론

지속적인 배포로 CI의 결과물을 실제 사용자에게 배포하는 프로세스이다.

빌드 유발 설정

Build periodically
- 변경이 되지 않아서도 설정해놓은 시간마다 트리거
Poll SCM
- commit에 대한 내용이 있을때만 설정해 시간마다 체크 후 build 트리거
Cron job
- 유닉스 계열 운영 체제에서 주기적으로 실행되는 작업을 자동화하기위해 사용되는 스켈중링
- * * * * * : 앞에서부터 분,시,일,월,요일 의미 // 테스트를 위해 항상으로 설정

[CICD] Jenkins - Git,Maven,Gradle Plugins 설정 Docker 배포 Example

차노도리 — Tue, 6 Jun 2023 17:27:30 +0900

Jenkins Start 설명

https://puk0806.tistory.com/75

[CICD] Docker Container - Jenkins Start Example

https://www.jenkins.io/ Jenkins Easy installation Jenkins is a self-contained Java-based program, ready to run out-of-the-box, with packages for Windows, Linux, macOS and other Unix-like operating systems. www.jenkins.io https://puk0806.tistory.com/55 [Doc

puk0806.tistory.com

Plugin 설치

Jenkins 관리 -> plugins
- GitHub plugin 설치
- Gradle Plugin 설치
- Maven Integration plugin 설치
- Deploy to container Plugin 설치

설정 추가하기

Jenkins가 설치된 PC에 명령어가 사용 가능한 확인 해야한다.
- docker exec -it [컨테이너명] [사용할 쉘명]

git 설정 추가하기

Jenkins 관리 -> Tools -> git 커멘드 설정
git 설치확인
- git --version

Gradle 설정 추가하기

Jenkins 관리 -> Tools -> Gradle 설정 추가

Maven 설정 추가하기

Jenkins 관리 -> Tools -> Maven 설정 추가

Jenkins Items 생성

gradle의 경우 FreestyleProject, Maven경우 maven Project 생성
git repository 연동
- private repository 라면 credetials를 추가해줘야한다.
build 파일 설정
- build 설정 파일 설정
- build 옵션 설정
  - clean compile package
  - clean compileJava jar
    - clean : 빌드되어 있다면 빌드 내용 삭제 (target 폴더 제거)
    - complile : 소스 코드를 컴파일 실행
    - compileJava : java소스 컴파일 실행
    - package : 빌드된 소스 코드를 package 하는 명령어 jar, war 파일로 만들어준다.
    - jar : 빌드된 소스 코드를 jar 파일로 만들어준다.
빌드 후 작업 설정
- Container 올리는 설정 추가
- jar 파일의 경우
  - 빌드후 조치 -> Archive the artifacts 선택
  - jar파일 경로 경로 설정
- war 파일의 경우
  - Deploy war/ear to a container
  - war 파일 파일 경로 설정
  - AddContainer Tomcat 추가
    - tomcat 배포 권한 추가
    - tomcat url 설정 추가

[CICD] Docker Container - Jenkins Start Example

차노도리 — Mon, 5 Jun 2023 00:12:25 +0900

https://www.jenkins.io/

Jenkins

Easy installation Jenkins is a self-contained Java-based program, ready to run out-of-the-box, with packages for Windows, Linux, macOS and other Unix-like operating systems.

www.jenkins.io

https://puk0806.tistory.com/55

[Docker] docker Image, Container 란? docker example

https://www.docker.com/ Docker: Accelerated, Containerized Application Development Docker is a platform designed to help developers build, share, and run modern applications. We handle the tedious setup, so you can focus on the code. www.docker.com Image C

puk0806.tistory.com

Jenkins

CI/CD 도구로, 애플리케이션 개발 및 배포 과정을 자동화할 수 있도록 도와주는 오픈소스
참고 https://github.com/jenkinsci/docker

GitHub - jenkinsci/docker: Docker official jenkins repo

Docker official jenkins repo. Contribute to jenkinsci/docker development by creating an account on GitHub.

github.com

Docker Jenkins 이미지 다운

docker pull jenkins/jenkins:lts-jdk11

Docker Jenkins Container 생성

docker run -d -p 8080:8080 -p 50000:50000 --name jenkins-server --restart=on-failure jenkins/jenkins:lts-jdk11

Docker logs로 default password 확인

docker logs [컨테이너명]

Jenkins JDK 설정 안되있으면 해주기

Jenkins 서버에 접속
Tools 수정

Jenkins Item 생성 빌드 테스트

[Jest] React - Jest Use CustomProvider, useEvent Example

차노도리 — Sun, 4 Jun 2023 01:03:46 +0900

Jest Test Provider 주입 하는 방법

1. render 시에 직접 주입한다.

option으로 wrapper로 Provider를 주입한다.

ex) gugbab.test.tsx

import { render, screen } from "@testing-library/react";
...


test("gugbab1 상품 개수 증가후 가격 계산 테스트", async () => {
  render(<Type orderType="products" />, { wrapper: OrderContextProvider });
  ...
 }

2. customRender를 사용한다.

Provider를 주입 받는 util render를 만들어 해당 render를 사용

ex) render-utils

import { render } from "@testing-library/react";
import { OrderContextProvider } from "./contexts/OrderContext";

const customRender = (ui, options) =>
  render(ui, { wrapper: OrderContextProvider, ...options });

export * from "@testing-library/react";

export { customRender as render };

ex) gugbab.test.tsx

import { render, screen } from "../../../render-utils";
...


test("gugbab1 상품 개수 증가후 가격 계산 테스트", async () => {
  render(<Type orderType="products" />);
  ...
}

Jest Text Example

describe
- 비슷 한 테스트를 묶을때 사용한다.
useEvent
- 이벤트를 테스트 할때 사용한다.
- userEvent.type사용하기전userEvent.clear를 해주는것이 좋다.
  - 등록된 이벤트 핸들러를 제거하여 테스트 중에 예기치 않은 동작이 발생하는 것을 방지하기 위해서이다.

ex) gugbab.test.tsx

// 비슷 한 테스트를 묶을떄 사용
describe("상품과 옵션 총 가격 구하는 테스트", () => {
  test("상품 증가이후 총 가격 확인 테스트", async () => {
    render(<OrderPage />);

    const total = screen.getByText("Total Price:", { exact: false });
    expect(total).toHaveTextContent("0");

    const gugbab1Input = await screen.findByRole("spinbutton", {
      name: "gugbab1",
    });

    // 등록된 이벤트 핸들러를 제거하여 테스트 중에 예기치 않은 동작이 발생하는 것을 방지하기 위해서
    userEvent.clear(gugbab1Input);
    userEvent.type(gugbab1Input, "1");

    expect(total).toHaveTextContent("1000");
  });

  test("옵션 증가이후 총 가격 확인 테스트", async () => {
    ...
  });

  test("상품과 옵션을 변경시 총가격 테스트", async () => {
    ...
  });
});

[Git 교과서] 6장-2 Branch

차노도리 — Sat, 3 Jun 2023 20:02:16 +0900

Branch

https://puk0806.tistory.com/66

[Git 교과서] 6장-1 Branch

Branch 나뭇가지, 지사, 분점 등 줄기 하나에서 뻗어나온 갈림길을 의미한다. 저장공간 하나에서 가상의 또 다른 저장 공간을 만드는 것이다. Branch 특징 가상 폴더 작업 폴더를 실제로 복사하지 않

puk0806.tistory.com

원격 브랜치

리모트 브랜치
- 원격 저장소에 생성한 브랜치를 리모트 브랜치라고 하며, 로컬에 생성된 브랜치를 서버로 공유할 수 있다.
- 리모트 브랜치는 보통 `별칭/브랜치 이름` 과 같은 형태로 사용한다.
- 저장소를 복제(git clone) 하면 트래킹 브랜치가 하나만 표시된다. 복제할 당시 모든 브랜치를 복제하지 않았기 때문이다.
- 불필요한 브랜치를 한번에 다 가져오는 것은 효율성과 연관있다.
- 다른 브랜치를 풀 작업으로 받아 트래킹 브랜치를 활성화 하거나 직접 트래킹 브랜치를 지정할 수 있다.

$ git push 원격저장소별칭 브랜치명
$ git push -u origin master // 선택한 브랜치를 원격 서버로 전달한다.
$ git branch -r // 원격 저장소의 리모트 브랜치 목록 보기
$ git branch -a // 모든 브랜치의 정보를 확인하기
$ git branch -vv // 복제 저장소의 트래킹 브랜치 확인하기
$ git push --set-upstream origin 브랜치명 // 현재 내 로컬 브랜치와 원격저장소의 연결할 브랜치 명령

원격 브랜치 복사
- 원격 저장소와 로컬 저장소의 브랜치 목록은 서로 다를 수 있음, 따라서 동기화가 필요하다.
- 다른 개발자가 생성한 브랜치 목록 등 변경된 브랜치 목록을 동기화 할 수 있다.

$ git fetch

브랜치 페치
- fetch 는 원격 저장소의 리모트 브랜치 내용의 변경점을 내려받을 뿐, 자동으로 병합되지는 않는다.
- 병합이 필요한 경우 `git merge 원격저장소별칭/브랜치명` 으로 명령을 실행해야 한다.

브랜치 삭제

브랜치를 삭제한다는 것은 브랜치 내용과 커밋을 모두 삭제한다는 의미. 따라서 삭제를 할 때는 주의가 필요하다.
현재 자신이 바라보고 있는 브랜치는 삭제할 수 없다.
삭제를 위해서는 다른 브랜치로 잠시 이동해야 한다.

일반적인 삭제 방법
- d` 옵션은 스테이지 상태가 깨끗할 때만 삭제를 허용- 병합되지 않은 브랜치는 `-d` 옵션으로 삭제할 수 없다.
- add 명령어로 스테이지의 인덱스가 변경된 상태거나, 워킹 디렉터리가 작업한 기록이 있을 때에는 삭제하지 않는다.

$ git branch -d 브랜치명

강제 삭제 방법
- 일반적인 삭제 방법으로 삭제가 불가능 할 경우 사용한다.
- 옵션을 대문자 `-D` 로 브랜치를 강제 삭제

$ git branch -D 브랜치명

리모트 브랜치를 삭제하는 방법
- 원격 저장소의 브랜치 삭제는 신중하게 삭제해야 한다.

$ git push origin --delete 리모트브랜치명

[React] Mock Server Work Create Use Example

차노도리 — Fri, 2 Jun 2023 00:11:22 +0900

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

import { server } from "./mocks/server";

// 모든 테스트 서버를 생성
beforeAll(() => server.listen());

// 테스트 이후에 핸들러 초기화
afterEach(() => server.resetHandlers());

// 테스트 이후에 서버 종료
afterAll(() => server.close());

Mock Server

실제 서버와 유사한 동작을 하는 가짜 서버이다.
서버를 향한 네트워크 요청을 가로채서 모의 응답을 내려주는 역할을 한다.

Msw 설치

npm install msw

api handler 생성

ex) handlers.tsx

import { rest } from "msw";

export const handlers = [
  rest.get("http://localhost:5000/test", (req, res, ctx) => {
    return res(
      ctx.json(
      ...
      )
    );
  }),
];

server 생성

ex) server.tsx

위에서 만든 handler 주입

import { setupServer } from "msw/node";
import { handlers } from "./handlers";

// mocking server 생성
export const server = setupServer(...handlers)

server config 설정

ex) setupTests.tsx

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

import { server } from "./mocks/server";

// 모든 테스트 서버를 생성
beforeAll(() => server.listen());

// 테스트 이후에 핸들러 초기화
afterEach(() => server.resetHandlers());

// 테스트 이후에 서버 종료
afterAll(() => server.close());

[Error] Jest - Axios SyntaxError: Cannot use import statement outside a module

차노도리 — Thu, 1 Jun 2023 17:17:50 +0900

jest에서 Axios를 yarn add 하고 테스트를 하는데 아래 에러 발생

SyntaxError: Cannot use import statement outside a module

발생 원인

jest에서 해당 모듈을 찾을 수 없다고 나옴
yarn add시 버전을 명시에 주지 않아서 최신 릴리즈 버전 추가
해당 버전은 jest에 지원하지 않아서 에러 발생

해결 방법

axios의 버전을 낮춰주니 해결

[Dcoker] Zipkin, Monitoring(Prometheus + Grafana) Container Create Example

차노도리 — Wed, 31 May 2023 00:13:56 +0900

Zipkin

https://zipkin.io/pages/quickstart

Quickstart · OpenZipkin

Quickstart In this section we’ll walk through building and starting an instance of Zipkin for checking out Zipkin locally. There are three options: using Java, Docker or running from source. If you are familiar with Docker, this is the preferred method t

zipkin.io

컨테이너 생성

docker run -d -p 9411:9411 --network gugbab-network --name zipkin openzipkin/zipkin

Prometheus

https://prometheus.io/download/

Download | Prometheus

An open-source monitoring system with a dimensional data model, flexible query language, efficient time series database and modern alerting approach.

prometheus.io

https://hub.docker.com/r/prom/prometheus

Docker

hub.docker.com

볼륨으로 가져갈 설정파일 수정

...
scrape_configs:
  - job_name: "prometheus"

    static_configs:
      - targets: ["prometheus:9090"]	# docker컨테이너에 올라갈 이름
  - job_name: "gugbab-api-gateway"
    scrape_interval: 15s  # 간격 설정
    metrics_path: "/actuator/prometheus" # 어디에 수집된 데이터를 시계열 데이토 바꿀지
    static_configs: # 서버 설정
      - targets: ["api-gateway:7501"]	# docker컨테이너에 올라갈 이름      
...

컨테이너 생성

docker run -d -p 9090:9090 --network gugbab-network --name prometheus -v /Users/puk0806/Prometheus/prometheus-2.44.0-rc.2.darwin-amd64/prometheus.yml:/etc/prometheus/prometheus.yml prom/prometheus

Grafana

https://grafana.com/grafana/download?pg=get&plcmt=selfmanaged-box1-cta1&platform=docker

Download Grafana | Grafana Labs

Overview of how to download and install different versions of Grafana on different operating systems.

grafana.com

컨테이너 생성

docker run -d -p 3000:3000 --network gugbab-network --name grafana grafana/grafana

[Docker]Kafka + Zookeeper docker-compose Example

차노도리 — Tue, 30 May 2023 00:04:43 +0900

docker-compose

여러개의 컨테이너로부터 이루어진 서비스를 구축할때 사용한다.

Kafka docker-compose.yml 생성

kafka 브로커를 이용할때 정확한 IP가 필요해서 IP 설정 필요

version: '2'
services:
  zookeeper:
    image: gugbab/zookeeper
    ports:
      - "2181:2181"
    networks:
      my-network:
        ipv4_address: 172.18.0.100
  kafka:
    image: gugbab/kafka
    ports:
      - "9092:9092"
    environment:
      KAFKA_ADVERTISED_HOST_NAME: 172.18.0.100
      KAFKA_CREATE_TOPICS: "gugbab_test:1:1"
      KAFKA_ZOOKEEPER_CONNECT: zookeeper:2181
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
    depends_on:
      - zookeeper
    networks:
      my-network:
        ipv4_address: 172.18.0.101

networks:
  my-network:
    name: gugbab-network

docker-compose 실행

docker-compose -f [파일명] up -d