Frontend개인 프로젝트
개인 포트폴리오
포트폴리오
2024-06-04 ~
Next.js 와 Typescript를 활용한 포트폴리오 페이지입니다.
디자인부터 기능까지 직접 작업하였으며, 각 컴포넌트는 재사용성을 고려하여 구성하였습니다.
디자인부터 기능까지 직접 작업하였으며, 각 컴포넌트는 재사용성을 고려하여 구성하였습니다.
👋 프로젝트 소개
개인 프로젝트(1인)
기획
0%
개발
0%
디자인
0%
퍼블리싱
0%
사용기술
Next.js(v14)TypescriptTailwindStyled-Components반응형
프로젝트 설명
Next.js와 Typescript를 활용하여 제작한 포트폴리오입니다.
큰 텍스트와 채도를 이용한 컬러 조합으로 가독성을 높혔으며,
각종 기능 및 디자인을 직접 구현하고 만든 포트폴리오입니다.
Next.js와 Typescript를 활용하여 제작한 포트폴리오입니다.
큰 텍스트와 채도를 이용한 컬러 조합으로 가독성을 높혔으며,
각종 기능 및 디자인을 직접 구현하고 만든 포트폴리오입니다.
🤔 어떠한 기능이 있나요?
이미지 미리보기 및 preload 구현
- Next/Image 태그 및 Antd 라이브러리를 활용하여 제작
- preload를 통한 대용량 이미지 우선 다운
이미지 더보기 및 필터링
- filter를 활용한 이미지 type 구별
- slice를 활용한 이미지 더보기 구현
IntersectionObserver를 활용한 상태 바 구현
- Hooks를 통한 재사용성 향상
- 클릭 시 해당 위치로 스크롤 구현
Components 활용으로 재사용성 향상
- props로 값을 넘겨주며 일관된 디자인 사용구현
- 클릭 시 해당 위치로 스크롤 구현
💥 문제는 없었나요?
용량이 큰 이미지 GIF 처리 시 로딩
⛔ 문제발생
GIF처럼 많은 용량의 이미지를 불러와야 하는 경우, GIF를 사용하여 예시 영상을 업로드할 때 파일 용량이 커져 로딩 시간이 길어지고 빈 화면이 표시되는 문제가 발생하였습니다.✨ 해결방법
GIF 압축 기법을 통해 1차적으로 용량을 줄이고, Preload를 활용하여 로딩 시 GIF 이미지를 우선적으로 불러오도록 하였습니다. 이로 인해 사용자가 GIF를 클릭하면 끊김 없이 원활한 사용이 가능해졌습니다.😎 알게된 점
큰 이미지를 미리 불러오는 preload 기법을 통해 로딩 시간을 크게 줄여, 사용자에게 더 빠르고 원활한 경험을 제공하였습니다. 이를 통해 사용자가 불편함 없이 콘텐츠를 감상할 수 있도록 구현했습니다.신기술 IntersectionObserver
⛔ 문제발생
스크롤 시 특정 페이지에 도달했을 때 UI를 구현하는 과정에서 어려움이 있었습니다.`window.scrollTop()`을 사용해 고정된 값을 부여해 보았지만, 반응형 디자인에서는 값이 달라지는 문제가 발생했습니다.✨ 해결방법
IntersectionObserver API를 활용하여 해당 요소를 감시하여 값이 도달 하였을때 작동되게 구현하였습니다. foreach와 setState를 활용하여 번호를 메겨주었고 Tailwind merge를 통한 조건부 렌더링이 되게 구현하였습니다.😎 알게된 점
요소를 감시할 수 있는 IntersectionObserver API를 활용하여 다양한 스크롤 애니메이션 및 기능 구현을 할 수 있다는점을 배웠습니다.💻 작업내역
클릭 시 미리보기가 가능합니다.
Preview
Preview
Preview