🚀 웹 애플리케이션 개발 오늘의 학습

Next.js와 Tailwind CSS로 모던 웹 앱 만들기

📋 주요 작업 내용

1. 🧩 컴포넌트 구조화 및 UI 개선

• 모던한 UI 컴포넌트들을 추가하고 구조화했습니다:
  • ModernLogo, SpaceBackground, ContentGrid, PricingSection 등의 UI 컴포넌트
  • 계절별 테마를 적용하는 유틸리티 함수 개선
  • 반응형 레이아웃 적용

2. 🔐 인증 시스템 개선

• 카카오 로그인 기능을 리팩토링하고 통합했습니다
• JWT 토큰 관리 개선 및 인증 컨텍스트(AuthContext) 업데이트
• 로그인 모달 추가 및 사용자 경험 개선

3. ⚙️ Next.js 구조 최적화

• _app.tsx 및 _document.js 파일 현대화
• 라우팅 및 페이지 구조 개선
• 컴포넌트 분리를 통한 코드 재사용성 향상

4. 🎨 스타일링 시스템 개선

• Tailwind CSS 설정 최적화 및 불필요한 설정 제거
• 커스텀 테마 시스템 개선 및 다크 모드 지원 추가
• 공통 컴포넌트에 일관된 스타일 적용

💡 배운 점

Next.js 개발 패턴

"use client" // 클라이언트 컴포넌트 지시어

export default function ModernLogo() {
  return (
    <div className="flex items-center space-x-2">
      {/* 로고 내용 */}
    </div>
  )
}

• “use client” 지시어를 활용한 클라이언트 컴포넌트와 서버 컴포넌트 구분
• Next.js의 페이지 라우팅 시스템 활용 방법
• 레이아웃 컴포넌트를 통한 일관된 UI 제공

Tailwind CSS 활용

<nav className="sticky top-0 z-20 bg-black/50 backdrop-filter backdrop-blur-md">
  {/* 내용 */}
</nav>

• 반응형 디자인 구현 방법 (sm, md, lg 브레이크포인트 활용)
• 백드롭 블러와 그라디언트를 활용한 모던한 UI 구현
• 다크 모드 지원을 위한 변수 설정

컴포넌트 설계

const Layout: React.FC<LayoutProps> = ({ children, title = '우주와 운명의 길' }) => {
  return (
    <div className="min-h-screen flex flex-col bg-gray-900 text-white relative">
      <SpaceBackground />
      <Navbar />
      <main className="flex-grow container mx-auto px-4 sm:px-6 py-8 relative z-10">
        {children}
      </main>
      <Footer />
    </div>
  )
}

• 재사용 가능한 UI 컴포넌트 설계 방법
• SVG를 활용한 인터랙티브 요소 구현
• 모달 및 공통 UI 컴포넌트 추상화

인증 시스템

const handleLogin = () => {
  if (window.Kakao) {
    // 카카오 로그인 구현
    window.location.href = KAKAO_AUTH_URL
  }
}

• JWT 토큰 기반 인증 구현 방법
• 소셜 로그인(카카오) 연동 방법
• 인증 상태에 따른 조건부 렌더링

🛠️ 해결한 문제점

1. 일관성 없는 코드 스타일: 프로젝트 전반에 걸쳐 일관된 코드 스타일과 구조 적용
2. 중복된 UI 로직: 공통 컴포넌트 추출로 중복 코드 제거
3. 모바일 지원 미흡: 반응형 디자인 적용으로 모바일 사용성 개선
4. 불필요한 의존성: package.json 최적화 및 최신 버전 적용

🔮 앞으로의 개선 방향

오늘의 작업을 통해 모던 웹 개발의 핵심 패턴과 기술을 적용해볼 수 있었습니다. 특히 컴포넌트 기반 개발과 반응형 디자인의 중요성을 다시 한번 느낄 수 있었습니다. 다음 작업에서는 이러한 기반 위에 더 많은 기능을 추가하고 사용자 경험을 개선하는 데 집중할 계획입니다.

“좋은 코드는 그 자체로 최고의 문서다” - 로버트 C. 마틴