YujunSun0
포트폴리오 사이트
✏️ 개인 프로젝트 - 포트폴리오 웹사이트
⏱️ 프로젝트 기간: 2024.03.18 ~ 2024.03.25
배포 링크
한 페이지에서 편리한 정보 조회가 가능하도록 제작했으며, 반응형 웹으로 제작되어 모든 환경에서 볼 수 있습니다.
기술 스택
|HTML5|CSS3|TypeScript|React|Styled-Components|Vite|
|:—:|:—:|:—:|:—:|:—:|:—:|
||
|
|
|
|
|
주요 구현 기능
동적 요소 감지 및 내비게이션 하이라이팅
| 데스크탑 | 모바일 |
|---|---|
Situation (상황): 웹사이트 사용자들이 스크롤을 통해 콘텐츠를 탐색하는 과정에서, 원활한 내비게이션과 현재 위치 파악의 어려움을 겪고 있었습니다.
Task (과제): 사용자의 편의성을 높이기 위해, 클릭 한 번으로 원하는 섹션으로 쉽게 이동할 수 있고, 현재 위치를 실시간으로 파악할 수 있는 기능을 개발해야 했습니다.
Action (행동): React-Router의 HashLink를 활용해 클릭 시 해당 섹션으로 이동하는 기능을 구현했습니다. 또한, intersectionObserver API를 사용하여 스크롤 위치에 따라 URL hash를 업데이트하고, 연결된 내비게이션 링크에 스타일을 적용해 시각적으로 강조하는 기능을 추가했습니다.
Result (결과): 이러한 기능들을 통해 사용자 경험을 크게 향상시켰으며, 웹사이트 내비게이션의 효율성과 사용자 만족도가 증가했습니다.
스크롤 progress bar
- 스크롤 진행 상황을 표시하는
bar입니다. -
useEffect에서addEventListener를 통해 스크롤 이벤트를 등록하여 현재 스크롤 위치의 percent(%) 를 구하는 방식으로 구현했습니다.
빌드 속도 최적화
- 짧은 배포 주기로 인해 빌드 속도 개선의 필요성을 느꼈으며, 빌드 최적화를 목표로 빌드 도구를
CRA에서Vite로 마이그레이션 하였습니다. -
이를 통해 빌드 시간을 1/3정도 단축시켰습니다.
트러블 슈팅
progress bar 컴포넌트에서 추가한 스크롤 이벤트가 발생할 때 마다 폰트가 깜빡이는 현상
원인
styled-components에서 font-family를 GlobalStyle에 저장해 둔 것이였으며, 새로운 스타일이 render 되면 폰트를 재요청 하기 때문에 깜빡임 현상이 발생 한 것이였습니다.
해결 방법
GlobalStyle에 저장해 둔 font-family 속성을 css 파일로 옮겨주어 해결했습니다. (src 폴더의 index.tsx에서 해당 css 파일을 import)