안녕하세요. 누구보다 책임감 있게 업무를 대하는
3년차 프론트엔드 개발자 정다운 입니다.

기존 Vue를 메인으로 2년 정도 사용했었지만
SI 업체에서 근무하면서 언제나 기술적인 목마름을 느꼈습니다.

새로히 Next.js 15버전과 React 19버전을 사용하여 경험을 쌓고 싶어
개인 소개 페이지를 만들어 보았습니다.

프로젝트 설명

• 기존 경력 히스토리를 소개하는 페이지

사용 기술

• Next.js 15 버전
• React 19 버전
• Tailwind CSS 4.0 버전
• TypeScript 5 버전
• Framer Motion 11.15.0 버전
• Vitest 2.1.8버전
• React Library Test 16.1.0버전

추가 사용 라이브러리

• tailwind 관련

  - @tailwindcss/postcss-8: 4.0.0 : Tailwind CSS와 PostCSS 8 호환을 위한 플러그인

  • postcss: 8.4.44 : Tailwind CSS 전처리기/후처리기 도구
  • clsx: 2.1.1 : Tailwind CSS 조건부로 클래스명을 결합기능

• 다크모드 관련

  • next-themes: 0.4.4 : Next.js에서 다크모드 지원을 위한 라이브러리

• 웹 에니메이션

  • motion: 11.15.0 : 웹 애니메이션 라이브러리

• 스와이퍼 기능

  • swiper: 11.2.4 : React 스와이퍼 컴포넌트 라이브러리

• 테스트 프레임워크

  • vitest: 2.1.8 : Jest 호환 테스트 러너
  • @vitejs/plugin-react: 4.3.4 : React 컴포넌트 테스트 지원
  • vite-tsconfig-paths: 5.1.4 : TypeScript 경로 설정 지원

• UI 및 커버리지 도구

  • @vitest/ui: 2.1.8 : 테스트 실행 UI 인터페이스
  • @vitest/coverage-v8: 2.1.8 : 코드 커버리지 측정

• DOM 테스트 도구

  • jsdom: 25.0.1 : 브라우저 환경 시뮬레이션
  • @testing-library/react: 16.1.0 : React 컴포넌트 테스트 도구
  • @testing-library/jest-dom: 6.6.3 : DOM 테스트 매처
  • @testing-library/user-event: 14.5.2 : 사용자 이벤트 테스트 도구

• TypeScript 관련**

  • @typescript-eslint/eslint-plugin: ^8.24.1 (TS 린팅 규칙)
  • @typescript-eslint/parser: ^8.24.1 (TS 파싱)
  • @types/testing-library__jest-dom: 5.14.9 (jest-dom 타입 정의)

• ESLint 플러그인

  • eslint-plugin-jest-dom: 5.5.0 (jest-dom 린팅)
  • eslint-plugin-testing-library: 7.1.1 (Testing Library 린팅)
  • eslint-plugin-vitest: 0.5.4 (Vitest 린팅)

• 코드 포맷팅

  • prettier: ^3.5.1 (코드 포맷터)
  • prettier-eslint: ^16.3.0 (Prettier와 ESLint 통합)