

<img src="/assets/img/2024-09-10-StateNotUpdatingProperlyonFirstRenderHowtoFixItinReact_0.png" />

React에서 첫 번째 렌더링에서 상태가 올바르게 업데이트되지 않는-frustrating한 문제를 겪어 본 적이 있나요? 😩 새 데이터를 기존 상태와 병합하기 위해 전개 연산자를 사용했는데, 대신에 데이터가 예상대로 업데이트되지 않는 것을 어려워하고 있을 수 있습니다. 이 블로그에서는 이러한 문제가 발생하는 이유와 간단하면서도 효과적인 접근 방법을 통해 어떻게 해결할 수 있는지 살펴보겠습니다. 시작해 봅시다! 🚀

# 문제: 첫 번째 렌더링 시 상태가 올바르게 업데이트되지 않음

다음 시나리오를 고려해보세요: React 구성요소에서 전개 연산자를 사용하여 상태를 업데이트하려고 합니다. 아래는 전형적인 예시입니다:

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

```js
const [user, setUser] = useState({ name: "Nirali", age: 20 });
useEffect(() => {
  setUser({ ...user, age: 21});
}, []);
```

이론적으로 나이를 20에서 21로 업데이트할 것으로 예상하지만 이름은 "Nirali"로 유지할 것으로 예상됩니다. 그러나 첫 번째 렌더링에서 올바르게 업데이트되지 않을 수 있으며, 나이는 여전히 20일 수 있고, 컴포넌트가 변경 사항을 반영하지 않을 수 있습니다. 😮

# 원인: 스프레드 연산자의 직접 사용

이 문제는 React가 상태 업데이트를 처리하는 방식 때문에 발생합니다. React의 useState와 useEffect는 비동기적으로 작동하기 때문에, 이전 상태가 완전히 처리되기 전에 직접적으로 상태를 업데이트하려고 할 때 React가 아직 전 상태를 완전히 처리하지 못할 수 있습니다.

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

위의 예시에서:

```js
setUser({ ...user, age: 21 });
```

스프레드 연산자가 사용된 것은 React가 상태를 업데이트하는 작업을 완료하지 못한 구버전의 사용자 상태를 기준으로 한 것입니다. 이로 인해 첫 번째 렌더링에서 나이가 동일한 채로 유지됩니다. 이 문제는 이전 상태를 기반으로 상태를 업데이트할 때 특히 발생합니다.

# 해결책: 임시 변수 사용하기 🛠️

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

이 문제를 피하기 위한 간단한 해결책은 이전 상태와 새 데이터를 함께 저장하는 임시 변수를 사용하는 것입니다. 이렇게 하면 첫 번째 렌더 중에 오래된 상태에 의존하지 않도록 할 수 있습니다.

다음은 문제를 해결하는 방법입니다:

```js
const [user, setUser] = useState({ name: "Nirali", age: 20 });

useEffect(() => {
  const updatedUser = { ...user, age: 21 };  // 이전 상태를 임시 변수에 저장
  setUser(updatedUser);  // 새 데이터로 상태 업데이트
}, []);
```

임시 변수(updatedUser)를 생성함으로써 상태가 올바르게 캡처되고 업데이트되기 전에 정확하게 포착되도록 보장합니다. 이제 첫 번째 렌더에서 상태가 문제없이 업데이트된 나이 값이 반영됩니다.

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

# 왜 이렇게 동작하는지 🌟

React의 상태 업데이트는 비동기적으로 이루어지며, 이전 상태를 올바르게 캡처하지 않고 상태를 직접 업데이트하는 것은 예기치 못한 동작을 일으킬 수 있습니다. spread 연산을 임시 변수에 저장함으로써 React가 상태 업데이트를 올바른 순서로 처리하도록 하여, 컴포넌트가 시작부터 예상한 데이터를 렌더링하게 합니다.

# 결론 🌈

React의 useState와 spread 연산자는 가끔 첫 렌더링에서 문제를 일으킬 수 있으며, 상태 업데이트가 올바르게 반영되지 않을 때 특히 문제를 일으킬 수 있습니다. 상태를 설정하기 전에 데이터를 임시 변수에 저장하면 이러한 문제를 방지하고 상태 업데이트가 부드럽고 예측 가능하게 이루어지도록 할 수 있습니다.

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

# React State 처리에 대한 빠른 팁 💡

- 임시 변수 사용하기: 전개 연산자를 사용할 때는 항상 결합된 상태를 정확하게 저장하기 위해 임시 변수에 저장하세요.
- 비동기 동작에 주의하기: React는 상태 업데이트를 비동기적으로 처리하므로 타이밍이 컴포넌트 동작에 영향을 줄 수 있습니다.
- 상태 업데이트 재확인하기: 특히 복잡한 상태에서 첫 번째 렌더링 시, 상태가 예상대로 업데이트되는지 확인하세요.

이러한 관례를 따르면 useState를 사용할 때 흔히 발생하는 문제를 피하고 React 앱을 원활하게 유지할 수 있습니다. 🚀

좋은 코딩 되세요! 👩‍💻👨‍💻

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

# 친절히 참여해 주셔서 감사합니다! 🚀

In Plain English 커뮤니티의 일원이 되어 주셔서 감사합니다! 떠나시기 전에:

- 작가를 박수치고 팔로우해주세요 ️👏️️
- 팔로우하기: X | LinkedIn | YouTube | Discord | 뉴스레터
- 다른 플랫폼 방문하기: CoFeed | Differ
- PlainEnglish.io에서 다양한 콘텐츠 만나보세요

리액트에서 처음 렌더링 시 상태가 제대로 업데이트되지 않을 때  해결하는 방법



React JS는 웹 프론트엔드 개발을 위해 널리 사용되는 프레임워크 중 하나에요. 많은 새로운 학습자들이 React JS로 경력을 시작하고 있어요. 애플리케이션 성능을 향상시키고 코드 품질을 향상시킬 수 있는 몇 가지 최상의 실천 방법을 알아두는 것이 중요해요.

그래서 여기에는 React 개발자라면 반드시 알아야 할 11가지 React JS 팁과 코드 예제가 있어요—

## 1. 함수형 컴포넌트 사용하기

클래스 컴포넌트와 비교했을 때, 함수형 컴포넌트는 더 간단하고 간결해요. 함수형 컴포넌트가 제공하는 여러 장점들이 있어요 — 재사용성, 간결성, 성능, 테스트, 그리고 함수형 프로그래밍.

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

- 재사용성: 함수 컴포넌트를 작은 재사용 가능한 구성 요소로 쉽게 추출할 수 있습니다. 또한 로직을 별도의 함수로 추출하여 여러 곳에서 재사용할 수 있습니다.
- 간결성: 함수 컴포넌트는 읽고 구현하기 쉽고 더 적은 코드 줄이 필요합니다.
- 성능: 리액트 훅을 사용하면 함수 컴포넌트가 더 최적화된 상태 관리 및 부작용을 제공합니다. 이로 인해 클래스 컴포넌트보다 우수한 성능을 제공합니다.
- 테스트: 내부 상태와 생명주기 메서드가 없기 때문에 함수 컴포넌트를 테스트하는 것이 쉽습니다. 이들은 프롭을 기반으로 간단한 입출력을 사용합니다.
- 함수형 프로그래밍: 함수 컴포넌트는 함수형 프로그래밍을 제공하여 응용 프로그램을 더 모듈식으로 만들고 읽고 디버깅하기 쉽게 도와줍니다.

## 2. 외부 div 대신 React 프래그먼트 사용

<img src="/assets/img/2024-09-10-11UsefulReactjsHackEveryDeveloperShouldKnow_0.png" />

요소를 ``Fragment`` 안에 래핑하여 그룹화한 다음 반환할 수 있습니다. 이렇게 하면 불필요한 div 사용을 방지할 수 있습니다. 프래그먼트는 인라인 블록인 div에 영향을 주지 않으므로 UI가 깨지지 않습니다.

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

예시:

```js
// 프래그먼트 없이
 return (
   <div>
     <Header />
     <Content />
   </div>
 );

// 프래그먼트 사용 시
 return (
   <>
     <Header />
     <Content />
   </>
 );
```

![React.js useful hack](/assets/img/2024-09-10-11UsefulReactjsHackEveryDeveloperShouldKnow_1.png)

## 3. `useMemo`로 비용이 많이 드는 계산을 메모이제하기

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

React JS에서 `useMemo` 훅을 사용하여 계산을 최적화할 수 있습니다. 이 훅은 함수의 계산 결과를 기억하고 캐시에서 다시 계산하는 대신 반환하여 다시 계산하는 것을 방지합니다. 이를 통해 다시 계산을 줄일 수 있습니다.

```js
import React, { useMemo } from 'react';

const ExpensiveComponent = ({ day }) => {
  const expensiveCalculation = useMemo(() => {
    return day * 24 * 60 * 60;
  }, [day]);

  return <div>Result: {expensiveCalculation}</div>;
};

export default ExpensiveComponent;
```

## 4. 안정적인 함수에 `useCallback` 사용하기

![image](/assets/img/2024-09-10-11UsefulReactjsHackEveryDeveloperShouldKnow_2.png)

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

`useCallback` 훅은 함수를 메모이징하여 컴포넌트의 렌더링을 줄이는 데 도움이 됩니다.

`useCallback`은 함수 객체를 저장하므로 부모 컴포넌트가 다시 렌더링될 때 동일한 콜백 객체가 자식 컴포넌트로 전달됩니다. 이렇게 함으로써 자식 컴포넌트가 다시 렌더링되는 것을 방지하고 성능을 향상시키며 더 부드러운 사용자 경험을 만들어줍니다[출처]

```jsx
import React, { useCallback } from 'react';

const ParentComponent = () => {
  const handleClick = useCallback(() => {
    console.log('버튼이 클릭되었습니다');
  }, []);

  return <ChildComponent onClick={handleClick} />;
};

export default ParentComponent;
```

## 5. 컴포넌트의 지연 로딩

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


![Lazy Loading](/assets/img/2024-09-10-11UsefulReactjsHackEveryDeveloperShouldKnow_3.png)

레이지 로딩은 애플리케이션 성능을 향상시키기 위해 따라야 할 최고의 디자인 패턴 중 하나입니다. React.lazy와 Suspense는 리액트 컴포넌트를 로딩할 때 레이지 로딩을 구현하는 데 사용됩니다.

```js
import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

export default App;
```

## 6. `PropTypes`를 사용하여 타입 체크하기


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

<img src="/assets/img/2024-09-10-11UsefulReactjsHackEveryDeveloperShouldKnow_4.png" />

React JS에서 PropType은 프로퍼티에 전달된 데이터 유형을 유효성 검사하는 데 사용되는 메서드로, 초기 버그를 잡는 데 도움이 됩니다. React propTypes는 전달된 프로퍼티의 데이터를 유효성 검사하여 예상되는 값의 유형을 정의합니다.

Prop Type 설치 방법

```js
npm i prop-types
```

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

```js
import React from 'react';
import PropTypes from 'prop-types';

const Button = ({ label }) => (
  <button>{label}</button>
);

Button.propTypes = {
  label: PropTypes.string.isRequired,
};

export default Button;
```

## 7. Complex State Management using `useReducer`

![UseReducer](/assets/img/2024-09-10-11UsefulReactjsHackEveryDeveloperShouldKnow_5.png)

Instead of using multiple `useState`, we can use `useReducer` to manage complex states. Check out the example below 👇


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

```js
import React, { useReducer } from 'react';

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <span>{state.count}</span>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </>
  );
};

export default Counter;
```

## 8. JSX에서 인라인 함수 사용을 피하자

JSX에서 인라인 함수 사용을 피하는 것은 좋은 습관으로 여겨지며 불필요한 다시 렌더링을 줄일 수 있습니다.

```js
import React, { useCallback } from 'react';

const Parent = () => {
  const handleClick = useCallback(() => {
    console.log('Clicked');
  }, []);

  return <button onClick={handleClick}>Click Me</button>;
};

export default Parent;
```

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

## 9. `React.memo`을 사용하여 성능 최적화하기

![image](/assets/img/2024-09-10-11UsefulReactjsHackEveryDeveloperShouldKnow_6.png)

부품이 변하지 않을 때 컴포넌트를 다시 읽지 않으려면 React.memo를 사용하여 컴포넌트를 감싸면 됩니다.

```js
import React from 'react';
import PropTypes from 'prop-types';

const ChildComponent = React.memo(({ name }) => {
  console.log('Rendering Child');
  return <div>{name}</div>;
});

ChildComponent.propTypes = {
  name: PropTypes.string.isRequired,
};

ChildComponent.displayName = 'ChildComponent';

const Parent = () => {
  return <ChildComponent name="John" />;
};

export { ChildComponent, Parent };
```

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

## 10. 글로벌 상태 관리를 위해 `Context` 사용하기

React JS에서 프롭 드릴링 없이 글로벌 상태를 관리하기 위해 Context API를 사용할 수 있습니다.

```js
const UserContext = React.createContext();

const App = () => {
  const [user, setUser] = useState("John Doe");

  return (
    <UserContext.Provider value={user}>
      <Profile />
    </UserContext.Provider>
  );
};

const Profile = () => {
  const user = useContext(UserContext);
  return <div>사용자 이름: {user}</div>;
};
```

## 11. 에러 처리를 위해 `Error Boundaries` 사용하기

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

에러 경계를 사용하면 컴포넌트 트리에서 발생한 오류를 잡고 해결할 수 있어요.

```js
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  
  static getDerivedStateFromError() {
    return { hasError: true };
  }
  
  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

const App = () => (
  <ErrorBoundary>
     <MyComponent /> 
  </ErrorBoundary>
);
```

이러한 팁들을 통해 React 코드를 효율적이고 유지보수가 쉽게 작성할 수 있고 성능을 최적화하며 더 나은 사용자 경험을 제공할 수 있어요.

이 블로그 포스트를 읽어주셔서 감사합니다. 웹 개발에 관심이 있다면, 저의 트위터(X)와 Medium을 팔로우해보세요.

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

# 쉽게 이해할 수 있는 영어 커뮤니티의 일원이 되어 주셔서 감사합니다! 떠나시기 전에:

- 작가를 clapping하고 팔로우하고 ️👏️️
- 팔로우하기: X | LinkedIn | YouTube | Discord | 뉴스레터
- 다른 플랫폼 방문: CoFeed | Differ
- PlainEnglish.io에서 더 많은 콘텐츠를 만나보세요

신입 개발자가 알아야 할 React.js 팁 및 기능 11가지



<img src="/assets/img/2024-09-10-YieldinJavaScriptUnlockingthePowerofGenerators_0.png" />

Medium Premium이 없으신가요? 여기에서 읽어보세요: simplified.ninja.

JavaScript를 작성하는 상상을 해보세요. 실행 중간에 멈출 수 있고 제어권을 다시 넘겨주어 돌아갈 수 있으면 어떨까요? 마법 같죠? 그런 일들을 할 수 있는 곳이 바로 JavaScript의 yield와 generator 함수의 세계입니다.

# 소개

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

JavaScript의 계속 변화하는 풍경 속에서, yield 키워드와 그 동반자인 생성자 함수가 가져온 호기심과 잠재력만큼 많은 관심을 끈 적이 없었습니다. ECMAScript 6(ES6)에서 소개된 이 강력한 구조물들은 JavaScript에서의 제어 흐름과 반복 가능성에 대한 생각을 바꿨습니다.

# Yield란?

본질적으로, yield는 생성자 함수 내에서만 사용되는 키워드입니다. 그렇다면 정확히 어떤 역할을 하는 걸까요?

- 일시 중단과 재개: yield 키워드는 함수가 실행을 일시 중단하고 호출자에게 값을 반환하되 자신의 상태를 유지하는 데 사용됩니다. 그리고 거기서 일시 중단된 곳부터 다시 시작할 수 있습니다.
- 값 생성: 생성자 함수가 값을 yield하면, 해당 값은 반복 시퀀스의 일부로 생성됩니다.
- 양방향 통신: yield는 생성자 함수에서 값을 보내고, 생성자가 재개될 때 값이 다시 돌아와서 받을 수 있습니다.

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

여기 간단한 예제가 있어요:

```js
function* countToThree() {
    yield 1;
    yield 2;
    yield 3;
}
```

```js
const generator = countToThree();
console.log(generator.next().value); // 1
console.log(generator.next().value); // 2
console.log(generator.next().value); // 3
```

이 예제에서, 각 yield 문은 함수를 일시 중단하고 순서에서 다음 값을 반환해요. 함수는 next()가 다시 호출될 때 다시 실행돼요.

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

yield를 이해하면 JavaScript 프로그래밍에서 새로운 패러다임이 열립니다. 복잡한 제어 흐름, 지연 평가, 무한 시퀀스와 관련된 문제에 우아한 해결책을 제공합니다. 다음 파트에서는 yield가 왜 강력한지, 효과적으로 사용하는 방법을 탐구하고 일부 실용적인 사용 사례에 대해 자세히 살펴볼 것입니다.

# 왜 Yield를 사용해야 하는가?

yield 키워드와 제너레이터 함수는 여러 가지 흥미로운 이점을 제공합니다:

- 지연 평가: 제너레이터는 필요한 때에 값들을 계산하므로 대량의 데이터 세트와 작업할 때 특히 더 나은 성능과 메모리 효율성을 제공할 수 있습니다.
- 간소화된 비동기 코드: 제너레이터는 비동기 코드를 더 읽기 쉽고 유지보수하기 쉽게 만들어줄 수 있습니다, 특히 프로미스와 결합했을 때 더욱 그렇습니다.
- 사용자 정의 순회 가능한 객체: 전체 반복자 프로토콜을 구현하는 복잡성 없이 사용자 정의 순회 가능한 객체를 쉽게 생성할 수 있습니다.
- 상태 보존: 제너레이터는 호출 사이에 내부 상태를 유지하기 때문에 복잡한 상태를 가진 알고리즘을 자연스럽게 표현할 수 있습니다.

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

# Yield 사용 방법

Yield를 사용하려면 제너레이터 함수를 이해해야 합니다. 다음은 단계별 가이드입니다:

- 제너레이터 함수 정의: 함수 내부에 * 키워드를 사용하거나 객체 리터럴 또는 클래스의 메소드 앞에 *를 붙입니다.

```js
function* generatorFunction() {
  // 함수 본문
}
```

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

- Yield 키워드 사용: 제너레이터 내부에서 실행을 일시 중지하고 값을 생성할 때는 yield를 사용하세요.

```js
function* countTo(n) {
  for (let i = 1; i <= n; i++) {
    yield i;
  }
}
```

- 제너레이터 객체 생성: 제너레이터 함수를 호출하여 제너레이터 객체를 생성하세요.

```js
const generator = countTo(3);
```

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

- 반복: 생성된 값들을 반복하려면 next() 메소드를 사용하세요.

```js
console.log(generator.next().value); // 1
console.log(generator.next().value); // 2
console.log(generator.next().value); // 3
console.log(generator.next().done);  // true
```

# 사용 사례

- 이터러블 구현: 복잡한 데이터 구조에 대한 사용자 정의 이터러블을 만드는 데 사용하세요.

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

```js
function* 피보나치수열() {
  let [이전, 현재] = [0, 1];
  while (true) {
    yield 현재;
    [이전, 현재] = [현재, 이전 + 현재];
  }
}
```

- 비동기 작업 처리: 비동기 코드를 간편하게 처리하고, 특히 async/await와 결합할 때 유용합니다.

```js
function* 사용자데이터가져오기() {
  const 사용자 = yield fetch('/api/user');
  const 게시물들 = yield fetch(`/api/posts?userId=${사용자.id}`);
  return { 사용자, 게시물들 };
}
```

- 고유한 ID 생성: 간단한 상태 저장형 ID 생성기 만들기.


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

```js
function* idGenerator() {
  let id = 1;
  while (true) {
    yield `id_${id++}`;
  }
}
```

- Coroutines를 구현했습니다: 제너레이터를 사용하여 협력적으로 멀티태스킹을 구현합니다.

# 결론

yield 키워드와 제너레이터 함수는 JavaScript의 강력한 기능으로, 게으른 평가(lazy evaluation), 사용자 정의 이터러블(custom iterables), 복잡한 제어 흐름 시나리오에 대한 우아한 해결책을 제공합니다. 초보자에게는 문법이 기이하게 느껴질 수 있지만, yield를 마스터함으로써 효율적이고 가독성 있고 유지보수가 용이한 JavaScript 코드를 작성할 수 있는 능력을 크게 향상시킬 수 있습니다.


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

yield를 탐험하면 프로젝트에 적용할 혁신적인 방법을 발견할 가능성이 높습니다. 성능을 최적화하거나 비동기 작업을 관리하거나 복잡한 알고리즘을 구현하는 등의 작업을 할 때 yield는 다양한 프로그래밍 과제를 해결하기 위한 유연하고 강력한 도구입니다.

기억하세요. yield와 같은 강력한 기능은 분별하여 사용해야 합니다. 특히 시퀀스, 반복 및 상태 관리와 관련된 시나리오에 특히 적합합니다. 제너레이터를 사용해 경험을 쌓으면 코드에서 가장 많은 이점을 제공할 때를 직감적으로 파악하게 될 것입니다.

자바스크립트에서의 Yield 제너레이터의 힘을 발휘하기



# 드디어 많은 년 뒤에 CSS 하나로 요소를 수직으로 가운데 정렬할 수 있습니다!

물론 CSS는 많은 년 동안 수직 정렬을 지원해 왔습니다. 이를 위한 다양한 방법이 있습니다. 예를 들어, 위와 아래 여백에 모두 auto를 설정할 수 있습니다. 이렇게 하면 요소가 가운데 정렬됩니다.

다른 방법으로는 position: absolute, top 50% 및 transform: translate(0, -50%)을 사용하는 방법이 있습니다. 또한 position을 50%로 설정하고 margin을 사용하여 요소를 위로 이동시키는 방법도 있어서 가운데 정렬할 수 있습니다.

하지만 이러한 방법들은 모두 해킹 방법일 뿐입니다. 정직하게 말하면, 우리가 일반적인 방법을 사용할 수 있다면 이렇게 해서는 안 됩니다.

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

사실 많은 해 동안 사용 가능한 일반적인 방법이 있습니다:

```js
display: flex;
align-items: center;
```

<img src="/assets/img/2024-09-10-CSSNowSupportsVerticalAlignmentInNormalFlow_0.png" />

이 두 속성을 사용하면 요소가 수직으로 가운데 정렬됩니다.

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

하지만 그 단점은 일반 흐름에서 플렉스로 흐름을 변경해야 한다는 것입니다. 왜 이렇게 해야 했을까요? 오랜 시간 동안 모든 브라우저가 일반 흐름에서 동일한 개념을 지원하지 않았기 때문입니다. 이렇게:

```js
align-content: center; #이름을 주목해주세요!
```

모든 곳에서 작동하지 않았습니다. 데스크탑 브라우저가 이를 더 빨리 지원했고, 2024년 3월에는 대다수의 브라우저(브레이브, 파이어폭스, 오페라, 크로-사파-엣지)가 수직 정렬을 지원했습니다.

하지만 2024년 7월 말까지는 모바일 브라우저인 Chrome for Android, Android Browser, 그리고 Firefox for Android도 이에 동참했습니다. 현재 모든 브라우저에서 표준으로 지원되지는 않지만요:

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

<img src="/assets/img/2024-09-10-CSSNowSupportsVerticalAlignmentInNormalFlow_1.png" />

전 세계 사용자 중 81.55%를 커버하는 정상 흐름(normal flow)에서 align-content가 화면 흐름(display-flow) 변형의 대안으로 고려될 수 있습니다.

사용법은 간단합니다. 하나의 속성만 정의하면 됩니다:

<img src="/assets/img/2024-09-10-CSSNowSupportsVerticalAlignmentInNormalFlow_2.png" />

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

좋은 세로 정렬을 얻으려면:


<img src="/assets/img/2024-09-10-CSSNowSupportsVerticalAlignmentInNormalFlow_3.png" />


아마도 달에 착륙하는 것만큼 혁명적이지는 않지만, 우리가 얻을 수 있는 것을 받아들여야 할 2024년입니다. 하나의 프로퍼티를 사용하는 것이 유용할 수 있으며 기업 환경이 새로운 프로퍼티를 사용하여 코드베이스를 정렬하기 시작하는 것을 기대합니다. 아마 브라우저에서의 지원을 구현하는 것만큼 많은 시간이 걸리지는 않기를 희망합니다 :)

코딩 뉴스를 읽고 싶다면 구독, 팔로우, 좋아요, 박수 및 공유해주세요!

 CSS가 일반 흐름에서 수직 정렬을 지원하기 시작했습니다



## 웹 디자인 | 개발

![The Madness Of Web Browsers](/assets/img/2024-09-10-TheMadnessOfWebBrowsers_0.png)

벨 사우스에서 일찍부터 소프트웨어 업계에서 대부분의 직업 생활을 했습니다. 수십 년 동안 아키텍트, 풀 스택 개발자 및 매니저로 전념해왔습니다.

현재, 새로운 소셜 미디어 플랫폼을 아키텍처화, 디자인 및 개발하고 있습니다. 최근에는 브라우저와 그들의 고집에 대한 전투를 벌이고 있습니다.

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

요즘은 쿠키 또는 로컬 스토리지를 사용하여 애플리케이션(app)에 유효한 "나를 기억" 기능을 만드는 작업을 했어요. 이 기능을 통해 사용자는 추가 자격 증명을 요구하지 않고 로그인할 수 있습니다. 처음에는 모든 데스크톱 브라우저에서 작동했어요.

하지만 iOS의 Safari에서는 작동하지 않았어요 — 전혀 작동하지 않았죠. 아이폰에서 최신 iOS를 실행했음에도 불구하고 문제를 해결할 수 없었어요.

## 쿠키 또는 로컬 스토리지?

다른 개발자들이 앱에서 비슷한 문제를 겪었다는 것을 알게 되었어요.

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

조사를 마친 후 쿠키에서 로컬 저장소로 변경하기로 결정했어요. 문제가 해결될 것이라고 생각했어요. 하지만 그렇지 않았어요. 제가 무엇이 문제인지 결정하려는 과정을 처음부터 다시 시작해야 했죠. 때로는 이런 예시처럼, 제 정신을 흔들게 해요.

한 번 더, 나를 괴롭히는 브라우저 문제를 만났어요.

안타깝게도, 브라우저들은 그들이 지켜야 할 규칙을 항상 따르지는 않아요. "나를 기억해줘" 문제를 해결하면서, 독특한 이상 현상들을 발견했어요.

내 경력 동안 비슷한 개발 문제를 종종 만났어요. 저 혼자가 아니라는 걸 알아요; 다른 소프트웨어 개발자들도 제가 겪는 좌절을 공유하죠.

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

## 웹 브라우저란?

웹 사이트에 접속하기 위한 프로그램(앱)입니다. 사용자가 웹 페이지를 요청하면 브라우저가 웹 서버에서 파일을 가져와 사용자 화면에 페이지를 표시합니다.

데스크톱, 랩톱, 태블릿, 스마트폰 모두 브라우저를 사용합니다. 2020년에는 약 49억 명이 브라우저를 사용했습니다.

Google Chrome은 모든 기기에서 64%의 글로벌 시장 점유율을 가진 가장 인기 있는 브라우저입니다. 이는 오픈 소스 OpenChromium 프로젝트에서 파생되었으며 다른 많은 브라우저의 기반으로도 활용됩니다.

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

이에는 현재 약 5%의 시장 점유율을 가진 Chromium을 기반으로 만들어진 Microsoft Edge가 포함되어 있습니다. Apple의 WebKit 코드에 기반을 둔 Safari는 Google Chrome 다음으로 19%의 점유율을 차지하고 있습니다. Edge 다음으로는 Mozilla의 코드에 기반을 둔 Firefox가 약 3%의 점유율을 가지고 있습니다.

이들은 오픈 소스 코드이기 때문에 일부 작은 마이너 규모의 브라우저도 이를 기반으로 제작되었습니다. Opera와 Samsung Internet는 각각 2% 이상의 시장 점유율로 다섯 번째와 여섯 번째에 랭크됩니다.

## 브라우저가 고유한 설계를 갖는 이유

브라우저는 자바스크립트 코드와 같이 차이점을 가질 수 있습니다. 그들이 따라야 할 규칙을 항상 준수하지는 않는데, 이는 많은 개발자들에게 이미 알려진 문제입니다.

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

사파리, 파이어폭스, 그리고 구글은 각자의 방식으로 구현이 조금씩 다를 수 있어요.

특정 기능이 한 브라우저에서는 지원되지만 다른 브라우저에서는 지원되지 않을 수도 있어요. 아니면 기능이 한 곳에서 완전히 구현되었지만 다른 곳에서는 부분적으로만 지원될 수도 있어요. 이런 불일치 때문에 저는 답답해요. 저뿐만이 아니에요. 이것은 많은 개발자들에게 알려진 도전 과제에요.

더 나쁠 수도 있어요. 브라우저들은 열 년 전보다 훨씬 나아졌어요. Microsoft Edge와 구글은 같은 자바스크립트 엔진을 사용하기 때문이랍니다.

![웹 브라우저의 광기](/assets/img/2024-09-10-TheMadnessOfWebBrowsers_1.png)

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

## 표준 및 구현 도전 요소 

핵심 브라우저 문제는 Javascript Ecma, CSS WG, 그리고 CKan2.0.11 HTML 표준과의 관련이 있습니다. 이러한 주체들은 견고한 명세를 개발하기 위해 노력합니다. 그러나 개발자들은 때로는 이를 자신만의 방식으로 해석하기도 합니다.

공개된 표준은 복잡합니다. 이로 인해 이를 해석하고 구현하는 것에 지속적인 어려움이 발생합니다.

마이크로소프트의 인터넷 익스플로러(IE) 브라우저는 종종 소프트웨어를 다른 브라우저와 다르게 처리했습니다. 그들은 첫 번째로 등장했기 때문에 표준을 따를 필요가 없다고 생각했고, 사실 그렇지 않았습니다. 이는 종종 브라우저 세계에서 이례적인 도전요소가 되기도 했습니다.

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

요즘 브라우저 환경에서는 더 이상 완전한 이상적인 상황이 없어요. 특히 새로운 기능이 추가된 경우, 소프트웨어 구현 방법은 경우에 따라 독특할 수 있어요.

다양한 표준을 따르지 않는 브라우저는 소프트웨어 개발 팀에 미치는 영향이 중대할 수 있어요. 새로운 소프트웨어 제품이 때로는 오래된 IE 브라우저에서 작동하지 않을 수도 있어요.

다행히도, 오래된 브라우저에서 소프트웨어를 구현하기 위한 해결책과 패키지가 있어요. 안타깝게도 때로는 여전히 조정과 마음가짐을 필요로 할 수 있어요.

## 오래된 브라우저의 표와 CSS 플렉스 디스플레이

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

웹 개발이 변화한 한 가지 예는 테이블 요소 대신 CSS의 flex를 사용하는 것입니다.

현재 개발자들은 테이블이 아닌 CSS flex 디스플레이를 사용합니다. flex를 사용하여 모든 것을 가운데 정렬하거나 수직 축에서 가운데로 정렬할 수 있지만, 여전히 그 디스플레이 내부에서 처리해야 할 div들이 있습니다.

레이아웃을 보면 모든 것이 혼돈스럽습니다. 미치겠죠. 일부 flex 디스플레이는 완벽할 수 있지만, 다른 것들은 비슷한 위치에서 갑자기 실패할 수도 있습니다.

그 순간, 전투가 시작됩니다. 왜 제대로 작동하지 않는지 이해하려 노력합니다. 계속 발생하지 않도록 문제를 해결하기 위해 게임을 해야 합니다. 이것이 잘못된 것을 하는지 아니면 브라우저가 잘 못하고 있는지 확인하려고 시간을 보내며 이것저것 해보곤 합니다.

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

나도 화가 나 있는 개발자들을 알아요. 우리는 가장 간단한 것이 얼마나 어려운지 이해하지 못해요.

## 모바일 세계

브라우저 세계에서 가장 큰 차이점은 모바일입니다. 모바일 브라우저는 조금 이상할 수 있어요. 안타깝게도, Android 또는 iPhone 브라우저에서 완전히 테스트를 해야 해요.

Google 디버거를 사용하면 모바일 브라우저를 흉내 낼 수 있어요. 이 기능은 정말 좋은 기능이에요.

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

안타깝게도 iPhone XR의 일부 문제를 발견했습니다. 구글 디버거 에뮬레이션에서 완벽해 보이는 것을 만들 수는 있지만, 실제 iPhone에서 실행하면 다르게 보입니다.

모든 것을 제 iPhone에서 확인해서 좋게 보이도록 항상 확인합니다. 그럼에도 불구하고 새 iPhone에서도 같이 잘 보이리라는 보장이 없습니다. 아마도 동일한 코드를 사용하니 iPhone에서도 잘 보일 것이라고 가정하지만, 직접 확인할 수 있을 때까지 100% 확신할 수 없습니다.

모바일 세계에서 iPhone과 Android가 모든 것의 주를 이룹니다. 모든 소프트웨어가 둘 다에서 매끄럽게 작동해야 합니다.

## PC에서 모바일로 번역하기

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

PC 앱을 만드는 데 가장 큰 도전은 데스크톱과 모바일 폰에서 모두 잘 보이도록 하는 것입니다. 데스크톱에서 모바일로 번역하는 것은 생각보다 훨씬 복잡할 수 있습니다.

저는 먼저 데스크톱용으로 개발한 후에 모바일로 이주합니다. 제 패러다임에 동의하는 사람은 일부일 수 있지만, 저는 그 방식이 더 쉽다고 생각합니다. 데스크톱을 제 스펙에 맞게 개발한 후에 CSS 규칙과 미디어 스위치를 사용합니다. 이를 통해 전환을 다루는 데 도움이 됩니다.

계단식 스타일 시트(CSS) 미디어 스위치는 브라우저의 도전을 극복하는 데 도움이 됩니다. 이 스위치는 디스플레이 크기 간의 번역을 돕고 어떤 CSS를 사용할지 결정하는 데 도움이 됩니다.

CSS 미디어 쿼리의 공식적인 분할점은 다음과 같습니다:

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

- 모바일 기기 — 320px — 480px
- 아이패드와 태블릿 — 481px — 768px
- 노트북과 작은 화면 — 769px — 1024px
- 큰 화면과 데스크톱 — 1025px — 1200px
- TV 및 초대형 화면 — 1201px 이상

각기 다른 디바이스별로 다른 CSS를 사용합니다.

저희 사이트에서 5%만 타블렛에서 유입되는 트래픽이므로 가장 낮은 우선순위입니다. 거의 60%는 모바일에서, 35%는 데스크톱에서 유입됩니다. 저는 소프트웨어가 모바일과 데스크톱에서 완벽하게 작동하도록 노력합니다. 많은 개발자들이 비즈니스 모델에 따라 제 전략을 공유하고 있습니다.

예를 들어, TikTok과 같은 앱 전문 회사는 모바일을 우선시할 것입니다. 그러나 부동산 업체는 주로 데스크톱에 초점을 맞출 것이며, 판매 중인 부동산이 그런 장치에서 더 잘 표시됩니다.

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


![image](/assets/img/2024-09-10-TheMadnessOfWebBrowsers_2.png)

## 모바일 디버깅의 어려움

현재 직면한 과제 중 하나는 iPhone에서 디버깅하는 일입니다. 단순하지 않아요. 먼저 애플 맥에 프로그램을 설치해야 하고, 그런 다음 iPhone에 케이블을 연결하여 맥에서 디버깅해야 합니다. 이 일에 시간을 많이 투자해도 짜증이 나요.
디버깅 소프트웨어는 데스크톱에서 하는 게 훨씬 쉬워요.


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

세 가지 주요 데스크톱 브라우저 — 구글, 파이어폭스, 그리고 엣지 — 모두 브라우저에서 디버거를 사용할 수 있게 해줘요. 이상이 없다면, Javascript를 확인하고 코드를 따라갈 수 있어요. 일어나는 일을 보고 무엇이 작동하지 않는지 발견할 수 있어요.

CSS도 확인해서 어떤 것이 설정되었는지 알아볼 수 있고 어떤 문제를 디버깅할 수 있어요. 이게 적용되지 않는 유일한 경우는 CSS 코드가 규칙을 따르지 않았을 때에요.

CSS 개발자들은 때로 표준을 다르게 구현하기도 해요. 그렇게 하지 말아야겠지만, 그렇게 한답니다.

가능하다면, 구글 크롬 브라우저를 사용해서 코드를 디버깅해요. 안타깝게도, Chrome은 무엇이 잘못되었는지 말해주지 않아요. 그런 경우에는 문제를 파악하기 위해 파이어폭스에서 디버깅해야 할 거에요. 다행히도, 파이어폭스는 종종 문제를 보여주어요. 그에 비해 Chrome은 아닐 수도 있어요.

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

## 정규화된 코드

계속되는 브라우저 이슈를 어떻게 피할까요?

저는 모든 브라우저에서 작동할 것이라는 경험과 테스트 결과를 토대로 한 정규화된 코드를 작성합니다. 이것은 더 많은 작업과 도전을 의미할 수 있습니다. 그래도 가끔은 예상대로 작동하지 않을 수도 있어요.

이런 경우엔 기본 브라우저에서 코드를 테스트해야 한다는게 제 책임입니다. 유감스럽게도 다른 회사들이 표준을 준수하지 않는 사용자 지정 브라우저들을 구현한 경우도 있습니다.

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

남의 브라우저에서 다르게 보이고 작동하는 작은 코드 조각을 찾는 것은 흔한 일입니다.

대부분의 회사들은 브라우저 예외에 대해 걱정하지 않습니다. 그들은 모든 주요 브라우저에 대해 소프트웨어를 구현합니다. 하지만 누군가가 오래된 브라우저나 사용자 정의 브라우저를 사용한다고 해도 신경 쓰지 않습니다.

## 사용자 정의 브라우저의 한 예시

몇 년 전, 나는 소프트웨어 회사의 시스템 아키텍트로 일하면서, 특이한 브라우저 구현을 가진 고객과 함께 일했습니다.

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

우리 개발 팀은 클라이언트의 고객 정보 시스템(CIS) 중 하나와 함께 작동하는 해결책 소프트웨어를 구현해야 했습니다. 좀 더 구체적으로, CIS에서 브라우저에서 실행되는 iFrame이어야 했습니다.

해당 산업을 위해 CIS 시스템에 모든 고객 레코드가 저장되어 있었습니다.

회사의 시스템에 따라 여러 가지 방법을 사용하여 고객 정보에 액세스할 수 있습니다.

그러나 이 경우에는 특정한 방식으로 구현해야 했습니다: iFrame 또는 웹 브라우저에서 실행되는 시스템의 창으로, 다양한 미친 짓들을 했습니다.

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

그것은 고대적이었고, 욕설을 일으키는 문제였습니다. 클라이언트는 시스템을 개선하겠다고 말하지만 실제로는 그렇지 않았어요.

## 브라우저의 미친 행동과 평화를 이루다

브라우저의 일관성 부족은 웹 개발의 가장 짜증나는 측면 중 하나입니다. 이러한 도전에 평화를 이루려고 노력해 왔습니다. 그들과 싸우는 것은 불가능하다는 것을 깨달았으니 말이죠.

소프트웨어 개발자들은 구현 차이를 발견하고 항상 해결책을 찾아야 합니다. 유감스럽게도, 다른 회사들이 개발자들과 함께 원하는 것을 구현하는 대신 명세서의 의도와는 다르게 해야 하는 경우가 있을 수 있습니다.

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

사양을 준수해야 하는 소프트웨어 구현은 항상 사양이 해석된 대로만 좋을 수 있습니다.

가끔은 "최소 공통 분모" 솔루션을 사용합니다.

즉, 모든 브라우저 및 장치에서 최신 기술 솔루션을 사용합니다. 사양에 따르면 최신이 아닐 수도 있지만, 일관되게 작동하고 불필요한 소프트웨어 충돌을 방지할 수 있는 최신 기술을 사용합니다.

웹 브라우저의 광기 2024년에 알아두면 좋은 5가지 비밀




![ES12](/assets/img/2024-09-10-The5mosttransformativeJavaScriptfeaturesfromES12_0.png)

ES12은 정말 놀라운 업그레이드였어요.

우리가 JavaScript를 작성하는 방식을 완전히 변화시킬 가치 있는 기능으로 가득 찼어요.

코드가 더 깔끔하고 짧아지며, 더 쉽게 작성할 수 있게 되었어요.


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

한번 확인해 보고 놓친 부분을 확인해 봐요.

# 1. Promise.any()

ES12 이전에 이미 Promise.all() 및 Promise.allSettled()이 있는데, 이들은 Promise 그룹을 기다리기 위한 것입니다.

여러 개의 Promise가 있지만 첫 번째로 해결된 Promise에만 관심이 있는 경우가 종종 있습니다.

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

아래에서 표 태그를 Markdown 형식으로 변경해주세요:


| Function | Description             |
|----------|-------------------------|
| any()    | Resolves with the value that first resolves or rejects with the array of rejection reasons |


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

# 2. replaceAll()

네, 이미 문자열 내에서 하위 문자열을 빠르게 교체하기 위해 replace()를 사용했었습니다.

![image](/assets/img/2024-09-10-The5mosttransformativeJavaScriptfeaturesfromES12_2.png)

하지만 이것은 정규식을 사용하지 않는 한 하위 문자열의 첫 번째 발생에 대해서만 그렇게 했습니다.

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

ES12가 출시되어서 이제 replaceAll() 메서드를 사용해서 문자열의 각각의 인스턴스를 모두 바꿀 수 있게 되었어요.

![이미지](/assets/img/2024-09-10-The5mosttransformativeJavaScriptfeaturesfromES12_3.png)

# 3. WeakRefs

ES12부터 JavaScript 변수는 강한 참조 또는 약한 참조가 될 수 있어요.

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

"이것들은 무엇인가요?

강력한 참조(Strong Refs)는 우리 일상적인 변수들입니다. 그러나 약한 참조(Weak Refs)는 명시적으로 WeakRef()로 생성해야 합니다:

![image](/assets/img/2024-09-10-The5mosttransformativeJavaScriptfeaturesfromES12_4.png)

JS 변수들은 메모리에 있는 실제 객체를 가리키는 참조일 뿐입니다."

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

그래서 같은 객체에 대한 여러 개의 참조를 가질 수 있는 것입니다.

![image](/assets/img/2024-09-10-The5mosttransformativeJavaScriptfeaturesfromES12_5.png)

하지만 강한 참조와 약한 참조의 차이는 무엇일까요?

프로그래밍에서는 필요하지 않은 객체가 메모리에서 제거되어 자원을 절약하는 쓰레기 수집 기능이 있습니다.

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

JavaScript에서는 객체들이 자동으로 가비지 수집 대상으로 표시됩니다. 이는 그 객체를 가리키는 모든 강한 참조 변수가 사용 불가능해지면(스코프 밖으로 벗어남) 발생합니다:

object person과 me은 func()가 실행되면 파괴 대기열에 넣습니다.

![이미지](/assets/img/2024-09-10-The5mosttransformativeJavaScriptfeaturesfromES12_6.png)

하지만 여기서 무슨 일이 일어나는지 살펴보세요:

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

func()이 끝난 후에도 짝수 위치에 있는 사람이 범위를 벗어나더라도, 나라는 전역 강력한 참조가 남아 있었습니다.

![image](/assets/img/2024-09-10-The5mosttransformativeJavaScriptfeaturesfromES12_7.png)

하지만 나가 약한 참조였다면 어떨까요?

이제 func()이 실행된 후에는 사람이 객체에 대한 유일한 강력한 참조가 될 것입니다.

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

그래서 해당 객체는 가비지 수집 대상으로 표시됩니다:

![image](/assets/img/2024-09-10-The5mosttransformativeJavaScriptfeaturesfromES12_8.png)

그렇다면 왜 약한 참조가 필요할까요?

그 중요한 사용 사례는 캐싱입니다.

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

여기에서 어떤 일이 일어날까요: processData()가 실행되고 새로운 객체가 캐시에 저장됩니다.

데이터가 사용할 수 없게 되었지만, 객체는 캐시에서 강력한 참조를 가지고 있기 때문에 가비지 수집되지 않습니다.

하지만 processData()가 종료된 후에 객체를 해제하고 싶다면 어떻게 해야 할까요?

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

저는 WeakRef를 Map 값으로 사용할 겁니다:

![링크](/assets/img/2024-09-10-The5mosttransformativeJavaScriptfeaturesfromES12_10.png)

## 4. 논리 할당 연산자

ES12의 귀여운 구문 설탕 기능입니다.

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

아래와 같이 사용합니다:


![Image 1](/assets/img/2024-09-10-The5mosttransformativeJavaScriptfeaturesfromES12_11.png)


정확히 다음과 같이도 사용할 수 있습니다:


![Image 2](/assets/img/2024-09-10-The5mosttransformativeJavaScriptfeaturesfromES12_12.png)


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

**??=**: 변수가 null 또는 정의되지 않은 경우에 빠르게 값을 할당합니다 ("nullish").

![ES12/13에서 가장 혁신적인 JavaScript 기능](/assets/img/2024-09-10-The5mosttransformativeJavaScriptfeaturesfromES12_13.png)

**||=**: ??=와 유사하지만 0, undefined, null, ``, NaN 또는 false와 같은 거짓 값을 위해 값을 할당합니다.

![ES12/14에서 가장 혁신적인 JavaScript 기능](/assets/img/2024-09-10-The5mosttransformativeJavaScriptfeaturesfromES12_14.png)

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

표 태그를 Markdown 형식으로 변경해주세요.

![image](/assets/img/2024-09-10-The5mosttransformativeJavaScriptfeaturesfromES12_15.png)

# 5. Numeric separators

큰 숫자 리터럴을 더 읽기 쉽고 사용자 친화적으로 만들어 주는 작지만 영향력 있는 새로운 추가 기능입니다.

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

<img src="/assets/img/2024-09-10-The5mosttransformativeJavaScriptfeaturesfromES12_16.png" />

컴파일러는 저 뭐그렇게 귀찮은 밑줄들을 완전히 무시해 — 모두 인간을 위한 것이야!

# 최종 결론

이것들이 ES12에 도입된 새로운 멋진 JavaScript 특징들이야.

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

개발자로서 생산성을 높이고 보다 간결하고 표현력이 풍부하며 명확한 코드를 작성하는 데 도움이 되는 다음과 같은 요소들을 활용해보세요.

# 자바스크립트가 하는 모든 미친 짓

이미 알고 있다고 생각했던 모든 특징들을 알고나니.
아픈 버그를 피하고 가치 있는 시간을 절약할 수 있는 방법으로, 자바스크립트가 하는 모든 미친 짓은 자바스크립트의 세세한 함정과 잘 알려지지 않은 부분에 대한 매혹적인 가이드입니다.

오늘 이곳에서 무료로 받아보세요.

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


![The 5 most transformative JavaScript features from ES12-17](/assets/img/2024-09-10-The5mosttransformativeJavaScriptfeaturesfromES12_17.png)


ES12의 5가지 혁신적인 JavaScript 기능



## 프로그래밍

![프로그래밍 언어 선택](/assets/img/2024-09-10-ChoosingaProgrammingLanguageforaProject_0.png)

프로그래밍 언어에 대한 농담과 논쟁은 세상의 존재만큼 오래되었죠. 그렇다면 어떤 언어를 선택해야 할까요? 선택하려면 어떻게 해야 할까요?

아마도 수백 가지의 프로그래밍 언어가 존재하며, 일부는 매우 인기가 많고 일부는 그렇지 않습니다. 이러한 이유로 (선택을 만드는 데) 정리하기가 어려울 수 있습니다. 이 기사에서는 어떻게 언어를 분류하고, 어떤 기준을 중요하게 생각하며 어떻게 선택을 하는지에 대해 설명하겠습니다.

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

실제로, 이 프로젝트는 사용할 언어에 대한 초기 필터링을 가능하게 하는 첫 번째 유형의 프로젝트입니다.

- 언어 카테고리
- 전문화된 언어

처음 다룰 언어 카테고리는 전문화된 언어입니다. 어떤 분야에서는 언어를 선택할 여지가 거의 없거나 전혀 없는 경우도 있습니다. 이들은 종종 매우 특정 분야에서 사용되는 언어들입니다.

예를 들어, 제가 공부하면서 실습할 기회가 있었던 VHDL은 이 카테고리에 속합니다. 이 언어는 하드웨어를 설명하는 데 사용되는 소수의 특화된 언어 중 하나입니다. 또한, 가끔 이 언어를 사용해 하드웨어와 놀고 싶어지기도 합니다. 정말 재미있는 언어거든요; 때로는 다시 뭔가 하드웨어를 사서 놀고 싶어지기도 해요.

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

간단히 말해서 이러한 언어들은 선택의 문제가 다른 곳보다 적게 발생하는 특정 영역을 가지고 있습니다.

## 수집자의 차고가 필요한가요?

만약 “주류” 언어들을 비교하려면, 첫 번째 중요한 기준은 가비지 컬렉터의 존재 여부입니다. 기억해두세요, 가비지 컬렉터 (GC)는 프로그램에서 메모리의 할당과 해제를 직접 관리하지 않고 가능하게 하는 구성 요소입니다.

이는 프로그램을 크게 단순화시킵니다 (우리는 나중에 이에 다시 언급하겠습니다) 그러나 메모리 소비와 성능 (특히 프로그램의 지연 시간에서)에서는 더 많은 비용을 초래합니다.

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

일부 매우 특정한 프로그램(커널, 실시간 등)은 가비지 컬렉터를 허용할 여유가 없을 수 있습니다. 우리가 가비지 컬렉터가 없는 언어에 대해 이야기할 때 일반적으로 비교하는 세 가지 언어는 C, C++, 그리고 Rust입니다.

이는 역사적인 언어입니다. 어디에서나(예: Linux 커널에서) 찾을 수 있어서 완전히 이곳 없이는 할 수 없다고 생각할 정도입니다. 비슷하게, C++은 많은 프로그램에서 발견되는 인기 있는 언어입니다.

이 두 언어의 문제는 개발자로부터 엄격함을 요구한다는 점입니다. 실제로, 메모리를 수동으로 관리하는 것은 어려우며, 버그가 빨리 나타날 수 있습니다. 이러한 종류의 버그는 공격자가 기계를 제어할 수 있게 할 수 있기 때문에 꽤 위험합니다.

Rust는 이 문제를 해결하기 위해 고안되었습니다: 가비지 컬렉터가 없는 언어로, 컴파일 시 메모리 관리 버그를 피하도록 합니다. Rust는 이것만 가져오는 것이 아닙니다(나중에 타이핑과 생태계에 대해 이야기할 것입니다), 하지만 이미 좋은 점입니다.

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

이 문서의 범위를 벗어나긴 하지만, 시스템 프로그래밍은 항상 접근하기 어려운 부분이라고 생각해왔어요. 매우 난해하고 이해하기 어려운 세세한 부분과 좋은 관행들이 가득해요 (그리고 OpenSSL 개발자들이 메모리 관련 버그를 도입했다면, 우리에게도 마찬가지일 것이라는 걸 바로 알 수 있죠). 전처리기에 기반한 불가해한 주문 같은 모호한 말들이 가득하며, Makefile에 박사 학위가 없다면 이해하기 어려운 빌드 프로세스와 의존성 설치가 얽혀 있어요. 요약하자면, Rust에 대해 어떻게 생각하든, 적어도 우리 같은 평범한 사람에게 시스템 프로그래밍을 접근 가능하게 만드는 것 같아서 좋아요.

## 그래서, Garbage Collector(GC)가 필요할까요?

내가 생각하기에는 97%의 프로그램(내가 예상한 숫자임)이 가비지 컬렉터를 허용할 수 있다고 생각해요. 가비지 컬렉터의 장점은 다음과 같아요:

- 개발 용이성: 예를 들어 Rust는 GC 없이 안전해질 때까지 거대한 비중(하지만 그 목표를 고려하면 정당화된 비중이에요)을 적용해요. 저는 간단하고 명료한 코드를 좋아하며, 개발하는 과정에서 편안함을 중요시해요.
- 대부분 어플리케이션은 GC를 허용할 수 있어요: 오늘날의 가비지 컬렉터들은 매우 효율적이에요. 최근에는 예를 들어 Java 가상 머신(JVM)의 ZGC에 대해 많은 이야기가 나왔어요. 가비지 컬렉터가 작동 중일 때 가끔 몇몇 쿼리가 조금 더 실행되는 데 걸리는 몇십 밀리초가 중요한지 생각해보세요. 대부분의 어플리케이션에게는 이것이 크리티컬한 문제가 아니에요.

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

물론, 수백 기가바이트에서 심지어 테라바이트까지 사용하는 프로그램을 관리하는 것은 도전입니다. 하지만 우리는 매우 구체적인 요구 사항을 해결하기 위해 여기 있고, ZGC와 같은 솔루션이 이러한 요구 사항에 적합할 수 있다는 것을 알 수 있습니다.

그래고 아무튼, GC가 있든 없든, 이러한 종류의 애플리케이션을 코딩하는 것은 항상 어렵습니다. GC의 사용으로 인해 가져다주는 생산성이 더 흥미로울 수도 있습니다.

## 표현력

저는 Clojure와 같은 동적으로 타입이 지정된 언어가 강력한 타입이 지정된 언어와 비교했을 때 다음과 같은 기능을 허용한다고 생각합니다:

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

- 빠르게 프로토타입을 만들고 결과물에 빨리 도달하기 위해서 필요합니다.
- 짧은 프로그램을 작성하는 것이 중요합니다. 동일한 이해 수준에서 프로그램 크기를 강제로 줄이지 않고, 1000줄의 코드를 가진 프로그램을 유지하는 것이 10000줄의 코드를 가진 프로그램을 유지하는 것보다 선호됩니다. 예를 들어, Java와 Clojure로 작성한 동일한 프로그램 사이에는 최소 5에서 10배 이상의 차이가 있습니다. 이는 매우 크며 프로그램 유지보수에 영향을 줍니다.
- 핵심 요소에 집중하기.

마지막으로 이 포인트도 중요합니다. 강력한 유형의 언어에는 유형 시스템에 항상 새로운 기능이 출시된다는 문제가 있습니다. 타입에 대한 3개의 박사 학위를 가진 소수의 사람들은 이해하기 어려운 기능을 항상 사용하고자 할 것이며, 각 새로운 기능은 언어에 복잡성의 층을 추가합니다.

이러한 언어들은 타입 폭발에도 영향을 받습니다. 데이터의 작은 변형마다 해당 유형이 있어야 하며(Enum, Option 등이 도움을 줄 수 있더라도), 이는 코드베이스를 무겁게 만들고 유형 사이의 변환 함수를 추가합니다. 유형을 조작하고 확장하는 것은 꽤 복잡한 작업입니다.

## 성능

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

쓰레기 수집기가 성능에 미치는 영향에 대해 이야기했어요. 하지만 쓰레기 수집기가 있는 언어들 사이에도 성능에 엄청난 차이가 있습니다.

인터프리터 언어(Python 기본 버전과 같이)는 일반적으로 컴파일된 언어보다 훨씬 느립니다. JVM과 같은 플랫폼은 매우 뛰어난 성능으로 유명합니다 (대부분의 빅데이터 도구가 JVM에서 실행된다는 것은 우연이 아닙니다).

그렇지만 여기서도 우리는 스스로에게 물어봐야 합니다: 언어 성능이 정말 중요한가요?

대부분의 애플리케이션은 궁극적으로 부하가 적고 초당 요청 횟수도 적을 것입니다. 대부분의 시간은 I/O에서 소요되며, 따라서 언어 성능은 무시할만큼 작을 것입니다.

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

일반적인 웹 애플리케이션 프로젝트는 초당 몇 개의 요청을받는 것에 언어 선택이 영향을 미치지 않습니다. 물론 많은 애플리케이션 인스턴스를 가진 대형 웹 사이트에서는 영향을 미칠 수 있으며, 더 효율적인 언어로 서버의 이득(따라서 돈)을 얻는 것이 정당화될 수 있습니다. 또한, 현재 사용 중인 언어에 팀이 편안하다면 그것이 가장 중요한 부분일 수 있습니다. 균형을 유지하는 것은 여러분에게 달려 있습니다.

원시 성능은 한 가지이지만, 동시 및 병렬 프로그래밍을 쉽게 할 수 있는 능력은 다른 문제입니다. 사용하는 플랫폼 및 언어에 따라 더덜 복잡할 수도 있으므로 시작하기 전에 해당 문제를 연구해야 합니다. 일부 플랫폼(Erlang/OTP 등)은 이러한 문제에 우아하게 대답할 수 있습니다.

## 함수형 프로그래밍, 객체

언어는 종종 객체 언어, 함수형 언어 등과 같은 패밀리로 나뉘기도 합니다. 다른 것들도 있습니다. 일부 언어는 여러 범주에 적합하거나 다른 방식으로 기능을 추가할 수 있어서 이러한 범주를 정의하기 쉽지 않습니다. 따라서 해당 주제에 대해 자세히 다루지 않겠습니다.

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

하지만, 함수형 프로그래밍은 매우 흥미로운 분야입니다. 프로그램을 변경할 수 없는 데이터로 설명하고 함수를 적용함으로써 버그를 크게 제한할 수 있습니다. 그런데, 함수형 프로그래밍은 정적 타입과는 다르다는 사실이죠!

## 생태계

생태계는 매우 중요합니다. 종이 위에서 매력적으로 보이는 언어들이 있지만, 결국에는 심각하게 사용하기에는 너무 작은 생태계를 가지고 있습니다.

mTLS 및 HTTP 2를 실행할 수 없고, Kafka 및 Rabbit MQ와 같은 클라우드 도구와 상호 작용할 수 없는 이유로 생태계가 부족하다면, 문제가 발생할 수 있습니다.

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

이러한 플랫폼의 장점은 JVM, Python 또는 Golang과 같은 것입니다. 여기에는 많은 수의 우수한 라이브러리가 있어서 필요한 경우에도 라이브러리 부족으로 막히지 않을 것입니다.

또한 패키징 및 의존성 관리도 중요합니다. Rust의 cargo, mavenJava 또는 leinClojure과 같은 도구를 사용하여 의존성을 적절히 관리하고 빌드해야 합니다. 외부 도구(예: 린터)도 큰 장점입니다(Golang의 경우 특히 강합니다).

요약하자면, 생태계는 간과해서는 안 되는 요소입니다.

## 개인적인 선호도

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

마침내 우리 모두는 뇌가 서로 다르게 연결되어 있기 때문에 주관적인 기준에 따라 특정 언어의 매력에 빠질 것입니다.

내 경우, 예를 들어, 나는 더 이상 "엔터프라이즈" 자바에서 일할 일이 없기를 바랍니다. 주의하세요. 나는 Java 언어를 널리 사용 가능하고 매우 흥미로운 언어로 여기지만, 오늘날 Java로 개발하는 방식이 사용되는 프레임워크 수준에서는 일탈에 가깝다고 생각합니다. 나는 해당 주제에 대한 몇 가지 기사도 여기저기에 가지고 있습니다. 그리고 일반적으로 알고 있는 언어를 사용하는 것이 가장 흥미로운 것으로 남아 있습니다.

## 결론

이해해야 할 중요한 점은 언어 선택이 먼저 프로젝트의 유형과 관련이 있다는 것입니다. 이전에 설명한 대로 GC를 용납할 수 없는 경우 선택이 제한됩니다. 특정 생태계 (예: Kubernetes)에 통합하고 싶다면 선택지도 제한됩니다.

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

그러나 종종 필요에 맞는 여러 언어가 있을 수 있습니다. 이 경우 당신이 결정할 차례입니다. 결국 '고전' 선택지에 정말 나쁜 언어는 없지만, 더 나쁜 사용법이 있을 뿐이라고 생각해요.

# 간단한 영어로 🚀

In Plain English 커뮤니티의 일원이 되어 주셔서 감사합니다! 떠나시기 전에:

- 반드시 만세를 하고 작가를 팔로우해 주세요 ️👏️️
- 팔로우하기: X | LinkedIn | YouTube | Discord | 뉴스레터
- 다른 플랫폼 방문하기: CoFeed | Differ
- PlainEnglish.io에서 더 많은 콘텐츠를 만나보세요

프로젝트에 적합한 프로그래밍 언어 선택하기

프로젝트에 사용하면 좋은 12개의 오픈 소스



강력한 포트폴리오를 구축하는 것은 기술을 전시하고 잠재적인 고용주들을 유치하려는 개발자에게 꼭 필요합니다. TensorFlow나 React와 같이 인기 있는 오픈 소스 프로젝트는 잘 알려져 있지만, 포트폴리오를 크게 향상시킬 수 있는 다수의 잘 알려지지 않은 그러나 높은 가치를 지닌 프로젝트들이 많이 있습니다. 여기에는 듣지 못했을지도 모르는 일곱 가지 오픈 소스 프로젝트가 있습니다. 

200개 이상의 개발자를 위한 놀라운 프로젝트에 대한 링크도 제공했습니다.

그럼 리스트를 시작해볼까요:

## 1. Medusa

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

![이미지](/assets/img/2024-09-10-7underratedGitHubprojectsthatwillblowyourmind_0.png)

메두사는 Node.js로 만들어진 오픈 소스 헤드리스 상거래 엔진입니다. 확장 가능하고 맞춤 설정 가능하도록 설계되어 있어, 전자 상거래 솔루션을 탐구하려는 개발자에게 완벽한 도구입니다. 메두사는 제품, 주문 및 고객을 관리하기 위한 강력한 API 세트를 제공하여 유연하고 효율적인 온라인 상점을 만들 수 있습니다.

왜 유용한가: 메두사를 사용하면 복잡한 백엔드 시스템을 처리할 능력과 전자 상거래 아키텍처에 대한 이해력을 입증할 수 있습니다.

GitHub 링크: [https://github.com/medusajs/medusa](https://github.com/medusajs/medusa)

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

## 2. Tauri

![Tauri](/assets/img/2024-09-10-7underratedGitHubprojectsthatwillblowyourmind_1.png)

Tauri는 HTML, CSS, 및 JavaScript와 같은 웹 기술을 사용하여 안전하고 작고 빠른 데스크톱 애플리케이션을 구축하기 위한 툴킷입니다. Tauri는 전체 브라우저의 부담 없이 네이티브 API와 바인딩을 제공하여 애플리케이션을 가볍고 빠르게 만듭니다.

왜 유용한가: Tauri에 기여하는 것은 데스크톱 애플리케이션을 작업하고 크로스 플랫폼 개발을 이해하는 능력을 보여줍니다. 현재 구직 시장에서 가치 있는 기술 세트입니다.

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

GitHub 링크: [https://github.com/tauri-apps/tauri](https://github.com/tauri-apps/tauri)

### 3. Directus

![Directus](/assets/img/2024-09-10-7underratedGitHubprojectsthatwillblowyourmind_2.png)

Directus는 전통적인 백엔드가 필요하지 않고 콘텐츠를 관리할 수있게 해주는 오픈 소스 헤들리스 CMS입니다. 어떤 SQL 데이터베이스에도 연결이 가능하며 콘텐츠 관리를 위한 유연한 API를 제공합니다.

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

왜 유용한가: Directus를 사용하면 콘텐츠 관리 시스템을 만드는 기술과 SQL 데이터베이스 작업을 보여줄 수 있어요. 그로 인해 프론트엔드와 백엔드 전문성을 모두 강조할 수 있어요.

GitHub 링크: [https://github.com/directus/directus](https://github.com/directus/directus)

## 4. Cal.com

![image](/assets/img/2024-09-10-7underratedGitHubprojectsthatwillblowyourmind_3.png)

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

Cal.com은 구글 캘린더와 아웃룩과 같은 다양한 캘린더 시스템과 통합되는 오픈 소스 일정 관리 플랫폼입니다. 개발자들이 사용자 정의하고 자신의 응용 프로그램에 통합할 수 있도록 설계되었습니다.

사용 이유: Cal.com에서 작업하면 타사 서비스를 통합하고 사용자 친화적인 일정 관리 시스템을 만드는 능력을 강조할 수 있습니다. 생산성 도구를 개선하려는 기업에게 가치 있는 자산입니다.

GitHub 링크: https://github.com/calcom/cal.com

**5. Budibase**

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

![image](/assets/img/2024-09-10-7underratedGitHubprojectsthatwillblowyourmind_4.png)

Budibase는 내부 도구를 구축할 수 있는 오픈 소스 로우코드 플랫폼입니다. 애플리케이션을 빠르게 만들 수 있는 시각적 빌더를 제공하며 다양한 데이터 소스와 통합됩니다.

사용하는 이유: Budibase를 사용하면 빠른 애플리케이션 개발 기술과 로우코드 플랫폼에 대한 이해를 자랑할 수 있습니다. 기업 환경에서 점점 인기 있는 플랫폼입니다.

GitHub 링크: [https://github.com/Budibase/budibase](https://github.com/Budibase/budibase)

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

## 6. RedwoodJS

![RedwoodJS](/assets/img/2024-09-10-7underratedGitHubprojectsthatwillblowyourmind_5.png)

RedwoodJS는 React, GraphQL 및 Prisma로 구축된 풀스택 프레임워크입니다. 개발자가 Jamstack 애플리케이션을 빠르게 구축하고 배포하는 데 도움을 줄 수 있도록 설계되었습니다.

사용 이유: RedwoodJS에 기여함으로써 현대 웹 기술에 대한 능력과 확장 가능한 웹 애플리케이션을 구축할 수 있는 능력을 입증할 수 있습니다. 이는 포트폴리오에 훌륭한 추가 요소가 될 것입니다.

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

GitHub 링크: [https://github.com/redwoodjs/redwood](https://github.com/redwoodjs/redwood)

## 7. Appwrite

![Appwrite](/assets/img/2024-09-10-7underratedGitHubprojectsthatwillblowyourmind_6.png)

Appwrite은 개발자들에게 인증, 데이터베이스, 스토리지 등을 처리하는 REST API 세트를 제공하는 오픈 소스 백엔드-서비스 (BaaS) 플랫폼입니다. 이는 안전하고 확장 가능한 애플리케이션 개발을 단순화하기 위해 목표를 두고 있습니다.

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

위함: Appwrite를 사용하면 백엔드 개발 능력을 과시하고 BaaS 플랫폼과 작업하는 능력을 보여줄 수 있어, 프론트엔드와 백엔드 개발 둘 다에 능숙해질 수 있습니다.

GitHub 링크: https://github.com/appwrite/appwrite

## 보너스: 프로 개발자가 되기 위한 더 유용한 프로젝트

![이미지](/assets/img/2024-09-10-7underratedGitHubprojectsthatwillblowyourmind_7.png)

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

# 친절한 한국어로 🚀

In Plain English 커뮤니티에 함께해 주셔서 감사합니다! 떠나시기 전에:

- 작가를 좋아요(clap)하고 팔로우해주세요️👏️️
- 팔로우하기: X | LinkedIn | YouTube | Discord | 뉴스레터
- 다른 플랫폼을 방문해주세요: CoFeed | Differ
- PlainEnglish.io에서 더 많은 콘텐츠를 만나보세요

인정받지 못한 GitHub 프로젝트 7가지 소개



<img src="/assets/img/2024-09-10-TheHiddenTypeScriptHackYouNeedtoKnow_0.png" />

안녕하세요 TypeScript 열정가들 여러분.

오늘은 긴 소개로 여러분의 시간을 낭비하지 않을 거예요, 바로 시작해볼게요!

# 1. 속임수

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

어떤 시간이 지나 TypeScript를 사용해 왔다면, 아마도 union 타입을 마주쳤을 것입니다.

Union 타입은 다음과 같은 형태를 띕니다:

```js
type Fruit = "apple" | "orange"
```

이제 Fruit 타입으로 변수를 주석 처리하면, 해당 변수에는 사과나 오렌지만 할당할 수 있습니다.

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

```js
type Fruit = "apple" | "orange";

// Can only be "apple" or "orange"
const fruit: Fruit = "apple";
```

이건 멋지지만, 바나나, 베리, 토마토 같은 다른 과일들이 있어요.

그리고 댓글에서 이것에 대해서 논쟁하지 말아 주세요. 토마토는 채소가 아니라 과일입니다.

당연히 매번 새로운 과일에 대해 Fruit 타입을 확장하는 것은 현실적이지 않습니다. 그래서 다른 해결책이 필요합니다.

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

당신은 아마 'Fruit' 유형에 문자열을 합치는 것이 유혹적일 것입니다.

```js
type Fruit = "apple" | "orange" | string
```

이렇게 하면 사과, 오렌지 및 기타 모든 과일이 포함된 것으로 예상할 수 있습니다.

하지만 그렇지 않습니다.

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

이 코드는 사실 과일 유형을 문자열로 평가하므로 기존 과일에 대한 유형 안전성을 잃게 됩니다!

```js
// 원하는 바가 아니지만, 이것이 발생하는 일입니다.
type Fruit = string
```

그래서 이 문제를 어떻게 해결할까요? 알아보는 걸로 해요.

# 2. 트릭 사용하기

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

가능한 한 이 기교를 명확하게 만들기 위해 맥락을 설명하는 예제를 사용해봅시다.

이 예제에서는 애플리케이션에 로그인할 때 사용할 수 있는 인증 제공자를 나타내는 문자열 인수를 받는 함수를 정의합니다.

예: "google"은 Google 로그인을 나타냅니다.

```js
type Provider = "google" | "github"

async function authenticate(provider: Provider) {
  await signIn(provider)
}

// "google" 또는 "github"만 허용됩니다.
await authenticate("google")
```

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

코드에 따르면 "google" 또는 "github"만 입력할 수 있지만 이 함수를 typesafety하게 확장하여 google 및 github를 수락하는 동시에 resend나 facebook과 같은 추가 공급업체를 수용해야 한다면 어떻게 해야 할까요?

이미 | string을 추가하는 것이 올바른 접근 방식이 아니라는 것에 대해 이야기했으니, 올바른 방법은 무엇일까요?

좀 어색할 수 있지만 자세히 살펴보겠습니다.

다음은 이 문제를 해결하기 위한 코드입니다:

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

```js
타입 Provider = "google" | "github" | (string & {})
```

우리가 유니언 스트링 대신에 유니언 스트링 & '' 을 추가하는 이유는 무엇일까요?

타입스크립트의 타입 체커는 일반 문자열 타입과 리터럴 문자열 타입("apple"과 같은)을 구분하는 데 약하기 때문입니다.

반면에, string & ''은 null 또는 undefined 값이 아닌 모든 가능한 문자열을 나타내는 타입으로, 그래서 '' 타입과 교차하기 때문입니다.

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

그 말은 문자열 & ''이 문자열보다 엄격한 버전이라는 것이며, 따라서 기존 리터럴 문자열의 형식 안전성을 보존하지만 추가 문자열도 받아 들이는 방식으로 "catch-all" 유형과 비슷합니다.

이 트릭을 적용한 업데이트된 authenticate 함수를 살펴보세요:

```js
// 새로운 "(string & {}) 유형은 catch-all과 같이 작동합니다"
// 형식 안전성을 보존합니다!
type Provider = "google" | "github" | (string & {})

async function authenticate(provider: Provider) {
  await signIn(provider)
}

// "google"과 "github"에 대한 형식 안전성은 유지되며, 그 외 어떤 문자열이든 환영합니다.
// 예를 들어 "resend"를 여기에 입력하면 작동하며 오류가 발생하지 않습니다!
await authenticate("resend")
```

# 결론

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

이 기법은 새로운 인증 제공 업체를 점진적으로 웹 애플리케이션에 채택하고 각 번 type 정의를 업데이트하고 싶지 않을 때 매우 유용합니다.

물론 가능한 한 정확하게 type를 유지하는 것이 가장 유지 관리하기 좋은 방법이므로, 이 TypeScript 트릭을 철학적으로 사용해서는 안 됩니다. JavaScript 영역으로 천천히 거슬러 올라가게 될 것이기 때문입니다.

그러나 인증 제공 업체 예제와 같이 특정 경우에는 개발자 경험에 매우 유용할 수 있으므로 TypeScript에도 그 자리가 있습니다.

Posts