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)의 경우 가장 작은 숫자가 먼저 나갑니다.


코믹 힙에서 요소 추가 및 제거 과정 이해하기

Jupyter Lab IDE에서 Typescript, LangChainjs, Ollama를 사용하여 AI 프로토타입 환경 빠르게 구축하는 방법


이건 저의 AI 수업을 위해 준비한 자료의 마지막 부분 (4/4)입니다. 처음 3부분은 아래에 있어요.


AI와 함께하는 프로그래밍  Vision LLMs 사용법


물리학에서, 세 개체 문제는 서로에게 인력을 끼치는 영향 아래 세 질량의 움직임을 예측하는 고전 역학의 유명한 문제입니다.

세 개체 문제를 악명 높게 만드는 것은 그 혼돈스러운 성격 때문에 해결하기 어렵다는 점입니다. 함께 말씀드리고 싶은 게 있습니다...


Python으로 삼체 문제를 시각적으로 시뮬레이션하는 방법

# 소개

진지한 Python 애플리케이션을 개발할 때는 종종 애플리케이션이 실행되는 위치에 따라 변경될 수 있는 구성 매개변수가 필요합니다. 환경 변수는 애플리케이션 코드를 변경하지 않고 설정을 조정할 수 있는 훌륭한 방법입니다. 환경 변수를 조정하기만 하면 되기 때문에 다시 빌드할 필요가 없습니다.

그러나 환경 변수를 사용하는 것은 자체적인 일련의 도전 과제를 수반합니다. 이러한 변수가 유효하고 일관성 있게 유지되도록 보장해야 하며 그렇지 않으면 실행 중에 애플리케이션 실행에 실패할 위험이 있습니다. 일반적으로 이 값들을 유효성 검사하기 위해 사용자 정의 코드를 작성해야 하는데, 이는 지루하고 실수를 유발할 수 있습니다. 가끔은 개발자들이 유효성 검사를 건너뛰고 최선을 다하길 희망하기도 하는데, 이는 재앙을 불러올 수 있는 결과입니다.

Pydantic Settings를 소개합니다 — Python 애플리케이션에서 구성 관리를 간편화하는 훌륭한 도구입니다. Pydantic Settings를 사용하면 Pydantic의 데이터 유효성 확인 기능을 활용하여 환경 변수를 읽고 검증할 수 있습니다. 이를 통해 애플리케이션이 항상 올바른 구성을 얻게 되어 실행 중 오류의 위험을 줄이고 개발자로서의 생활을 훨씬 쉽게 만들어 줍니다.



<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 키 및 기타 환경별 변수에 대한 설정이 필요합니다. 이러한 설정은 특히 다른 환경(개발, 테스트, 프로덕션)에 애플리케이션을 배포할 때 안전하고 효율적으로 관리되어야 합니다.

응용 프로그램 내에서 이러한 설정을 하드코딩하는 것은 안전 취약점을 유발할 수 있고 다중 환경에서 설정을 관리하기 어렵게 만들 수 있기 때문에 이상적이지 않습니다. 여기서 Pydantic Settings이 등장하여 구성을 처리할 구조화된 안전한 방법을 제공합니다.

## 예시 — .env와 함께



<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>

Pydantic Settings은 환경 변수 또는 .env 파일에서 구성을 로드하는 과정을 쉽게 만들어줍니다. 이 작업이 어떻게 이루어지는지 예시를 살펴보도록 하겠습니다.

먼저 Pydantic을 설치해야 합니다:

```js
pip install pydantic_settings
```

다음으로 프로젝트 디렉토리에 다음 내용을 가진 .env 파일을 만들어주세요:



<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
DATABASE_URL=postgresql://user:password@localhost:5432/mydatabase
API_KEY=your_api_key_here
DEBUG=True
```

이제 Pydantic을 사용하여 설정 모델을 정의하는 settings.py 파일을 생성해봅시다:

```js
from pydantic_settings import BaseSettings

class Settings(BaseSettings):
    database_url: str
    api_key: str
    debug: bool

    class Config:
        env_file = ".env"

settings = Settings()
```

Settings 클래스를 통해 database_url, api_key, debug와 같은 예상 구성 변수를 정의합니다. Settings 내부에 중첩된 Config 클래스는 이러한 변수가 .env 파일에서 로드되어야 함을 지정합니다.



<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>

```python
환경 설정에서 settings 모듈을 불러와주세요.

다음은 settings 모듈 값을 출력한 것입니다:
- 데이터베이스 URL: postgresql://user:password@localhost:5432/mydatabase
- API 키: your_api_key_here
- 디버그 모드: True

만약 .env 파일에서 디버그 값을 불리언(Boolean)이 아닌 다른 값으로 설정하면, 위 코드는 유효성 오류를 발생시킬 것입니다.

예를 들어, .env 파일에서 DEBUG 값을 xyz로 변경한 후 프로그램을 다시 실행하면 다음과 같습니다:

```



<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
pydantic_core._pydantic_core.ValidationError: Settings에 대한 1개의 유효성 검사 오류
debug
  입력은 유효한 부울(boolean)이어야 하며, 입력값 [type=bool_parsing, input_value='xyz', input_type=str]을 해석할 수 없습니다.
    자세한 정보는 https://errors.pydantic.dev/2.7/v/bool_parsing 를 참조해주세요.
```

그리하여 데이터 유효성 검사를 무료로 받을 수 있습니다. 이를 통해 pydantic BaseModel로 수행할 수 있는 모든 검사를 수행할 수 있습니다.

중첩된 예제



<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>

설정을 중첩 모델로 관리할 수도 있습니다. 예를 살펴보세요. .env 파일을 정의하는 방법과 Settings 모델이 최종 구성을 생성하기 위해 다른 모델들을 사용하는 것을 주목해주세요. 멋지죠!

```js
# 당신의 .env 파일
V0=0
SUB_MODEL='{"v1": "json-1", "v2": "json-2"}'
SUB_MODEL__V2=nested-2
SUB_MODEL__V3=3
SUB_MODEL__DEEP__V4=v4
```

```js
from pydantic import BaseModel

from pydantic_settings import BaseSettings, SettingsConfigDict


class DeepSubModel(BaseModel):
    v4: str


class SubModel(BaseModel):
    v1: str
    v2: bytes
    v3: int
    deep: DeepSubModel # .env will have __DEEP__ to pass configs to DeepSubModel


class Settings(BaseSettings):
    v0: str
    sub_model: SubModel

    class Config(SettingsConfigDict):
        env_nested_delimiter = "__"


print(Settings().model_dump())
"""
{
    'v0': '0',
    'sub_model': {'v1': 'json-1', 'v2': b'nested-2', 'v3': 3, 'deep': {'v4': 'v4'},
}
"""
```

중첩 접근 방식을 사용하면 애플리케이션 구성 및 유효성 검사 논리를 보다 쉽게 분리할 수 있습니다.



<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>

# 결론

중첩 구성을 사용하여 Pydantic 설정을 활용하면 애플리케이션 설정을 더 효과적으로 구성할 수 있습니다. 이 구조는 애플리케이션이 성장함에 따라 설정을 관리하고 유지하는 것이 더 쉬워집니다. Pydantic의 강력함을 활용하면 타입 안전성과 기본 유효성 검사를 제공받아 구성 오류의 위험을 줄일 수 있습니다.

파이썬 애플리케이션을 간소화하고 싶나요? 저희에게 https://kubeops.consulting/에서 연락해보세요. 저희 팀은 파이썬 애플리케이션을 작성하고 확장하는 데 특화되어 있습니다.

Posts