JuseopSite - 프론트엔드 개발자 유주섭의 포트폴리오

개인 기술 블로그와 트러블슈팅 경험을 공유하는 포트폴리오 사이트입니다.

📖 소개

안녕하세요! 프론트엔드 개발자 유주섭입니다.
사용자 경험을 더 좋게 만들기 위해 항상 고민하고, 더 나은 코드를 향해 끊임없이 성장하는 중이에요.

이 사이트는 제가 학습하고 경험한 내용들을 정리하여 공유하는 공간입니다.

✨ 주요 기능

• 📝 기술 블로그: React, TypeScript, 웹 개발 관련 포스트
• 🔧 트러블슈팅: 개발 과정에서 마주친 문제들과 해결 과정
• 🌙 다크모드: 라이트/다크 테마 토글 기능
• 📱 반응형 디자인: 모바일부터 데스크톱까지 최적화

🛠️ 기술 스택

• 프레임워크: Next.js 15 (App Router)
• 언어: TypeScript
• 스타일링: Tailwind CSS
• 마크다운: MDX, gray-matter, marked
• 폰트: Pretendard (한국어 최적화)

📚 콘텐츠

📖 블로그

• React Query 핵심 가이드
• React 상태 관리 기초
• CSR vs SSR 비교
• 브라우저 렌더링 딥다이브
• Git 기초 가이드
• REST API 설계 가이드
• HTML 기초
• React DOM 이해
• Supabase 여행기
• Toast 라이브러리

🔧 트러블슈팅

• Supabase 연동 트러블슈팅
• NextAuth 기반 JWT 체계 전환
• Figma 시안 대응 커스텀 슬라이더
• 네이버 Cloud TTS API 연동
• 팀 협업 원칙 정착
• 복잡한 페이지 로직 Custom Hook 분리
• Webpack 빌드 환경 구성

📁 프로젝트 구조

src/
├── app/                    # Next.js App Router
│   ├── blog/              # 블로그 페이지
│   └── troubleShooting/   # 트러블슈팅 페이지
├── components/            # 재사용 컴포넌트
│   ├── Header.tsx         # 헤더 컴포넌트
│   ├── Footer.tsx         # 푸터 컴포넌트
│   ├── Intro.tsx          # 소개 컴포넌트
│   ├── Navibar.tsx        # 네비게이션
│   └── ThemeToggle.tsx    # 테마 토글
├── posts/                 # 마크다운 포스트
│   ├── blog/              # 기술 블로그 포스트
│   └── troubleShooting/   # 트러블슈팅 포스트
└── utils/                 # 유틸리티 함수
    └── mdUtils.ts         # 마크다운 처리 유틸

📞 연락처

• 이메일: juseop159@gmail.com
• 좋은 기회가 된다면 직접 만나서 커피 한잔하고 개발 이야기를 나누면 정말 좋겠어요!

감사합니다! 🎉