Hayeon Cho

포트폴리오 웹사이트

  • HTML5
  • SCSS
  • JavaScript

HTML5와 SCSS를 기반으로 시맨틱 마크업을 작성하고, 다양한 디바이스에 대응하는 반응형 포트폴리오 웹사이트를 제작했습니다.

Demo Github 회고글

2025.12 ~ 2026.01

개인 프로젝트

구현 기능

  • @keyframes를 사용하여 블로그 무한 롤링 배너 애니메이션을 구현하였습니다.

    관련 코드

  • 메인 페이지 탭 클릭 시 해당 위치로 스크롤 이동, 스크롤에 따라 탭 메뉴가 활성화되는 기능을 구현하였습니다.

    상세보기

  • fetch() 함수로 JSON 파일의 데이터를 가져온 후 JavaScript 객체로 변환해 가공하여 화면에 출력했습니다.

    관련 코드

트러블 슈팅

문제 배경

scroll, resize 이벤트에 함수가 걸려있어 스크롤을 조금만 움직이거나, 창 크기를 살짝만 조절해도 함수가 과도하게 반복 실행되어 성능이 저하되는 문제가 발생했습니다.

해결 방법

lodash의 throttle을 활용하여 함수를 일정 간격으로만 실행되도록 제한합니다.

문제 해결 코드

개선된 점

throttle 적용 후 불필요한 함수 실행을 줄여 성능과 사용자 경험을 동시에 개선할 수 있었습니다.

  • 메인 페이지 - section1
  • 메인 페이지 - section2
  • 메인 페이지 - section3, section4
  • 메인 페이지 - section4
  • 메인 페이지 - section5
  • 프로젝트 상세 페이지