![]()
리펙토링을 진행하게된 계기 방치하고 있던 프로젝트가 있었다. 이 프로젝트를 진행할 때 꽤나 공을 들인 프로젝트였는데 코테준비다, 시간이 없다 등 지금 생각하면 배부른 핑개를 대며 프로젝트를 방치했었다. 하지만, 최근 원티드 프리온보딩을 통한 좋은 코드와 SOLID 원칙에 대한 강의를 듣고 프로젝트의 코드들을 전체적으로 살펴봤다. 지금 보니 아주 난장판이였다. import { ReactComponent as GamaldaSVG } from 'assets/svg/gamaldalogo.svg'; import naverLogin from 'assets/png/naver_login.png'; import { useEffect, useRef } from 'react'; import { Link } from 'rea..
CSS 애니메이션 호버 효과나 버튼의 전환과 같이 간단한 애니메이션의 경우 CSS로 처리한다. JS를 이용해 스타일 속성의 변화를 주게된다면 브라우저 렌더링 과정에서 reflow(layout) 단계를 발생시키기 때문에 애니메이션이 끊기는 느낌을 받게된다. 이런 점에서 JS를 이용하는 대신 CSS를 이용해 간단한 애니메이션을 구현하는 것이 좋다고 할 수 있다. 장점 반응형 애니메이션을 구현하기 유용하고, 미디어 쿼리로 애니메이션을 적용할 수 있다. 추가적인 외부 라이브러리가 필요하지 않다. CSS 자체가 선언형 이기 때문에 어떤 요소가 애니메이션을 가져야 하는지 직관적인 표현 가능 메인 쓰레드가 아닌 별도의 컴포지터 쓰레트에서 그려지기 때문에 메인 쓰레드에서 작업하는 JS보다 효율적이다. 단점 JS 애니메..
