인프런 커뮤니티 질문&답변

프린이님의 프로필 이미지

작성한 질문수

웹 애니메이션을 위한 GSAP 가이드 Part.01

timeline를 호출한 함수를 변수에 할당할때, const/let 둘 중에 어떤 것으로 해야 하나요?

해결된 질문

23.10.28 18:01 작성

·

385

·

수정됨

1

let tl = gsap.timeline();

tl.to(".dash",{opacity:1, backgroundColor:'yellow'})

안녕하세요!

강의를 듣다가, 궁금함이 생겨 문의 드립니다,

 

#질문1. 애니메이션을 변수에 할당 할때, 변수의 let/cost 둘중에 어떤 것으로 정의해야 할까요?
#질문2. GSAP에서는 애니메니션01, 애니메이션02, 와 같이 각각 애니메이션을 정의하고, 이것을 각각에 변수에 할당해 변수를 사용하는 컨셉인가요?

#질문1. 애니메이션을 변수에 할당 할때, 변수의 let/cost 둘중에 어떤 것으로 정의해야 할까요?

변수 tl과 같이,
timeline()을 호출한 함수를
변수에 정의 할 때, let으로 해야 할지, const로 해야 할지

궁금함합니다.

const tl = gsap.timeline()
let tl = gsap.timeline()

함수를 할당하는 변수에 주로 const 변수에 담아 사용해와서,

강좌에서는 let으로 정의해주신 부분에 의미가 있을까,

궁금함이 생겼습니다!


GSAP도 JS다 보니,

사용자가 실수로 이미 정의한 tl 변수에 다른 애니메이션도 추가할 수 있는 위험이 있고 그럴까요??

강의 초반부에 gsap에 다른 값을 할당하면 안된다는 부분과 어떤 연관성이 있는걸까요?

GSAP도 JS 라이브러리 다보니,
변수 정의하는 것도 let과 const로 각각 정의할 때 차이점이 있지 않을까 해서 문의 드렸습니다!

 

#질문2. GSAP에서는 애니메니션01, 애니메이션02, 와 같이 각각 애니메이션을 정의하고, 이것을 각각에 변수에 할당해 변수를 사용하는 컨셉인가요?

GSAP 파트3을 수강하기 위해, 열심히 정주행중입니다!
감사합니다!



 

 

 

 

답변 1

0

범쌤 님의 프로필 이미지
범쌤
지식공유자

2023. 10. 29. 23:46

안녕하세요 프린이님 :)

 

 

#질문1. 애니메이션을 변수에 할당 할때, 변수의 let/const 둘중에 어떤 것으로 정의해야 할까요?

A. 둘다 사용하셔도 되지만 권장되는건 const 사용이 권장됩니다. 애니메이션을 작업하다보면 기존 애니메이션 변수에 다른 애니메이션을 덮어쓸일이 거의 발생하지 않기 때문에 실수를 막기 위해 const사용을 권장합니다.

(강의 후반부로 갈수록 저도 const를 많이 사용합니다)

 


#질문2. GSAP에서는 애니메니션01, 애니메이션02, 와 같이 각각 애니메이션을 정의하고, 이것을 각각에 변수에 할당해 변수를 사용하는 컨셉인가요?

A. 애니메이션마다 다르고, 개발자가 설계하는것에 따라 다릅니다. 파트1에서는 짧은 애니메이션이라도 다양하게 분리해 타임라인에 넣어서 쓰는것들을 보여준 것이고, 파트2와 3에서는 하나의 트윈으로 끝낼 수 있는건 따로 분리하지 않고 진행합니다.

하지만, 짧은 애니메이션 이라도 기능이 확실히 분리가 되어있다면 (A물체가 움직이고 C글자가 나오는) 각각의 타임라인을 만들어서 하나의 타임라인에 합쳐서 관리하는게 유지보수 관점에서 훨씬 좋습니다.

 

 

정리하자면 let과 const로 정의하는건 GSAP에서는 기능적인 문제가 생기진 않으나, 같이 일하는 팀원들이 이를 덮어씌워버릴 실수를 할수도 있기 때문에 const 사용이 권장됩니다.
하지만 이 또한 정해진 바가 아니며, 회사의 개발 컨벤션에 따라 달라질 수 있습니다.

 

 

감사합니다 :)