yarn install
yarn dev

• Vite - 이전까지 CRA나 직접 웹팩을 구성하여 React를 사용했었다면, 이번 기회에 Vite를 경험해보고 장점을 느끼고자 이를 선택했습니다. CRA에 비해 소스 코드 갱신이나 시작하는 데 확실히 빠르다는 장점을 직접 체감할 수 있었습니다.
• TypeScript - 안정적인 타이핑을 통해 좋은 품질의 코드를 작성하고, 인텔리센스가 제공하는 자동완성 기능을 활용해 개발을 용이하게 진행하고자 선택했습니다.
• Styled-Component - 컴포넌트 파일이 과하게 커지지 않는다면 스타일 컴포넌트를 하나의 파일에 둠으로써, 코드 로직을 찾기 용이하고 유지보수하기 용이하다고 생각하여 이를 선택했습니다. 또한 props 값으로 전달해 주는 값을 쉽게 스타일에 적용함으로써 개발에 용이하다고 생각합니다.

처음에 Fade In 기능(살짝 떠오르고, 투명도가 조절되는 애니메이션)을 구현할 때는 keyframes를 사용하여 애니메이션으로 구현한 뒤, HomePage에서 하위 3개의 컴포넌트에게 애니메이션이 동작시키도록 구현했습니다. 다만 이렇게 구현하게 된다면, 처음에 빈 화면에서 시작하는 것이 아닌 0.1초 뒤에 다음 컴포넌트가 없어졌다 다시 나타나는 방식이라는 것을 알게 되었습니다. 이는 트리플 홈페이지의 UX와는 다르다고 판단하여 delay 타임을 매개변수로 받는 useFadeIn hooks를 구현한 뒤, opacity와 translateY 값이 showComponent 상태에 따라 transition 속성을 통해 변화하도록 구현했습니다.

여기서 새롭게 알게 된 사실은 모든 컴포넌트의 Opacity를 0으로, 즉 화면에 보이는 요소가 존재하지 않는다면 첫 로딩 화면이 늦게 보이는 문제가 존재한다는 사실을 알게 되었습니다. 즉, transition을 활용하면서 좀 더 좋은 UX를 주기 위해서는 과제로 주어진 3개의 컴포넌트 외에 화면에 보이는 요소가 존재해야 더 빠르게 첫 화면이 렌더링 된다고 생각했습니다. 그래서 투명한 인라인 텍스트를 입력하는 임의의 HiddenBox 컴포넌트를 생성하여 이러한 문제를 해결했습니다. 물론 실제 트리플 홈페이지를 구현한다면 과제로 주어진 Section 외에도 기존에 보이는 요소들이 존재하기에 문제가 발생하지 않겠지만 현재 상황에서는 이러한 방법으로 UX를 향상시킬 수 있었습니다.