Swagger 문서를 React (Next.js)에서 활용하기(1)

별빛사막·2025년 1월 10일

0. 전처리

Swagger 문서 생성: Spring Doc을 사용해 Swagger 문서를 생성하고, 이를 JSON 파일로 저장한다.
~~→ 파일 저장 관련된 코드는 ChatGPT에 물어보자~~
TypeScript 변환: Swagger JSON 파일을 TypeScript로 변환하여 타입 정보를 생성한다.

npx --package typescript --package openapi-typescript --package punycode openapi-typescript apiV1.json -o schema.d.ts

Next.js에서 활용: 변환된 타입 정보를 Next.js에서 사용하여 API 호출 시 타입 검증을 한다.

1. 테일윈드

[개념]

유틸리티 기반 CSS 프레임워크로, HTML 클래스 이름만으로 스타일을 정의할 수 있다.
특히 백엔드 개발자에게 유용한 이유는 복잡한 CSS 작성 없이 직관적으로 스타일링할 수 있기 때문이다. ~~css 프레임워크 1순위라고 여겨짐~~

[배운 내용]

클래스 이름(className) 사용
- 테일윈드는 기본적으로 HTML의 class 속성을 사용한다.
- 그러나 React(JSX) 환경에서는 class 대신 className을 사용해야 한다.
  이유는 class가 JavaScript의 예약어이기 때문에 혼동을 피하기 위해서이다.

function App() {
    return <div className="bg-gray-100 p-4 text-center">Hello, Tailwind!</div>;
}

컬러와 임의문법(Arbitrary Syntax)

 bg-gray-100 //테일윈드에 정의된 색상 사용.
 bg-[#454585] //RGB 코드를 사용하여 사용자 정의 색상을 적용.

HTML 구조 및 적용 범위

테일윈드의 스타일은 body 태그 안에 있는 요소에만 적용된다.
HTML 구조가 잘못되면 스타일이 제대로 동작하지 않을 수 있다.

높이 관련

min-h-[100dvh] // 최소 높이를 디바이스 뷰포트 높이로 설정. 내용에 따라 더 커질 수 있다.
h-[100dvh] //고정 높이를 디바이스 뷰포트 높이로 설정.

비동기 처리와 async/await

await 키워드는 반드시 async 함수 안에서만 사용할 수 있다.
async를 사용하면 해당 함수는 항상 Promise를 반환한다.
React에서 API 호출이나 느린 코드는 비동기 함수와 await를 활용해 처리한다.

async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
}

2. 자바스크립트 단점

컴파일러의 한계
- 자바스크립트는 동적 타입 언어로, 변수 선언 시 타입 검사를 하지 않는다.
- 변수명을 잘못 입력해도 컴파일 단계에서 에러를 발생시키지 않고, 런타임에서만 문제가 드러난다.

     let num = 10;
     console.log(numm); // ReferenceError: numm is not defined

자동완성 기능 부족
- 타입이 명확하지 않으면 IDE가 변수를 정확히 추론하지 못해 자동완성 기능이 제한적이다.
- 예를 들어, 아래 코드에서는 item.id가 자동완성되지 않는다.

     const items = [{ id: 1, name: "item1" }, { id: 2, name: "item2" }];
     items.map((item) => console.log(item.id)); // 자동완성 미지원

이를 보완하기 위해 타입스크립트(TypeScript)를 사용하면 타입을 정의해 자동완성 기능을 강화할 수 있다.

3. CSS FLEX 문법

기본 문법
display: flex;를 사용하여 플렉스 컨테이너를 선언한다.

display: flex; /* 플렉스 컨테이너 선언 */
flex-direction: row; /* 기본 방향: 가로 */
justify-content: center; /* 가로 정렬 */
align-items: center; /* 세로 정렬 */

주요 속성

flex-direction
- 플렉스 아이템의 정렬 방향을 설정한다.
  - row (기본값): 왼쪽에서 오른쪽으로 정렬.
  - row-reverse: 오른쪽에서 왼쪽으로 정렬.
  - column: 위에서 아래로 정렬.
  - column-reverse: 아래에서 위로 정렬.
```
flex-direction: column;
```
justify-content
- 가로 방향(주축)의 정렬 방식을 설정한다.
  - flex-start (기본값): 왼쪽 정렬.
  - center: 중앙 정렬.
  - flex-end: 오른쪽 정렬.
  - space-between: 아이템 간 동일한 간격.
  - space-around: 아이템 간 동일한 간격 + 양쪽 패딩 추가.
  - space-evenly: 아이템 간 및 양쪽 패딩 동일 간격.
```
justify-content: space-between;
```
align-items
- 세로 방향(교차축)의 정렬 방식을 설정한다.
  - flex-start: 위쪽 정렬.
  - center: 중앙 정렬.
  - flex-end: 아래쪽 정렬.
  - stretch (기본값): 아이템의 크기를 컨테이너 높이에 맞춤.
  - baseline: 텍스트 기준선 정렬.
```
align-items: center;
```
flex-wrap
- 플렉스 아이템의 줄바꿈 여부를 설정한다.
  - nowrap (기본값): 줄바꿈 없이 한 줄에 정렬.
  - wrap: 아이템이 컨테이너 크기를 초과하면 줄바꿈.
  - wrap-reverse: 줄바꿈 시 아이템 순서를 반대로.
```
flex-wrap: wrap;
```

예제 코드

<div style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
    <div style="width: 50px; height: 50px; background: red;"></div>
    <div style="width: 50px; height: 50px; background: green;"></div>
    <div style="width: 50px; height: 50px; background: blue;"></div>
</div>