Project-hongsta(1)

SNS クローンアプリ開発(かいはつ) - 初期(しょき)設定(せってい)とTailwind CSS

🚀 プロジェクト初期(しょき)設定(せってい)

Viteでプロジェクト作成(さくせい)

Viteを使(つか)ってReact + TypeScriptプロジェクトを作成(さくせい)します。
高速(こうそく)な開発(かいはつ)サーバーとビルドツールです。

Vite를 사용해서 React + TypeScript 프로젝트를 생성합니다.
빠른 개발 서버와 빌드 툴입니다.

cd ~/Documents
npm create vite@6.5.0 hongsta
# React 선택
# TypeScript 선택
cd hongsta
npm install
npm run dev

Vite 장점: 빠른 HMR(Hot Module Replacement) + 최적화된 빌드

---

⚙️ 開発(かいはつ)環境(かんきょう)最適化(さいてきか)

ESLint 設定(せってい)

不要(ふよう)なエラーを無効(むこう)にして、開発(かいはつ)をスムーズにします。
未使用(みしよう)変数(へんすう)と型(かた)指定(してい)の警告(けいこく)をオフにします。

불필요한 에러를 비활성화해서 개발을 원활하게 합니다.
미사용 변수와 타입 지정 경고를 끕니다.

eslint.config.js

rules: {
  '@typescript-eslint/no-unused-vars': 'off',
  '@typescript-eslint/no-explicit-any': 'off',
}

TypeScript 設定(せってい)

開発(かいはつ)中(ちゅう)の厳(きび)しいチェックを一時的(いちじてき)に無効(むこう)にします。
プロトタイプ段階(だんかい)では柔軟(じゅうなん)な設定(せってい)が便利(べんり)です。

개발 중 엄격한 체크를 임시로 비활성화합니다.
프로토타입 단계에서는 유연한 설정이 편리합니다.

tsconfig.app.json & tsconfig.node.json

{
  "compilerOptions": {
    // "noUnusedLocals": true,
    // "noUnusedParameters": true,
  }
}

주의: 실제 프로덕션에서는 다시 활성화하는 것이 좋습니다

---

🎨 Tailwind CSS 設定(せってい)

インストールと設定(せってい)

Tailwind CSSでスタイリングを高速化(こうそくか)します。
Prettierプラグインでクラス名(めい)を自動(じどう)整理(せいり)できます。

Tailwind CSS로 스타일링을 빠르게 합니다.
Prettier 플러그인으로 클래스명을 자동 정리할 수 있습니다.

# Tailwind CSS 설치
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# Prettier + Tailwind 플러그인 설치
npm i -D prettier prettier-plugin-tailwindcss

Prettier 設定(せってい)

.prettierrc

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

자동 정렬: 저장 시 Tailwind 클래스가 알아서 순서대로 정렬됩니다

VS Code 拡張(かくちょう)機能(きのう)

Tailwind CSS IntelliSense をインストールします。
クラス名(めい)の自動(じどう)補完(ほかん)とプレビューが表示(ひょうじ)されます。

Tailwind CSS IntelliSense를 설치합니다.
클래스명 자동 완성과 미리보기가 표시됩니다.

---

📚 Tailwind CSS 核心(かくしん)概念(がいねん)

1. タイポグラフィ (Typography)

テキストのサイズ、色(いろ)、太(ふと)さを簡単(かんたん)に設定(せってい)できます。
基本的(きほんてき)なクラスだけ覚(おぼ)えれば十分(じゅうぶん)です。

텍스트 크기, 색상, 굵기를 쉽게 설정할 수 있습니다.
기본적인 클래스만 알아도 충분합니다.

{/* 타이포그래피 */}
<div className="text-xs text-red-500">매우 작은 텍스트</div>
<div className="text-sm text-[rgb(100,30,200)]">작은 텍스트</div>
<div className="text-lg font-bold">큰 텍스트 + 굵게</div>
<div className="text-xl font-extrabold">더 큰 텍스트</div>
<div className="text-2xl font-black">매우 큰 텍스트</div>
<div className="text-[13px]">커스텀 크기</div>

クラス	説明(せつめい)	크기
text-xs	極小(きょくしょう)	0.75rem (12px)
text-sm	小(しょう)	0.875rem (14px)
text-base	基本(きほん)	1rem (16px)
text-lg	大(だい)	1.125rem (18px)
text-xl	特大(とくだい)	1.25rem (20px)
text-2xl	超大(ちょうだい)	1.5rem (24px)

커스텀 값: text-[13px] 처럼 대괄호 안에 원하는 값 입력 가능

2. 背景色(はいけいしょく) (Background Color)

背景(はいけい)の色(いろ)を設定(せってい)します。
数字(すうじ)が大(おお)きいほど濃(こ)い色(いろ)になります。

배경 색상을 설정합니다.
숫자가 클수록 진한 색상이 됩니다.

{/* 배경색 */}
<div className="bg-amber-500">amber-500</div>
<div className="bg-blue-300">blue-300</div>
<div className="bg-red-700">red-700</div>

색상 범위: 50(가장 연함) ~ 950(가장 진함)

3. サイズ (Size)

高(たか)さ(h)と幅(はば)(w)を設定(せってい)します。
数字(すうじ)は4pxの倍数(ばいすう)です。

높이(h)와 너비(w)를 설정합니다.
숫자는 4px의 배수입니다.

{/* 사이즈 */}
<div className="h-20 w-full bg-blue-500">박스</div>
<div className="h-10 w-1/2 bg-red-500">반너비</div>
<div className="h-screen w-screen">전체 화면</div>

クラス	説明(せつめい)	크기
h-10	높이 10	2.5rem (40px)
h-20	높이 20	5rem (80px)
w-full	너비 100%	100%
w-1/2	너비 50%	50%
h-screen	화면 높이	100vh

4. 余白(よはく) (Spacing)

マージン(m)とパディング(p)を設定(せってい)します。
x軸(じく)、y軸(じく)別(べつ)に指定(してい)できます。

마진(m)과 패딩(p)을 설정합니다.
x축, y축 별로 지정할 수 있습니다.

{/* 여백 */}
<div className="mx-5 my-5 h-50 w-50 bg-red-400 px-5 py-5">
  <div className="h-full w-full bg-blue-400"></div>
</div>

クラス	意味(いみ)	설명
m-5	margin 全体(ぜんたい)	모든 방향 마진
mx-5	margin 左右(さゆう)	좌우 마진
my-5	margin 上下(じょうげ)	상하 마진
p-5	padding 全体(ぜんたい)	모든 방향 패딩
px-5	padding 左右(さゆう)	좌우 패딩
py-5	padding 上下(じょうげ)	상하 패딩

조합 가능: mt-4 mb-8 ml-2 mr-2 처럼 각 방향 개별 설정 가능

5. ボーダー (Border)

境界線(きょうかいせん)のスタイルを設定(せってい)します。
厚(あつ)さ、色(いろ)、角(かど)の丸(まる)みを調整(ちょうせい)できます。

테두리 스타일을 설정합니다.
두께, 색상, 모서리 둥글기를 조정할 수 있습니다.

{/* 보더 */}
<div className="m-5 rounded-md border-t-2 border-r-2 border-b-2 border-l-2 border-red-500">
  테두리
</div>

<div className="rounded-full border-4 border-blue-500">
  완전히 둥근 테두리
</div>

クラス	説明(せつめい)
border	기본 테두리 (1px)
border-2	2px 테두리
border-t-2	위쪽만 2px
rounded-md	중간 둥글기
rounded-full	완전히 둥글게

6. フレックスコンテナ (Flexbox)

要素(ようそ)を柔軟(じゅうなん)に配置(はいち)します。
方向(ほうこう)、整列(せいれつ)、間隔(かんかく)を簡単(かんたん)に制御(せいぎょ)できます。

요소를 유연하게 배치합니다.
방향, 정렬, 간격을 쉽게 제어할 수 있습니다.

{/* 플렉스 */}
<div className="flex flex-row items-start justify-evenly">
  <div className="h-10 w-10 border">1</div>
  <div className="h-20 w-10 flex-1 border">2</div>
  <div className="h-30 w-10 border">3</div>
  <div className="h-40 w-10 border">4</div>
</div>

クラス	説明(せつめい)
flex	플렉스 컨테이너 활성화
flex-row	가로 방향 배치
flex-col	세로 방향 배치
items-start	세로 정렬: 시작점
items-center	세로 정렬: 중앙
justify-evenly	가로 정렬: 균등 분배
justify-between	가로 정렬: 양 끝 배치
flex-1	남은 공간 모두 차지

---

📋 まとめ

Tailwind CSSの基本(きほん)クラスだけで、ほとんどのUIが作成(さくせい)できます。
IntelliSenseを使(つか)えば、クラス名(めい)を簡単(かんたん)に検索(けんさく)できます。

Tailwind CSS 기본 클래스만으로 대부분의 UI를 만들 수 있습니다.
IntelliSense를 사용하면 클래스명을 쉽게 찾을 수 있습니다.

핵심 6가지: Typography, Color, Size, Spacing, Border, Flexbox만 알면 80% 커버