React&Redux ✨ React - 스타일링 🌈

🌈 SCSS 개념 및 활용 노트 🌈

🎨 1. SCSS 개념

SCSS(Sassy CSS)는 Sass(Syntactically Awesome Stylesheets)의 문법 중 하나로, CSS와 호환되는 확장된 문법을 제공해. SCSS는 CSS보다 더 강력한 기능(⭐️ 변수, 🌿 중첩, 💡 재사용 등)을 지원하여 스타일링 작업을 효율적이고 유지보수하기 쉽게 만들어준다.

🌟 SCSS의 장점:

• 💾 코드 재사용성 증가
• 🧹 유지보수 용이
• 👀 가독성 높은 구조화된 코드
• 🏗️ 복잡한 CSS 관리 용이

---

🌟 2. SCSS 사용법

🎁 📌 변수 선언 및 사용 방법

변수는 $ 기호를 사용하여 선언해. 이를 통해 색상, 글꼴 크기 등의 값을 재사용할 수 있어.

// 🌈 변수 선언
$primary-color: #ff6b6b;
$secondary-color: #6bffb3;
$font-size-large: 20px;

// 🎨 변수 사용
.button {
  background-color: $primary-color;
  color: $secondary-color;
  font-size: $font-size-large;
}

🌟 🎨 다양한 데이터 타입별 변수 사용 예시

1. 🎨 색상(Color)

$main-bg-color: #ffeaa7;
$text-color: #2d3436;

1. 📏 숫자(Number)

$padding: 25px;
$border-radius: 15px;

1. ✍️ 문자열(String)

$font-family: 'Poppins', sans-serif;

1. 🔒 불린(Boolean)

$is-rounded: true;

1. 📝 리스트(List) & 맵(Map)

$font-sizes: 14px, 18px, 24px;
$colors: (
  primary: #ff7675,
  secondary: #74b9ff
);

---

🌿 3. SCSS 중첩 규칙 이해 및 활용

🍃 기본 중첩 규칙 예시

.navbar {
  background-color: $primary-color;
  ul {
    list-style: none;
    li {
      display: inline-block;
      a {
        color: $secondary-color;
        text-decoration: none;
        &:hover {
          color: #ff9ff3;
        }
      }
    }
  }
}

🏗️ 복잡한 CSS 구조에서 중첩을 통한 코드 간결화 예시

.card {
  border: 1px solid #dfe6e9;
  background: linear-gradient(135deg, #81ecec, #74b9ff);
  .header {
    font-weight: bold;
    color: #2d3436;
    .title {
      font-size: 24px;
      color: #ff7675;
    }
  }
  .content {
    padding: 15px;
    color: #636e72;
  }
}

⚖️ 중첩 사용 시 발생하는 장단점

🌟 ✅ 장점:

• 💡 코드 가독성 향상
• 🗂️ 구조화된 스타일 작성 가능
• 📦 관련 스타일 그룹화

⚡ ⚠️ 단점:

• 🌪️ 과도한 중첩은 유지보수를 어렵게 함
• 🔍 너무 깊은 중첩은 CSS의 특성을 해칠 수 있음 (2~3단계 권장)

---

💎 4. SCSS 믹스인의 이해 및 활용

🧩 믹스인 선언 및 호출 방법

// 🌈 믹스인 선언
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 🎈 믹스인 호출
.container {
  @include flex-center;
  height: 100vh;
  background-color: #ffeaa7;
}

🎛️ 인자를 사용하는 믹스인의 활용법

@mixin button-style($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
  padding: 12px 24px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.button-primary {
  @include button-style(#55efc4, white);
}

.button-secondary {
  @include button-style(#ff7675, white);
}

✨ CSS → SCSS: 믹스인을 통한 코드 재사용성 향상 예시

🎨 기존 CSS 코드

.button-primary {
  background-color: #55efc4;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
}

.button-secondary {
  background-color: #ff7675;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
}

🌈 SCSS 코드로 변환 (믹스인 사용)

@mixin button-style($bg-color) {
  background-color: $bg-color;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  transition: all 0.3s ease-in-out;
}

.button-primary {
  @include button-style(#55efc4);
}

.button-secondary {
  @include button-style(#ff7675);
}

---

✨ SCSS 요약 ✨

🔥 기능 🌟 설명 💡 장점

🎨 SCSS 전반적인 개념	CSS와 호환되는 확장된 문법 제공. 변수, 중첩, 믹스인 등의 고급 기능 지원	코드 재사용성 증가, 유지보수 용이, 가독성 높은 코드
🎁 변수 사용법	$ 기호로 색상, 폰트, 간격 등의 값을 변수로 선언하여 재사용 가능	코드 중복 감소, 유지보수성 향상
🌿 중첩 규칙 이해 및 활용	부모-자식 관계의 스타일을 중첩하여 구조화된 코드 작성	가독성 향상, 관련 스타일 그룹화
💎 믹스인의 이해 및 활용	@mixin과 @include를 사용하여 반복되는 스타일을 재사용 가능	코드 재사용성 증가, 중복 코드 제거, 유지보수 용이
🎛️ 다양한 데이터 타입 사용	색상, 숫자, 문자열, 리스트, 맵 등 다양한 데이터 타입 지원	복잡한 스타일링의 간결화, 맞춤형 디자인 구현
🚀 동적 스타일링	믹스인과 변수에 인자를 전달하여 동적인 스타일 적용	맞춤형 디자인 구현, 효율적 관리

---

💖 Styled Components 개념 및 활용 노트 💖

---

🎨 1. Styled Components 전반적인 개념

🌟 Styled-Components란?

• Styled-Components는 React 환경에서 사용되는 CSS-in-JS 라이브러리이다.
• JS 파일 내에 CSS를 작성하여 스타일링과 로직을 함께 관리할 수 있다.
• 컴포넌트 기반 개발(CDD) 방식으로 코드의 재사용성과 유지보수성을 높인다.
• CSS 클래스 이름 충돌을 방지하기 위해 고유한 클래스명을 자동으로 생성한다.
• ThemeProvider를 사용하여 전역 테마 설정을 적용할 수 있다.

---

🌿 CSS-in-JS의 개념

• JavaScript 안에 CSS를 작성하는 방식이다.
• 동적 스타일링과 컴포넌트 단위의 스타일 관리가 용이하다.
• 런타임 시점에 스타일을 주입하여 스타일과 로직을 함께 관리할 수 있다.

🌟 CSS-in-JS 기능 💡 Styled Components의 장점

🎨 스타일과 로직의 결합	코드 가독성과 생산성 향상
🌿 고유한 클래스명 자동 생성	스타일 충돌 방지 및 안전한 스타일링
💡 동적 스타일링 및 조건부 렌더링	props 기반 실시간 스타일 변경
💎 JavaScript 기능 활용	반복 코드 최소화 및 동적 스타일링 구현
⚡ SSR 지원	초기 로딩 속도 향상 및 SEO 최적화
🚀 유지보수성과 확장성	모듈화된 코드로 대규모 프로젝트에 적합
🎯 전역 테마 관리	디자인 일관성 유지 및 손쉬운 테마 변경

---

💡 CDD(Component-Driven Development)의 개념

• 컴포넌트 중심 개발 방식으로, UI를 작은 단위의 재사용 가능한 컴포넌트로 분리한다.
• Styled-Components는 CDD의 핵심 도구로, 각 컴포넌트에 고유한 스타일을 적용할 수 있다.

---

⚖️ Styled-Components의 장단점

✅ 장점 ⚡ 단점

고유한 클래스명 자동 생성 (스타일 충돌 방지)	런타임 성능 이슈 발생 가능
동적 스타일링 (props 기반)	초기 학습 곡선 존재
SCSS와 유사한 문법 지원	스타일의 런타임 생성으로 빌드 사이즈 증가 가능
컴포넌트 단위 스타일 관리	대규모 프로젝트에서 성능 최적화 필요

---

🌟 클래스명을 지정하지 않아도 되는 이유

• Styled-Components는 고유한 클래스명을 자동 생성하여 스타일 충돌을 방지한다.
• 내부적으로 해시 값을 사용하여 각 스타일에 고유한 식별자를 부여한다.

---

🌟 2. Styled Components 사용법

🔧 설치 방법

npm install styled-components
npm install --save-dev @types/styled-components # (TypeScript 사용 시)

---

🎨 기본 사용법

📝 설명:

• styled.[태그명]을 사용하여 스타일이 적용된 컴포넌트를 생성
• 클래스명을 지정할 필요 없이 고유한 클래스명이 자동 생성

import styled from 'styled-components';

const Button = styled.button`
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: #45a049;
  }
`;

export default function App() {
  return <Button>클릭하세요!</Button>;
}

---

💎 동적 스타일링

const Button = styled.button`
  background-color: ${(props) => (props.primary ? '#4CAF50' : '#f44336')};
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
`;

export default function App() {
  return (
    <div>
      <Button primary>프라이머리 버튼</Button>
      <Button>디폴트 버튼</Button>
    </div>
  );
}

---

🌿 재사용 가능한 스타일 생성

📝 설명: css 헬퍼를 사용해 반복되는 스타일 블록을 정의하고 재사용,

Base 컴포넌트를 만들어 다양한 버튼, 카드 등에 확장성 있는 스타일링을 적용

import styled, { css } from 'styled-components';

const buttonStyles = css`
  padding: 12px 24px;
  border-radius: 8px;
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    opacity: 0.8;
  }
`;

const PrimaryButton = styled.button`
  ${buttonStyles}
  background-color: #55efc4;
`;

const SecondaryButton = styled.button`
  ${buttonStyles}
  background-color: #ff7675;
`;

---

💎 생성한 컴포넌트를 재사용하는 방법

import styled from 'styled-components';

const Button = styled.button`
  background-color: ${(props) => (props.primary ? '#4CAF50' : '#f44336')};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
`;

export default function App() {
  return (
    <div>
      <Button primary>프라이머리 버튼</Button>
      <Button>디폴트 버튼</Button>
    </div>
  );
}

---

🌟 전역 스타일 적용

📝 설명: createGlobalStyle을 사용하여 전역 스타일을 설정

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    background-color: #f0f0f0;
  }
`;

export default function App() {
  return (
    <>
      <GlobalStyle />
      <h1>🌟 전역 스타일 적용된 페이지</h1>
    </>
  );
}

---

🎨 테마 적용 방법

📝 설명: ThemeProvider를 사용하면 프로젝트 전반에 일관된 테마를 전달

import styled, { createGlobalStyle, ThemeProvider } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    background-color: ${(props) => props.theme.bg};
  }
`;

const theme = {
  bg: '#f5f5f5',
  primary: '#6c5ce7',
};

const Title = styled.h1`
  color: ${(props) => props.theme.primary};
`;

const App = () => (
  <ThemeProvider theme={theme}>
    <GlobalStyle />
    <Title>Styled Components로 만든 제목</Title>
  </ThemeProvider>
);

---

🌿 중첩 규칙 이해 및 활용

📝 설명: **CSS 중첩(nesting)**을 지원하여 컴포넌트 내 구조화된 스타일링이 가능, 자식 요소나 상태 기반 스타일링(&:hover, &:active)도 쉽게 작성

const Card = styled.div`
  background-color: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  .header {
    font-weight: bold;
    font-size: 20px;
    color: #2d3436;

    .title {
      color: #ff7675;
      margin-bottom: 8px;
    }
  }

  .content {
    color: #636e72;
    font-size: 16px;
  }
`;

---

✨ Styled Components 요약 ✨

🔥 기능 🌟 설명 💡 장점

🎁 props 기반 동적 스타일	props를 사용하여 조건부 스타일 적용	코드 재사용성 증가
🌿 중첩 규칙	컴포넌트 내 자식 요소 및 상태 기반 스타일링	구조화된 코드 작성
💎 재사용 가능한 스타일	scss 와 유사한 중첩 및 변수 사용 가능	유지보수성 향상
🌐전역 스타일	createGlobalStyle로 전역 CSS 적용	일관된 스타일링 제공
🎨 테마 적용	ThemeProvider를 통한 전역 테마 제공	글로벌 테마 관리 용이
🎯 CSS-in-JS	JS 파일 내 CSS 작성	동적 스타일링 및 조건부 렌더링

---

🌊 Tailwind CSS 개념 및 활용 노트 🌊

---

🎨 1. Tailwind CSS 전반적인 개념

• TTailwind CSS는 유틸리티 퍼스트(Utility-First) CSS 프레임워크이다.
• HTML/JSX에 미리 정의된 짧은 클래스명을 적용하여 빠르고 일관성 있는 UI를 디자인할 수 있다.
• 별도의 CSS 파일 없이 필요한 스타일을 즉시 적용할 수 있어 생산성과 일관성을 높인다.
• 덕분에 빠르게 디자인하고 유지보수가 쉬운 모듈형 UI를 만들 수 있다.
• 모바일 퍼스트 접근 방식과 반응형 디자인을 기본으로 지원한다.
• tailwind.config.js 파일을 통해 커스터마이즈와 테마 설정이 가능하다.

---

🌱 2. Utility-First란?

• Utility-First는 각각의 스타일 속성을 담당하는 작고 재사용 가능한 클래스를 조합하여 UI를 설계하는 방식을 의미한다.
• 예를 들어 p-4, bg-blue-500, text-center 같은 클래스를 조합해서 원하는 스타일을 빠르게 적용할 수 있다.
• 이는 복잡한 CSS를 작성하는 시간을 줄이고, 코드의 가독성과 유지보수성을 향상시킨다.
• 예시:

<div class="p-4 bg-blue-500 text-center text-white rounded-lg shadow-lg">
  안녕! 나는 Tailwind CSS야 🌟
</div>

• 이러한 클래스 조합은 빠른 개발, 가독성 및 유지보수성을 높인다.

---

🔧 3. Tailwind CSS 설치과정

📦 1) 프로젝트 초기화

npm init -y

🌊 2) Tailwind CSS 설치

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

🎨 3) Tailwind CSS 설정

tailwind.config.js 파일에서 경로를 지정:

module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

💎 4) CSS 파일에 Tailwind 디렉티브 추가

src/index.css 파일에 다음과 같이 입력:

@tailwind base;
@tailwind components;
@tailwind utilities;

🚀 5) Tailwind CSS 빌드 및 실행

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

---

🌟 4. Tailwind CSS의 장단점

✅ 장점

• 💡 빠른 개발 속도: HTML에 클래스만 추가하면 즉시 스타일링할 수 있다.
• 🎯 일관성 유지: 전체 프로젝트에서 일관된 디자인 시스템을 적용할 수 있다.
• ⚡ 프로덕션 최적화: 사용하지 않는 CSS는 프로덕션 빌드시 제거되어 파일 크기가 작아진다.
• 🎨 손쉬운 커스터마이징: tailwind.config.js 파일을 통해 색상, 폰트 등 테마를 쉽게 변경할 수 있다.

---

⚠️ 단점

• 🧩 초기 러닝커브: 다양한 클래스 이름을 외우는 것이 처음에는 어려울 수 있다.
• 📝 HTML 가독성 저하: 많은 클래스가 HTML 태그에 몰리면서 가독성이 떨어질 수 있다.
• 🎭 추상화 부족: 반복적인 스타일링 시 @apply 지시자를 사용해 공통 클래스를 만들어야 한다.

---

💖 5. VSCode 추천 익스텐션

1. 🌈 Tailwind CSS IntelliSense
   • Tailwind CSS 클래스명을 자동 완성한다.
   • 클래스 미리보기와 문법 오류도 알려준다.
2. 🏃 Headwind
   • Tailwind CSS 클래스명을 정해진 순서로 자동 정렬하여 코드의 일관성을 높인다.
3. ✨ Prettier - Code formatter
   • 코드를 보기 좋게 자동 포맷팅하는 필수 포매터이다.

---

💡 6. 예시 코드(유틸리티, 반응형, 재사용,테마 커스터마이즈, 플러그인 확장성)

🎨 유틸리티 클래스

💡 예시 코드

<div class="p-6 bg-primary text-white rounded-lg shadow-lg">
  <h2 class="text-2xl font-bold">Tailwind Card</h2>
  <p class="mt-2 text-gray-200">빠르고 효율적인 스타일링!</p>
  <button class="mt-4 bg-secondary hover:bg-purple-700 py-2 px-6 rounded-lg transition-all duration-300">
    Click Me
  </button>
</div>

🌿 반응형 디자인

💡 예시 코드

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="p-4 bg-white rounded shadow">컬럼 1</div>
  <div class="p-4 bg-white rounded shadow">컬럼 2</div>
  <div class="p-4 bg-white rounded shadow">컬럼 3</div>
</div>

💎 재사용 가능한 스타일 (@apply)

💡 예시 코드

/* styles.css */
.btn {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded transition duration-300;
}

.btn:hover {
  @apply bg-blue-700;
}

<button class="btn">공통 버튼</button>

🎯 테마 커스터마이즈

💡 예시 코드: 테마 설정

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#ff6b6b',
        secondary: '#6c5ce7',
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
      },
    },
  },
};

💡 적용 예시

<div class="bg-primary text-white p-6 rounded-lg shadow-lg">
  커스터마이즈된 Tailwind 색상 적용!
</div>

🚀 플러그인 확장성

💡 플러그인 설치 및 사용 예시

npm install @tailwindcss/forms @tailwindcss/typography

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
};

<form class="space-y-4">
  <input type="text" class="form-input w-full rounded-lg" placeholder="이름 입력" />
  <button class="btn bg-green-500 hover:bg-green-700">제출</button>
</form>

 

---

✨ Tailwind CSS 요약 ✨

🔥 기능 🌟 설명 💡 장점

🎨 유틸리티 클래스	HTML에 바로 적용 가능한 스타일 클래스	빠른 스타일링 구현
🌿 반응형 디자인	프리픽스를 사용한 유연한 레이아웃	모든 기기 대응 용이
💎 재사용 가능한 스타일	@apply를 통한 공통 스타일 관리	유지보수성 향상
🎯 테마 커스터마이즈	tailwind.config.js로 전역 설정	일관된 디자인 시스템
🚀 플러그인 확장성	공식 플러그인으로 기능 확장	다양한 기능 손쉬운 추가

---

설치 및 설정 방법

1️⃣ Tailwind CSS 설치

npm install tailwindcss @tailwindcss/vit

2️⃣ vite.config.ts 설정

• plugins 배열에 tailwindcss() 추가

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

3️⃣ index.css에 Tailwind CSS 불러오기

• 프로젝트의 index.css에 다음을 추가

@import "tailwindcss";