느낀점: 배운내용 & 고민내용

setInterval, setTimeout이해

수업 시간에 setInterval, setTimeout에 대해 배우게 되었습니다. 2가지를 배울 수 있었습니다.

• setInterval은 함수실행도 지연 간격에 포함돼 있기 때문에 함수가 무거울 경우 정확한 시간보장이 안됨
• 중첩 setTimeout을 사용하여 정확한 시간을 보장하도록 한다.

지금 개발 중인 뉴스스탠드의 롤링 기능은 함수가 무겁지 않고 setTimeout은 많이 사용해 봤기 때문에 setInterval을 사용해 보기로 했습니다.

css, js 애니메이션

애니메이션은 CSS가 더 빠르다고 생각했지만 JS로 RequestAnimationFrame를 활용한다면 css처럼 부드로운 애니메이션 이용이 가능을 알게 되었습니다.

현재 프로젝트에서 롤링기능을 CSS로 적용했습니다. 적용한 이유는

• 간단한 애니메이션임
• 부드러운 애니메이션을 위해
• 롤링 로직으로 인해 코드가 길어져서 자바스크립트로부터 애니메이션 로직을 분리하고 싶었다
• 추가로 reflow와 repaint를 줄이기 위해 transform을 활용하여 구현함.

HTML 분리 (View)

기존 HTML로 개발하게 되면 크기가 커지고 가독성이 낮아지게 되면서 어떻게 하면 분리를 할 수 있을지 고민했습니다. HTML 코드를 생성하는 역할과 동적으로 돌아가는 JS 파일이 각각 다른 거라 생각하여 단일 책임 원칙을 적용하여 Components폴더를 만들어 동적으로 만드는 HTML들을 따로 관리하였습니다. 각 역할 별로 분리하여 개발하니 더욱 클린한 구조로 만들 수 있음을 알게 되었습니다.

비즈니스로직과 이벤트에 대한 고민

뉴스스탠드의 데이터를 처리하는 비즈니스 로직과 이벤트 로직이 섞여 코드양이 많아졌고 가독성이 떨어짐을 느껴 이벤트 로직을 분리하기로 결정했습니다.