[Contacts articles] Contacts 페이지(1/2) - 연락처 컴포넌트 구현

[Doyu-Lee]

구현 기능

한국어 페이지 | 영어 페이지

1. 로딩 컴포넌트로 폰트 등의 사용자 경험 향상 시도

바로 직전 PR #3 에서 한글 폰트 최적화가 안 되는 이슈 발생

• 헤더에 로딩 컴포넌트를 넣어두고 로딩, 실제 화면 컴포넌트를 동시에 렌더링한 후 0.8초 뒤에 로딩 컴포넌트가 사라지면서 렌더링된 화면을 보여줄 수 있게 구현함

2. 타이핑 효과 애니메이션 컴포넌트 및 영/한 데이터 추가

• react-typist 라이브러리를 사용했지만 componentWillReceiveProps has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.와 같이 최신 React 18버전 이상에서 호환되지 않는 일부 성능 문제가 발생
• 해당 라이브러리 레포지토리 이슈에서 관련 문제 발견 후, 2022년 초부터 업데이트가 안 되고 있다는 것을 확인
  • React 18 support jstejada/react-typist#124
• react-simple-typist로 라이브러리 교체 후 이상없이 작동

3. hook 생성하여 코드 분리

• useAfterSeconds(n) : n밀리세컨드초(ms) 뒤에 isLoading 또는 isMounting 상태 변경
• useHover() : 로고 마우스 hover했을 때 애니메이션 hoook

4. 스타일 전역 변수 및 mixin 정리

• scss 전역 적용되는 _mixins.scss 파일에서 중복해서 쓰이는 스타일 정리
• 폰트 스타일, 모서리 둥글기 전역 변수로 추가

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
portfolio-doyu	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 28, 2023 2:48am