gif ⬇️
Demo: https://yangddoddi.github.io/momentum_react/#/
모멘텀의 기본적인 기능들을 리액트로 구현한다.
HTML CSS JavaScript(React)
React, Redux, React-redux, react-router-dom v6, persist-redux, styled-components, motion-framer, EmailJS, Ant design, axios, gh-pages, uuid
처음으로 강의 등 매체에 의존하지 않고 스스로 정한 사이트를 클론 코딩하여 문제 해결 능력을 기를 수 있었다. 리액트의 상태 관리 등 기초적인 사용 방법을 익힐 수 있었다. 필요한 라이브러리(기능)을 능동적으로 찾아보는 능력을 길렀다.
styled-components를 사용해보게 되었는데 올바른 사용법에 대한 숙지 없이 nesting을 무분별하게 남용하여 스타일을 엉망으로 작성하게 되었고, 차라리 scss를 사용했다면 이를 돌이키는 것이 어렵지 않았겠지만 이미 컴포넌트를 분리해놓고 그 안에서 nesting 문법으로 이리저리 망쳐놓은 스타일링을 되돌리기는 쉽지 않았다. 이로 인해 라이브러리에 대한 숙지 없이 그저 남들이 좋다고 하거나 유명하다는 이유로 붙여넣고 사용하게 되면 오히려 불편을 겪게 될 수 있다는 것을 알았다. 또한 효율이나 성능적인 부분보다는 배운 기능들을 최대한 활용하고 복습하는 취지로 만든 결과물이니 만큼 일관성이 떨어지고 성능에 아쉬움이 있는 건 어쩔 수 없지만 분량이 많지 않은 만큼 추후 실력이 는다면 부족한 부분들을 보완하고 싶다.