0. 서론
인터렉티브 개발자가 되자!라고 다짐한 후, 첫 학습 목표로 잡은 것은
Framer motion입니다.
솔직하게 말하자면 framer motion, react spring, gsap 등등 있었는데 검색해보니 framer motion이 원체 이쪽에서 유명하기도 하고, 리액트와 호환성도 높고,..도 있지만
크루에게 뭐부터 배워볼까요?했을 때
framer motion? 저 framer motion 배워볼려다가 말아서..
이런 답변을 받아서 "아 그래요? 그럼 framer motion 부터 해봐야지"
하고 바로 채택했습니다.. 😅
1. 오직 공식문서만이 존재한다
솔직하게 말하자면 저는 리액트도 그렇고 처음 학습할 때 공식문서부터 보는 사람은 아니었습니다.
공식문서? 영어 읽기싫어, 한글 공식문서있어도 공짜인 공식문서보다는 돈 받고 파는 유명한 책,인강의 내용 더 좋을거야(?)
라는 생각에 찌들어있던 사람이기때문입니다.
이런 저를 벌하는걸까요(?)
학습을 위해 Framer motion 책, 강의를 찾아보는데, 아무것도 나오지 않았습니다.. 진짜 udemy에는 있을 줄 알았는데 여기에도 없었습니다 😳
최후의 보루로 한글 번역 공식문서 github라도?! 하고 찾아보는데 이 역시 없었습니다
그렇게 공식 문서 번역 외길을 걷기 시작했습니다
사실 이 때 계속 번역하면서도 '이게 맞나?' 라는 생각을 계속 했던것 같습니다. 인공지능으로 복붙해가며 머리 비우고 번역을 돌리면서, 분명 이 번역본이 있어야 학습할 수 있는거 알면서도 이 시간이 아깝게 느껴졌습니다.
그래도 끝까지 꾸역꾸역 번역을 돌려 완성한것이 아래 레포지토리입니다.
지금 현시점에서 생각해보면, 공식문서로 제대로 학습해본적도 없는 저였기에 제가 돌린 번역본이 제 학습에 끼칠 영향력을 낮게 봤기에 쓸모 없는 시간을 보내고있는 것 같다라고 느꼈던 것 같습니다.
이렇게 간신히 만들어낸게 무려 4주전 입니다..
번역본을 만들어 놓고도 3주를 계속 질질 끈것이죠.
사실 강의,책을 보면 학습 순서도 다 정해져있고 그에 맞춰서 그 적절한 난이도의 예제 코드도 자세한 설명과 함께 다 서술되어있잖아요?
이게 없다보니 어떻게 해야될지도 모르겠고, 우테코 생활이 바쁘다는 핑계를 대며, 질질 끌며 고민만 하는 시간만 보냈습니다.
2. 나의 구원자 캐러셀...✨
여기서 부터 정말 1주차 학습의 시작점은 캐러셀 구현이라고 생각합니다.
AnimatePresence가 Framer motino의 첫 부분도 아니었지만 이 에제를 첫 구현해보기 목표로 잡은 이유는 우테코 레벨3 프로젝트에서 개발 첫 주에 제가 맡은 부분이 캐러셀 컴포넌트였기 때문입니다.
첫번 째 주에 거의 mvp 구현 거의 끝난거 같은데? 라는 말이 나올 정도로 말그대로 갈아졌었습니다.
이 때 그래서 사실 클로드에 거의 업혀서 구현을 서둘러 하고 시간 문제상 코드리뷰도 못하고 바로 머지하는 경험을 했습니다.
프로젝트의 최우선은 시간내 구현이라고 생각했기에 어쩔 수 없다고 생각하면서도 허탈한 감정이 드는 것도 어쩔 수 없더라구요.
이 때 생각이 나서 여기서라도 캐러셀 구현을 스스로 똑같이 해봐야겠다고 다짐했습니다.
3. 캐러셀 구현기
우테코에서 배웠던 문제 쪼개기가 여기서 도움이 많이 됐습니다.
처음에는 구현하고자하는 핵심 기능 ver0.0.1을 만들어보는 것입니다.
- 일단 버튼을 누르면 이미지가 다음 이미지가 렌더링되게한다.
- 현재 이미지가 언마운트될때, 다음 이미지가 마운트될 때 애니메이션이 동작하게한다.
- 드래그했을 때도 이미지가 넘어가도록 한다.
1번은 쉽게 구현했고, 2번 기능을 적고나서
이게 왜 AnimatePresence의 첫 번째 예제인지 알겠다라는 생각을 했습니다. AnimatePresence는 컴포넌트의 moun,unmount를 포착하여 애니메이션 구현을 해줄 수 있는 컴포넌트이기때문입니다.
3번도 공식문서에 검색으로 바로 나왔기에 쉽게 구현할 수 있었습니다.
예전이긴하지만 구현하기 전에 공식문서를 얇게라도 한 번 훑어봤던 것도 도움이 많이 된 것 같습니다.
첫 번째 예제가 AnimatePresence에서 가장 복잡한 예제였기 때문에 나머지 예제들도 금방 구현할 수 있었습니다.
4. 함께 학습한 타입스크립트가 도움이
Reorder.Group의 onReorder에는 setState 함수를 전해줘야합니다.하지만 바로 전해주면
'(newOrder: Ingredients[]) => void' 타입은 '(newOrder: unknown[]) => void' 타입에 할당할 수 없습니다.
'newOrder'와 'newOrder' 매개변수의 타입이 호환되지 않습니다.
'unknown[]' 타입은 'Ingredients[]' 타입에 할당할 수 없습니다.
'unknown' 타입은 'Ingredients' 타입에 할당할 수 없습니다.위와 같은 에러가 뜹니다. Framer Motion은 자신이 재정렬할 요소들의 타입을 알 방법이 없기에 onReorder prop의 타입을 (newOrder: unknown[]) => void로 정의하고 있기 때문입니다.
const handleReorder = (newOrder: unknown[]) => {
if (newOrder.every((item): item is Ingredients =>
typeof item === 'object' && item !== null && 'icon' in item && 'label' in item
)) {
setItems(newOrder);
}
};따라서 위와 같이 타입을 맞춰서 handleReorder함수를 만들어줬습니다. 우아한 리액트 타입스크립트에서 "오오~"하며 읽었던 부분(A is B 사용하는 예제)이라 여기서 딱 배운 내용을 사용할 수 있어서 좋았습니다.
사실 타입스크립트,framer motion,우테코의 프로젝트.. 제가 너무 학습면에서 욕심을 내서 오히려 덜하는것 못하는 output을 내는게 아닌지 걱정하는 부분도 있었는데 이 걱정을 사라지게 해주는 경험이어서 기억에 남습니다.😊
5. 예제 컴포넌트가 없으면 간단한거라도 만들어보기
위 링크처럼 예시 코드는 있지만 컴포넌트 예제는 아예 없는 파트도 있습니다.
뭔가 생각해서 눈에 보이게 구현할 때 학습이 잘되는 편이기때문에
간단한 예제 컴포넌트라도 구현해봤습니다
useTransfrom이 motionValue를 받아서 mapping도 해줄 수 있기 때문에, useVelocity값으로 요소가 드래그되는 속도를 받아서 이 값을 1~2사이로 mapping해서 속도가 높아지면 요소가 최대 2배까지 커지는 컴포넌트를 구현해보았습니다
github | useTransform 간단 예제 만들어보기
6. 아쉬운 점
사실 커밋을 위에서 문제쪼개기처럼 단계적으로 하지 못했습니다.
이번 주에 구현한 거의 모든 예제를 이미 구현을 다 마친후 한번에 commit했습니다.
단계적으로 커밋한다면 제 사고과정을 나중에도 알기 쉬울거같아서 아쉬게 생각하는 부분입니다.
7. 다음 주 학습 액션플랜
- 1.예제를 보며 이 예제가 왜 이 학습파트의 예제가 됬는지 생각해보기
- 2.예제가 없더라도 간단하게 만들어보기
- 3.commit을 좀 더 쪼개서 하기
이번주에 이미 실행한 액션플랜 1,2번에 아쉬웠던 부분을 보완할 3번을 추가해서 3가지로 정리해보았습니다 ✏️
8. 마무리 (+ 경험으로 얻은 것)
인터렉티브 개발자가 되고싶어서 시작한 Framer motion 학습이었지만,
Framer motion 학습 내용뿐만 아니라 앞으로 제 개발 학습에 영향을 크게 끼칠만한 경험들도해서 정말 뜻깊었습니다.
- 한 번에 너무 여러개 공부하는게 아닐까? 했는데 오히려 시너지 효과를 얻었다. (framer motion + typescript)
- 공식문서 학습 공포증을 이겨냈다.(공식문서 학습 루틴을 어떻게 가져가야할지 대충 감이 잡히고 자신감을 얻음)
1번때문에 공부 범위를 줄여야되나?하고 고민하고있다가 오히려 자바스크립트 공부까지 추가할까 진지하게 고민하고있네요 😅
글이 많이 길어진것 같은데 이번 회고는 여기서 마무리해보도록하겠습니다
읽어주셔서 감사합니다!
