
## 예를 들어, 때로는 Hooks가 필요 없을 수도 있어요!

![Learning React](/assets/img/2024-08-19-LearningReact5ImportantPrinciplesAboutHooksYouHaveToKnow_0.png)

2025년이 다가오고 있는데, React는 여전히 프론트엔드 애플리케이션을 만드는 데 가장 인기 있는 선택지 중 하나일 것입니다.

React가 인기를 얻게된 이유는 단점이 없기 때문은 아니지만, 년 년이 지나며 React가 얻은 엄청난 커뮤니티와 광범위한 인기 때문입니다. 그리고 React 19도 큰 기대를 모으고 있기 때문에 React가 그 위치를 잃지 않을 것이라고 생각합니다.

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

리액트 없이 훅을 상상하기 어려운데, 불행하게도 종종 개발자들이 훅을 과도하게 사용하는 것을 보곤 합니다. 결과적으로 의존성 배열로 문제를 해결하거나 쓸모없는 다시 렌더링을 해야하며, 종료적으로 그들이 만든 혼란뿐만 아니라 모든 것이 리액트에서 훅만을 이용해야 한다는 심오한 신념 때문에 만들어진 문제들을 처리해야 합니다.

이 기사에서는 새로운 리액트 프로그래머가 알아야 할 다섯 가지 원칙에 대해 논의하겠습니다. 코드를 개선하고 단순화하는 데 도움이 될 것입니다.

# 1. 모든 함수가 훅이 될 필요는 없습니다

기본부터 시작해 정의를 살펴보죠.

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

훅은 함수처럼 보일 수 있지만 몇 가지 차이점이 있습니다:

- 훅은 기능 컴포넌트 또는 사용자 지정 훅에서만 사용할 수 있습니다.
- 훅의 이름은 항상 "use"로 시작하고 대문자로 시작합니다.
- 사용자 정의 훅에 내장된 다른 훅 호출이 없는 경우 함수가 아닌 훅입니다. 이는 내부에 상태 논리 또는 효과가 있는지 확인하는 데 도움이 됩니다.

이러한 요구 사항을 충족시키기 위해 useBoolean이라는 간단한 사용자 정의 훅을 만들어 보겠습니다. 이를 사용하여 패널을 열거나 닫거나 대화 상자를 표시하거나 숨기는 등의 작업을 수행할 수 있습니다.

공식 문서를 살펴보면 훅이 반환하는 모든 함수를 useCallback으로 래핑하는 것이 권장된다는 것을 알 수 있습니다. 그에 따라 우리도 그렇게 할 것입니다.

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

```js
인터페이스 ICallbacks {
  setFalse: () => void;
  setTrue: () => void;
  toggle: () => void;
}

const useBoolean = (initialValue: boolean): [boolean, ICallbacks] => {

  const [value, setValue] = useState(initialValue);

  const setFalse = useCallback(() => {
    setValue(false);
  }, []);

  const setTrue = useCallback(() => {
    setValue(true);
  }, []);

  const toggle = useCallback(() => {
    setValue(curValue => !curValue);
  }, []);

return [value, {setFalse, setTrue, toggle}];
}
```

기본을 기억할 때 깊게 파고들어 섬세한 점을 더 잘 이해할 수 있습니다.

# 2. 다시 렌더링에 대해 배우기

아마 궁금해할 수 있는 것입니다.

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

React가 작동하는 방식 및 setter 함수를 통해 컴포넌트 상태를 변경할 때 무슨 일이 일어나는지 이해하는 것이 중요합니다. 처음 보면 상태가 변경되었고 결과가 즉시 나타나야 할 것처럼 보이지만, 그렇지 않을 수도 있습니다.

상태가 변경될 때 무슨 일이 일어나는지 알고 있다면, useEffect나 의존성 배열이 있는 다른 훅이 언제 왜 트리거되는지 이해하기 훨씬 쉽습니다.

간단한 예시를 살펴봅시다. 처음 버튼을 누르고 onChangeText를 호출하여 값 "newValue"를 전달한다고 상상해봅시다.

```js
const [text, setText] = useState("defaultValue");

const onChangeText = (value: string) => {
  // value는 "newValue"와 같다고 가정
  setText(value);

  console.log(text); //여기에 값은 무엇일까요?
};
```

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

"콘솔에서 'newValue'를 확인해야 할 것 같지만 실제로는 'defaultValue'가 표시될 것입니다. 왜냐하면 새 값은 다시 렌더링 후에만 사용 가능하기 때문입니다.

다음에서 일어나는 단계를 살펴보는 것이 중요합니다:

- React가 액션을 취할 것을 알리기 위해 세터 함수를 통해 상태를 변경합니다.
- 렌더링. React는 새 JSX를 계산하기 위해 컴포넌트를 호출하고 반환될 것입니다.
- 커밋. 변경 사항을 계산한 후, React는 DOM을 수정하고 최소한의 조치가 취해질 것입니다.
- 이전 단계를 거친 후에 화면상의 시각적 변화가 나타날 것입니다 ('브라우저 렌더링').

상태의 값을 변경하고 싶을 때마다, 이러한 단계들이 매번 수행된다는 것을 기억해야 합니다."

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

# 3. useState은 항상 정답이 아닙니다

React에서 컴포넌트 상태를 관리하는 두 가지 방법이 있습니다 - useState와 useReducer가 있습니다. 두 번째 방법은 상태에 있는 더 복잡한 객체를 위한 것이기 때문에, 처음 보는 프로그래머에게는 너무 어려워 보일 수 있지만 사실은 그렇지 않습니다.

그러나 useState는 매우 간단하고 이해하기 쉬우므로 새로운 프로그래머들이 필요 이상으로 자주 사용하는 경우가 많습니다.

사용자 상호작용에 따라 컴포넌트를 다시 그리는 상태를 관리하도록 의도되어 있습니다. 렌더링하지 않고 무언가를 기억하고 싶다면, 상태에 넣지 말아야 합니다. useRef가 더 나은 선택일 것입니다.

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

## useState가 필요하지 않은 경우:

- 사용자에게 표시하지 않고 다시 렌더링하는 동안 일부 값을 기억하고 싶을 때.
- 이미 상태에 데이터가 있는 경우, 또는 props를 통해 데이터가 제공되지만 변환해야 하는 경우; 새로운 useState 객체에 그 새로운 값을 유지할 필요가 없을 때, 새 변수를 만들어서 작업하고 불필요한 다시 렌더링을 발생시키지 않도록 하세요.

## 상태에 값을 유지해야 하는 경우:

- 값이 변경될 때 구성요소를 다시 그릴 때; 가장 흔한 예는 패널을 표시/숨기기, 회전기, 오류 메시지, 및 배열 수정 등이 있습니다.

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

```js
/**
React의 기본 동작을 활용하면 이름이나 설명이 변경될 때
더 많은 re-render를 유발하지 않고 올바른 값을 얻을 수 있습니다.
**/
const [name, setName] = useState();
const { description, index } = props;
const nameWithDescription = `${name} - ${description}`;
```

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

# 4. useEffect에 대해 주의해야 합니다

특정 경우에는 Class 구성 요소에서 특정 라이프사이클 메서드를 사용했습니다. React 16.8 버전부터 모든 것에 대해 하나의 useEffect 훅을 가지고 있는 것처럼 보일 수 있습니다.

모든 곳에 대해 아니지만, 2019년에 훅 주변의 놀라운 열기와 문서 부족으로 인해 모든 곳에서 사용되려는 경향이 있었습니다.

공식 문서를 살펴보겠습니다:

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

하지만 실제로는, useEffect를 필요 이상으로 많이 사용합니다. 컴포넌트가 마운트될 때 데이터를 가져오는 데 탁월하지만, 불행히도 새로운 프로그래머들은 상태를 변경하는 데 이 훅을 사용하려고 합니다. 이것이 최선의 해결책은 아닙니다.

한 컴포넌트 내에 연이어 useEffect를 작성하고 있는 자신을 발견하면 코드를 멈추고 검토하세요. 보통 그런 것들이 필요하지 않으며, 쉽게 제거할 수 있습니다.

## useEffect가 필요하지 않은 경우:

- 사용자 이벤트(클릭)를 처리해야 하는 경우; 어떤 액션이 어떤 로직을 트리거하는지 알 때, 해당 로직을 호출하기 위해 useEffect를 사용하지 마세요.
- 렌더링을 위해 데이터를 변환해야 하는 경우, 예를 들어, 상태나 프롭스에서 문자열을 연결해야 하는 경우. 반응형 값이나 로직을 종속성 배열에 넣으면 useEffect가 너무 자주 호출되어 무한 루프에 빠지는 경우가 있습니다.

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

## useEffect를 선택해야 하는 경우:

- 컴포넌트가 마운팅될 때 데이터를 가져와야 하거나 일정 간격으로 작업을 수행하거나 상태를 다른 시스템과 동기화해야 하는 경우

# 5. useRef를 두려워하지 마세요

안타깝게도 useRef는 소홀히 다루는 경우가 많습니다. 가장 인기 있는 훅 중에는 포함되어 있지 않지만 실제로 매우 유용합니다. 어떻게 사용해야 하며 어디에 사용해야 하는지 알면 좋은 결과를 얻을 수 있습니다.

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

자, 기본부터 시작해 봅시다.

React는 useRef를 통해 생성한 값을 기억합니다. DOM의 노드를 참조하는 JavaScript 객체로 만들거나 단순한 값으로 만들더라도, 이 값은 재 랜더링 중에 소실되지 않습니다.

이것이 우리에게 제공하는 것은 무엇인가요?

- 우리는 DOM의 요소들에 쉽게 접근할 수 있습니다. 예를 들어, 입력 필드의 값을 가져오거나 특정 요소에 초점을 맞추거나, 그 높이와 너비를 가져오거나, 화면의 특정 부분으로 스크롤하는 등의 작업을 수행할 수 있습니다.
- 컴포넌트를 재 렌더링하지 않고 필요한 모든 데이터를 기억할 수 있습니다. 예를 들어, 카운터나 타이머가 필요하다면, useState가 아닌 useRef를 선택하세요.

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

예시:

```js
// 숫자에 대한 참조
const refCount = useRef(0);
// 입력 요소에 대한 참조
const refInputField = useRef(null);

/**
값에 접근하려면 current 속성을 사용해야 합니다.
useRef는 re-render를 트리거하지 않으므로 의존성 배열에 대해 걱정하지 않고 useEffect 내에서 사용할 수 있습니다.
*/

const onClick = () => {
  refCount.current = refCount.current + 1;
  refInputField.current.focus();
};

return (
  <>
    <button onClick={onClick}>Click me!</button>
    <input ref={refInputField}></input>
  </>
);
```

Hooks는 훌륭하며, 사용해야 합니다. React의 작동 방식을 이해하고 hook을 올바르게 적용하면 많은 것을 달성할 수 있습니다.

이것이 새로운 React 개발자를 위한 팁입니다. 이 팁이 도움이 되기를 바랍니다.


React Hooks에서 반드시 알아야 할 5가지 내용


유연하고 재사용 가능한 코드

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

제네릭은 매개변수를 사용하는 유형입니다. 소프트웨어 엔지니어링의 주요 부분은 정의되고 일관된 API가 있는 구성 요소를 구축하고 재사용하는 것입니다.

오늘의 데이터와 내일의 데이터를 처리할 수 있는 구성 요소는 대규모 소프트웨어 시스템을 구축하는 데 가장 유연한 기능을 제공할 것입니다.

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

이는 사용자들이 이러한 구성 요소를 사용하고 유형을 활용할 수 있도록 합니다.

```js
const names = ["Max", "Manuel"];
// const names: string[]으로 해석됩니다.

const names = [];
// const names: any[]으로 해석됩니다.

const names: Array = [];
//에러: 제네릭 타입 'Array<T>'은 1개의 타입 인자가 필요합니다.

const names: Array<string> = [];
const promise: Promise<string> = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Done");
  }, 2000);
});

promise.then((data) => {
  data.split(" ");
});
```

안녕하세요, 제네릭의 세계:-

```js
function identity<Type>(arg: Type): Type {
  return arg;
}
```

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

이 함수 호출하는 두 가지 방법: -

```js
let output = identity < string > "myString";
```

여기서는 타입을 수동으로 설정합니다.

```js
let output = identity("myString");
```

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

여기 컴파일러가 타입을 설정합니다

일반 타입 변수와 함께 작업하기:-

```js
function loggingIdeantity<Type>(arg: Array<type>): Array<Type> {
  console.log(arg.length);
  return arg;
}
```

일반 함수:-

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

```js
function merge(objA, objB){
  return Object.assign(objA, objB);
}
console.log(merge({name : "Sunil"}, {age: 30));
mergedObj.age; // TypeScript에서 오류가 발생합니다.

//해결 방법

function merge(objA:T, objB:U){
  return Object.assign(objA, objB);
}
console.log(merge({name : "Sunil"}, {age: 30));
mergedObj.name;
```

```js
const mergedObj = merge({ name: "Sunil" }, 30);
```

오류가 나지 않을 것이지만 병합되지 않습니다. Object. assign은 두 개의 객체를 병합하려고 하기 때문에 하나는 객체이고 다른 하나는 다른 유형이면 객체 하나만 가져옵니다. 이것이 숫자 30을 위한 오류를 표시하는 제약 조건이 필요한 이유입니다.

```js
function merge<T extends Object, U extends Object>(objA:T, objB:U){
  return object.assign(objA, objB);
}

const mergedObj = merge({name: 'Sunil'}, 30);
console.log(mergedObj);

//Error: Argument of type '30' is not assignable to parameter of type 'object'
```

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

그냥 또 다른 일반적인 함수:

```js
interface Lengthy{
  length: number;
}

function countAndDescribe<T extends Lengthy>(element: T): [T, string]{
  let descriptionText = "값이 없어요";

  if(element.length === 1){
    descriptionText = "1개의 값이 있어요";
  } else if(element.length > 1){
    descriptionText = element.length + "개의 요소가 있어요.";
  }

  return [element, descriptionText];
}
```

```js
function identity<Type>(arg: Type): Type {
  return arg;
}

let myIdeantity: <Type>(arg: Type) => Type = identity;
```

또한 타입 내의 제네릭 타입 매개변수에 대해 다른 이름을 사용할 수도 있습니다. 중요한 것은 타입 변수의 수와 그 타입 변수가 사용되는 방식이 일치하면 됩니다.

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

```js
function identity<Type>(arg: Type): Type {
  return arg;
}

let myIdeantity: <Input>(arg: Input) => Input = identity;
```

우리는 또한 제네릭 타입을 객체 리터럴 타입의 호출 시그니처로 작성할 수 있습니다.

```js
function identity<Type>(arg: Type): Type {
  return arg;
}

let myIdeantity: { <Type>(arg: Type): Type } = identity;
```

제네릭 인터페이스:-

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

```js
interface 제네릭_항등_함수 {
  <타입>(인자: 타입): 타입;
}

function 항등<타입>(인자: 타입): 타입 {
  return 인자;
}

let 내항등: 제네릭_항등_함수 = 항등;
```

```js
interface 제네릭_항등_함수<타입> {
  (인자: 타입): 타입;
}

function 항등<타입>(인자: 타입): 타입 {
  return 인자;
}

let 내항등: 제네릭_항등_함수<number> = 항등;
```

참고: 제네릭 열거형과 네임스페이스를 만드는 것은 불가능합니다.

제네릭 클래스:-

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

제네릭 클래스는 제네릭 인터페이스와 비슷한 모양을 가지고 있습니다. 제네릭 클래스에는 클래스 이름 뒤에 꺾쇠 괄호(``)로 둘러싸인 제네릭 유형 매개변수 목록이 있습니다.

```js
class Genericnumber<NumType>{
  zeroValue: NumType;
  add: (x:numType, y:NumType) => NumType;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function (x,y){
  return x + y;
}
```

이것은 GenericNumber 클래스를 매우 직접적으로 사용한 예제이지만, 숫자 타입만 사용하는 것으로 제한되지는 않았다는 것을 알 수 있습니다. 대신 문자열이나 더 복잡한 객체를 사용할 수도 있습니다.

```js
let stringNumeric = new GenericNumber<string>();
stringNumeric.zeroValue = "";
stringNumeric.add = function (x, y) {
  return x + y;
};

console.log(stringNumeric.add(stringNumeric.zeroValue, "Test 1"));
```

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

일반 클래스는 정적 멤버가 클래스의 유형 매개변수를 사용할 수 없으므로 그들은 인스턴스 측면에서만 일반적이다.

또 다른 예시:

```js
class DataStorage<T extends string | number | boolean>{
  private data: T[] = [];
  addItem(item: T){
    this.data.push(item);
  }

  removeItem(item: T){
    if(this.data.indexOf(item) === -1){
      return;
    }
    this.data.splice(this.data.indexOf(item), 1);
  }

  getItems(){
    return [...this.data];
  }
}

const textStorage = new DataStorage<string>();
textStorage.addItem('Sunil');
textStorage.addItem('Muna');
textStorage.removeItem('Sunil');

console.log(textStorage.getItems());
```

일반적인 제한 사항:-

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

```typescript
function loggingIdentity<Type>(arg: Type): Type {
  console.log(arg.length);
}
```

위 코드는 오류를 발생합니다.

```typescript
Property 'length' does not exist on type 'Type'
```

해결책:

```typescript
function loggingIdentity<Type>(arg: Type[]): void {
  console.log(arg.length);
}
```

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

```js
인터페이스 LengthWise{
  length: number;
}

function loggingIdentity<Type extends LengthWise>(arg: Type): Type{
  console.log(arg.length);
  return arg;
}
```

```js
loggingIdentity(3);

에러: 'number' 타입의 인수는 'LengthWise' 타입의 매개변수에 할당할 수 없습니다.

loggingIdentity({length: 10, value: 3});
```

제네릭 제약사항에서 매개변수 활용하기:-

아래 예제에서는 obj에 존재하지 않는 속성을 실수로 버리지 않도록 제약을 두어 두 타입 사이에 제약을 둡니다:

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

```js
function getProperty<Type, key extends keyofType>(obj: Type, key: key){
  return obj[key];
}

let x = {a:1, b:2, c:3, d:4};
getProperty(x, "a");

getProperty(x, "m"); //Error: Argument of type "m" is not assignable to a parameter of type '"a" | "b" | "c" | "d"'.
```

제네릭에서 클래스 유형 사용하기:-

TypeScript에서 제네릭을 사용하여 팩토리를 만들 때, 클래스 유형은 생성자 함수로 참조해야 합니다.

```js
function create<Type>(c: { new(): Type }): Type {
  return new c();
}
```

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

더 발전된 예시는 프로토타입 속성을 사용하여 생성자 함수와 클래스 유형의 인스턴스 측면 간의 관계를 추론하고 제약을 가하는 데 사용됩니다.

```js
class BeeKeeper{
  hasmask: boolean = true;
}

class ZooKeeper{
  nameTag: string = "Sunil";
}

class Animal{
  numLegs: number = 4;
}

class Bee extends Animal {
  numLegs = 6;
  keeper: BeeKeeper = new BeeKeeper();
}

class Lion extends Animal{
  keeper: ZooKeeper = new ZooKeeper();
}

function createInstance <A extends Animal>(c: new () => A) : A {
  return new c();
}

createInstance(Lion).keeper.nameTag;
createInstance(Bee).keeper.hasMask;
```

위 패턴은 mixin 디자인 패턴을 구동하는 데 사용됩니다.

일반 유틸리티 유형:-

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

```js
인터페이스 CourseGoal{
  title: string;
  description: string;
  completeUntil: Date;
}

function createCourseGoal(title: string, description: string, date: Date){
  let courseGoal: Partial<CourseGoal> = {};

  courseGoal.title = title;
  courseGoal.description = description;
  courseGoal.completeUntil = date;

  return courseGoal as CourseGoal;
}
```

제네릭 매개변수 세부 정보:-

```js
declare function create(): Container<HTMLDivElement, HTMLDivElement[]>;
declare function create<T extends HTMLElement>(element: T): Container<T, T[]>;
declare function create<T extends HTMLElement, U extends HTMLElement>(element: T, children: U[]): Container<t, U[]>;
```

제네릭 매개변수 기본값을 사용하면 다음과 같이 간소화할 수 있습니다.

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

```js
함수 create를 선언합니다 <T extends HTMLElement = HTMLDivElement, U extends HTMLElement[] = T[]> (element?: T, children?: U): Container<T, U>;
```

```js
const div = create();

//const div : Container<HTMLDivElement, HTMLDivElement[]>

const p = create(new HTMLParagraphElement());

//const p : Container<HTMLParagraphelement, HTMLParagraphElement[]>
```

제네릭 매개변수 기본값은 다음 규칙을 따릅니다:

- 타입 매개변수는 기본값이 있는 경우 선택적으로 간주됩니다.
- 필수 타입 매개변수는 선택적 타입 매개변수 뒤에 올 수 없습니다.
- 타입 매개변수의 기본값은 해당 타입 매개변수의 제약 조건을 만족해야 합니다.
- 타입 인수를 지정할 때 필수 타입 매개변수의 인수만 지정해야 합니다. 지정되지 않은 타입 매개변수는 기본값으로 해결됩니다.
- 기본 타입이 지정되었고 인터페이스가 후보를 선택할 수 없는 경우 기본 타입이 추론됩니다.
- 기존의 클래스나 인터페이스 선언과 병합되는 클래스나 인터페이스 선언은 기존 타입 매개변수에 대한 기본값을 도입할 수 있습니다.
- 기존의 클래스나 인터페이스 선언과 병합되는 클래스나 인터페이스 선언은 새로운 타입 매개변수를 도입할 수 있습니다.


타입에서 타입으로 제네릭을 활용한 타입 생성


![사진](/assets/img/2024-08-19-SignalConceptandImplementationFromScratch_0.png)

자바스크립트/타입스크립트 세계에서 작업 중이라면 신호에 대해 이미 들어봤거나 알고 있을 것입니다. 요즘에는 리액트를 제외한 모든 현대 프레임워크가 신호를 사용하고 있습니다. 심지어 앵귤러 팀도 신호를 변경 감지 메커니즘으로 채택하고 있습니다. 그들은 예전에는 변경 감지를 위해 몽키 패칭을 했지만 지금은 존리스(change detection)로 향하고 있습니다. 모든 새로운 프레임워크들은 신호 개념을 중심으로 설계되었습니다.

그래서 신호란 무엇인가요? 왜 그렇게 특별한가요? 프로그래밍 세계에서 새로운 개념인가요?

신호는 반응형 프로그래밍의 한 방법입니다. 사실 신호는 새로운 것이 아니라 옵서버 패턴(observer pattern)의 구현입니다. 옵서버 디자인 패턴에 대해 알고 계신다면 이 패턴에는 옵서버가 여럿인 옵저버블이 있습니다. 옵저버들은 옵저버블에 구독하고 옵저버블의 상태가 변경될 때마다 이를 관찰하고 있는 모든 옵저버들에게 변경 사항을 알리게 되는 것입니다.

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

시그널 개념에서는 두 가지 주요 구성 요소가 있습니다. 하나는 시그널이고 다른 하나는 이펙트입니다. 우리는 관측 가능한 것을 시그널로, 관찰자를 이펙트로 부릅니다. 그러나 여기에는 약간의 특이사항이 있습니다. 관찰자 패턴에서 시그널에 수동으로 구독할 필요가 없습니다. 대신 시그널 내에서 의존하는 이펙트를 자동으로 알게 될 것입니다. 이를 달성하기 위해 시그널에서 일반 값 대신 getter 및 setter 함수를 반환하므로 getter가 호출될 때마다 현재 실행 중인 이펙트에 대해 알 수 있습니다.

따라서 이제 시그널 개념에 대해 알았으니 구현을 살펴보겠습니다:

```js
let currentEffect = null;

const signal = (value) => {
  const observers = [];
  let _value = value;

  return {
    get() {
      if (currentEffect) {
        observers.push(currentEffect);
      }
      return _value;
    },
    set(newValue) {
      _value = newValue;
      observers.forEach((observer) => observer());
    },
  };
};

const effect = (callback) => {
  currentEffect = callback;
  // 콜백은 전역적으로 저장됨, 이를 통해 콜백 내에서 사용되는 getter에게
  // 변경 시 실행해야 하는 이펙트를 알려줍니다.

  callback();
  currentEffect = null;
};
```

이 두 가지 구성 요소를 사용하여 대부분의 프레임워크에서 사용되는 계산된 값이라고 불리는 또 다른 구성 요소를 만들 수 있습니다.

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

```js
const computed = (callback) => {
  const computedSignal = signal(callback());
  effect(() => {
    computedSignal.set(callback());
    // whenever any signal used in the callback will change, this effect
    // will run again and the computed value will be updated.
  });
  return { get: computedSignal.get };
};
```

사용 방법:

```js
const a = signal(1);
const b = computed(() => {
  return a.get() * 2;
});

effect(() => {
  console.log(a.get(), b.get());
});

a.set(a.get() * 2);
```

여기서 a가 새 값으로 설정되면 b가 자동으로 업데이트되고 이펙트도 다시 실행됩니다. 따라서 이를 통해 리액티브 프로그래밍을 구현했습니다.

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

요런 신호에 대한 간단한 설명과 구현이었어요. 현대적인 프레임워크는 더 많은 경우를 다루겠죠. 하지만 우리의 기본적인 이해를 위해서는 이 구현이 충분합니다.

코딩을 즐기세요!

#javascript #signal #typescript #frontend


Signal 제로에서부터 개념과 구현하기


![Image](https://miro.medium.com/v2/resize:fit:996/1*YgzNyRixtIqcJTCD0XYFLg.gif)

Angular 애플리케이션을 개발할 때, HTTP 요청을 사용해 백엔드 서버와 통신하는 것이 중요합니다. 그러나 때때로 문제가 발생할 수 있습니다. 마치 배송 서비스를 운영하는 것과 비슷하게요. 고객에게 소포를 보내는 책임을 맡아보세요. 때로는 소포가 고객에게 도착하지 않거나 손상되어 도착하기도 합니다. 이는 HTTP 요청이 실패하는 경우와 비슷합니다. Angular에서 이러한 오류를 어떻게 처리하는지 배달 서비스 비유를 통해 알아봅시다. 🚀

![Image](https://miro.medium.com/v2/resize:fit:398/1*pLQ9lW0LfXYbWVx9j8Tj1w.gif)

# 두 가지 유형의 배송 문제

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

배송 서비스와 마찬가지로, Angular 앱이 HTTP 요청을 보낼 때 두 가지 주요 문제가 발생할 수 있어요:

창고에서 상품이 나오지 않음 (네트워크나 연결 오류🛑):

가끔 배송 트럭이 고장이 나거나 교통체증으로 인해 상품이 창고를 떠날 수 없는 상황이 발생할 수 있어요. 이것은 HTTP 요청이 서버에 도달하지 않는 네트워크 오류처럼 동작해요. Angular에서 이러한 오류는 상태 코드가 0이며, 아무것도 전달되지 않았다는 것처럼 빈 영수증을 받는 것과 같아요.

상품은 배송되었지만 문제가 발생함 (백엔드 오류) ⚠️:

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

그 외에도 때로는 소포가 고객에게 도착하지만 손상되었거나 잘못된 상품일 수 있습니다. 이것은 서버가 요청을 받았지만 처리 중에 문제가 발생한 상황과 유사합니다. 서버는 특정 상태 코드가 포함된 오류 메시지를 보내는데, 예를 들어 "404" (아이템을 찾을 수 없음) 또는 "500" (서버 오류)와 같이 특정 상태 코드가 있습니다.

# 이러한 문제 해결 방법 💼

배송 서비스에서 이러한 문제를 해결하는 다양한 전략이 있을 것입니다. 마찬가지로 Angular는 HTTP 요청 오류를 효과적으로 처리할 수 있는 도구를 제공합니다.

## 1. 손님에게 도달하기 전 오류 잡기 (catchError) 🎣

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

품질 관리 팀이 각 패키지를 발송 전에 확인하는 상황을 상상해보세요. 문제가 발견되면 고객에게 보내지 않고 문제를 해결하거나 사과 메모를 보냅니다. Angular에서는 RxJS의 catchError 연산자를 사용하는 것과 비슷합니다.

다음은 작동 방식입니다:

```js
import { catchError } from "rxjs/operators";
import { throwError } from "rxjs";

this.httpClient
  .get("https://api.example.com/data")
  .pipe(
    catchError((error) => {
      // 품질 관리가 문제를 감지합니다
      console.error("배송 문제 발생:", error);
      // 사과 메모를 보내거나 문제를 해결합니다
      return throwError(() => new Error("이런! 문제가 발생했습니다. 나중에 다시 시도해주세요."));
    })
  )
  .subscribe((data) => {
    // 성공적인 배송
  });
```

요청 중에 문제가 발생하면(clobbered package와 같은), catchError 연산자가 이를 잡아냅니다. 고객이 손상된 패키지를 받는 대신, "죄송합니다, 문제가 발생했습니다!" 라는 친절한 메시지를 받게 됩니다. 😅

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

## 2. 배송 재시도 (retry) 🔄

가끔 배송 트럭이 교통 체증으로 막혀 있을 수 있지만, 다시 보내면 고객에게 잘 도착할 수도 있습니다. Angular에서는 실패한 경우 자동으로 요청을 다시 보내려면 retry 연산자를 사용할 수 있습니다.

다음은 실행 방법입니다:

```js
import { retry } from "rxjs/operators";

this.httpClient
  .get("https://api.example.com/data")
  .pipe(
    retry(3), // 배송을 최대 3회 시도
    catchError((error) => {
      console.error("재시도 후 배송 문제 발생:", error);
      return throwError(() => new Error("죄송합니다, 요청을 완료할 수 없습니다. 나중에 다시 시도해주세요."));
    })
  )
  .subscribe((data) => {
    // 배송 성공
  });
```

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

만약 요청이 일시적인 문제(예: 교통 🚦) 때문에 실패한다면, 재시도가 되면 "배송 트럭"을 다시 보냅니다. 몇 번의 시도 끝에도 전달되지 못하면 사과를 보냅니다. 📧

# 마무리하기 🎁

Angular에서 HTTP 오류를 처리하는 것은 성공적인 배송 서비스 운영과 유사합니다. 패키지가 분실되었을 때(네트워크 오류)나 손상되어 도착했을 때(백엔드 오류)도 대비할 준비를 해야 합니다. catchError와 retry와 같은 도구를 사용하여 "고객" (사용자)이 계획대로 진행되지 않을 때에도 원활한 경험을 제공할 수 있습니다. 좋은 배송 서비스처럼 데이터가 안전하고 제 시간에 도착하도록 또는 뭔가 잘못되면 탄탄한 백업 계획이 있는지 확인하고 싶습니다. 🌟

이러한 전략을 이해하고 구현함으로써, Angular 앱을 원활하게 유지하고 매번 훌륭한 사용자 경험을 제공할 수 있습니다! 🚀


Angular에서 HTTP 호출로 발생하는 오류 처리 방법


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

**주의:** 이 기사의 질문은 다음 LinkedIn 게시물에서 직접 가져온 것입니다: 링크

저는 친절하게 Alpana P.님이 이 질문에 대한 해결책을 공유할 수 있도록 허용해 주신 데 대해 감사드립니다. 모든 코드와 테스트는 관련 GitHub 저장소에서 확인하실 수 있습니다: 링크.

중요: 총 21개의 질문이 있으므로 해결책을 두 부분으로 나누었습니다. 두 번째 부분에 대한 링크는 이 글의 끝에서 확인하실 수 있습니다.

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

# 1. 주어진 문장에서 가장 긴 단어를 찾는 프로그램입니다.

```js
export const findLongestWord = (sentence: string): string => {
  let currentMaxLen = 0;
  let currentAns = "";
  sentence.split(" ").forEach((word) => {
    const wordLength = word.length;
    if (wordLength > currentMaxLen) {
      currentAns = word;
      currentMaxLen = wordLength;
    }
  });
  return currentAns;
};
```

- 문장을 단어로 분할합니다.
- 각 단어를 반복하며 검사합니다.
- 가장 긴 단어의 길이와 해당 단어를 추적합니다.
- 더 긴 단어가 발견되면 가장 긴 단어를 업데이트합니다.
- 가장 긴 단어를 반환합니다.

# 2. 주어진 문자열이 회문인지 확인합니다.

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

```js
영문을 소문자로 변환하고 공백을 제거합니다.
문자열의 시작 지점에 있는 왼쪽 포인터와 끝 지점에 있는 오른쪽 포인터를 초기화합니다.
왼쪽과 오른쪽 포인터의 문자를 비교합니다.
왼쪽 포인터를 오른쪽으로 이동하고 오른쪽 포인터를 왼쪽으로 이동합니다.
일치하지 않는 문자가 발견되면 false를 반환합니다.
모든 문자가 일치하면 true를 반환합니다.

# 3. 배열에서 중복 항목을 제거하는 프로그램을 작성하세요.

export const removeDuplicates = (arr: any[]): any[] => {
  return [...new Set(arr)];
};

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

- 입력 배열에서 중복을 자동으로 제거하여 새 Set을 만듭니다.
- Spread 구문 (...)을 사용하여 Set을 다시 배열로 변환합니다.
- 중복이 제거된 새 배열을 반환합니다.

# 4. 빌트인 메소드를 사용하지 않고 문자열의 역을 찾는 프로그램.

export const reverseString = (str: string): string => {
  // 내장 reverse 메소드를 사용하지 않고 문자열을 뒤집습니다.

  let ans = "";

  for (var i = str.length - 1; i >= 0; i--) {
    ans += str[i];
  }

  return ans;
};

- 역으로 저장할 빈 문자열 ans를 초기화합니다.
- 입력 문자열 str을 마지막 문자부터 처음까지 반복합니다.
- 각 문자를 ans 문자열에 추가합니다.
- 역으로 된 문자열 ans를 반환합니다.

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

# 5. 배열에서 연속으로 나타나는 1의 최대 개수를 찾아보세요.

export const findMaxConsecutiveOnes = (arr: number[]): number => {
  let ans = 0;
  let currentMax = 0;
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] == 1) currentMax++;
    else {
      ans = Math.max(ans, currentMax);
      currentMax = 0;
    }
  }
  ans = Math.max(ans, currentMax);
  return ans;
};

- ans와 currentMax 변수를 0으로 초기화하여 연속되는 최대 1의 개수와 현재 연속되는 1의 개수를 추적합니다.
- 입력 배열 arr을 반복합니다.
- 현재 요소가 1이면 currentMax를 증가시킵니다.
- 현재 요소가 0이면:
  - ans를 ans와 currentMax 중 최대값으로 업데이트합니다.
  - currentMax를 0으로 재설정합니다.
- 반복문이 종료된 후, 나머지 연속되는 1을 고려하여 ans를 마지막으로 업데이트합니다.
- 배열에서 연속으로 나타나는 1의 최대 개수를 나타내는 ans를 반환합니다.

# 6. 주어진 숫자의 팩토리얼을 찾아보세요.

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

export const factorial = (n: number): number => {
  if (n < 0) throw new Error("n은 양수여야 합니다.");

  let dp = new Array(n + 1);
  dp[0] = 1;

  for (let i = 1; i <= n; i++) {
    dp[i] = dp[i - 1] * i;
  }

  return dp[n];
};

- 잘못된 입력 처리: 입력 값 n이 음수인 경우 오류를 발생시킵니다.
- DP 배열 초기화: 팩토리얼 값을 저장할 크기가 n + 1인 배열 dp를 생성합니다. dp[0]를 1로 설정합니다 (0의 팩토리얼은 1입니다).
- 팩토리얼 계산: 1부터 n까지 반복하면서 이전 팩토리얼을 사용하여 각 팩토리얼 값을 계산합니다: dp[i] = dp[i - 1] * i.
- 결과 반환: n의 팩토리얼을 반환하며, 이 값은 dp[n]에 저장됩니다.

# 7. 정렬된 두 배열 [0,3,4,31]과 [4,6,30]이 주어졌을 때, 이를 병합하고 [0,3,4,4,6,30,31]로 정렬합니다.

export const mergeSortedArrays = (arr1: number[], arr2: number[]): number[] => {
  let ptr1 = 0;
  let ptr2 = 0;
  let arr1Size = arr1.length;
  let arr2Size = arr2.length;
  let ans: number[] = [];
  while (ptr1 < arr1Size && ptr2 < arr2Size) {
    if (arr1[ptr1] < arr2[ptr2]) {
      ans.push(arr1[ptr1]);
      ptr1++;
    } else {
      ans.push(arr2[ptr2]);
      ptr2++;
    }
  }

  while (ptr1 < arr1Size) {
    ans.push(arr1[ptr1]);
    ptr1++;
  }

  while (ptr2 < arr2Size) {
    ans.push(arr2[ptr2]);
    ptr2++;
  }

  return ans;
};

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

- ptr1과 ptr2를 각각 arr1과 arr2의 시작 지점으로 초기화합니다.
- 병합된 결과를 저장할 빈 배열 ans를 초기화합니다.
- ptr1과 ptr2의 요소를 비교합니다:
  - 작은 요소를 ans에 추가합니다.
  - 해당 포인터를 증가시킵니다.
- 두 배열 중 하나가 소진될 때까지 계속합니다.
- 소진되지 않은 배열에서 남은 요소를 ans에 추가합니다.
- 병합 및 정렬된 배열 ans를 반환합니다.

# 8. 두 배열 arr1과 arr2를 인수로 받는 함수를 작성하세요. 함수는 arr1의 각 값이 arr2에서 해당하는 값의 제곱임을 확인해야 합니다. 값의 빈도는 동일해야 합니다.

export const correspondingSquare = (
  arr1: number[],
  arr2: number[]
): boolean => {
  var arr1Size = arr1.length;
  var arr2Size = arr2.length;

  if (arr1Size != arr2Size) return false;

  for (var i = 0; i < arr1Size; i++) {
    if (Math.pow(arr1[i], 2) != arr2[i]) return false;
  }

  return true;
};

- 입력 배열 arr1과 arr2의 길이가 같은지 확인합니다. 그렇지 않으면 false를 반환합니다.
- arr1의 각 요소를 반복합니다.
- arr1의 현재 요소의 제곱을 arr2의 해당 요소와 비교합니다. 일치하지 않으면 false를 반환합니다.
- 모든 요소가 일치하면 true를 반환합니다.

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

# 9. 두 개의 문자열을 주어진다. 한 문자열이 다른 문자열의 문자를 재배열하여 형성될 수 있는지 찾습니다.

const formatString = (str: string): string => {
  str = str.replace(/ /g, "");
  str = str.toLowerCase();
  return str;
};

export const otherStringFromFirst = (
  source: string,
  target: string
): boolean => {
  source = formatString(source);
  target = formatString(target);

  const sourceLength = source.length;
  const targetLength = target.length;

  if (sourceLength != targetLength) return false;

  let sourceFreqMap: Record<string, number> = {};
  let targetFreqMap: Record<string, number> = {};

  for (var i = 0; i < sourceLength; i++) {
    sourceFreqMap[source[i]] = (sourceFreqMap[source[i]] || 0) + 1;
    targetFreqMap[target[i]] = (targetFreqMap[target[i]] || 0) + 1;
  }

  for (const char in sourceFreqMap) {
    if (sourceFreqMap[char] !== targetFreqMap[char]) {
      return false;
    }
  }

  return true;
};

문자열 전처리:

- formatString 함수는 공백을 제거하고 입력 문자열을 일관된 비교를 위해 소문자로 변환합니다.
- 소스 및 대상 문자열은 formatString을 사용하여 전처리됩니다.

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

길이 확인:

- source와 target의 길이가 같지 않은 경우, 길이가 같아야 동일한 문자로 형성될 수 없기 때문에 함수는 즉시 false를 반환합니다.

빈도 매핑:

- 두 빈도 맵, sourceFreqMap과 targetFreqMap이 생성되어 각 문자의 수를 저장합니다.
- 함수는 두 문자열을 반복하면서 빈도 맵을 업데이트합니다.

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

빈번도 비교:

- 이 함수는 sourceFreqMap의 키(문자)를 반복합니다.
- 각 문자에 대해 sourceFreqMap에서의 빈도가 targetFreqMap에서의 빈도와 같은지 확인합니다. 그렇지 않은 경우 false를 반환합니다.

결과:

- 모든 문자 빈도가 일치하는 경우, 대상 문자열이 소스 문자열의 문자로 형성될 수 있다는 것을 나타내기 위해 함수는 true를 반환합니다.

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

# 10. 아래 배열에서 고유한 객체를 얻는 논리를 작성하십시오.
입력: ['name: “sai”', 'name:”Nang”', 'name: “sai”', 'name:”Nang”', 'name: “111111”'];

# 출력: ['name: “sai”', 'name:”Nang”', 'name: “111111”']

export const uniqueObjectsFromArray = (
  arr: Record<any, any>[]
): Record<any, any>[] => {
  const objStrings = arr.map((obj) => JSON.stringify(obj));
  const unique = [...new Set(objStrings)];
  const parsed = unique.map((str) => JSON.parse(str));

  return parsed;
};

- 객체를 문자열로 변환: map 함수를 사용하여 입력 배열 arr의 각 객체를 JSON.stringify(obj)를 사용하여 JSON 문자열로 변환합니다. 이를 통해 객체를 쉽게 비교할 수 있습니다.
- 고유한 문자열 집합 생성: JSON 문자열의 배열(objStrings)로부터 새로운 Set을 생성합니다. Set은 자동으로 중복을 제거하여 원본 객체의 고유한 JSON 문자열 표현만 남깁니다.
- 고유한 문자열을 다시 객체로 변환: 전개 구문 (...)은 Set을 고유한 JSON 문자열의 배열로 변환하는 데 사용됩니다. 그런 다음 다른 map 함수를 사용하여 JSON 문자열을 JSON.parse(str)를 사용하여 다시 객체로 변환합니다.
- 고유한 객체 반환: 함수는 파싱된 객체 배열(parsed)을 반환합니다. 이제 이 배열은 원본 입력 배열 arr에서만 고유한 객체만 포함하게 됩니다.

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

# Part 2로 이동하기: [링크](Link)

매일 프로젝트에서 사용하여 FullStack 웹 개발, TypeScript, DevOps를 탐구 중이며 YouTube(짧은 및 장폼 콘텐츠), Instagram Reels, LinkedIn 게시물, Medium 기사, X(이전에는 Twitter)의 콘텐츠, 동료 및 선배들을 통해 다양한 플랫폼을 통해 학습합니다. 그러므로 모든 의견/피드백/교정은 환영합니다.
이 글을 즐기시고 새로운 것을 배워 갈 수 있기를 바랍니다!

반드시 읽어보세요: TypeScript에서 디스크리미네이트된 유니언

코딩 즐기세요!
```


기술면접에서 가장 많이 물어보는 자바스크립트 질문


최근에 저는 Next.js 프로젝트에서 Strapi의 GraphQL API를 Next.js 14 앱에 통합해 보았어요. Next.js 14 앱 라우터에 GraphQL을 통합하는 데 도움이 될만한 명확한 공식 문서가 없어서 좀 답답했지만, 몇 가지 통합 방법을 연구했어요.

Next.js 13 이후부터 앱 라우터의 복잡성은 최고점에 도달했는데, Next.js는 기본적으로 모든 컴포넌트를 서버 컴포넌트로 선언합니다. 이는 서버 컴포넌트에서 context, useEffect, useRef 또는 useState를 사용할 수 없다는 것을 의미해요. 하지만 Apollo Client는 context의 원리에 의존합니다.

```js
import React from "react";
import * as ReactDOM from "react-dom/client";
import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";
import App from "./App";

const client = new ApolloClient({
  uri: process.env.API,
  cache: new InMemoryCache(),
});

// React 18+에서 지원됩니다
const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>
);
```

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

이거, Next.js 서버 컴포넌트에서는 실제로 불가능해요. 에러가 발생하게 될 거에요. Next.js 13 앱 라우터로 데이터 가져오기가 완전히 바뀌었고, 캐싱 및 다시 유효화는 상당히 혼란스러울 수 있어요. 이러한 도전에 대처하기 위해 다양한 옵션을 탐험하다가 잘 작동하는 하나를 찾았어요.

그러니 시작해볼까요? create-next-app을 사용하여 새로운 Next.js 앱을 만들어봅시다.

```js
npx create-next-app@latest
```

앱을 만든 후에는 다음 패키지들을 설치해야 해요:

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

```js
npm install @apollo/client @apollo/experimental-nextjs-app-support graphql
```

이러한 패키지를 설치한 후에 GraphQL 구성을 만들어야 합니다.

```js
// config/api.ts
import { HttpLink, InMemoryCache, ApolloClient } from "@apollo/client";
import { registerApolloClient } from "@apollo/experimental-nextjs-app-support/rsc";

export const { getClient } = registerApolloClient(() => {
  return new ApolloClient({
    cache: new InMemoryCache(),
    link: new HttpLink({
      uri: process.env.API,
    }),
  });
});
```

@apollo/experimental-nextjs-app-support 패키지는 실험적이며 나중에 제거될 수 있지만 현재 잘 작동하고 있습니다.

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

<img src="/assets/img/2024-08-19-ImplementingGraphQLwithTypeSafetyinNextjs14AppRouter_1.png" />

지금은 Apollo가 제공하는 더미 GraphQL API를 사용해 봅시다.

```js
//.env
API = "https://countries.trevorblades.com/graphql";
```

이제 다음과 같은 방법으로 서버 구성 요소 중에서 getClient를 직접 사용할 수 있습니다.

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

```js
// app/page.tsx

import { getClient } from "@/config/api";
import { gql } from "@apollo/client";

export default async function Home() {
  const { data } = await getClient().query({
    query: CountriesQuery,
    context: {
      fetchOptions: {
        next: { revlidte: 10 },
      },
    },
  });

  return (
    <main className="">
      {data?.countries?.map((country: any, index: number) => {
        return (
          <div key={index} className="border-white border-b-2">
            <ul>
              <li>{country?.name}</li>
              <li>{country?.code}</li>
            </ul>
          </div>
        );
      })}
    </main>
  );
}
```

이 코드의 가장 좋은 점은 Next.js 앱 라우터에서 REST API 데이터 가져오기와 같은 방식으로 캐시를 다시 유효화할 수 있다는 점입니다.

JavaScript 사용자에게는 충분한 정보일 것 같지만 TypeScript 사용자에게 실제 도전이 시작됩니다! 😂 'Type Safe GraphQL'을 알아 차렸다면 대부분의 TypeScript 사용자가 graphql-codegen을 사용하여 유형을 생성한다는 것을 알고 계실 것입니다. GraphQL Code Generator는 TypeScript 유형, 쿼리, 리졸버 및 GraphQL 스키마에서 데이터를 가져오기 위한 사용자 정의 React 훅을 자동화합니다. 이것이 좋은 옵션인 동시에 서버 구성 요소에는 이상적이지 않습니다.

최근 gql.tada에 대해 듣고 연구해 보았습니다. GraphQL에서 유형 안전성을 보장하는 놀라운 도구로 인상적으로 발견했습니다. 현재 버전 1 정도인데, 팀은 계속해서 더 효율적으로 만들고 있습니다.

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

gql.tada를 시작하려면 다음 명령을 사용하여 설치해야 합니다:

```js
npm install gql.tada
```

설치 후에는 TypeScrpt 플러그인을 tsconfig.json에 추가하여 TypeScript 언어 서버와 함께 설정해야 합니다. gql.tada/ts-plugin을 설정하면 TypeScript가 IDE나 편집기에서 파일을 분석할 때 "TypeScript Language Service Plugin"이 시작됩니다. 이는 GraphQL에 대한 편집기 힌트인 진단, 자동완성 및 타입 호버를 제공합니다.

```js
    "plugins": [
      {
        "name": "next"
      },
      {
        "name": "gql.tada/ts-plugin",
        "schema": "https://countries.trevorblades.com/graphql",
        "tadaOutputLocation": "./graphql-env.d.ts"
      }
    ],
```

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

스키마를 구성하려면 여러 옵션이 있어요. 스키마는 GraphQL SDL 형식의 스키마 정의가 포함된 .graphql 파일이거나 스키마의 내략 쿼리 데이터를 포함한 .json 파일로 제공할 수 있어요. 자세한 내용은 gql.tada 공식 문서를 참조해주세요.

대부분의 개발 시나리오에서는 GraphQL 서버에서 타입을 생성해야 해요. 스키마를 설정한 후에는 tadaOutputLocation을 지정해야 해요. 이 옵션은 TypeScript 타입 시스템 내에서 GraphQL 타입을 추론하는 데 사용하는 typings 파일의 출력 경로를 정의합니다. tadaOutputLocation은 제공하는 파일 경로에 따라 두 가지 형식을 지원해요: .d.ts와 .ts. 성능 향상을 위해 .d.ts를 사용하는 것을 문서에서 제안하고 있으니, 우선은 .d.ts를 사용하도록 하죠.

이제 모든 타입이 포함된 출력 파일을 생성해야 해요. 이를 위해 다음 CLI 명령어를 사용하세요:

```js
npx gql.tada generate output
```

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

그러나 처음에 .d.ts 파일을 생성할 수 없었기 때문에 다음 명령을 사용하여 장치 전역으로 gql.tada를 설치해야 했습니다.

```js
npm i -g gql.tada
```

이제 다음 명령을 사용하여 .d.ts 파일을 생성하세요.

```js
gql.tada generate output
```

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

gql.tada를 전역으로 설치한 후 .d.ts 파일을 생성할 수 있었는데, 해당 파일은 다음과 유사한 내용을 가지고 있습니다:

```js
declare const introspection: {
  __schema: { /*...*/ };
};

import * as gqlTada from 'gql.tada';

declare module 'gql.tada' {
  interface setupSchema {
    introspection: typeof introspection;
  }
}
```

설정이 완료되었으므로, VSCode가 기본적으로 워크스페이스의 TypeScript 설치를 로드하지 않고 대신 전역 설치를 사용할 수 있습니다. 이 문제를 해결하기 위해 VSCode의 settings.json 구성에 다음 두 줄을 추가해주세요:

```js
{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}
```

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

이제 모두 설정이 완료되었습니다! 페이지.tsx에서 필요한 변경 사항을 살펴봅시다.

@gql/client에서 gql.tada로 쿼리 가져오기를 업데이트해야 합니다. 최종 코드는 다음과 같아야 합니다:

```js
//page.tsx
import { getClient } from "@/config/api";
import { graphql } from "gql.tada";

const CountriesQuery = graphql(`
  query Countries {
    countries {
      name
      capital
      code
      continent {
        code
        name
      }
      currency
    }
  }
`);

export default async function Home() {
  const { data } = await getClient().query({
    query: CountriesQuery,
    context: {
      fetchOptions: {
        next: { revlidte: 10 },
      },
    },
  });

  return (
    <main className="">
      {data?.countries?.map((country: any, index: number) => {
        return (
          <div key={index} className="border-white border-b-2">
            <ul>
              <li>{country?.name}</li>
              <li>{country?.code}</li>
            </ul>
          </div>
        );
      })}
    </main>
  );
}
```

이 변경 사항으로 코드가 GraphQL 응답에서의 타입 안정성을 활용할 수 있게 되었습니다. 이 방법이 문제를 해결하고 개발 경험을 향상시켜 주기를 바랍니다. 작동 상태를 알려주시면 감사하겠습니다!

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

# 참고 자료

https://www.npmjs.com/package/@apollo/experimental-nextjs-app-support


Nextjs 14 앱 라우터에 타입 안정성을 갖춘 GraphQL 구현 방법


![그림](/assets/img/2024-08-19-ImplementingtheInverseDiscreteFourierTransforminPython_0.png)

이전 글에서는 Python으로 이산 푸리에 변환(DFT)을 구현했습니다.

DFT 알고리즘을 통해 우리는 시끄러운 신호에서 숨겨진 패턴을 찾기 위한 도구를 얻었습니다. 시간 값의 벡터를 주파수 값의 벡터로 선형 변환함으로써 이전 신호를 구성하는 사인파 파형의 진폭, 주파수 및 위상을 드러냅니다.

이번 글에서는 그 반대 과정을 살펴보겠습니다: 주파수 값의 벡터를 시간 값의 벡터로 변환하는 것입니다.

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

수학적으로, 역 이산 푸리에 변환(iDFT)은 다음과 같습니다:

![iDFT Formula](/assets/img/2024-08-19-ImplementingtheInverseDiscreteFourierTransforminPython_1.png)

여기서,

- N은 샘플 수입니다.
- n은 현재 샘플입니다.
- k는 현재 주파수입니다.
- X[k]는 n에서의 DFT입니다.
- x[n]은 n에서의 iDFT입니다.

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

이 역과정은 이산 푸리에 변환 행렬이 정방행렬이며 역행렬이 가능하기 때문에 가능합니다(이전 글에서 본 지수값 행렬을 상기해보세요). 이상적으로는 우리가 원래의 소음이 섞인 신호를 되찾을 수 있어야 합니다.

그럼 코딩을 시작해봅시다!

# 파이썬 코드

DFT 함수는 각 주파수에서의 진폭과 위상을 포함한 복소수 벡터를 반환했습니다. 우리는 그 벡터를 X_k라고 부르기로 했습니다.

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

이제 X_k를 사용하여 원본 신호를 복원할 것입니다.

```js
def iDFT(X_k):
    N = X_k.size
    n = np.arange(N)
    k = n.reshape((N,1))

    e = np.exp(2j * np.pi * k * n / N)
    x = np.zeros_like(X_k)
    for row in range(N):
        for col in range(N):
            x[row] += e[row, col] * X_k[col]
    x /= N

    return x.real
```

여기서 주목해야 할 중요한 점들:

- DFT 함수에서 X_k를 선언할 때 데이터 유형을 명시적으로 정의했었습니다.

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

```python
X_k = np.zeros_like(k, dtype=np.complex128)
```

하지만 여기서 x를 선언할 때는 데이터 유형을 명시하지 않아도 됩니다. 실제 수학 연산이 복소수를 포함하더라도 데이터 유형을 명시할 필요가 없는 이유는 무엇일까요?

zeros_like 함수가 작동하는 방식 때문입니다. 이 함수는 입력 인수의 모양뿐만 아니라 데이터 유형도 복사합니다. X_k의 경우, k는 실수 벡터였습니다. X_k는 복소수 연산과 관련이 있으므로 그 데이터 유형을 복소수로 명시적으로 정의해 주어야 했습니다.

이 경우 X_k는 이미 복소수입니다. 이를 zeros_like의 인수로 전달하면 x도 복소수 벡터가 됩니다.

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

- 신호를 플롯할 때, 복소수 값의 실부분에만 관심이 있습니다. 그래서 x 대신 x.real이 반환됩니다.

이것이 진폭 스펙트럼입니다:

![Amplitude Spectrum](/assets/img/2024-08-19-ImplementingtheInverseDiscreteFourierTransforminPython_2.png)

iDFT 함수를 사용하여 신호를 재구성하고 원래 신호와 비교해 보겠습니다.

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

```js
inv_x = iDFT(X_k);

plt.figure((figsize = (14, 5)));
plt.subplot(121);
plt.plot(t, x, "b");
plt.xlabel("t");
plt.ylabel("x");
plt.title("Original Signal");
plt.grid(True);
plt.subplot(122);
plt.plot(t, inv_x, "r");
plt.xlabel("t");
plt.ylabel("x");
plt.title("Reconstructed Signal");
plt.tight_layout();
plt.grid(True);
```

![Reconstructed Signal](/assets/img/2024-08-19-ImplementingtheInverseDiscreteFourierTransforminPython_3.png)

그런데 부활이 정말 잘 되었네요!

물론 첫 번째에 깨끗한 신호가 있었기 때문에 부활 프로세스가 쉬워졌습니다.

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

하지만 이 프로세스는 실제 신호에서도 효율적입니다. 시간 및 주파수 도메인 간에 DFT 행렬만 사용하여 전환할 수 있는 방법이 명확히 이해되었으면 좋겠습니다.

# 벡터화

이전에 말한 대로 for 루프는 느립니다. 그래서 iDFT 함수를 벡터화해 봅시다.

```js
def viDFT(X_k):
    N = X_k.size
    n = np.arange(N)
    k = n.reshape((N,1))

    e = np.exp(2j * np.pi * k * n / N)
    x = np.dot(e, X_k) / N

    return x.real
```

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

2개 함수에 의해 소요된 시간을 비교해 봅시다.

![image](/assets/img/2024-08-19-ImplementingtheInverseDiscreteFourierTransforminPython_4.png)

이전과 마찬가지로, 벡터화된 함수가 10⁴배 빠릅니다.

이전 글을 이어서, 이제 Python에서 역 이산 푸리에 변환을 구현했습니다.

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

다음 기사에서는 DFT 알고리즘을 크게 가속화하는 알고리즘에 대해 논의해봅시다.

하디크 메디
궁금증을 유지하세요


파이썬으로 역 이산 푸리에 변환 구현하기


## 꼭 알아야 할 일상 팁과 노하우!

![이미지](/assets/img/2024-08-19-10WaystoWriteBetterPythonCodes_0.png)

2024년의 절반정도가 지나갔습니다. 기술 산업은 Generative AI와 Large Language Models의 등장으로 더 빠르게 움직이고 있습니다.

데이터 애호가이자 파이썬 개발자로서, 오늘날 경쟁이 치열한 시장에서 필요한 멋진 팁과 노하우를 알면서 수많은 기술 분야의 사람들이 해고되는 상황에서 계속 중요하게 대처할 수 있습니다.

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

여기서 주목해야 할 첫 번째 사항은,

## 왜 Python을 사용해야 할까요?

Python은 매우 강력한 일반 목적 프로그래밍 언어로, 데이터 과학 관련 작업에 매우 적합합니다. SciKit-Learn, TensorFlow, PyTorch와 같은 놀라운 프레임워크 및 다양한 라이브러리를 활용하여 쉽게 이해할 수 있는 문법으로 만들어진 Python은 다양한 응용 프로그램을 만들 수 있는 유연성을 제공합니다.

따라서 Python을 습득하면 자동화 작업이나 오픈 소스 LLMs와 상호 작용하는 챗봇을 작성하는 등 다양한 응용 프로그램을 만들 수 있습니다. 특히 초보자라면 다른 프로그래밍 언어와 비교하여 Python을 배우는 것이 상당히 직관적이고 빠릅니다.

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

그렇다면 코딩으로 들어가보도록 하죠!

## 어떻게 더 나은 Python 코드를 작성할 수 있을까요?

코딩 방법을 개선하고 발전시킬 수 있는 10 가지 팁에 대해 이야기해 보겠습니다.

### 1. 메모리 저장을 위해 "Generator" 사용하기

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

일반적으로 `large_file`을 메모리에 저장할 수 없는 대용량 파일을 분석해야 할 때가 있습니다. 이러한 문제를 효율적으로 해결하기 위해 `process_large_file` 제너레이터 함수를 생성하여 대용량 파일을 한 줄씩 읽는 방법을 사용할 수 있습니다.

```python
def process_large_file(file_path):
    """
    대용량 파일을 한 줄씩 읽는 제너레이터 함수
    """
    with open(file_path, 'r') as file:
        for line in file:
            # 각 줄을 처리
            yield line

# 로그 파일 경로 설정
log_file_path = 'path/to/your/large_file.txt'

# 대용량 파일을 처리
large_file = process_large_file(file_path)

for entry in large_file:
    # 각 로그 항목에 대해 작업 수행
    print(entry)
```

위의 코드에서는 `large_file.txt` 파일에 작성된 출력을 표시합니다.

# 2. "setdefault()"를 사용한 사전(dictionary)에서의 사용법

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

재고 시스템을 관리하고 다양한 제품의 재고 수준을 추적하고자 한다고 가정해봅시다. 시스템에 새 제품이 추가될 때, 해당 제품에 기본 재고 수준이 설정되지 않은 경우를 대비하여 기본 재고 수준을 설정하고 싶습니다.

이러한 프로세스를 간소화하기 위해 setdefault() 함수를 사용할 수 있습니다. 이 함수는 딕셔너리에 특정 키가 이미 존재하지 않으면 지정된 기본값을 가지는 키를 삽입합니다.

```js
# 초기 재고
inventory: dict[str, int] = {"jeans": 500, "top": 600}

# 존재하지 않는 제품에 기본 재고 수준 추가
products_to_add: list[str] = ["skirt", "shirt", "tee"]

for product in products_to_add:
    inventory.setdefault(product, 500)

# 최종 업데이트된 재고 출력
print("최종 업데이트된 재고:", inventory)

"""
# 출력:
최종 업데이트된 재고: {'jeans': 500, 'top': 600, 'skirt': 500, 'shirt': 500, 'tee': 500}
"""
```

이 방법을 사용하면 명시적 검사와 할당이 필요하지 않아 코드를 더 간결하고 가독성 있게 만들 수 있습니다.

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

# 3. "if-elif 지옥" 피하기 위해 딕셔너리 사용하기

만약 사용자 입력에 따라 여러 함수를 호출하고 싶다고 가정해보세요.

이 문제를 해결하는 가장 일반적인 방법은 if-elif 문을 사용하는 것인데, 이 방법은 많은 함수를 처리할 때 매우 길고 복잡해질 수 있습니다.

대안적인 접근 방법은 실행할 함수와 대조할 키가 포함된 딕셔너리를 생성하는 것입니다.

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

```python
# 기능 1
def first():
  print("첫 번째 함수 호출 중...")

# 기능 2
def second():
  print("두 번째 함수 호출 중...")

# 기능 3
def third():
  print("세 번째 함수 호출 중...")

# 기본 함수
def default():
  print("기본 함수 호출 중...")

# 사용자 입력
options: int = int(input("옵션을 입력하세요: "))

# 옵션을 키로, 함수를 값으로 하는 딕셔너리 생성
funcs_dict: dict[int, str] = {1: first, 2: second, 3: third}

# 입력한 옵션이 딕셔너리의 키에 있는지 확인하고, 없으면 기본 함수 실행
final_result = funcs_dict.get(options, default)
final_result()
```

프로그램을 실행하면 화면에 다음과 같은 결과를 볼 수 있습니다.

```python
"""
# 출력:
# 옵션이 0일 때
옵션을 입력하세요: 0
기본 함수 호출 중...

# 옵션이 1일 때
옵션을 입력하세요: 1
첫 번째 함수 호출 중...

# 그리고 계속...
"""
```

참고: 사용자가 무엇이든 입력하면 `default()` 함수가 실행됩니다.

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

# 4. Collections 모듈에서 "Counter" 사용하기

큰 텍스트 데이터를 다룰 때, 텍스트 분석의 가장 일반적인 작업은 문제 상황에 따라 특정 문서나 전체 말뭉치에서 각 단어의 빈도를 확인해야 하는데요.

Counter는 이터러블에서 요소를 세는 간단하고 효율적인 방법을 제공하여 사용자 정의 계수 논리를 작성하는 복잡성을 추상화합니다.

이를 구현해봅시다,

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

```python
from collections import Counter
import re

# 텍스트 파일 읽기
with open("sample_text.txt", "r") as file:
  text = file.read()

# 텍스트 정리 및 토큰화
cleaned_text: str = re.sub(r'[^\w\s]', '', text.lower().split())

# Counter()를 사용하여 단어 개수 세기
word_counts: Counter = Counter(cleaned_text)

# 두 번째로 많이 나오는 단어 출력
most_common = word_counts.most_common(2)  # 출력할 공통 단어의 개수를 인수로 전달 (숫자는 1-n으로 시작)
print("두 번째로 많이 나오는 단어: ", most_common[0])  # 2개 중에서 0번째 인덱스 요소 출력

"""
# 출력:
두 번째로 많이 나오는 단어: ('data', 82)
"""
```

참고: 또한, Counter 객체를 다른 자료 구조인 딕셔너리로 쉽게 변환하거나 elements(), most_common() 등 유용한 메서드를 사용하여 작업할 수 있습니다.

# 5. 코드 최적화를 위해 "메모이제이션" 사용하기

메모이제이션은 동적 프로그래밍에서 사용되는 기술로, 동일한 입력이 다시 발생할 때 비싼 함수 호출을 재사용하여 재귀 알고리즘의 시간 복잡도를 개선하는 기법입니다.

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

이것의 대표적인 예는 피보나치 수열로 알려진 토끼 문제입니다.

```python
import time

def memo_fibonacci(num: int, dictionary: dict[int, int]):
    if num in dictionary:
        return dictionary[num]
    else:
        dictionary[num] = memo_fibonacci(num-1, dictionary) + memo_fibonacci(num-2, dictionary)
        return dictionary[num]

# Dictionary를 이용해 Cache 활용하기
dictionary: dict[int, int] = {0: 1, 1: 1}

# 소요된 시간
start_time: float = time.time()
# 함수 호출
result: int = memo_fibonacci(48, dictionary)
end_time: float = time.time()
# 경과 시간 계산
elapsed_time: float = end_time - start_time

print(f"결과: {result}") # 결과: 7778742049
print(f"경과 시간: {elapsed_time:.6f} 초") # 경과 시간: 0.000133 초
```

참고: 이것은 시간 복잡도를 크게 줄입니다. 하지만 결과를 저장하는 캐시를 유지해야 하기 때문에 공간-시간의 교환을 고려해야 합니다.

# 6. 중복을 피하기 위해 "데코레이터" 사용하기

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

파이썬 프로젝트를 개발 중이시군요! 함수가 실행되는 데 얼마나 시간이 걸리는지 측정하고 싶을 때 사용할 수 있는 방법에 대해 설명드릴게요. 위에서 언급한 것처럼 해당 함수에 대해 시간 기능을 사용할 수 있지만, 수십 개 또는 백 개의 함수가 있는 경우는 어떨까요?

‘start-time’과 ‘end-time’을 쓰는 데 영원이 걸릴 텐데, 대신에 우리가 직접 `elapsed_time` 함수를 만들어 사용할 수 있어요. 우리가 시간을 측정하려는 함수 위에 `@elapsed_time`을 추가하기만 하면 됩니다.

파이썬은 @ 기호를 보고 그 아래의 함수가 `elapsed_time` 함수에 전달되어야 함을 이해하고, 해당 함수가 `elapsed_time`에서 실행되어 원하는 만큼의 함수를 시간 측정할 수 있도록 코드를 감싼 후 실행합니다.

```python
import time

def elapsed_time(func):
    def wrapper():
        start_time: float = time.time()

        func()

        end_time: float = time.time() - start_time
        print(f"{func.__name__}() took {end_time:.6f} seconds")

    return wrapper

@elapsed_time
def some_code():
    # 실행 중인 코드를 시뮬레이션합니다.
    time.sleep(0.00002)

# 함수 호출
some_code() # some_code() took 0.000009 seconds
```

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

일지, 시간 측정, 접근 제어 강화 등에 널리 사용됩니다.

## 7. `dataclass`를 사용하여 깔끔한 데이터 구조 만들기

데이터 값을 보유하기 위해 설계된 일반 클래스에서 **init** 메서드를 반복적으로 작성하는 것은 잠재적 오류 증가로 인해 정말 지루합니다.

![이미지](/assets/img/2024-08-19-10WaystoWriteBetterPythonCodes_1.png)

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

그러나 Python 3.7에서 소개된 dataclasses 모듈은 프로그램의 다른 부분 사이에 전달될 데이터를 저장하는 더 효율적인 방법입니다.

```python
from dataclasses import dataclass

@dataclass
class Employee:
    id_: int
    name: str
    salary: float

e1 = Employee(id_=1, name='Tusk', salary=69999.99)
print(e1) # Employee(id_=1, name='Tusk', salary=69999.99)
```

여기서 출력 결과는 마치 **repr**을 사용하여 구현된 표준 Python 클래스와 동등합니다.

참고: Employee 클래스의 표현 방식을 사용자 정의할 수도 있습니다:

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

```python
from dataclasses import dataclass

@dataclass
class Employee:
    id_: int
    name: str
    salary: float

    def __repr__(self):
       return f"{self.name} earns ${self.salary}."

e1 = Employee(id_=1, name='Tusk', salary=69999.99)
print(e1) # Tusk earns $69999.99.
```

만약 보일러플레이트 코드를 줄이고 코드를 더 읽기 쉽고 유지보수성 높게 만들고 싶다면 dataclass를 사용해보세요.

# 8. 깔끔한 입력 처리를 위한 "match" 사용하기

Python 3.10부터 새롭게 도입된 구조적 패턴 매칭은 match 패턴과 관련된 case 문을 사용하여 입력을 처리합니다.

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

"Point"라는 클래스가 있는데, 이는 2D 좌표계에서 한 점을 나타냅니다. 이제 사용자가 입력한 경우를 처리하기 위해 2D 평면 상의 점을 찾는 함수 "where_is"를 만들겠습니다.

`match` 문은 식을 가져와서 그 값과 연속적인 패턴 case 블록을 비교합니다.

```js
from dataclasses import dataclass

# dataclass를 사용하여 클래스 정의
@dataclass
class Point:
    x: int
    y: int

# 서로 다른 경우를 처리하기 위한 match 문
def where_is(point):
    match point:
        case Point(x=0, y=0):
            return ("Origin")
        case Point(x=0, y=y):
            return (f"Y={y}")
        case Point(x=x, y=0):
            return (f"X={x}")
        case Point(x, y):
            return ("다른 곳")
        # 사용자가 입력하는 모든 것을 잡기 위함
        case _:
            return ("점이 아닙니다")

# 예시
print(where_is(Point(0, 0)))   # 결과: Origin
print(where_is(Point(0, 10)))  # 결과: Y=10
print(where_is(Point(10, 0)))  # 결과: X=10
print(where_is(Point(10, 10)))  # 결과: 다른 곳
print(where_is("점이 아닙니다"))  # 결과: 점이 아닙니다
```

match-case 문을 사용하면 모든 가능한 경우를 처리할 수 있어서 완전한 패턴 매칭을 보장할 수 있습니다.

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

# 9(A). “and” 대신 “all” 연산자 사용하기

유저 프로필 시스템을 구축 중이라고 상상해봅시다. 폼에 입력된 모든 필수 필드를 사용자가 입력했는지를 확인하고 싶을 때가 있을 겁니다 (뭐 굳이 폼에 \*필수 입력란 표시를 안 한 이유는 모르겠지만, 여기선 그냥 집중하도록 합시다👇).

어쨌든 제공된 iterable의 모든 요소가 True인 경우에만 True를 반환하는 all 함수를 사용해서 and 조건 대신 사용할 수 있어요.

```js
# 사용자 등록 폼에서 사용자 입력
form_data: dict[str, str] = {"name" : "Nikita",
             "email": "analyticalnikita@gmail.com",
             "phone": "123478911"}

# 필수 필드 목록
required_fields: list[str] = ["name", "email", "phone"]

# all 연산자 사용
if all(field in form_data for field in required_fields):
    print("모든 필수 필드가 작성되었습니다.")
else:
    print("일부 필수 필드가 누락되었거나 비어 있습니다.")

"""
# 출력:
모든 필수 필드가 작성되었습니다.
"""
```

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

# 9(B). "or" 대신 "any" 연산자 사용하기

any 함수는 반복 가능한 객체에 제공된 요소 중 하나라도 True인 경우 True를 반환합니다.

예를 들어, 특정 기준에 따라 특정 사용자에게 권한을 제한해야 하는 경우, or 조건 대신 any를 사용할 수 있습니다.

```js
# 사용자에게 할당된 권한 목록
user_permission: list[str] = ["read", "execute"]

# 사용자가 필요한 권한 중 하나 이상을 가지고 있는지 확인
required_permissions: list[str] = ["write", "read", "admin"]

# "all" 연산자 사용
if any(permission in user_permission for permission in required_permissions):
    print(f"필요한 권한을 가지고 있어서 접속이 허용됩니다.")
else:
    print("당신은 표준 사용자입니다. 접속이 허용되지 않습니다.")

"""
# 결과:
필요한 권한을 가지고 있어서 접속이 허용됩니다.
"""
```

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

이것들은 어떻게 any와 all을 사용하여 여러 개의 or 또는 and 문을 필요로하는 조건들을 단순화할 수 있는지 보여주는 몇 가지 예시들입니다.

마지막으로, 모든 프로그래머의 영원한 즐거움(만약 당신의 것이 아니라면, 그럼 제안을 함께 배워보세요😉).

# 10. 더 짧은 구문을 위한 Comprehensions 사용

Comprehension은 파이썬이 제공하는 강력한 도구 세트로, 모든 iterable 데이터 유형에 대해 제공됩니다. 이는 상황에 따라 여러 줄의 루프를 사용하는 것을 피할 수 있는 간결한 방법을 제공합니다.

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

한 가지씩 탐색해 봅시다:

## 10(A). 리스트 컴프리헨션

여기서, 중첩된 if 문을 사용하여 리스트 컴프리헨션의 힘을 보여드리겠습니다.

```js
# 리스트 컴프리헨션을 사용한 중첩 if
fruits: list[str] = ["apple", "orange", "avacado", "kiwi", "banana"]
basket: list[str] = ["apple", "avacado", "apricot", "kiwi"]

[i for i in fruits if i in basket if i.startswith("a")] # ['apple', 'avacado']
```

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

비슷하게, 중첩된 for 루프를 적용하여 이해하기 어려운 코드가 될 수 있습니다.

## 10(B). 튜플 컴프리헨션

파이썬에는 튜플 컴프리헨션이 없습니다. 대신, 제너레이터 표현식을 사용하여 튜플을 만들 수 있습니다.

```js
# 제너레이터 표현식을 튜플로 변환
tuple(i**2 for i in range(10))

# (0, 1, 4, 9, 16, 25, 36, 49, 64, 81)
```

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

노트: 우리가 알다시피 위에서 생성기 표현식은 리스트 내포보다 더 메모리를 효율적으로 사용합니다.

## 10(C). 사전 내포식

만약 당신이 `apple_names`라는 리스트가 있다고 가정하고, 이 리스트에 있는 각 요소의 길이를 포함하는 새 리스트를 출력하고 싶다면,

여기서도 리스트 내포를 사용할 수 있습니다. 그러나 사실 이 표기법을 사용하여 사전을 만들 수도 있는지 알고 계시나요? 네, 그것이바로, 사전 내포입니다.

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

```js
# 사과 이름 목록 만들기
apple_names: list[str] = ["apple", "pineapple", "green apple"]

# 사과 이름을 키로하고 그길이를 값으로하는 사전 만들기
print({apple_name: len(apple_name) for apple_name in apple_names})

# {"apple": 5, "pineapple": 9, "green apple": 11}
```

대신에 루프나 사전 생성자를 사용하는 것보다 더 읽기 쉽습니다.

## 10(D). 집합 구조체 컴프리헨션

특정 조건에 따라 필터링을 사용하여 컴프리헨션을 만들 수 있습니다.

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

# 조건으로 집합 생성

print({i\*\*2 for i in range(1, 11) if i > 5})

# {64, 36, 100, 49, 81}

참고: 컴프리헨션은 표현력이 풍부하지만, 모든 경우에 적합한 것은 아닙니다. 특히 너무 복잡한 논리를 포함하는 경우에는 그렇습니다.

# 결론

기억하세요, 코드를 컴퓨터가 아닌 함께 일하는 팀을 위해 작성합니다. 그러므로 다른 사람이 여러분의 프로덕션 수준의 코드를 이해할 수 있도록 더 나은 코드를 작성하는 것이 정말 중요합니다.

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

이러한 팁을 채택함으로써 효율적인 코드를 작성할 뿐만 아니라 생산성도 향상시킬 수 있어요.

다음에 또 방문하기 전에... 궁금한 점/제안 사항/생각이 있으면 아래에 남겨주세요. 🖋️

그리고, 이 내용을 즐겁게 보셨다면 박수 50번 👏 하고, 앞으로의 업데이트를 위해 팔로우하시는 거 잊지 마세요.

이만큼이에요. 곧 다시 이야기할게요! 🙋🏻‍♀️

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

테이블 태그를 마크다운 형식으로 변경해보세요.


파이썬 코드를 더 멋지게 작성하는 10가지 방법


![Async/await is great for handling I/O-bound operations, promising smoother and more responsive applications. But what happens when it doesn’t work as expected? In my FastAPI project, I ran into a situation where async/await wasn’t enough, causing delays and pauses in my services. Here’s how I fixed it.](/assets/img/2024-08-19-AsyncAwaitIsntEnoughSolvingSynchronousBottlenecksinFastAPI_0.png)

## Where Async Falls Short:

I had multiple APIs in my FastAPI application. Some of them required heavy processing, and despite making the main API functions async, the app still paused when these heavy tasks ran. The issue? While the main function was async, the helper functions were still synchronous, blocking other tasks from running.

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

```js
async def main_api_function():
  helper_function_1()
  helper_function_2()

def helper_function_1():
  #heavy processing
  return

def helper_function_2():
  #heavy processing
  return
```

여기서 문제가 발생합니다:

비동기 함수를 호출할 때 보조 코드도 비동기여야 합니다. 이 요구 사항은 코드베이스 전반에 영향을 미치며, 해당 비동기 함수를 의존하는 모든 함수가 비동기여야 하며, 최상위 수준까지 계속됩니다. 그러나 모든 것을 비동기로 만들어도 함수 자체가 동기적으로 CPU 집중적인 작업을 수행한다면 도움이 되지 않습니다. 이는 병목 현상을 유발하여 응용 프로그램의 반응성을 떨어뜨릴 수 있습니다.

하지만 이 문서를 읽고 계신다면 이미 수많은 API 및 동기적으로 작동할 수도 있는 보조 함수에 빠져 계실텐데, 모든 주요 함수 및 보조 함수를 비동기로 변경하고 문제를 해결하는지 테스트하는 것이 부담스러울 수 있습니다.

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

## 해결책: ThreadPoolExecutor를 사용하여 무거운 작업 오프로딩

이 문제를 해결하기 위해, CPU 바인딩 작업을 주 스레드를 차단하지 않고 처리할 방법이 필요했습니다. 그 해결책은 무엇일까요? ThreadPoolExecutor를 사용하여 이러한 무거운 작업을 별도 스레드에서 실행하면서 주 이벤트 루프를 다른 작업에 대해 자유롭게 유지하는 것입니다.

여기에 내가 취한 방법입니다:

- 스레드 풀 생성: 먼저 ThreadPoolExecutor로 스레드 풀을 설정했습니다. 이는 병렬로 작업을 처리할 수 있는 작업자 그룹을 갖고 있는 것과 같습니다. 각 작업자는 무거운 작업을 수행할 수 있고, 이는 주 스레드를 다른 요청 처리를 계속할 수 있도록 해줍니다.

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

```js
from concurrent.futures import ThreadPoolExecutor
import asyncio

executor = ThreadPoolExecutor(max_workers=10) # 서버 설정에 따라 변경 가능

```

2. 별도의 스레드에서 차단 코드 실행: 저는 run_blocking_code_in_executor라는 비동기 함수를 작성했습니다. 이 함수는 블로킹 작업을 실행하기 위해 loop.run_in_executor를 사용합니다. 이 함수는 블로킹 함수와 해당 인수를 가져와 별도의 스레드에서 실행하고 결과를 반환합니다.

```js
async def run_blocking_code_in_executor(blocking_function, *args):
    loop = asyncio.get_running_loop()
    return await loop.run_in_executor(executor, blocking_function, *args)
```

3. 솔루션 적용하기: CPU 집약 작업인 중량 계산과 같은 작업을 시뮬레이션하는 generate_report라는 함수가 있다고 가정해보겠습니다. 이를 오프로드하는 방법은 다음과 같습니다:

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

```python
def generate_report(data):
    # CPU-bound 작업을 시뮬레이션합니다.
    new_report = create_report(data)
    return new_report

result = await run_blocking_code_in_executor(generate_report, data)
```

이 예제에서 generate_report는 메인 쓰레드를 차단하는 작업을 나타냅니다. 별도의 쓰레드로 이동하여 주요 API 및 다른 API 함수가 멈추지 않고 계속 실행되도록하면 응용 프로그램의 반응성이 향상됩니다.

즉, 동기 함수를 해당 매개변수와 함께 쓰레드에서 실행하기 위해 쓰레드 실행자 함수로 래핑하는 것과 같습니다.

## 결론:

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

비동기/대기(async/await)만으로는 항상 충분하지 않을 수 있습니다, 특히 CPU 집약 작업을 다룰 때. 비동기/대기(async/await)를 스레딩과 결합하면 FastAPI 애플리케이션을 원활하게 유지하고 동기화 병목 현상을 피할 수 있습니다. 비슷한 문제에 직면하고 있다면, 이 접근 방식을 사용하여 서비스를 반응적으로 유지하는 것을 고려해보세요.


FastAPI 동기적 병목 현상 해결하기


![Email from UIUC](/assets/img/2024-08-19-EmailsThatMatterInsightsfromUIUCMailArchivesUsingSASViyaPart-1_0.png)

UIUC 대학원생으로서 최근 대학으로부터 받은 이메일 중에서 최신 CrowdStrike 업데이트에 대해 알림을 받았습니다. 메일을 스크롤하다가, 대량 이메일 아카이브로 이어지는 링크를 발견했습니다. 호기심에 휩쓸려 더 깊이 파고들어, 1999년 10월 22일부터 2011년 11월 20일까지 CITES Massmail 시스템을 통해 유포된 과거 대학 이메일을 발굴해냈습니다.

이 발견으로 분석적 호기심이 불타오르기 시작했습니다: 몇 년 동안 어떤 주제가 다뤄졌을까요? 경보 이메일의 유형에서 패턴이나 추세가 있을 수 있을까요?

밑바닥부터 파고들어 알아내야 한다는 생각이 들었습니다.

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

이메일에서 의미 있는 통찰을 발견하기 위해 이러한 질문에 대답하고자, SAS Visual Text Analytics의 강력함을 고려하여 SAS Viya를 사용하기로 결정했습니다. 그러나 실제 분석에 착수하기 전에 먼저 할 일은 웹 사이트에서 이메일 데이터를 스크레이핑하고 전처리하는 것입니다.

## Bs4를 사용한 스크레이퍼 구축

Beautifulsoup4은 주로 HTML이나 XML 파일에서 데이터를 추출하는 데 사용되는 Python 라이브러리입니다.

위 라이브러리를 사용하여 이메일을 스크레이핑하는 파이썬 스크립트 massmail_scraper.py를 작성할 것입니다. 스크립트는 스크레이핑한 데이터를 저장하기 위한 csv 파일 massmail_system.csv을 생성하는 것부터 시작합니다.

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

이제 스크래핑 프로세스 자체로 넘어와봅시다. Massmail 웹사이트로 이동하면 메일 레코드가 테이블에 저장됩니다. 각 메일 세부정보는 tr (테이블 행) 태그에 저장되어 있습니다.

![이미지](/assets/img/2024-08-19-EmailsThatMatterInsightsfromUIUCMailArchivesUsingSASViyaPart-1_1.png)

메일 태그 번호, 제목 및 발송 날짜를 추출하는 과정은 `a` (앵커) 태그, 왼쪽에 정렬된 `td` (테이블 데이터) 태그 및 오른쪽에 정렬된 `td` 태그를 찾아서 수행됩니다.

![이미지](/assets/img/2024-08-19-EmailsThatMatterInsightsfromUIUCMailArchivesUsingSASViyaPart-1_2.png)

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

```js
table_rows = soup.find_all('tr')
for tr in table_rows[1:]:
    mail_no_a_tag = tr.find('a') or 'No Mail Tag'
    mail_no = mail_no_a_tag.get_text() or 'No Mail Content'
    mail_desc, mail_content = mail_content_extract(mail_no_a_tag['href'])
    subject = tr.find(lambda tag: tag.name == 'td' and tag.get('align') == 'LEFT').get_text() or 'No Subject'
    date = tr.find(lambda tag: tag.name == 'td' and tag.get('align') == 'RIGHT').get_text() or 'Unknown Date'
    mail_records.append([date, mail_no, mail_desc, mail_content, subject])
```

스크립트가 개별 메일 레코드의 HTML 페이지로 이동한 후에, 우리는 `b` 태그를 사용하여 헤더를 추출하고, `xmp` 태그를 사용하여 메일 내용을 추출합니다.

<img src="/assets/img/2024-08-19-EmailsThatMatterInsightsfromUIUCMailArchivesUsingSASViyaPart-1_3.png" />

```js
def mail_content_extract(link):
    """
    메일의 헤더와 내용을 추출합니다.

    Args:
        link (str): 메일의 개별 HTML 링크

    Returns:
        mail_desc (str): 메일의 헤더
        mail_content (str): 메일의 내용
    """
    response = requests.get("https://massmail.illinois.edu/citesMassmailArchive/" + str(link))
    page_content = response.content
    individual_page_soup = BeautifulSoup(page_content, 'html.parser')
    mail_content = individual_page_soup.find('xmp').get_text() or '내용 없음'
    mail_desc = individual_page_soup.find('b').get_text() or '헤더 없음'
    return mail_desc, mail_content
```

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

노트: 항상 유효하지 않은 값이 나올 수 있으므로 그 사실을 염두에 두고 값을 반환하지 않을 경우 대체 값이 있어야 합니다.

## 텍스트 전처리

이 프로젝트에서는 mail_preprocessing.py를 사용하여 두 가지 주요 전처리 단계에 중점을 두겠습니다. 첫 번째로 각 레코드에서 날짜를 추출하고 해당 날짜를 연도, 월, 일 및 요일로 분해하는 데 아래 함수를 사용합니다:

```python
def convert_date(date_str):
    """
    주어진 날짜 문자열에서 날짜 세부 정보를 추출합니다.

    Args:
        date_str (str): 입력 메일 텍스트

    Returns:
        year (str): 추출된 연도
        month (str): 추출된 월
        day (str): 추출된 일
        day_name (str): 추출된 요일
    """
    try:
        date_obj = datetime.strptime(date_str, '%a %b %d %Y').date()
        year = date_obj.strftime('%Y')
        month = date_obj.strftime('%b')
        day = date_obj.strftime('%d')
        day_name = date_obj.strftime('%A')
        return year, month, day, day_name
    except ValueError:
        return "Unknown Year", "Unknown Month", "Unknown Day", "Unknown Day of Week"
```

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

이메일의 제목과 본문에는 텍스트를 소문자로 변환하고, 구두점을 제거하고, 숫자를 제거하고, 이메일 주소나 웹 링크를 제거하며, 추가 공백을 제거하기 위해 전처리해야 합니다. 이 작업은 아래 함수를 사용하여 수행되었습니다:

```js
def mail_content_processing(text):
    """
    주어진 텍스트 입력을 전처리합니다.

    Args:
        text (str): 입력 이메일 텍스트

    Returns:
        processed_text (str): 전처리 후의 텍스트
    """
    try:
        if text is None:
            return "Empty Content"
        processed_text = text.lower()
        processed_text = re.sub(r'[^\w\s]', '', processed_text)
        processed_text = re.sub(r'\d+', '', processed_text)
        processed_text = re.sub(r'http\S+|www\S+|@\S+', '', processed_text)
        processed_text = ' '.join(processed_text.split())
        return processed_text
    except Exception as e:
        return "String Error"
```

<img src="/assets/img/2024-08-19-EmailsThatMatterInsightsfromUIUCMailArchivesUsingSASViyaPart-1_4.png" />

이로써 시리즈의 첫 번째 부분이 마무리되었습니다. 두 번째 부분에서는 SAS Viya를 사용하여 처리된 데이터를 활용하여 텍스트 분석 파이프라인을 실행하고 Visual Analytics를 사용하여 시계열 대시보드를 작성하는 방법을 보다 심층적으로 살펴볼 것입니다.

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

"다음 부분은 여기에서 확인하세요: "


Posts