2024년 최신 웹 개발 트렌드 정리



빅-O 표기법은 입력 크기가 증가함에 따라 알고리즘의 실행 시간 또는 공간 요구 사항이 어떻게 증가하는지를 이해하는 데 필수적입니다. 이제 주요 규칙에 대해 자세히 설명하고 JavaScript 예제를 살펴봅시다.

## 1. 상수 곱셈 규칙

설명:
함수를 상수로 곱할 때, 빅-O 표기법은 변하지 않습니다. 이유는 빅-O가 런타임이 입력 크기에 따라 어떻게 증가하는지에 초점을 맞추기 때문이며, 상수는 큰 입력에 대한 성장 속도에 큰 영향을 미치지 않습니다.

```js
function constantMultiplication(arr) {
    let sum = 0;
    for (let i = 0; i < arr.length; i++) {
        sum += 5 * arr[i];
    }
    return sum;
}
```

<div class="content-ad"></div>

Big-O 분석:

- 루프가 n번(여기서 n은 배열의 길이) 실행됩니다.
- 각 요소를 5로 곱해도 성장률에 영향을 미치지 않습니다.
- Big-O: O(n), O(5n)이 아닙니다.

## 2. 합의 법칙

설명:
여러 단계가 추가되는 경우(서로 다른 루프 또는 연산 등), 전체 복잡성은 가장 빠르게 성장하는 항에 의해 결정됩니다. 느리게 성장하는 항들은 입력 크기가 커질수록 무시됩니다.

<div class="content-ad"></div>

```js
function sumRule(arr) {
    let sum1 = 0;
    for (let i = 0; i < arr.length; i++) {
        sum1 += arr[i]; // O(n)
    }
    
    let sum2 = 0;
    for (let i = 0; i < arr.length * arr.length; i++) {
        sum2 += i; // O(n^2)
    }
    
    return sum1 + sum2;
}
```

Big-O Analysis:

- The first loop runs n times, contributing O(n)
- The second loop runs n² times, contributing O(n²)
- The total Big-O is determined by the largest term, O(n²).
- Big-O: O(n²)

## 3. Product Rule

<div class="content-ad"></div>

설명:
중첩된 루프가 있을 때는 각 루프의 복잡성을 곱하여 총 Big-O 값을 얻습니다. 그 이유는 각 루프의 복잡성이 서로 합쳐지기 때문입니다.

```js
function productRule(matrix) {
    let sum = 0;
    for (let i = 0; i < matrix.length; i++) {  // O(n)
        for (let j = 0; j < matrix[i].length; j++) {  // O(m)
            sum += matrix[i][j];
        }
    }
    return sum;
}
```

Big-O 분석:

- 외부 루프는 n번 실행됩니다.
- 내부 루프는 외부 루프의 각 반복에 대해 m번 실행됩니다.
- 전체 시간 복잡도는 O(n) × O(m) = O(n×m)입니다.
- Big-O: O(n×m)

<div class="content-ad"></div>

## 4. 비주요항을 제거하십시오

설명:
여러 항이 있는 표현식(예: n³ + n² + n)이 있을 때, n이 증가함에 따라 가장 빠르게 증가하는 항에 의해 Big-O가 지배됩니다. 큰 입력 크기에 대해서는 느리게 증가하는 항이 무시되기 때문에 삭제됩니다.

```js
function dropNonDominantTerms(arr) {
    let sum = 0;
    
    // O(n)
    for (let i = 0; i < arr.length; i++) {
        sum += arr[i];
    }
    
    // O(n^3)
    for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < arr.length; j++) {
            for (let k = 0; k < arr.length; k++) {
                sum += i + j + k;
            }
        }
    }
    
    return sum;
}
```

Big-O 분석:

<div class="content-ad"></div>

- 첫 번째 루프의 시간 복잡도는 O(n)입니다.
- 두 번째 중첩된 루프 세트의 시간 복잡도는 O(n³)입니다.
- 전체 Big-O는 O(n³)에 의해 지배됩니다.
- Big-O: O(n³)

## 5. 로그 적용 규칙

설명:
각 단계에서 문제 크기를 일정한 비율로 줄이는 알고리즘(예: 문제를 반으로 나누는 것)은 로그 시간 복잡도를 가지게 됩니다. 이는 이진 탐색과 같은 분할 정복 알고리즘에서 일반적으로 발견됩니다.

```js
function binarySearch(arr, target) {
    let left = 0;
    let right = arr.length - 1;
    
    while (left <= right) {
        let mid = Math.floor((left + right) / 2);
        
        if (arr[mid] === target) {
            return mid; // 타겟 발견
        } else if (arr[mid] < target) {
            left = mid + 1; // 오른쪽 반으로 이동
        } else {
            right = mid - 1; // 왼쪽 반으로 이동
        }
    }
    
    return -1; // 타겟을 찾을 수 없음
}
```

<div class="content-ad"></div>

빅오 분석:

- 각 단계는 문제 크기를 절반으로 줄입니다.
- 배열 크기를 1로 줄이는 데 필요한 단계 수는 O (nlogn)입니다.
- 빅오: O (logn).

## 결론

빅오 표기법의 규칙을 이해하는 것은 알고리즘의 효율성을 평가하고 비교하는 데 중요합니다. 이러한 규칙들 - 상수 곱셈자를 무시하는 것, 주된 항에 초점을 맞추는 것, 로그 증가와 같은 패턴을 인식하는 것 - 은 알고리즘의 시간 복잡도를 결정하는 과정을 단순화하는 데 도움이 됩니다. 이러한 원칙을 적용함으로써 입력 크기에 따라 알고리즘이 어떻게 확장되는지 더 잘 이해할 수 있으며 코딩 과제에 대해 더 효율적인 해결책을 선택하거나 설계할 수 있게 될 것입니다.

자바스크립트 예제와 함께 배우는 빅오 표기법 규칙



당신의 JS 번역기

안녕하세요 여러분,
제 블로그로 다시 오신 것을 환영합니다 🙏.
모두가 안전하고 건강한 상태에 있다면 좋겠네요 ️🫶.

![이미지](/assets/img/2024-08-26-BabelCodeWithoutBorders_0.png)

목차
- 소개
- 설치
- 구현
- 결론
- 참고

<div class="content-ad"></div>

# 소개

안녕하세요,
위 문장을 이해하는 사람이 모두가 아닐 것 같아요, 맞죠?
이해하지 못한다면, 누군가는 즉시 번역기를 사용하여 문장을 익숙한 언어로 변환합니다.
번역기와 마찬가지로 Babel은 현대의 JavaScript 코드를 더 오래된 JavaScript 버전으로 번역하여 다양한 브라우저와의 호환성을 확보하고 개발자들이 JavaScript의 최신 기능을 사용할 수 있도록 합니다.

그런데, 안녕하세요를 텔루구어로 향합니다 🙏.

# 설치

<div class="content-ad"></div>

Babel은 애플리케이션을 개발하거나 빌드할 때 사용하는 dev-dependency입니다.

```js
yarn add --dev @babel/core
            (또는)
npm install @babel/core --save-dev
```

@babel/core는 Babel의 핵심입니다. 이는 현대 JavaScript를 더 많은 곳에서 작동하는 더 오래된 버전으로 변환하는 주요 작업을 수행합니다. 여러분의 코드를 읽고 변경하고 업데이트된 코드를 작성하는 엔진과 같습니다.

```js
yarn add --dev @babel/cli
            (또는)
npm install @babel/cli --save-dev
```

<div class="content-ad"></div>

@babel/cli은 터미널에서 Babel을 사용할 수 있게 해줍니다. 거기서 직접 JavaScript 파일을 변환하는 명령을 입력할 수 있어요. 프로젝트를 빌드하거나 Babel을 수동으로 실행할 때 유용해요.

```js
yarn add --dev @babel/preset-env
               (또는)
npm install @babel/preset-env --save-dev
```

@babel/preset-env는 새로운 JavaScript 기능을 구형 버전으로 변환하는 Babel 플러그인의 모음입니다. 이러한 변환은 오래된 브라우저와 같은 각기 다른 환경에서 작동합니다. 지원하려는 브라우저에 따라 자동으로 조정됩니다.

```js
yarn add --dev @babel/core @babel/cli @babel/preset-env
                           (또는)
npm install --save-dev @babel/core @babel/cli @babel/preset-env
```

<div class="content-ad"></div>

자바스크립트 코드를 Babel이 어떻게 번역하는지 간단한 작동 예제로 이해해봅시다.

# 구현

이제, Babel을 응용 프로그램에 설치하는 방법을 알았습니다. 하지만

## 어떻게 그리고 어디에서 구성해야 하나요?

<div class="content-ad"></div>

Babel을 구성하는 몇 가지 방법이 있어요,

- babel.config.json (권장됨)
- .babelrc.json

```js
{
  "presets": [...],
  "plugins": [...]
}
```

- package.json에서도 구성할 수 있어요

<div class="content-ad"></div>

```json
{
  "name": "my-package",
  "version": "1.0.0",
  "babel": {
    "presets": [ ... ],
    "plugins": [ ... ]
  }
}
```

- 조건부 구성이 있는 경우 .js 파일을 사용하여 구성할 수도 있습니다. 예: babel.config.js, .babelrc.js

```js
module.exports = function(api) {
  const isTest = api.env('test');

  return {
    presets: [
      ["@babel/preset-env", {
        targets: isTest ? { node: 'current' } : { browsers: ["> 1%", "last 2 versions"] }
      }]
    ]
  };
}
```

이제 구성을 넣을 수 있는 위치를 알았어요.
코드가 어떻게 트랜스파일되는지 살펴보겠습니다.

<div class="content-ad"></div>

```js
class Person {
  name = 'Default Name';

  constructor(name) {
    if (name) {
      this.name = name;
    }
  }

  greet() {
    return `Hello, my name is ${this.name}!`;
  }
}

const person = new Person('Alice');
console.log(person.greet());

const defaultPerson = new Person();
console.log(defaultPerson.greet());
```

간단한 Person 클래스와 일부 문자열을 반환하는 greet 메서드가 있습니다.

![이미지](/assets/img/2024-08-26-BabelCodeWithoutBorders_1.png)

ES6 클래스는 대부분의 브라우저에서 널리 지원되지만,
Opera Mini 브라우저 사용자는 오류 및 호환성 문제에 직면할 수 있습니다.
여기서 Babel이 이러한 상황을 처리하는 데 도움이 됩니다.


<div class="content-ad"></div>

내 바벨 구성

```js
{
  "presets": [],
  "plugins": ["@babel/plugin-transform-class-properties"]
}
```

`@babel/plugin-transform-class-properties`는 자바스크립트 코드에서 클래스 속성을 사용할 수 있게 해주는 바벨 플러그인입니다.
클래스 속성은 자바스크립트의 구문 특징으로, 클래스 외부에서 직접 클래스에 속성을 정의할 수 있도록 해줍니다.

이 구성을 사용한 후에, 다음 명령어를 사용하면

```js
babel src --out-dir dist

// 이 명령은 src 폴더 파일을 변환하여 dist 폴더에 저장합니다.
```

<div class="content-ad"></div>

그래서, 코드를 트랜스 파일한 뒤에 출력된 내용이에요

```js
"use strict";

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var Person = /*#__PURE__*/function () {
  function Person(name) {
    _classCallCheck(this, Person);
    _defineProperty(this, "name", 'Default Name');
    if (name) {
      this.name = name;
    }
  }
  return _createClass(Person, [{
    key: "greet",
    value: function greet() {
      return "Hello, my name is ".concat(this.name, "!");
    }
  }]);
}();
var person = new Person('Alice');
console.log(person.greet());
var defaultPerson = new Person();
console.log(defaultPerson.greet());
```

지금 이 코드는 오페라 미니를 포함한 모든 브라우저에서 지원돼요.

잠깐만 기다려주세요!
프리셋을 사용하여 이 문제를 해결할 수도 있어요

<div class="content-ad"></div>

Yeonsogdo gidoeneunnal год글arago mareul holro byeongyeonghayeo Jameunikeul d l아urt나세요.

geureohdago 하얍요??

<div class="content-ad"></div>

@babel/preset-env은 자주 사용되는 플러그인 모음이에요. 이 preset에는 @babel/plugin-transform-class-properties도 포함되어 있어요.

```js
// @babel/preset-env 7.21.5에는 아래 플러그인들이 포함되어 있어요


"@babel/compat-data": "^7.21.5",
"@babel/helper-compilation-targets": "^7.21.5",
"@babel/helper-plugin-utils": "^7.21.5",
"@babel/helper-validator-option": "^7.21.0",
"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.18.6",
...
```

위 목록은 업그레이드마다 다를 수 있어요.
참고: 새로운 플러그인을 추가할 때는 node_modules에서 이 목록을 확인하고 preset-env에 포함되어 있지 않다면 설치하고 Babel 구성의 플러그인 배열에 추가하세요.

# 결론

<div class="content-ad"></div>

Babel은 호환성 문제를 걱정하지 않고 현대적인 JavaScript 코드를 작성하는 데 도움을 주는 도구입니다. 코드를 변환하여 다양한 환경과 브라우저에서 작동하도록 합니다. Babel을 사용하면 JavaScript의 최신 기능을 활용하고 최신 상태를 유지할 수 있습니다. 이는 청결하고 미래지향적인 코드를 작성하고자 하는 모든 개발자에게 필수 도구입니다.

제 다음 블로그에서 SWC (Super Web Compiler)에 대해 알아봅시다. 이 도구는 Babel보다 빠르다고 합니다.

# 참고

여기까지 입니다. 이번 짧은 블로그는 여기까지입니다.
모두가 이 블로그를 좋아했으면 좋겠습니다.
그러면 박수를 👏 하고, 친구와 공유해보세요.

<div class="content-ad"></div>

프론트엔드에 대한 더 흥미로운 콘텐츠를 보려면 저를 팔로우해주세요 🎯.

여러분 모두, 정말 감사합니다 🙏.
다음에 또 만나요,
즐거운 학습 되세요 📖✍️.

Babel을 사용한 국경 없는 코딩



<img src="/assets/img/2024-08-26-StacksInJavaScript_0.png" />

```js
class Stack (){  
    constructor(){
    this.items = [];
    }
}
```

- 먼저 'Stack'이라는 새 클래스를 정의했습니다.
- this.items
- 여기에서 스택 데이터 구조를 만들었습니다.
- 주된 규칙은 "나중에 추가한 것이 먼저 빠져나간다(LAST IN, FIRST OUT)"입니다.
- 이것은 스택에 추가된 마지막 항목이 가장 먼저 제거된다는 것을 의미합니다.

# push 메소드

<div class="content-ad"></div>

```js
class Stack{
   ...
   
   push(element) {
    this.items.push(element);
   }
}
```

'push' 작업은 스택의 맨 위에 새 항목을 추가합니다. 
괄호 안에 element, value 등을 작성하는 것을 기억하세요.

## isEmpty 메서드

```js
class Stack{
   ...
   
   isEmpty() {
       return this.items.length === 0;
    }
}
```

<div class="content-ad"></div>

isEmpty 액션은 스택에 항목이 있는지 확인합니다.

# pop 메서드

```js
class Stack{
   ...
   
   pop() {
    if (this.isEmpty()) {
         return "스택이 비어 있습니다";
       }
       return this.items.pop();
   }
}
```

pop 액션은 스택의 맨 위에 있는 항목을 제거합니다. pop 메서드를 수행할 때 스택이 비어 있는지 여부를 확인해야 합니다. 왜냐하면 스택이 비어 있을 수도 있기 때문입니다.

<div class="content-ad"></div>

# peek 메소드

```js
class Stack{
   ...
   
   peek() {
    if (this.isEmpty()) {
         return "스택이 비어 있습니다";
       }
       return this.items[this.items.length-1];
   }
}
```

peek 작업은 스택의 맨 위 항목을 제거하지 않고도 볼 수 있게 합니다.

# size 메소드

<div class="content-ad"></div>

```js
class Stack{
   ...
   
   size() {
    return this.items.length;
   }
}
```

스택에 있는 항목의 수를 반환합니다.

# clear 메소드

```js
class Stack{
   ...
   
   clear() {
    this.items = [];
   }
}
```

<div class="content-ad"></div>

스택에서 모든 요소를 제거하는 데 도움이 됩니다.

모든 코드를 함께 사용하실 수 있습니다.

```js
class Stack {
  constructor() {
    this.items = [];
  }

  push(element) {
    this.items.push(element);
  }

  isEmpty() {
    return this.items.length === 0;
  }

  pop() {
    if (this.isEmpty()) {
      return "스택이 비어있습니다";
    }
    return this.items.pop();
  }

  peek() {
    if (this.isEmpty()) {
      return "스택이 비어있습니다";
    } 
    return this.items[this.items.length - 1];
  }

  size() {
    return this.items.length;
  }
};

const stack = new Stack();    

stack.push(1);
stack.push(2);
stack.push(9);

console.log(stack.size());   // 3
console.log(stack.peek());   // 9
```

참고:

<div class="content-ad"></div>

스택의 내용을 확인하고 싶다면 확인할 메서드를 추가할 수 있어요.

```js
viewStack() {
  return this.items;
}

console.log(stack.viewStack());     //Output: [1, 2, 9]
```

읽어주셔서 감사합니다.

자바스크립트에서 사용되는 스택 자료구조와 메서드들 정리



2018년 10월 29일 자카르타, 인도네시아에서 팡칼핀랑, 인도네시아로 가는 737 MAX 8 편 Lion Air Flight 610편이 이륙 후 13분만에 바다로 추락하여 승객 189명이 전원 사망했습니다. 추락의 정확한 원인에 대한 조사는 진행 중이지만, 조사관들은 기체가 공속, 고도 및 공격각 센서의 읽기에 의존하여 위험을 피하기 위해 비정상적으로 명령을 활성화했을 가능성이 있다고 믿고 있습니다.

2019년 3월 10일, 이티오피아 항공 302편도 737 MAX 8편으로 비슷한 상황에서 추락하여 승객 157명이 전원 사망했습니다. 302편도 가능한 비정상적인 비행기< 노즈 다운(Aircraft Nose Down) > 명령을 보고했습니다. 위키백과에 따르면:

2차 사고 후 보잉 737 Max는 전 세계적으로 운항 중단되었고, 회사의 시장 가치가 하룻밤에 거의 $60억 달러가 소멸되었습니다.

![image](/assets/img/2024-08-26-WhyCuttingCostsisExpensiveHow9HourSoftwareEngineersCostBoeingBillions_0.png)

<div class="content-ad"></div>

단기적 영향은 시작에 불과해요. 하지만 보잉이 위기를 효과적으로 해결하지 못하고 대중 신뢰를 회복하지 못하면 장기적으로 회사의 안정성에 실질적인 영향을 미칠 수 있어요. 골드만 삭스에 따르면, 보잉 737 판매는 다음 5년 동안 보잉의 예상 판매의 33%를 차지하고 있어요.

좋은 소식은 CNN 비즈니스에 발언한 한 보잉 관계자에 따르면:

MCAS 시스템이 실패할 수 있어서 비행기를 급격한 코끼리 코끼리로 보내 비행사들이 회복할 수 없는 상황에 몰리는 것으로 보여요.

이 결함이 소프트웨어인지 마이크로프로세서 하드웨어인지는 알 수 없지만, 생명에 대단히 중요한 시스템의 컴퓨팅 시스템 장애예요. 일반적으로 이와 같은 시스템의 경우에는 품질 통제를 보장하기 위해 많은 방어선을 활용하는 것이 일반적이에요.

<div class="content-ad"></div>

소프트웨어 개발에서 일반적인 방어 수단에는 다음이 있습니다:

- 요구사항 수집
- 요구사항 명세 및 검토
- 위험 분석
- 테스트 주도 개발 (TDD)
- 소프트웨어 Linting
- 정적 분석
- 소프트웨어 검토 / 코드 리뷰
- 모델 시뮬레이션
- 형식적 방법
- 인수 테스트

저는 수백만 명의 사용자를 위한 비생명 중요 시스템을 다루는 소비자 애플리케이션을 주로 작성합니다. 최근 이끌고 또는 참여한 모든 팀은 요구사항 수집 시스템, 명세 검토 (동료 검토와 함께 기술적 Readme 중심 개발 사용), TDD, 제품 시뮬레이션(지속적 통합/지속적 배포를 이용한 프로덕션 시뮬레이션) 사용 등을 사용하여 소프트웨어가 프로덕션 환경에서 작동할 것을 보장하고 있습니다. 린팅, 정적 분석, 코드 리뷰 (소프트웨어 검토의 정리된 버전) 및 인수 테스트도 사용합니다.

우리는 소프트웨어 품질에 큰 비중을 두고 있으며, 세계 어디에 사는지에 상관없이 심지어 우리의 초급 엔지니어들에게도 최소한 1억원/년을 지불하여 최고의 소프트웨어 엔지니어를 유치하여 유지보수가 쉬운 고품질의 소프트웨어를 만들 수 있도록 노력하고 있습니다.

<div class="content-ad"></div>

저희는 주니어 개발자들을 고용하지만 항상 시니어 레벨 엔지니어가 충분하게 있어 멘토십, 코드 리뷰 및 지원을 제공합니다. 또한 모든 엔지니어가 신뢰할 수 있는 소프트웨어 시스템을 구축하는 데 필요한 이해를 얻을 수 있도록 교육 및 멘토십에 많은 투자를 합니다.

생명에 치명적인 시스템을 책임질 경우, 품질에 더욱 집중하고 보다 철저한 교육, 멘토십, 요구 사항 수집, 위험 평가, 소프트웨어 검사 (예: NASA의 Power of 10 규칙을 코드 검사 체크리스트로 사용하는 것과 같은 언어 관련 데이터를 기반으로 한 변형), 정적 분석 및 심지어 크리티컬 시스템을 위한 형식적인 방법을 추가하여 우리의 알고리즘들이 올바르게 명시되었음을 수학적으로 증명할 것입니다.

보잉의 예산이 있었다면, 프로그래밍 언어 선택이 차이를 만들 수 있는지 연구하는 것에도 투자할 것입니다. 제 경험상, 이미 언급한 멘토십 및 다른 품질 조치에 투자하는 것이 언어 선택보다 훨씬 더 큰 영향을 미칩니다만, 생명에 치명적인 시스템에서 약간이라도 결함 가능성을 줄일 수 있는 데이터에 기반한 결정은 삶과 죽음을 가를 수 있습니다. 우리는 소프트웨어 품질에 대해 더 나은 연구가 필요하며, 2000억 달러 이상의 시가총액을 보호해야 하는 상황에서 Boeing에게 이러한 연구를 지원하는 것이 당연한 선택이라고 생각할 것입니다.

우리는 소프트웨어 품질에 크게 투자하는 이유가 우리 팀이 큰 예산을 가지고 있기 때문은 아닙니다 (Boeing의 엔지니어링 예산과 비교하면 물방울에 불과합니다). 우리는 소프트웨어 품질에 대한 투자가 더 나은 속도로 전진하고 장기적으로 비용을 절약할 수 있기 때문에 크게 투자합니다.

<div class="content-ad"></div>

# 빠르면 느리고 저렴하면 비싸다, 그래서 왜 그렇게 많은 매니저들이 저렴하게 하는 걸까요?

비용을 절감하기 위해, 엔지니어링 매니저들은 종종 개발자들을 서두르게 하거나 임의로 현실적이지 못한 마감일을 부여하거나, Boeing의 경우처럼, 생산 대역폭을 늘리려고 싼 계약업체에 엔지니어링을 아웃소싱하는 등의 조치를 취합니다.

Boeing의 비용 절감에 대한 문화적 강조가 737에 작업 중인 엔지니어들에게 온두라온 것으로 보입니다. Boeing이 아웃소싱한 인도 회사 HCL의 737 계약 소프트웨어 엔지니어 중 한 명은 그 비용 절감 문화를 이력서에 보여주며 설명하고 있습니다. 

어떤 시스템을 작업하든, 개발자들이 경영진이 지속적인 진전과 고품질 소프트웨어보다 속도와 저렴함을 가치 있다고 느끼도록하는 엔지니어링 문화를 조성한다면, 그것은 소프트웨어의 품질과 제때 배송에 엄청난 부정적 영향을 미칠 것입니다. 결함 있는 소프트웨어는 더 많은 시간이 소요됩니다.

<div class="content-ad"></div>

경영진이 비용 절감을 과도하게 강조하면 개발자들이 서둘러야 한다고 느낍니다. 개발자들이 서둘러야 할 때:

- 멘토링과 코드 리뷰가 중단됩니다
- 버그가 쌓입니다
- 테스트가 건너뛰어집니다
- 커뮤니케이션이 떨어집니다
- 개발자들이 지치게 됩니다
- 생산성이 저하됩니다

보잉 737 맥스를 지원하는 보잉 비행 시험 그룹에서 일한 마크 라빈은 HCL에 공학 업무를 외주하는 결정이 보잉 엔지니어가 코드를 직접 작성하는 것보다 효율적이지 않았기 때문에 '논란이 많았다'고 블룸버그에 전했습니다. "코드가 올바르게 작성되지 않았기 때문에 여러 라운드의 피드백이 이뤄졌습니다."

라빈에 따르면, 한 명의 매니저가 모든 직원을 대상으로 한 회의에서 "보잉 제품이 성숙했기 때문에 시니어 엔지니어가 필요하지 않다"고 발언했습니다. 그 에피소드가 바로 이 기사를 쓰게 된 계기입니다. 의심이 생기더라도, 주니어 엔지니어들이 시니어 엔지니어의 검토와 지도 없이 코드를 작성한다면, 코드 베이스 전체에 시한폭탄을 설치하는 것과 같습니다.

<div class="content-ad"></div>

공학 분야에서는 빠르다는 것이 느리다는 뜻이며, 싼 것이 비싸다는 뜻입니다.

“느리다는 빠르다”라는 문구는 공학 분야에서 잘 알려진 말입니다. 군대 용어인 “느린 것이 부드럽고 부드러운 것이 빠르다”에서 시작되었으며, 이는 상식적인 이치의 한 형태입니다. 모두가 그것이 사실임을 알고 있지만, 특히 압박을 받을 때 이것을 실천하는 데 능숙한 기업은 매우 드뭅니다.

보잉은 경쟁사인 에어버스로부터 심각한 경쟁 위협을 받았습니다. 2010년, 에어버스는 연료 효율성이 7% 더 뛰어난 새로운 A320neo를 발표하였으며, 해당 모델은 보잉 737의 전년도 판매량보다 한 주 동안에 더 많이 팔렸습니다.

보잉은 신속하게 대응해야 했습니다. 항공사에게 유력한 옵션을 제공하기 위해, 그들은 새로운 플랫폼을 처음부터 설계하는 시간을 절약하고, 1960년대부터 이어져 온 이전 모델들과 유사한 컨트롤 및 계측 장치를 갖춘 유산 플랫폼에 기반을 두기로 결정했습니다. 이 선택은 많은 변경을 가하면 조종사들을 재인증해야 하는 항공사들에게 중요한 판매 포인트가 되었습니다. 이는 심각한 공학적 과제가 될 것입니다.

<div class="content-ad"></div>

에어버스와의 격차를 벌리지 않으려고, 보잉은 에어버스가 A320neo를 출하한 지 몇 달 후에 새로운 737을 출시하려고 결정했습니다. 새 모델을 제공할 시간이 6년이 주어졌는데, 이는 787과 777을 출하하는 데 걸린 시간을 1년 이상 단축시키는 결과였죠.

다시 말해, 보잉은 낙관적인 기한으로 프로젝트를 시작했지만 비전을 가지고 달성하기로 결심했습니다. 프로젝트 관리 삼각형의 모든 제약 사항을 정리하기 전에 시작하기로 했어요.

![이미지](/assets/img/2024-08-26-WhyCuttingCostsisExpensiveHow9HourSoftwareEngineersCostBoeingBillions_1.png)

범위는 경쟁사에 의해 미리 설정된 야심찬 공학 목표들로 제한되어 있었습니다. 시간은 에어버스에게 기본 승리를 내주지 않기 위해 미리 제한되었구요. 따라서 프로젝트의 품질을 보장하기 위한 마지막 수단은 프로젝트에 충분한 예산이 할당되었음을 확신하는 것이었습니다. 하지만 보잉의 문화는 이미 예산 절감을 요구하는 방향으로 고정되어 있었습니다. 희생될 수 있는 유일한 것은 품질이었습니다.

<div class="content-ad"></div>

비용 절감 문화의 문제는 보잉과 같은 기업들이 이에 광신적으로 몰두하여 최종적으로는 그들이 절약한 것보다 훨씬 많은 비용을 들게 되는 것입니다. 보잉의 737 맥스 프로젝트의 초기 예산은 30억 달러였습니다. 시간을 절약하고 돈을 아끼기 위한 노력들에도 불구하고, 그들은 예산을 수십 억 달러나 초과하고 늦게 제품을 출시하게 되었습니다.

이후 발생한 재앙은 시장가치 수십 억 달러를 손해보게 만들었으며, 항공사 주문 취소 위협으로 300억 달러의 손실을 입게 했으며, 보잉 브랜드에도 상당한 피해를 끼쳤습니다. 더 나은 공학 관행을 따르기 위해 수십억 달러 더 투자할 수 있었고, 그럼에도 훨씬 더 발전된 상황에서 이득을 볼 수 있었을 것입니다.

이 모든 것은 모든 소프트웨어 매니저와 엔지니어들에게 좋은 교훈입니다: 소프트웨어에서 빠르다고 해서 항상 좋은 것은 아니며, 저렴하다고 해서 항상 비용이 싸지는 것도 아닙니다.

비용 절감에 과도하게 집착하지 않았다면 보잉에게 큰 승리가 될 수 있었던 것이 대신 비용 절감에 집착하여 보잉 브랜드에 큰 타격을 입히는 대형 재앙으로 변했습니다.

<div class="content-ad"></div>

보잉의 실수를 되풀이하지 마세요.

## 자바스크립트 개발자를 위한 관련 기사

만약 여러분이 자바스크립트 개발자라면, 다음 리소스들이 소프트웨어 품질 과정을 향상하는 데 도움이 될 수 있습니다:

- TDD가 내 삶을 바꿨다
- TDD Day - TDD 훈련을 위한 하루
- ES Lint와 Prettier로 코드 리뷰 간소화하기
- 균형 잡힌 개발 팀 구축을 위한 필수 가이드

<div class="content-ad"></div>

에릭 엘리엇은 기술 제품 및 플랫폼 고문으로, "Composing Software"의 저자이자 EricElliottJS.com 및 DevAnywhere.io의 공동 창립자이며 개발팀 멘토입니다. 그는 Adobe Systems, Zumba Fitness, 월스트리트 저널, ESPN, BBC 및 Usher, Frank Ocean, Metallica를 포함한 세계적인 음악가들을 위한 소프트웨어 경험에 기여했습니다.

그는 세계에서 가장 아름다운 여성과 함께 원격 생활을 즐깁니다.

9달러 시급 소프트웨어 엔지니어가 Boeing에 수억 달러를 들게 한 이유



![image](/assets/img/2024-08-26-HowMicro-FrontendsarereshapingModernWebArchitecture_0.png)

느린 배포 주기, 강하게 결합된 의존성 및 모노리식 프론트엔드 코드베이스를 관리하는 번거로운 성질에 좌절하고 있나요? 이러한 일반적인 문제들은 많은 개발팀을 괴롭히며 생산성이 감소하고 프로젝트 납기가 지연될 수 있습니다. 여기에서 마이크로 프론트엔드가 나타납니다. 이는 이러한 도전 과제에 직면하여 만들어진 접근 방식입니다.

그런데 마이크로 프론트엔드가 정확히 무엇이며, 왜 중요한가요?

# 왜 마이크로 프론트엔드가 중요한가요?

<div class="content-ad"></div>

마이크로 프론트엔드는 거대한 프론트엔드 코드베이스를 더 작고 관리하기 쉬운 조각들로 나누는 접근 방식입니다. 각 조각 또는 마이크로 프론트엔드는 독립적으로 개발, 테스트 및 배포할 수 있습니다. 이 모듈식 접근 방식은 민첩성과 속도를 제공하여 프론트엔드 개발 방식을 변화시킵니다.

# 마이크로 프론트엔드 정의

마이크로 프론트엔드는 마이크로서비스의 원칙을 프론트엔드로 확장하여 팀이 개별 아티팩트를 독립적으로 구축하고 배포할 수 있도록 합니다. 이 접근 방식은 특히 마이크로서비스 아키텍처를 채택한 조직에 매우 유익하며 유사한 원칙과 목표에 부합합니다.

전통적인 컴포넌트와 달리, 마이크로 프론트엔드는 독립적인 배포와 확장성에 최적화되어 있습니다. 다중 프레임워크 접근 방식에 특별히 설계되지는 않았지만, 결합 해제와 모듈화가 중요한 환경에서 뛰어난 성능을 발휘합니다.

<div class="content-ad"></div>

저는 마이크로 프론트엔드와 컴포넌트의 차이를 설명하는 이 10분 영상을 시청하는 것을 강력히 추천합니다:

# 마이크로 프론트엔드의 실용적인 응용

마이크로 프론트엔드는 다양한 종류의 웹사이트와 애플리케이션에 적용할 수 있습니다. 지난 몇 년 동안 전 세계 100여 개 팀을 따라왔습니다.

서버 측 렌더링을 사용하는 전자 상거래 사이트부터 클라이언트 측 렌더링을 사용하는 B2B 플랫폼, 그리고 비디오 스트리밍 서비스, 금융 서비스, 보험 웹사이트, 엔터테인먼트 또는 여행 웹사이트와 같은 여러 분야에 적용될 수 있습니다.

<div class="content-ad"></div>

요즘에는 애플리케이션에 대해 마이크로 프론트엔드를 구현했다고 공개한 많은 기업들이 있어요. 예를 들어, booking.com, Netflix, PayPal, DAZN, Lululemon, Dunelm, Postman, BMW, Adidas, BestBuy, Epic Games, Shopify, Business Insider 등 많은 기업들이 있어요.

# 올바른 분할 선택

수평 및 수직 분할 중에서 선택하는 것은 팀 규모, 재사용성, 간결함과 같은 여러 요소에 달려 있어요. 마이크로 프론트엔드 아키텍처를 사용하면 시스템 내에서 식별한 도메인에 적합한 분할을 사용할 수 있기 때문에, 천천히 수직 또는 수평 분할을 교차로 사용할 수 있어요.

# 수평 분할: 페이지의 일부분

<div class="content-ad"></div>

수평 분할은 여러 마이크로 프론트 엔드가 동시에 하나의 페이지에서 공존할 수 있도록 허용하여, 서로 다른 팀이 각기 다른 섹션을 소유할 수 있습니다. 이 방법은 유연성을 제공하지만 일부 도전 과제도 제시합니다:

- 일관된 디자인: 각 팀은 이를 실현하기 위한 적절한 지침을 정의해야 합니다. 예를 들어, 디자인 시스템 라이브러리 버전을 강제하는 Dependabot을 설정합니다.
- 조정 부담: 여러 팀이 같은 페이지에 기여하는 경우 효과적인 커뮤니케이션과 조정이 필수적이며 때로는 시간이 소요될 수 있습니다. 따라서, 뷰의 최종 결과에 책임을 질 단일 팀을 식별하는 것이 좋은 선택입니다. 몇몇 기관에서 구현되었다는 것을 관찰했습니다.
- 도메인 연결 끊김: 이 접근 방식은 비즈니스 도메인 주변에 모델링하는 원칙에서 벗어날 수 있으며, 이는 마이크로 프론트 엔드 대신 여러 분산 컴포넌트를 생성하게 될 수 있습니다. 마찬가지로 마찬가지로 협력을 유지하고, 미세한 분할로 이동하기 전에 더 코어 그레인을 시작할 수 있도록 주의를 기울이세요.

# 수직 분할: 하나의 도메인, 하나의 마이크로 프론트 엔드

수직 분할에서 각 마이크로 프론트 엔드는 하나의 완전한 비즈니스 도메인을 나타냅니다. 이 방법에는 여러 가지 장점이 있습니다:

<div class="content-ad"></div>

- 도메인 전문 지식 촉진: 팀은 특정 비즈니스 영역에 심취하여 진정한 전문가가 될 수 있습니다.
- 자율성 강화: 팀은 더 큰 독립성을 누리며, 자신들의 도메인을 가장 잘 제공하는 결정을 내릴 수 있습니다.
- 전통적인 접근 방식과 조화: 이 방법은 싱글 페이지 응용 프로그램 (SPA) 또는 서버 측 렌더링 방법론과 더 밀접하게 조화합니다.
- 단편화 감소: 각 도메인 내에서 구현이 일관성을 유지하며, 더욱 효율적인 개발 프로세스로 이어집니다.

# 어떤 접근 방식을 선택해야 할까요?

수평 분할과 수직 분할 사이의 선택은 궁극적으로 귀하의 조직 구조, 응용 프로그램의 성격 및 팀의 목표에 달려 있습니다.

수직 분할은 주로 비즈니스 도메인 주위 모델링 원칙과 더 잘 조화됩니다. 이 접근 방식은 확장 가능한 조직을 만들고 효과적인 자율 팀을 육성할 수 있습니다. 보다 명확한 소유권과 책임을 확립함으로써 개발의 품질이 향상될 수도 있습니다.

<div class="content-ad"></div>

반면에, 수평적 분할은 페이지 구성에서 극도의 유연성이 필요한 시나리오나 완전히 분리하기 어려운 레거시 시스템을 다룰 때 적합할 수 있습니다. 구현하기는 더 복잡하지만 올바르게 수행되면 시스템을 올바르게 발전시킬 수 있는 더 많은 유연성을 제공합니다.

이러한 방법을 정말로 이해하고 실제로 보려면 제가 만든 독점 비디오를 놓치지 마세요.

그 비디오에서는 실제 예제를 통해 개념을 분해하여 마이크로 프론트엔드를 효과적으로 분할하는 방법을 정확히 보여줍니다.

# 성공을 위한 팀 구성하기

<div class="content-ad"></div>

마이크로 프론트엔드의 효율적인 구현에는 신중하고 전략적인 팀 구성이 필요합니다. 일반적으로 커 또는 플랫폼 팀은 프로젝트 전체 아키텍처와 거버넌스를 감독하는 책임이 있습니다. 이 팀은 모베스트 프랙티스를 따르고 표준을 유지하며 애플리케이션의 전체 비전을 준수하는 것을 보장합니다. 한편, 개별 팀은 특정한 마이크로 프론트엔드에 집중하여 그 특정 영역의 개발과 향상에 노력과 전문 지식을 기울입니다. 이 구조는 다양한 팀 간의 협력을 촉진할 뿐만 아니라 전체 애플리케이션 전반에 걸쳐 일관성과 균일성을 보장합니다. 책임 분담과 명확히 정의된 거버넌스 프로세스를 통해 조직은 보다 원활하고 효율적인 개발 프로세스를 달성할 수 있습니다.

마이크로 프론트엔드 컨퍼런스에서 완벽한 마이크로 프론트엔드 플랫폼에 관한 주제 발표를 했습니다. 녹화 영상은 여기에서 확인할 수 있습니다:

# 계속적인 학습과 개선

마이크로 프론트엔드는 일반적인 해결책이 아닙니다. 올바르게 활용할 때 강력한 도구이며 개발 프로세스를 혁신할 수 있습니다. 거버넌스 접근 방식의 계속적인 재평가와 개선은 시스템의 진화하는 성격에 대응하기 위해 필수적입니다.

<div class="content-ad"></div>

예를 들어, 처음에는 단일 프론트엔드 접근 방식을 채택한 전자상거래 플랫폼을 생각해 보겠습니다. 시간이 지남에 따라 플랫폼이 성장함에 따라 배포 주기가 불편해지고 종속성 관리가 악몽이 되었습니다. 마이크로 프론트엔드로 전환함으로써 플랫폼은 코드베이스를 더 작고 관리하기 쉬운 단위로 분해할 수 있었습니다. 각 팀은 이제 제품 카탈로그, 체크아웃 프로세스 및 사용자 리뷰와 같은 애플리케이션의 특정 부분에 집중할 수 있었습니다. 이러한 모듈성은 더 빠른 배포 주기, 더 쉬운 유지 관리 및 새로운 기술 도입에 대한 더 큰 유연성을 가능케 했습니다.

다른 예로는 대규모 미디어 스트리밍 서비스가 있습니다. 처음에 단일 프로그램으로 구축된 이 서비스는 확장과 신속한 업데이트 배포에 대한 도전에 직면했습니다. 마이크로 프론트엔드를 채택함으로써 팀은 랜딩 페이지, 사용자 인증, 콘텐츠 스트리밍과 같은 구별된 도메인으로 애플리케이션을 나누었습니다. 이 수직 분할을 통해 각 팀은 자신의 도메인에 독립적으로 작업할 수 있었고, 빠른 기능 릴리스와 더 반응적인 사용자 경험을 이끌어냈습니다.

이러한 예는 시스템의 발전적 성격을 수용하기 위해 지속적으로 거버넌스 접근 방식을 재평가하고 개선하는 중요성을 강조합니다. 이를 통해 마이크로 프론트엔드가 효과적이고 확장 가능하며 조직의 목표와 일치하는지 확인할 수 있습니다.

# 요약

<div class="content-ad"></div>

마이크로 프론트엔드는 단일식 프론트엔드 응용프로그램이 제기하는 과제에 대한 강력한 솔루션을 제공합니다. 이 방식을 채택함으로써 더 빠른 배포, 코드 관리의 간소화, 그리고 더 효과적인 팀을 경험할 수 있습니다. 이는 일회성 변화가 아니라 지속적인 학습과 개선의 여정입니다. 이 흥미로운 지속적인 발전의 길에 함께해보시기를 권장합니다.

더 많은 정보를 알고 커뮤니티가 어떻게 진화하는지 알고 싶다면, 무료로 제공되는 이 주제에 관한 내용을 모아놓은 뉴스레터인 마이크로 프론트엔드 뉴스레터를 구독해보시길 권장합니다.

현대 웹 아키텍처를 재정립하는 마이크로 프론트엔드 개념 정리



인하우스 TypeScript로 구축된 Redis.

# 소개

제로부터 Redis와 유사한 서버를 구축하는 여정에 돌입하는 것은 도전적이고 보람있는 경험이었습니다. 이 프로젝트를 통해 서버 개발의 복잡성에 대해 심층적으로 탐구하고, Redis 프로토콜에 대해 배우며 TypeScript를 활용한 경험을 쌓을 수 있었습니다. 이 게시물에서는 제가 구현한 주요 기능, 직면한 어려움, 그리고 그 과정에서 얻은 소중한 교훈을 소개하겠습니다.

# 배운 점

<div class="content-ad"></div>

- Redis 프로토콜 이해:
이 프로젝트에서는 Redis 프로토콜을 완전히 이해해야 했습니다. 특히 명령이 어떻게 구성되고 처리되는지에 대해 깊게 이해해야 했습니다. RESP(REDIS 직렬화 프로토콜)를 학습하여 Redis 클라이언트와 서버 간의 통신을 기반으로 하는 방법을 알게 되었습니다.
- TypeScript 마스터리:
TypeScript로 이 서버를 구축하는 것은 강력한 타이핑을 활용할 수 있게 해줬습니다. 이로 인해 코드베이스가 더 견고하고 오류가 발생할 가능성이 낮아졌습니다. TypeScript의 인터페이스, 타입 유니온, async/await를 포함한 기능에 대해 더 깊이 이해하게 되었습니다.
- 서버-클라이언트 아키텍처:
여러 클라이언트를 처리하고 다양한 명령에 응답할 수 있는 서버를 개발하는 것은 서버-클라이언트 아키텍처를 이해하는 뛰어난 연습이었습니다. 상태를 관리하고 트랜잭션을 처리하며 데이터 일관성을 보장하는 방법을 배웠습니다.
- 복제 및 지속성:
복제 및 지속성 메커니즘을 구현하는 것은 데이터 내구성과 분산 시스템 간 일관성의 중요성에 대해 배울 수 있었습니다.
- 문제 해결 및 디버깅:
복잡한 프로젝트와 마찬가지로 디버깅은 프로세스의 중요한 부분이었습니다. 각 버그는 학습 기회로 나타났으며, 접근 방식을 개선하고 서버의 전반적인 안정성을 향상시킬 수 있게 했습니다.

# 프로젝트 개요

## 기본 키-값 작업

SET 및 GET 명령:
기본 키-값 작업 구현은 첫 번째 단계였습니다. SET 명령은 키-값 쌍을 저장하고, GET은 주어진 키에 대한 값을 검색합니다. 또한 지정된 기간 이후에 키를 자동으로 삭제하는 TTL을 설정할 수 있는 PX 옵션을 지원했습니다.

<div class="content-ad"></div>

## 트랜잭션

MULTI, EXEC 및 DISCARD 명령:
트랜잭션 지원 기능을 구축하는 것은 어려웠지만 보람 있었습니다. MULTI를 구현함으로써 여러 명령을 대기열에 넣고 EXEC를 사용하여 원자적으로 실행할 수 있도록 허용했습니다. DISCARD 명령은 트랜잭션을 취소하고 명령 대기열을 지우는 기능을 합니다.

## 복제

REPLCONF 및 PSYNC 명령:
복제는 Redis의 핵심 기능이며 이를 구현하려면 마스터와 레플리카 간의 상태 동기화 방법을 이해해야 했습니다. REPLCONF와 PSYNC 명령은 마스터와 슬레이브 서버 간의 초기 핸드셰이크 중에 자동으로 처리됩니다.

<div class="content-ad"></div>

## 스트림 작업

XADD 및 XRANGE 명령어:
스트림을 구현함으로써 XADD를 사용하여 스트림에 항목을 추가하고 XRANGE를 사용하여 특정 범위 내에서 검색할 수 있었습니다. 이 기능은 리스트와 정렬된 집합의 측면을 결합한 것이라 특히 흥미로웠습니다.

## 리스트 작업 (새로 추가됨!)

LPUSH, RPUSH, LPOP, RPOP, LLEN, LRANGE, LTRIM, LMOVE, LINDEX, LSET, LREM, LINSERT, 그리고 LGETALL 명령어:
리스트 작업을 추가함으로써 서버를 확장하는 것은 중요한 추가였습니다. 이러한 명령어를 사용하면 리스트의 생성과 조작이 가능해지며 스택 및 큐 구현, 범위 추출, 그리고 보다 복잡한 데이터 관리 작업을 지원할 수 있습니다.

<div class="content-ad"></div>

## Pub/Sub (새로운 기능!)

구독, 구독 취소, 그리고 발행(PUBLISH) 명령어:
Pub/Sub 기능을 추가하면 서버가 실시간 메시징에 강력한 도구로 변합니다. 클라이언트는 이제 채널을 구독하여 메시지가 발행될 때 즉시 업데이트를 받아 이벤트 기반 아키텍처와 실시간 알림이 가능해집니다.

## 추가 명령어

PING과 ECHO:
이러한 기본 명령어들은 구현하기 쉬웠습니다. PING은 서버의 가용성을 확인하고, ECHO는 클라이언트가 보낸 메시지를 반환합니다. 어떤 서버-클라이언트 상호작용에도 필수적인 명령어들입니다.

<div class="content-ad"></div>

## 서버 정보 및 지속성

INFO Command:
INFO 명령어는 서버 역할 및 복제 상태에 대한 세부 정보를 제공합니다. 개발 중에 서버를 모니터링하고 디버깅하는 데 중요한 역할을 했습니다.

RDB 파일 처리:
지속성을 구현하는 데는 서버 시작 시 RDB 파일에서 데이터를로드하는 작업이 포함되었습니다. 이 기능은 데이터가 서버 다시 시작시 살아남도록 보장하며, 서버에 내구성 레이어를 추가하는데 도움이 되었습니다.

Wait Command:
WAIT 명령어는 이전에 수행한 모든 쓰기 명령어가 특정 수의 복제본에 의해 확인될 때까지 블록합니다. 이 명령어는 복제본 간 데이터 일관성을 보장하는 데 필수적이었습니다.

<div class="content-ad"></div>

# 구현 방식

- 작은 규모부터 시작:
가장 기본적인 기능인 SET 및 GET을 구현하는 것으로 시작했습니다. 이는 견고한 기반을 제공하고 서버 구조를 이해하는 데 도움이 되었습니다.
- 점진적인 구축:
한 번에 한 가지씩 기능을 추가했습니다. 트랜잭션부터 시작하여 복제, 스트림, 리스트, Pub/Sub, 그리고 마지막으로 지속성까지 진행했습니다. 이러한 점진적인 방식을 통해 각 기능을 철저히 테스트한 후 다음 단계로 진행할 수 있었습니다.
- 테스트 및 디버깅:
각 기능을 구현한 후 redis-cli를 사용하여 철저하게 테스트했습니다. 이 실전 테스트는 버그를 식별하고 수정하는 데 중요했습니다.
- 코드베이스 개선:
프로젝트가 커짐에 따라 코드베이스를 리팩터링하여 가독성과 유지보수성을 향상시켰습니다. 큰 함수를 작고 관리하기 쉬운 조각으로 나누고 일관된 명명 규칙과 문서화를 보장하는 작업이 포함되었습니다.

# 명령 개요

- SET key value: 키-값 쌍을 저장합니다.
- GET key: 키에 대한 값 가져오기.
- MULTI: 트랜잭션 블록 시작.
- EXEC: 트랜잭션에 대기 중인 모든 명령 실행.
- DISCARD: 트랜잭션 취소.
- XADD stream_name * key value: 스트림에 항목 추가.
- XRANGE stream_name start end: 범위 내의 스트림에서 항목 검색.
- LPUSH key value [value…]: 리스트 시작 부분에 하나 이상의 값 추가.
- RPUSH key value [value…]: 리스트 끝 부분에 하나 이상의 값 추가.
- LPOP key: 리스트의 첫 번째 요소 삭제 및 반환.
- RPOP key: 리스트의 마지막 요소 삭제 및 반환.
- LLEN key: 리스트의 길이 반환.
- LRANGE key start stop: 리스트에서 요소 범위 반환.
- LTRIM key start stop: 명시된 범위로 리스트 자르기.
- LMOVE source destination LEFT|RIGHT LEFT|RIGHT: 요소를 다른 리스트로 원자적으로 이동.
- LINDEX key index: 리스트에서 지정된 인덱스의 요소 반환.
- LSET key index value: 리스트에서 지정된 인덱스에 요소의 값을 설정.
- LREM key count value: 지정된 값과 일치하는 요소를 리스트에서 제거.
- LINSERT key BEFORE|AFTER pivot value: 리스트에서 다른 요소 앞 또는 뒤에 요소 삽입.
- LGETALL key: 리스트의 모든 요소 반환.
- SUBSCRIBE channel: 메시지를 받기 위해 채널 구독.
- UNSUBSCRIBE channel: 채널 구독 취소.
- PUBLISH channel message: 채널에 메시지 게시.
- PING: 서버 가용성 확인.
- ECHO message: 전송된 동일한 메시지 반환.
- INFO: 서버 정보 제공.
- WAIT numslaves timeout: 이전의 쓰기 명령이 일정 수의 레플리카에서 인식될 때까지 차단.

<div class="content-ad"></div>

# 다음에는 무엇을 할까요?

제가 기능적인 Redis와 비슷한 서버를 만들었으니, 계속해서 완성도를 높이고 확장할 계획입니다. 추가적인 Redis 명령 지원, 성능 향상, 클러스터링과 같은 고급 기능 구현이 가능한 다음 단계가 될 것입니다.

# 저와 소통하기

- LinkedIn: Vivek Shah
- GitHub: Vivek-C-Shah
- Twitter: @ShVivek25
- 프로젝트 저장소: Redis-CLI-TypeScript

<div class="content-ad"></div>

# 결론

이 Redis와 유사한 서버를 구축하는 것은 도전적이지만 매우 교육적인 경험이었습니다. 서버-클라이언트 아키텍처, Redis 프로토콜 및 TypeScript의 강력한 기능에 대한 깊은 이해를 제공했습니다. 계속해서 학습하고 개발하는 것에 흥미를 느끼며, 이 프로젝트가 유사한 노력에 관심이 있는 다른 사람들에게 영감이 되거나 학습 자료로 사용될 수 있기를 희망합니다.

읽어 주셔서 감사합니다. LinkedIn에서 연락을 취하거나 GitHub에서 다른 프로젝트를 확인하거나 Twitter에서 업데이트를 더 많이 받아보세요!

TypeScript로 Redis와 유사한 서버 구축 만드는 과정 정리



아래는 Markdown 형식으로 변경해주세요.

![이미지](/assets/img/2024-08-26-TheTwoCrystalBallsProblemDSA_0.png)

# 문제

면접이나 DSA를 공부하면서 이 문제를 만난 적이 있을 수 있습니다. 이 문제와 다양한 해결책에 대해 이야기해봐요!

<div class="content-ad"></div>

위 문제를 컴퓨터 프로그램으로 모델링하는 방법에 대해 고민해 봅시다. 입력 목록이 있는 함수를 가정해보면, 여기서 인덱스는 높이를 나타내고 해당 인덱스의 요소 값은 그 거리에서 공이 깨지는지를 나타냅니다.

우리는 또한 문제의 제약 사항을 알고 있어야 합니다:

- 우리에게는 공이 두 개만 있습니다
- 한 번 공이 깨지면 다시 깰 수 없습니다

이러한 제약 사항을 우리 프로그램 안에 모델링하기 위해 다음 규칙으로 번역할 수 있습니다:

<div class="content-ad"></div>

- 최대한으로 참으로 평가되는 두 인덱스만 확인할 수 있습니다.

# 해결 방안

첫눈에 보면, 이 문제를 선형 검색으로 해결하는 것이 가장 간단해 보일 수 있습니다. 리스트의 시작부터 시작하여 한 번에 한 원소씩 이동합니다. 이동하면서 각 값에 대해 살펴보게 됩니다. 참으로 평가되는 값을 찾으면 해당 인덱스를 반환합니다.

이 해결책의 장점 중 하나는 두 개의 볼 중 하나만 사용해도 된다는 것입니다. 하지만, 최악의 경우에는 전체 입력 리스트의 모든 요소를 확인해야 하는 문제가 있습니다. 이는 가장 최적화된 방법은 아닙니다. 여기서 최악의 경우 실행 시간 복잡도는 O(n)입니다.

<div class="content-ad"></div>

```js
function findFirstBreak(levels: boolean[]): number {
    for (let i = 0; i < levels.length; i++) {
        const isBroken = levels[i];
        if (isBroken) {
            return i;
        }
    }

    return -1;
}
```

더 깊이 파보죠...

조금 더 생각해보면, 바이너리 서치와 같은 방법을 사용하면 더 최적화된 접근 방식을 찾을 수 있을 것 같습니다. 그러나 문제의 제약 사항에 잘 어울리지 않아서 바이너리 서치를 활용할 수는 없습니다. 최대로 할 수 있는 일은 true로 평가되는 두 개의 인덱스만 확인할 수 있다는 것입니다. 바이너리 서치는 처음 두 개의 확인이 true로 이어질 것을 보장하지 않습니다.

만약 우리가 list를 띄어넘어서 확인한다면 어떨까요? 어떤 아이디어가 떠오르고 있습니다. list 일부를 뛰어넘어서 해당 인덱스의 값을 확인한다고 가정해 봅시다. 만약 뛴 인덱스의 값이 true라면, 우리는 첫 번째 true 값이 마지막 확인과 새로운 뛴 인덱스 사이 어딘가에 있을 것이라는 것을 알 수 있습니다. 이는 우리가 마지막 확인과 가장 최근 점프 사이의 범위를 선형적으로 검색하여 첫 번째 true 값을 찾을 수 있다는 것을 의미합니다. 뛴 인덱스의 값이 false이면, 이는 우리가 다시 뛰어넘어야 한다는 것을 의미합니다.

<div class="content-ad"></div>

우리가 점프할 거리는 목록의 10%라고 가정해 봅시다. 즉, .1n 요소를 선형으로 검색해야 합니다. 이 경우의 시간 복잡도는 무엇인가요? O(n)입니다. 상수는 버리기 때문이죠. 음, 런타임 복잡도가 우리의 가장 간단한 해결책과 같다니 안타깝네요.

만약 우리가 입력값에 비례하지 않는 양으로 점프를 설정한다면 어떨까요? 아하! 이제 알았습니다. sqrt(n) 간격으로 목록을 확인하면, 우리는 목록의 sqrt(n)만 선형으로 검색하면 됩니다. 이는 우리의 해결책이 O(sqrt(n))의 런타임 복잡도를 달성할 수 있다는 것을 의미합니다.

우리는 이를 재귀 및 반복적 방식으로 모두 구현할 수 있습니다. 하지만 여기서는 재귀적 구현을 제공하겠습니다.

```js
function findFirstBreak(levels: boolean[]): number {
    const jump = Math.floor(Math.sqrt(levels.length));

    function helper(searchStart: number, interval: number): number {
        const currIdx = searchStart + interval;

        if (currIdx >= levels.length) {
            return -1;
        }

        const didBreak = levels[currIdx];
        if (didBreak && interval === 1) {
            return currIdx;
        } else if (didBreak && interval !== 1) {
            return helper(searchStart, 1);
        }

        return helper(currIdx, interval);
    }

    return helper(0, jump);
}
```

DSA 두 개의 크리스털 공 문제

현대적인 방식으로 Node.js, Express, TypeScript를 활용하는 Clean Architecture API 개발하기

안녕하세요! 실시간 데이터 시각화와 함께 IoT 대시보드를 만드는 튜토리얼에 오신 것을 환영합니다! 이 튜토리얼에서는 HTML5, CSS3, Bootstrap 4 및 JavaScript를 사용하여 실시간 온도 값을 표시하는 동적 대시보드를 만들어보겠습니다. 노드.js를 사용하여 센서 데이터를 모방하고 라이브 환경을 시뮬레이션할 것입니다. 프로젝트에 IoT를 통합하고자 하는 개발자이거나 실시간 데이터 시각화에 대해 궁금한 분들을 위해 이 튜토리얼이 한 단계씩 가이드해 드릴 것입니다. 완료하면 새로운 데이터가 들어올 때마다 업데이트되는 완전히 기능적인 온도 차트를 갖게 될 것입니다. 이제 시작하여 여러분의 IoT 프로젝트를 현실로 만들어봅시다! 

뒤에 나온 Markdown 표식을 이해하고 계시나요?

Backend code to mock sensor data


<div class="content-ad"></div>

한 줄 씩 코드를 이해해 볼까요?

1. WebSocket 모듈을 가져오기

```js
const WebSocket = require('ws');
```

이 코드는 ws 모듈을 가져오는 역할을 합니다. ws는 Node.js용 인기 있는 WebSocket 라이브러리입니다. WebSocket을 사용하면 서버와 클라이언트 간에 실시간 양방향 통신이 가능하며 단일, 오래 지속되는 연결을 통해 이루어집니다.

<div class="content-ad"></div>

2. WebSocket 서버 만들기

```js
const server = new WebSocket.Server({ port: 8080 });
```

여기서는 포트 8080에서 수신 대기하는 새로운 WebSocket 서버 인스턴스가 생성됩니다. 이 서버는 클라이언트로부터 들어오는 WebSocket 연결을 수락할 것입니다.

3. 클라이언트 연결 처리하기

<div class="content-ad"></div>

```js
server.on('connection', (socket) => {
    console.log('Client connected');
```

이 부분은 웹소켓 서버에 클라이언트가 연결될 때 트리거되는 connection 이벤트를 위한 이벤트 리스너를 설정합니다. 연결이 성립되면 서버는 "Client connected"를 콘솔에 로깅합니다.

4. 실시간 온도 데이터 전송

```js
    const sendTemperatureData = () => {
        const temperature = (Math.random() * 10 + 20).toFixed(2); // 20에서 30 사이의 더미 온도
        const timeStamp = (new Date()).getTime();
        const data = JSON.stringify({ temperature, timeStamp });
```

<div class="content-ad"></div>

- 이 함수인 sendTemperatureData는 연결된 클라이언트에 온도 데이터를 생성하고 전송하는 역할을 합니다.
- Math.random()을 사용하여 20도부터 30도 사이의 임의의 온도가 생성되며, .toFixed(2)를 사용하여 결과가 소수점 둘째 자리까지 포맷됩니다.
- 현재 시간을 밀리초로 나타내는 new Date().getTime()을 사용하여 타임스탬프가 생성됩니다 (Unix epoch인 1970년 1월 1일부터의 시간).
- 그런 다음 온도와 타임스탬프는 JSON.stringify를 사용하여 JSON 문자열로 패키징됩니다.

```js
        socket.send(data);
```

온도와 타임스탬프가 포함된 JSON 문자열은 socket.send를 사용하여 클라이언트로 전송됩니다.

```js
        setTimeout(sendTemperatureData, 2000);
    };
```

<div class="content-ad"></div>

`setTimeout`은 실시간 데이터 스트림을 시뮬레이션하기 위해 sendTemperatureData 함수를 매 2초마다 호출하는 데 사용됩니다.

5. 초기 데이터 전송

```js
sendTemperatureData();
```

이 줄은 클라이언트가 연결된 후 즉시 sendTemperatureData를 처음 호출합니다. setTimeout 루프로 인해 이 함수는 매 2초마다 계속 호출됩니다.

<div class="content-ad"></div>

6. 클라이언트 연결 해제 처리

```js
socket.on('close', () => {
    console.log('클라이언트가 연결을 해제했습니다');
});
```

close 이벤트를 처리하기 위한 이벤트 리스너가 설정되어 있습니다. 이 이벤트는 클라이언트가 웹소켓 서버와의 연결을 해제할 때 발생합니다. 이때 콘솔에 "클라이언트가 연결을 해제했습니다"가 로그로 출력됩니다.

7. 웹소켓 서버 시작

<div class="content-ad"></div>

```js
console.log('웹소켓 서버가 ws://localhost:8080 주소에서 실행 중입니다.');
```

마지막으로, 이 라인은 웹소켓 서버가 작동 중이며 클라이언트가 연결할 수 있는 URL(ws://localhost:8080)을 특정하는 메시지를 기록합니다.

이 코드는 간단한 웹소켓 서버를 설정하여, 매 2초마다 연결된 클라이언트에게 랜덤 온도 데이터와 타임스탬프를 스트리밍합니다. 또한 연결 및 연결 해제 이벤트를 로깅합니다.

실시간 데이터 시각화를 위한 프론트엔드 코드입니다.

<div class="content-ad"></div>

```js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IoT 대시보드</title>
    
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js" defer></script>
</head>

<body>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">IoT 대시보드</a>
            </li>
        </ul>
    </nav>
    <div class="row mt-4 p-4">
        <div class="col">
            <div id="accordion">

                <div class="card rounded-0">
                    <div class="card-header bg-info card rounded-0">
                        <a class="card-link text-white" data-toggle="collapse" href="#collapseOne">
                                센서 1의 온도
                            </a>
                    </div>
                    <div id="collapseOne" class="collapse show" data-parent="#accordion">
                        <div class="card-body">
                            <div id="temperatureChart"></div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <script>
    </script>
</body>

</html>
```

```js
// script.js
// Highcharts 차트 초기화
const chart = Highcharts.chart('temperatureChart', {
    chart: {
        type: 'line',
        events: {
            load: function() {
                this.series[0].setData([]);
            }
        }
    },
    title: {
        text: ''
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: '온도 (°C)'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    series: [{
        name: '온도',
        data: []
    }]
});

// 로컬 WebSocket 서버에 연결
const socket = new WebSocket('ws://localhost:8080');

socket.onopen = function(event) {
    console.log('WebSocket 서버에 연결되었습니다');
};

socket.onmessage = function(event) {
    const sensorData = JSON.parse(event.data);
    const series = chart.series[0];
    const x = sensorData.timeStamp;
    const y = parseFloat(sensorData.temperature);
    series.addPoint([x, y]);
};

socket.onerror = function(error) {
    console.error('WebSocket 오류 발생:', error);
};

socket.onclose = function(event) {
    console.log('WebSocket 연결이 닫혔습니다');
};
```

![IoT 대시보드](/assets/img/2024-08-26-IoTDashboardTutorial_1.png)

<div class="content-ad"></div>

1. Highcharts 차트 초기화하기

```js
const chart = Highcharts.chart('temperatureChart', {
    chart: {
        type: 'line',
        events: {
            load: function() {
                this.series[0].setData([]);
            }
        }
    },
    title: {
        text: ''
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: 'Temperature (°C)'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    series: [{
        name: 'Temperature',
        data: []
    }]
});
```

- const chart = Highcharts.chart(`temperatureChart`, ' ... '): 이 줄은 새로운 Highcharts 차트를 초기화하고 그것을 chart 변수에 할당합니다. 차트는 temperatureChart라는 ID를 가진 HTML 요소에 렌더링됩니다.
- chart: ' type: `line` ': 차트 유형을 선 그래프로 지정하며, 시간에 따른 지속적인 데이터를 표시하는 데 적합합니다. (ex: 온도 측정값)
- events: ' load: function() ' ... ' ': 로드 이벤트에 대한 이벤트 리스너를 정의하고, 차트가 완전히 로드되면 트리거됩니다. 해당 코드는 이 경우 첫 번째 시리즈의 초기 데이터를 지우도록 설정되어 있습니다: this.series[0].setData([]);.
- title: ' text: `` ': 여기서 차트 제목을 정의하는 부분이지만, 이 예시에서는 비워두었습니다.
- xAxis: ' type: `datetime` ': x-축이 시간 기반 데이터를 표시하도록 구성되어 있어, 시간에 따른 온도 측정값을 그래프로 표시할 때 중요합니다.
- yAxis: ' title: ' text: `Temperature (°C)` ', plotLines: [' value: 0, width: 1, color: `#808080` '] ':
- y-축은 "Temperature (°C)"로 레이블이 지정됩니다.
- 너비가 1픽셀이고 회색(#808080)인 y = 0에 플롯 라인이 추가됩니다. 일반적으로 중요한 값이나 임계값을 나타내는 데 사용되지만, 여기에서는 기준선으로만 사용됩니다.
- series: [' name: `Temperature`, data: [] ']: 차트의 데이터 시리즈를 정의합니다. 시리즈는 "Temperature"로 이름이 지정되며 빈 데이터 배열로 시작됩니다. 데이터가 수신되면 이 시리즈에 추가될 것입니다.

2. WebSocket 서버에 연결하기

<div class="content-ad"></div>

```js
const socket = new WebSocket('ws://localhost:8080');
```

이 코드는 ws://localhost:8080으로 로컬에서 실행 중인 서버에 WebSocket 연결을 설정합니다. 이 연결을 통해 서버에서 클라이언트로 실시간 데이터를 스트리밍할 수 있습니다.

3. WebSocket 이벤트 처리

연결이 열리면


<div class="content-ad"></div>

```js
socket.onopen = function(event) {
    console.log('웹소켓 서버에 연결되었습니다');
};
```

socket.onopen: 이 이벤트 핸들러는 WebSocket 연결이 성공적으로 열릴 때 트리거됩니다. 콘솔에 "웹소켓 서버에 연결되었습니다"를 기록합니다.

메시지 수신

```js
socket.onmessage = function(event) {
    const sensorData = JSON.parse(event.data);
    const series = chart.series[0];
    const x = sensorData.timeStamp;
    const y = parseFloat(sensorData.temperature);
    series.addPoint([x, y]);
};
```

<div class="content-ad"></div>

socket.onmessage: 이벤트 핸들러는 WebSocket 서버로부터 메시지를 수신했을 때 트리거됩니다.

- const sensorData = JSON.parse(event.data);: 수신된 JSON 데이터를 JavaScript 객체(sensorData)로 파싱하여 온도 데이터와 타임스탬프가 포함되어 있습니다.
- const series = chart.series[0];: 차트 내 첫 번째(유일한) 데이터 시리즈를 참조합니다.
- const x = sensorData.timeStamp;: 수신된 데이터에서 타임스탬프를 추출하여 x-좌표로 사용합니다.
- const y = parseFloat(sensorData.temperature);: 온도 값을 부동 소수점 숫자로 변환하여 y-좌표로 사용합니다.
- series.addPoint([x, y]);: 새로운 데이터 포인트 [x, y]를 차트에 추가하여 실시간으로 라인 그래프를 업데이트합니다.

오류 처리

```js
socket.onerror = function(error) {
    console.error('WebSocket error:', error);
};
```  

<div class="content-ad"></div>

socket.onerror: WebSocket 연결 중 오류가 발생하면이 이벤트 핸들러가 트리거됩니다. 오류는 콘솔에 "WebSocket error:" 메시지와 함께 기록됩니다.

연결 닫힘

```js
socket.onclose = function(event) {
    console.log('WebSocket connection closed');
};
```

socket.onclose: WebSocket 연결이 클라이언트 또는 서버에 의해 닫힐 때 트리거되는 이벤트 핸들러입니다. 콘솔에 "WebSocket connection closed"를 기록합니다.

<div class="content-ad"></div>

이 코드는 Highcharts와 웹 소켓을 사용하여 실시간 온도 모니터링 시스템을 설정합니다. 차트는 시간이 지남에 따른 온도 데이터를 표시하도록 초기화되며, 웹 소켓 연결이 설정되어 실시간 업데이트를 받습니다. 새로운 온도 측정값이 수신되면 차트에 추가되어 계속해서 업데이트되는 시각화를 제공합니다. 코드에는 기본 오류 처리가 포함되어 있으며 연결 상태를 추적하기 위해 콘솔에 로그 메시지가 기록됩니다.

Posts