kkh.dev
Yellosis | Frontend Developer | 2023-10 - 2024-01

Yellosis Homepage

#웹개발#Next.js#AWS#SEO#리뉴얼

레거시 프로젝트 마이그레이션으로 UX와 유지보수 효율성을 극대화한 회사 웹사이트 리뉴얼

Yellosis Homepage

기술 스택

Next.js 13TypeScriptTailwind CSSTanStack QueryJestGitHub Actions

주요 기능

  • 반응형 페이지 퍼블리싱 (제품, 회사 소개, 뉴스)
  • 어드민 페이지 제작 (JWT 인증, CRUD)
  • AWS S3 + CloudFront + Route53 정적 배포
  • Honeypot을 활용한 봇 감지 구현
  • Husky + GitHub Actions CI/CD 구축

상세 내용

레거시 프로젝트를 마이그레이션하여 사용자 경험(UX)과 유지보수 효율성을 극대화한 회사 웹사이트 리뉴얼 프로젝트입니다.

구현 내용

  • 반응형 페이지 퍼블리싱: 제품 페이지, 회사 소개 페이지, 뉴스 기사 정리 페이지 등
  • 어드민 페이지: JWT 인증을 통한 관리자 접근 구분, 기사 페이지와 배너 CRUD
  • 인프라 구축: AWS S3와 CloudFront, Route53을 이용한 정적 배포
  • 보안 강화: Honeypot으로 봇 감지, DoS 공격 방지

성과

  1. 코드 품질 자동화: Husky로 코드 컨벤션 자동화, GitHub Actions로 CI/CD 구축
  2. 모듈화된 구조: 소스 코드를 모듈화하여 개발 속도 향상 및 중복 코드 감소
  3. SEO 최적화: 시맨틱 마크업 태그 사용, 메타태그 핵심 키워드 최적화로 Google과 Naver SEO 노출 순위 향상

배운 점

  • Husky를 통해 코드 컨벤션 자동화로 협업 효율성 향상
  • 모듈화된 구조로 향후 기능 추가 및 유지보수 용이
  • 시맨틱 마크업과 메타태그 최적화로 SEO 순위 향상
웹사이트