포트폴리오 개선: IT 학교 이후 4개월간의 경험

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 웹 개발자 및 포트폴리오 강화를 원하는 초보자
• 중급 수준의 프론트엔드 기술 이해를 기반으로 한 실무 적용

핵심 요약

• 포트폴리오 개선의 핵심: 템플릿 재구성, React hooks 및 async/await 활용, 성능 최적화 (이미지 압축, 레이지 로딩)
• 기술적 도전: Isotope.js 제거 및 코드 리팩토링, 404 페이지 및 스마트 연락처 폼 구현
• 학습 성과: 복잡한 JavaScript 코드 분석, 자체 개발 기능 추가, DEV.to/Medium API 및 GitHub API 연동

섹션별 세부 요약

1. 이미지 최적화 및 로딩 성능

• 압축 PNG 이미지 사용 및 lazy loading 적용으로 로딩 시간 단축
• Chrome DevTools의 'Computed' 및 'Styles' 패널을 활용한 실시간 디버깅

2. 사용자 경험 향상

• react-loader-spinner로 로딩 중 대기 시간 개선
• FormsPree와 reCAPTCHA 연동된 스마트 연락처 폼 구현 (보내기 버튼 비활성화, 상태 메시지 처리)

3. 코드 리팩토링 및 성능 향상

• Isotope.js 제거 및 불필요한 코드 제거로 성능 향상
• React hooks(useRef, useMemo)의 적절한 사용을 통한 리렌더링 최적화

4. 추가 기능 개발

• 404 페이지 직접 구현
• DEV.to/Medium API 및 GitHub API를 활용한 동적 콘텐츠 로딩 (async/await 사용)
• SVG 아이콘 직접 수정 및 사용

5. 복잡한 코드 분석

• 스크롤 시 네비게이션 바 색상 변경 기능 분석 및 고급 JavaScript 이해

6. 전반적인 학습 성과

• 자체 학습 및 문제 해결 능력 강화
• 프론트엔드 개발의 '끊임없는 학습' 철학 내재화

결론

• 포트폴리오 개선의 핵심 팁: 기존 템플릿의 한계를 인식하고, 자체 개발 및 성능 최적화에 집중하라. Chrome DevTools와 FormsPree 같은 도구를 활용하고, DEV.to/Medium API 및 GitHub API로 동적 콘텐츠를 추가하라. React hooks 및 async/await는 복잡한 기능 구현에 필수적이다.