완성본 💻
실행 화면
배포 도메인
https://www.smj-portfolio.com/
🛠️ 현재 앱 문제점
-
웹 실행 환경만 생각하다보니 각 padding, margin 등 레이어들의 css 단위를 px로 잡은 것
반응형 앱답게 모바일 환경에서도 최적화된 사이징 환경에서 실행이 되어져야 하는데
빠르게 구현하려다보니 미처 모바일 환경까지 생각하진 못 하였다.
추후 다른 앱 구현시 모바일 환경에도 최적화된 방향으로 구현 필요성을 느꼈다.
-
학습 부족으로 구현 못 한 아쉬운 기능이 많음 ex) 캐러셀 등
다양한 앱들을 사용하다보면 꼭 있는 것이 캐러셀이었다.
그래서 나도 한번 구현해보고자 했는데 사이징 최적화와 시중에 나와있는 다양한 라이브러리들의 활용능력 등
다양한 기술들이 필요함에 따라 시간이 많이 들 것으로 예상되어 현 앱 기준으로는 모달로 대체하였다.
📖 만들면서
처음으로 사비로 도메인을 구매하여서 자체 제작하여 배포와 도메인과 연동끼지 시킨 나만의 최초 앱이라 의미가 있는 것 같다.
개발 입사 지원서 트렌드가 단순 워드 문서로 작성하는 것이 아니고
실제 웹 페이지를 제작해 자기 자신을 그대로 녹여내어 소개하는 것이 트렌드라고 취업 컨설턴트 분께 조언을 받고 만들기 시작하였다.
다른 개발자 분들의 포트폴리오 사이트들을 보니 단순 React.js 로 구현하였을 뿐 아니라
캐러셀 등 현업에서 일반적으로 쓰이는 화면 소스 등 다양한 기술들이 적용되어진 것을 확인하여
나도 내 포트폴리오 프로젝트 섹션 부분에 적용시켜보고자 했지만 현재 시간 상 나중에 업그레이드 할 때 추가 하는 것으로 결정
현재는 단순 모달 출력 기능으로 대체하고 추후 시간적 여유가 있을 때 최신 기술들로 한층 업그레이드 시켜보고자 한다.
📌 기능 설명 - Header 쪽 섹션 이동 버튼
헤더쪽에 각 소개 섹션으로 이동한 간단한 버튼들이 있다.
해당 버튼들은 이벤트 리스너와 useState와 Element을 이용하여 구현하였다.
App 컴포넌트 측에서 state를 헤더쪽에 props로써 전달하여 해당 섹션으로 이동하는 형식으로 구현하였다.
📌 기능 설명 - Project 소개 관련 모달 컴포넌트
처음엔 캐러셀로 구현하고자 하였지만 원하는 대로 잘 되어지지 않아 학습을 조금 더 하고 추후 사용해보기로 한다.
대신 모달 형태로 구현하기로 계획을 바꿔서 별도로 컴포넌트로 만들어 App 컴포넌트 내에 배치시켰다.
