/assets/img/2024-07-06-AGeneralizedMachineLearningFrameworkforTimeSeriesForecasting_0.png

# 소개

시계열 예측은 예측 모델링에서 필수적이며 데이터 과학자들의 큰 관심을 끕니다. 그 응용 분야는 공급망 수요 예측부터 금융 시장 예측까지 다양합니다. 전통적인 모델과는 달리, 시계열 예측 모델은 시간의 고유한 변동성으로 인해 불안정할 수 있습니다.

최근 게시한 글, '시계열 예측: SARIMAX, RNN, LSTM, Prophet, 그리고 Transformer의 비교 분석'에서 여러 시계열 예측 방법을 비교 분석했습니다. 기계 학습 접근 방법을 포함해야 했으나 글이 너무 길어졌습니다. 따라서 이 논문을 발표하여 그 갭을 해결하고자 합니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

이 게시물에서는 시계열 모델을 계속 탐구하겠습니다. 이 모델들은 어떻게 작동하는지, 그리고 왜 특성 엔지니어링을 사용하여 거래 데이터를 예측하기 위한 일반화된 머신러닝 프레임워크를 제안했는지에 대해 계속 알아보겠습니다. 머신러닝을 시계열 예측에 적용하는 것은 새로운 것은 아니지만, 제안하는 일반화된 프레임워크는 다양한 시나리오에서 실제 시계열 예측에 대한 도전 과제를 해결하려고 합니다.

# 1: 예측의 개요 대 ...

시계열 예측을 위한 범용 머신 러닝 프레임워크

/assets/img/2024-07-06-IntroductiontoNumPy_0.png

NumPy은 Numerical Python의 약자로, 수치 계산에 사용되는 파이썬의 강력한 라이브러리입니다. NumPy는 대규모 다차원 배열과 행렬을 지원하며, 이러한 배열에 효율적으로 작동하는 수학 함수 모음을 제공합니다. NumPy는 파이썬의 많은 과학 계산 및 데이터 분석 라이브러리의 기초를 형성합니다.

## NumPy의 주요 기능:

- 배열: NumPy의 주요 객체는 동질적인 다차원 배열입니다. 이는 양수로 이루어진 튜플로 색인화된 동일한 유형의 요소(일반적으로 숫자)로 구성된 테이블입니다.
- 효율적인 연산: NumPy는 배열에 대한 효율적인 수학 연산을 제공하여 복잡한 계산을 쉽고 빠르게 수행할 수 있습니다.
- 브로드캐스팅: 브로드캐스팅은 NumPy가 산술 연산을 수행할 때 서로 다른 모양의 배열을 작업할 수 있는 강력한 메커니즘으로, 코드를 더 간결하고 가독성 있게 만듭니다.
- 벡터화된 연산: NumPy 연산은 벡터화되어 있어 배열의 요소별로 수행되며, 종종 전통적인 반복적 접근 방식보다 더 깔끔하고 간결한 코드를 만들게 됩니다.
- 다른 라이브러리와의 통합: NumPy는 SciPy(과학 계산용), Matplotlib(그래픽 및 시각화용) 및 Pandas(데이터 조작 및 분석용) 등 다른 파이썬 라이브러리와 완벽하게 통합됩니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

## NumPy 설치하는 방법:

NumPy를 설치하는 방법은 2가지가 있어요:

- pip install numpy
- Anaconda를 설치하고 Jupyter Notebook을 열어요

## NumPy를 불러오는 방법:



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

```js
import numpy as np
```

```js
import numpy
```

이만큼이에요, 제 다음 블로그에서 NumPy에 대해 더 자세히 알아보겠어요.

그리고 제 Github 프로필에서 더 많은 것을 배울 수 있어요:



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

또한, Github에서 Matplotlib 학습 자료를 참고해보세요:

즐거운 학습 되세요 :)

초보자를 위한 NumPy 입문 가이드

/assets/img/2024-07-06-Silencethestatictypecheckerwiththerobustnessprinciple_0.png

타입 힌트는 mypy나 pyright와 같은 정적 타입 체커와 결합하여 Python 코드의 견고성과 유지 보수성을 크게 향상시킬 수 있습니다. 프로그램을 실행하기 전에 전체 클래스의 버그를 감지하고 수정할 수 있다는 것은 매우 유용합니다. 무모한 리팩터링을 가능하게 하며 테스트 작성 부담을 크게 줄여줍니다.

또한, 타입 힌트는 사용자와 유지 보수자가 코드 조각이 무엇을 해야 하는지 빠르게 알 수 있도록 도와주는 최소한의 문서 역할을 합니다.

하지만 많은 Python 개발자들 — 특히 강력한 타입 시스템을 경험하지 않은 경우 — 타입 힌팅에 어려움을 겪습니다. 내장된 데이터 유형을 사용하는 단순한 예제를 넘어서면 타입 체커의 모든 규칙을 따르기는 끝없는 오류의 연속으로 이어질 수 있습니다. 타입 체커와의 장시간의 싸움 끝에 대부분의 개발자들은 수많은 Any 주석이나 # type: ignore 주석을 사용하여 항복하게 됩니다. 이는 결국 타입 체크로부터 얻는 안전 보장을 피하는 결과를 초래합니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

파이썬 개발자들이 타입 힌트에 어려움을 겪는 주요 이유 중 하나는 전투 규칙을 정확히 모르기 때문입니다. 타입 힌트는 함께...

견고성 원칙으로 정적 타입 검사기 무력화하는 방법

/assets/img/2024-07-06-TheReasonsPythonWillDominatetheITIndustryby2025_0.png

전화로 피자 주문을 하는 과거를 떠올려보세요. 그리고 배달원이 당신의 주소를 제대로 기억했는지 손가락 교차하며 기다리던 시절을 생각해보세요. 오늘날, 자율 주행 자동차가 당신에게 뜨거운 피자를 가져다 줄 수 있고, 당신은 잡지보다 작은 화면에서 최신 시리즈를 시청할 수 있습니다. 이 놀라운 기술 대부분이 파이썬에서 유래했다는 것을 알고 계셨나요?

파이썬은 학계와 컴퓨터 애호가들을 넘어서 확장되어 왔습니다. 최신 동향을 따라가지 않은 사람들에게 놀랄만한 소식일지도 모릅니다. 지능적인 기계와 자율 주행 자동차 개발부터 웹사이트 제작과 데이터 분석까지 파이썬은 모든 다른 언어를 빠르게 대체하고 있습니다. 내 확고한 확신은 파이썬이 2025년에 기술 세계에서 최고로 거론될 것이라는 것입니다.

## 파이썬의 묻힌 영웅: 사용 편의성, 커뮤니티, 다양성



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

파이썬의 엄청난 유연성은 그 중요한 특징 중 하나입니다. 프로그래머들을 위한 범용 도구 세트와 같이 매우 다재다능합니다. 웹사이트를 만들고 싶으신가요? Django와 Flask는 여러분의 요구를 충족시킬 수 있는 많은 파이썬 프레임워크 중의 두 가지에 불과합니다. 데이터 과학을 깊게 탐험하고 싶으신가요? NumPy, pandas, 그리고 matplotlib과 같은 라이브러리들이 귀중한 동반자가 될 것을 알게 되실 것입니다...

2025년까지 파이썬이 IT 산업을 지배할 7가지 이유

TypeScript를 처음 접했을 때 인터페이스와 타입이 서로 교환 가능해 보일 수 있습니다, 특히 객체 모양을 설명할 때입니다. 실제로 TPerson 및 IPerson을 모두 가져오는 코드를 볼 수 있는데, 이는 둘 다 클래스 또는 객체 구조를 정의할 수 있다는 것을 시사합니다. 이 명백한 유사성은 각각을 사용해야 할 때에 대한 혼란을 야기할 수 있습니다.

그러나 중요한 차이가 존재합니다: 인터페이스는 객체 및 클래스를 설명하는 데 사용되지만, 타입은 어떤 유형의 데이터 구조든 표현할 수 있습니다. 이 기본적인 대조는 TypeScript 프로젝트에서 각각을 언제 사용해야 할지에 대한 기준을 마련합니다.

# 명백한 유사성

다음과 같이 보이는 동등한 정의를 고려해보세요:



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

```js
interface IPerson {
  name: string;
  age: number;
}

type TPerson = {
  name: string,
  age: number,
};

const person1: IPerson = { name: "Alice", age: 30 };
const person2: TPerson = { name: "Bob", age: 25 };
```

IPerson과 TPerson은 둘 다 이름과 나이 속성을 가진 객체를 설명할 수 있지만, 그 기능은 여기서부터 다릅니다.

# 인터페이스: 클래스 제한을 위한 전문가

TypeScript의 인터페이스는 특정 목적에 맞게 설계되었습니다: 객체와 클래스의 형태를 설명하는 데 사용됩니다. 원시 값의 별칭을 만들거나, 결합 유형 또는 교차 유형을 생성하는 데 사용할 수 없습니다. 이 특화된 기능은 인터페이스를 객체지향 프로그래밍 시나리오에서 특히 강력하게 만듭니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

TypeScript을 공부할 때 인터페이스와 타입의 차이를 이해하는 것이 중요합니다. 기억해야 할 주요 차이는 인터페이스는 객체와 클래스를 설명하는 데만 사용되지만, 타입은 어떤 종류의 데이터 구조든 나타낼 수 있다는 점입니다. 이 기본적인 대조는 TypeScript 프로젝트에서 각각을 언제 어떻게 사용해야 하는지를 결정합니다.

인터페이스의 주요 장점은 다음과 같습니다:

- 객체 모양 정의: 인터페이스는 객체가 특정 구조를 준수하는지 확실하게 보장하는 방법을 제공합니다.
- 확장성: 인터페이스를 확장할 수 있어 복잡한 객체 유형을 시간이 지남에 따라 발전시키는 데 이상적입니다.
- 클래스 구현: implements 키워드를 이용하여 클래스를 제한하고 인터페이스 계약을 준수하도록 함으로써 코드의 견고성을 향상시킵니다.

간단한 예시를 살펴보겠습니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

```js
interface IAnimal {
  name: string;
  age: number;
  speak(): void;
}

class Dog implements IAnimal {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  speak() {
    console.log("Woof!");
  }
}
```

그리고 여기에 `extends` 키워드를 잘 활용한 예제가 있어요.

```js
interface IAnimal {
  name: string;
  speak(): void;
}

interface IDog extends IAnimal {
  breed: string;
  wagTail(): void;
}

class Dog implements IDog {
  name: string;
  breed: string;

  constructor(name: string, breed: string) {
    this.name = name;
    this.breed = breed;
  }

  speak() {
    console.log("Woof!");
  }

  wagTail() {
    console.log(`${this.name}가 꼬리를 흔들고 있어요.`);
  }
}

const myDog = new Dog("Buddy", "Labrador");
myDog.speak();
myDog.wagTail();
```

주의하셔야 할 점은 아래의 문법이 객체를 제한하는 경우에서는 클래스가 아닌 객체를 제한하는 경우에만 맞는 구문이에요:



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

```typescript
인터페이스 IPerson {
  이름: 문자열;
  나이: 숫자;
}

상수 person1: IPerson = { 이름: "Alice", 나이: 30 };
```

# 타입: 다재다능한 파워하우스

인터페이스는 객체 모양에만 제한되지만, 타입은 더 다양한 가능성을 제공합니다:

- 다재다능성: 타입은 객체뿐만 아니라 기본 유형, 유니온, 교차, 튜플 등을 대표할 수 있습니다.
- 복잡한 타입 작성: 유니언(|) 및 교차(&) 연산자로 타입을 정교하게 정의할 수 있습니다.
- 별칭: 타입 별칭은 복잡한 타입에서 코드 가독성을 높일 수 있습니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

다음은 예제 입니다:

```js
type TName = string;
type TAge = number;

type TPerson = {
  name: TName,
  age: TAge,
};

type TAnimal = {
  name: string,
  age: number,
  speak(): void,
};

type TDog = TAnimal & { breed: string };

const myDog: TDog = {
  name: "Buddy",
  age: 5,
  breed: "Golden Retriever",
  speak() {
    console.log("Woof!");
  },
};
```

# 인터페이스와 유형 사이 선택하기

각각의 한계와 강점을 이해하고, 다음 권장 사항을 고려해보세요:



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

- Interfaces를 사용하는 경우:

  - 오브젝트나 클래스와 작업할 때
  - 오브젝트가 지켜야 하는 계약을 정의할 때
  - 오브젝트 정의를 확장하거나 병합해야 할 때

- Types를 사용하는 경우:
  - 오브젝트를 포함한 모든 종류의 타입 정의를 생성할 때
  - 유니언, 교차 또는 기본형과 작업할 때
  - 타입 생성에서 최대 유연성이 필요할 때

# 결론

TypeScript에서의 인터페이스와 타입의 차이는 분명합니다: 인터페이스는 오브젝트 형태를 설명하는 데 특화되어 있고, 타입은 모든 종류의 타입 정의에 대해 더 큰 유연성을 제공합니다. 이 기본적인 차이를 이해하면 TypeScript 프로젝트에서 보다 정보를 얻고 더 나은 결정을 내릴 수 있습니다.

인터페이스는 클래스 기반 시나리오에서 뛰어나며, 오브젝트 구조의 일관성을 보장해야 하는 경우에 유용합니다. 타입은 그들의 다양성으로 인해 복잡한 정의와 다양한 데이터 구조에 대한 가독성 향상에 필요한 도구입니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

마지막으로, 클래스와 타입을 제한하는 데 인터페이스를 사용하고 그 외에는 거의 모든 것에 인터페이스를 사용해야 합니다. 이렇게 하면 더 표현력이 뛰어나고 유지보수하기 쉽고 견고한 TypeScript 코드를 작성할 수 있습니다. 기억하세요, 이 도구들을 사용하여 시간이 지나도 유지할 수 있는 명확하고 자기 설명적인 코드를 작성하는 것이 목표입니다.

TS Types와 Interfaces를 사용하는 방법 및 시기

![image 1](/TIL/assets/img/2024-07-02-ItsnotjustyouNextjsisgettinghardertouse_0.png)

이전에 언급한 것처럼, Next.js 미들웨어를 사용하면 서버 컴포넌트가 부과한 일부 제한을 해결하는 데 유용할 수 있다는 블로그 글을 썼어요. 이에 대한 토론으로 인해 Next.js 개발 경험이 좋지 않다는 의견이 나왔어요.

![image 2](/TIL/assets/img/2024-07-02-ItsnotjustyouNextjsisgettinghardertouse_1.png)

저의 관점에서, Next.js 의 앱 라우터에는 채택하기 어렵게 만드는 두 가지 주요 문제가 있어요:



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

- 보통 기초적인 작업을 하려면 내부 동작에 대해 많은 것을 이해해야 합니다.
- 옵트인(opt-in)이 아닌 옵트아웃(opt-out)인 방식으로 발을 쏘기 쉬운 많은 방법이 있습니다.

더 잘 이해하려면, 이전 버전인 Pages Router를 살펴보겠습니다.

# Pages Router 간단히 살펴보기

Next.js에 대해 처음 알게 되었을 때, 주요 "경쟁자"는 Create React App (CRA)였습니다. 나는 모든 프로젝트에 CRA를 사용했지만 두 가지 이유로 Next.js로 전환했습니다:



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

- 파일 기반 라우팅이 마음에 들었어요. 왜냐하면 보일러플레이트 코드를 적게 작성할 수 있어서요.
- 개발 서버를 실행할 때마다 CRA는 빠르게 짜증나는 http://localhost:3000을 열었는데, Next.js는 그렇지 않았어요.

두 번째 이유는 조금 어리석게 들릴 수 있지만, 나에게는 Next.js가 였어요:

더 나은 기본 설정이 있는 React.

그리고 그게 내가 정말 원했던 것이었어요. 후에 Next.js가 갖고 있는 다른 기능을 발견했을 때에는 꽤 놀랐어요. API 라우트는 추가 인프라를 설정할 필요 없이 서버리스 함수를 제공해주어서 "Contact Us" 양식 같은 것을 만드는 것에 아주 유용했어요. getServerSideProps를 사용하면 페이지가 로드되기 전에 서버에서 기본 함수를 실행할 수 있었어요.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

그 개념들은 강력하지만 동시에 간단하기도 했어요.

API route는 다른 라우트 핸들러와 매우 비슷하게 보였고 동작했어요. Express나 Cloudflare Workers를 사용해봤다면 라우트 핸들러를 자세히 보면 이미 알고 있던 개념들이 그대로 적용돼 있는 걸 느낄 수 있어요. getServerSideProps는 약간 다르긴 했지만, 한번 요청을 받는 방법과 응답 형식을 이해하면 꽤 간단한 거라는 걸 알게 되었어요.

# 앱 라우터 릴리스

Next 13 릴리스에서는 앱 라우터를 도입했고 많은 새로운 기능들이 추가됐어요. 서버 컴포넌트를 사용하면 React 컴포넌트를 서버에서 렌더링하고 클라이언트에 전달해야하는 데이터 양을 줄일 수 있어요.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

레이아웃은 여러 경로에서 공유되는 UI의 측면을 정의할 수 있어서 매번 탐색할 때마다 다시 렌더링할 필요가 없었습니다.

캐싱 기능이... 더욱 정교해졌습니다.

이러한 기능들이 흥미로웠지만, 가장 큰 손실은 간단함이었습니다.

# 프레임워크가 생각했던대로 동작하지 않을 때



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

개발자로서 머리를 벽에 쿵쿵 치며 "왜 이게 작동하지 않지?" 하고 외치는 것은 상당히 보편적인 경험입니다.

모두가 다 그런 적이 있고, 항상 짜증이 납니다. 제 경우, 코드에 버그가 아니라 어떻게 작동해야 하는지 잘 몰랐을 때가 더 고통스러웠습니다.

이제 더 이상 "왜 이게 작동하지 않지?" 라고 말하지 않고, "왜 이게 저렇게 작동하지?" 라고 이제 말할 것입니다.

앱 라우터는 안타깝게도 이러한 섬세한 점들로 가득합니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

내 원래 문제를 다시 살펴보겠어요: 서버 컴포넌트에서 URL을 얻고 싶었어요. 주제에 대한 인기 있는 Github 이슈에 대한 답변을 준비했는데, 그 중 일부를 여기에 올려볼게요:

이 응답은 정말 대단하다고 생각해요. 잘 쓰여졌고, 많은 기본적인 문제들을 이해하는데 도움이 되며, 저는 전혀 고려하지 못한 다양한 접근 방식과 관련된 절충안에 대한 통찰력을 얻게 되었어요.

하지만 말해야 할 한 가지는, 개발자이고 서버 컴포넌트에서 URL을 얻으려는 것이라면, 아마도 이것을 읽은 후에 아마도 코드를 다시 구조화해야 한다는 것을 깨달을 때까지 5가지 더 찾아보고 있을 것이라는 것이죠.

이 글은 나의 느낌을 요약한 것 같아요:



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

![image](/TIL/assets/img/2024-07-02-ItsnotjustyouNextjsisgettinghardertouse_2.png)

그것이 반드시 잘못된 것은 아니라는 점을 유의하십시오.

원문에는 몇 가지 미묘한 점도 언급되어 있습니다. 하나의 보편적인 함정은 쿠키 처리 방식에 있습니다. 어디에서든 cookies().set("key", "value")를 호출할 수 있고 이것은 타입 체크가 가능하지만, 일부 경우에는 런타임에서 실패할 수 있습니다.

서버에서 거의 모든 것을 할 수 있었던 "옛" 방식과 비교하면, 복잡성이 증가했다고 말할 수 있습니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

제가 말씀드리고 싶은 것은 "기본으로 켜진 캐싱"은 다소 거친 경험이라는 점입니다. 많은 사람들이 캐싱에 동의하기를 기대하는 것이 오히려 캐싱 비활성화 방법을 찾기 위해 많은 문서를 살펴야 한다고 생각합니다.

다른 회사들도 우리와 유사한 문제를 겪었을 거라고 확신합니다. PropelAuth에서 종종 버그 신고를 받는데, 그것들은 실제로 버그가 아니라 "API 호출을 한 줄로 생각했지만 실제로는 호출하지 않았고, 캐시된 결과만 읽고 있는 것"이라고 할 수 있습니다.

그리고 이 모든 것은 다시 한 번 질문을 던집니다. 이러한 기능과 최적화는 과연 누구를 위한 것인가요?

# 모두에게 맞는 제품을 만드는 것은 매우 어려운 일입니다



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

너가 너무 복잡하다고 느끼는 기능들은 실제로 몇몇 사람에겐 중요할 수 있어요. 예를 들어 전자상거래 플랫폼을 개발 중이라면, 이 기능들이 정말 유용할 거예요.

작은 양의 데이터를 클라이언트에 전달하기 때문에 페이지가 빨리 로드됩니다. 모든 것이 강력하게 캐시되어 있어 페이지가 빨리 로드됩니다. 사용자가 새로운 페이지로 이동할 때 페이지의 일부만 다시 렌더링해야 하기 때문에 페이지가 더 빨리 로드됩니다. 전자상거래 세계에서 페이지가 빠르게 로드될수록 더 많은 수익이 발생하니, 이런 기능들을 위해 좀 더 복잡한 프레임워크를 사용하겠죠.

하지만 SaaS 애플리케이션용 대시보드를 개발 중이라면… 이런 부분에 별로 신경 쓰지 않을 거예요. 기능을 빠르게 출시하는 속도를 더 중요하게 생각하고, 복잡성은 개발 팀에 부담이 될 거예요.

제 개인적인 경험과 App Router에 대한 답답함은 다른 사람의 것과 다를 수 있어요. 제품, 사용 사례, 그리고 리소스가 모두 다르기 때문이에요. B2B SaaS 애플리케이션을 많이 작성하고 다른 사람들이 그것을 작성할 때 도와주는 사람으로서 말씀드리면, App Router DX는 Pages Router보다 한 단계 아래 수준이에요.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

# 프레임워크가 성장함에 따라 불가피한가요?

제품/프레임워크가 성장하면 복잡해지는 경향이 있습니다. 고객들이 더 많은 것을 요청합니다. 대규모 고객들은 더 구체적인 것을 요청합니다. 대규모 고객들이 더 많은 금액을 지불하기 때문에 특정 기능을 우선적으로 개발합니다.

이전에 모든 것의 간단함을 좋아했던 고객들은 일부 복잡한 점을 다루어야 한다고 느끼기 시작하고... 오, 보세요, 더 간단한 새로운 프레임워크가 나타났네요. 우리는 그것으로 모두 변경해야 합니다!

이러한 상황을 피하는 것은 어려울 수 있지만, 일부 사람들이 필요로 하는 복잡성을 모두의 문제로 만들지 않는 방법 중 하나입니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

# 그저 뭔가가 추천된다고 해서, 그게 당신에게 맞는 것은 아니라는 뜻은 아니에요

앱 라우터를 사용함에 있어서 제가 겪은 가장 큰 문제 중 하나는 딱 이거였어요:

![이미지](/TIL/assets/img/2024-07-02-ItsnotjustyouNextjsisgettinghardertouse_3.png)

Next.js는 제품으로 충분히 준비되기 전부터 공식적으로 앱 라우터를 사용할 것을 권장해 왔어요. Next.js는 TypeScript, ESLint, Tailwind가 프로젝트에 적합한지 여부에 대한 권장사항을 갖고 있지 않아요 (TS/ESLint에는 기본 값으로 Yes, Tailwind에는 No를 제공하지만, Tailwind 팬들에게는 죄송합니다). 그러나, Next.js는 분명히 당신이 앱 라우터를 사용해야 한다고 믿고 있어요.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

공식 React 문서는 같은 의견을 공유하지 않습니다. 현재 그들은 페이지 라우터를 권장하고 앱 라우터를 "최신형 React 프레임워크"로 설명하고 있습니다.

그 렌즈를 통해 앱 라우터를 바라볼 때, 더 많은 의미를 부여할 수 있습니다. React에 대한 권장 기본값으로 생각하는 대신, 베타 릴리스로 생각할 수 있습니다. 사용 경험이 더 복잡해지며, 몇 가지 쉬웠던 것들이 지금은 어려워지거나 불가능해졌습니다. 하지만 "최신형"인 것으로부터 무엇을 기대하겠습니까?

따라서 다음 프로젝트를 위해 프레임워크를 선택할 때, 앱 라우터에는 여전히 많은 가공되지 않은 점이 있음을 인식하는 것이 중요합니다. 당신의 사용 사례에 더 적합한 다른 도구를 찾는 것이 더 나은 결과를 가져올 수도 있습니다.

Nextjs 사용이 점점 더 어려워지는 이유

TypeScript와 함께 작업할 때 정직이 최선의 정책인 이유  거짓말의 대가

## Next.js, Tailwind CSS, 및 Swiper를 사용하여 썸네일 슬라이더 만들기 단계별 가이드

썸네일은 더 큰 이미지의 작은 이미지 표현입니다.

썸네일 슬라이더는 클릭할 수 있는 주요 이미지와 그 아래 일련의 썸네일을 포함하는 슬라이더입니다.

위 내용을 기반으로, Next.js, Tailwind CSS, 및 Swiper를 사용하여 자체 썸네일 슬라이더를 만드는 것을 시작해보겠습니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

# 프로젝트 설정

우선, 새로운 Next.js 프로젝트를 설정해보세요. 터미널을 열고 다음 명령어를 실행하세요:

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

그런 다음에 뒤이어 나오는 프롬프트에 답변하세요. 내 개인적인 답변은 각 줄의 괄호 안에 있습니다. "Tailwind CSS"에 대해 "Yes"로 선택하는 것을 잊지 마세요.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

```js
프로젝트의 이름은 무엇인가요? my-app (thumbnail-slider)

TypeScript를 사용하시겠습니까? 아니요 / 예 (예)

ESLint를 사용하시겠습니까? 아니요 / 예 (예)

Tailwind CSS를 사용하시겠습니까? 아니요 / 예 (예)

`src/` 디렉토리를 사용하시겠습니까? 아니요 / 예 (아니요)

App Router를 사용하시겠습니까? (권장) 아니요 / 예 (예)

기본 import 별칭 (@/*)을 사용자 정의하시겠습니까? 아니요 / 예 (아니요)
```

다음으로, 프로젝트 디렉토리에 들어간 후에 Swiper를 설치하세요.

```js
npm install swiper
```

# 썸네일 슬라이더 구축하기



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

이제 Thumbnail Slider를 구축하기 위한 필수 구성 요소를 생성해 봅시다.

- 프로젝트 디렉토리에 components라는 새 디렉토리를 만듭니다.
- components 디렉토리 내부에 ThumbnailSlider.tsx 또는 .jsx라는 새 파일을 만듭니다(typescript를 사용하지 않는 경우).

## 필수 구성 요소 가져오기

swiper에 필요한 가져오기를 추가하는 것부터 시작해 봅시다. 아래 코드를 그대로 복사하세요:



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

```js
"use client";

import React, { useState } from "react";
import Image from "next/image";

// Swiper React 컴포넌트 가져오기
import { Swiper, SwiperSlide } from "swiper/react";

// Swiper 유형 가져오기
import { Swiper as SwiperType } from "swiper";

// Swiper 스타일 가져오기
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/thumbs";

// 필요한 모듈 가져오기
import { Thumbs } from "swiper/modules";
```

설명:

- 컴포넌트 가져오기: Swiper 및 SwiperSlide는 Swiper 라이브러리의 React 모듈에서 가져옵니다. 이러한 컴포넌트는 캐러셀/슬라이더와 개별 슬라이드를 만들고 관리하는 데 사용됩니다.
- 유형 가져오기: Swiper as SwiperType은 TypeScript 유형 안전성을 위해 가져옵니다. 이를 통해 적절한 코드 지원과 오류 확인이 가능합니다.
- 스타일 가져오기: Swiper CSS 파일을 가져와서 캐러셀에 필요한 중요한 스타일을 적용합니다. 이는 네비게이션 버튼 및 썸네일 네비게이션을 포함합니다.
- Thumbs 모듈: Thumbs는 "swiper/modules"에서 가져온 것입니다. 이 모듈은 Swiper 슬라이더의 썸네일 네비게이션 기능을 제공합니다.

## 개별 컴포넌트 생성하기



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

이제 썸네일 슬라이더 컴포넌트를 만들어볼 차례에요. 슬라이더 컴포넌트와 썸네일 컴포넌트와 함께 만들 것인데요, 이들은 한 컴포넌트에 모은 코드양을 줄이기 위해 분리되어 있어요.

```js
const ThumbnailSlider = ({ images }: { images: string[] }) => {
  return (
    // 메인 슬라이더와 썸네일 슬라이더를 담는 컨테이너
    <div className="w-4/5 h-4/5 flex flex-col gap-4">
      <Slider images={images} /> {/* 메인 이미지 슬라이더 */}
      <Thumbnail images={images} /> {/* 썸네일 내비게이션 슬라이더 */}
    </div>
  );
};

const Slider = ({ images }: { images: string[] }) => {
  return (
    // 메인 이미지 슬라이더 컴포넌트
    <div className="w-full h-full flex-1 overflow-hidden">
      <Swiper className="h-full" grabCursor loop>
        {/* 각 이미지 슬라이드를 만들기 위해 이미지를 반복합니다. */}
        {images.map((image, index) => (
          <SwiperSlide key={index}>
            <div className="relative w-full h-full">
              {/* 각 슬라이드의 이미지 컴포넌트 */}
              <Image
                src={image}
                alt="slide"
                fill
                className="object-cover"
                sizes="70vw"
                priority={index === 0 && true} // 첫 번째 이미지가 우선적으로 로드되도록 합니다.
              />
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
};

const Thumbnail = ({ images }: { images: string[] }) => {
  return (
    // 썸네일 내비게이션 슬라이더 컴포넌트
    <div className="relative flex gap-2 justify-center h-14">
      <Swiper className="w-2/4 h-full" loop slidesPerView={4} spaceBetween={8}>
        {/* 각 썸네일을 만들기 위해 이미지를 반복합니다. */}
        {images.map((image, index) => (
          <SwiperSlide
            key={index}
            className="rounded-md cursor-pointer border-[3px] border-solid border-transparent overflow-hidden"
          >
            <div className="relative w-full h-full">
              {/* 썸네일 이미지 컴포넌트 */}
              <Image src={image} alt="thumbnail" fill className="object-cover" sizes="100px" />
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
};

export default ThumbnailSlider;
```

## 슬라이더와 썸네일 컴포넌트 연결하기

여기까지 오면 썸네일 슬라이더는 거의 완성되었어요. 유일한 문제는 현재 각각 따로 움직인다는 것이죠. 하지만 우리가 원하는 것은 이들이 연결된 것처럼 함께 움직이도록 하는 것입니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

이를 달성하기 위해 ThumbnailSlider 컴포넌트에 다음을 추가할 것입니다:

```js
const [thumbsSwiper, setThumbsSwiper] = (useState < SwiperType) | (null > null);
```

그런 다음 이를 Slider 및 Thumbnail 컴포넌트로 props로 전달하세요.

```js
<Slider images={images} thumbs={ thumbsSwiper, setThumbsSwiper } />
<Thumbnail images={images} thumbs={ thumbsSwiper, setThumbsSwiper } />
```



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

물론, Slider 및 Thumbnail 컴포넌트에 새로운 속성(props)을 전달하고 있기 때문에 해당 코드를 업데이트해야 합니다.

Typescript를 사용 중이라면, 다음과 같이 타입 안전성을 위한 인터페이스를 붙여넣으세요:

```js
interface SliderProps {
  images: string[];
  thumbs: {
    thumbsSwiper: SwiperType | null,
    setThumbsSwiper: React.Dispatch<React.SetStateAction<SwiperType | null>>,
  };
}
```

이제 정의한 상태를 사용하도록 Slider 및 Thumbnail 컴포넌트를 편집해 보겠습니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

슬라이더 컴포넌트에서 다음 작업을 수행하십시오:

```js
const Slider = ({ images, thumbs }: SliderProps) => {
  const { thumbsSwiper } = thumbs;

  return (
    <div className="w-full h-full flex-1 overflow-hidden">
      {/* 이미지 슬라이더용 주 스와이퍼 컴포넌트 */}
      <Swiper
        className="h-full"
        grabCursor
        loop

        thumbs={{ swiper: thumbsSwiper }} // 메인 슬라이더를 썸네일 싱크를 위해 썸네일 스와이퍼에 연결
        modules={[Thumbs]} // 썸네일 탐색을 위해 Thumbs 모듈을 활성화
      >
       // 이전 코드를 여기에 추가하세요...
      </Swiper>
    </div>
```

썸네일 컴포넌트에서 다음 작업을 수행하십시오:

```js
const Thumbnail = ({ images, thumbs }: SliderProps) => {
  const { setThumbsSwiper } = thumbs;

  return (
    <div className="relative flex gap-2 justify-center h-14">
      {/* 썸네일 탐색용 스와이퍼 컴포넌트 */}
      <Swiper
        className="w-2/4 h-full"
        loop
        slidesPerView={4} // 한 뷰 당 썸네일 수
        spaceBetween={8} // 썸네일 간 간격
        onSwiper={setThumbsSwiper} // 컴포넌트가 마운트될 때 썸네일 스와이퍼 설정
        freeMode // 스냅 포인트 없이 자유롭게 슬라이딩 허용
        watchSlidesProgress // 썸네일의 슬라이드 진행 상황을 감시
      >
        // 이전 코드를 여기에 추가하세요...
      </Swiper>
    </div>
  );
};
```



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

## 활성 썸네일 요소 스타일링

지금은 섬네일 슬라이더가 제대로 작동해야 하지만, 현재 활성화된 썸네일을 강조하고 싶다면 globals.css 파일을 /app 디렉토리에서 열어서 다음 CSS 코드를 추가할 수 있어요:

```js
.swiper-slide-thumb-active {
    border-color: black;
}
```

## 썸네일 슬라이더 컴포넌트 사용하기



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

최종적으로 코드에서 썸네일 슬라이더를 사용하려면 간단히 가져와서 다음과 같이 호출하면 됩니다:

```js
import ThumbnailSlider from "@/components/ThumbnailSlider";

export default function Home() {
  return (
    <main className="w-full h-screen flex items-center justify-center">
      <ThumbnailSlider images={images} />
    </main>
  );
}
```

썸네일 슬라이더가 작동하려면 이미지 URL을 나타내는 문자열 배열을 제공해야 합니다. 아래는 그 예시입니다:

```js
// 별칭을 사용하여 components 디렉토리에서 ThumbnailSlider 컴포넌트 가져오기
import ThumbnailSlider from "@/components/ThumbnailSlider";

// 홈 페이지를 위한 기본 함수 컴포넌트
export default function Home() {
  // 동적으로 생성된 이미지 URL 배열
  const images = Array(4)
    .fill(null)
    .map((_, index) => `/random/image (${index + 1}).png`);

  // 주요 콘텐츠 영역 렌더링
  return (
    <main className="w-full h-screen flex items-center justify-center">
      {/* 동적으로 생성된 이미지를 사용하여 ThumbnailSlider 컴포넌트 렌더링 */}
      <ThumbnailSlider images={images} />
    </main>
  );
}
```



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

위 글을 읽어주셔서 정말 감사합니다! 😊
만약 이 글이 도움이 되었다면 반드시 박수를 치고 팔로우해주세요! 👏

Nextjs에서 Tailwind와 Swiper로 썸네일 슬라이더 만드는 방법


![image](/TIL/assets/img/2024-07-02-ComicHowAddingRemovingStuffFromHeapsWork_0.png)

# 간단한 소개

힙(heap)은 우선순위 큐(priority queue)의 구현 방식입니다. 힙에서는 우선 순위가 가장 높은 요소가 먼저 나갑니다. 우선 순위는 다음과 같이 정의될 수 있습니다:

- 최대 힙(max heap)의 경우 가장 큰 숫자가 먼저 나갑니다.
- 최소 힙(min heap)의 경우 가장 작은 숫자가 먼저 나갑니다.


Posts