TIL-FRONTEND-2 손잡이가 있고 드래그와 원위치가 가능한 카드


드래그 가능한 카드

개발기록

create-next-app으로 새로운 앱, 저장소를 만들고 javascript에서 typescript로 코드 베이스를 갈아탔다. typescript를 쓰는 이유는 사실 별로 없다. Python에선 열렬한 정적 typing 추종자이지만 typescript의 type system에는 곧잘 : any를 쓰고 만다. 다만 언젠가 유지보수를 하기 위해서 누군가가 코드를 보게 되었을 때 동적 타입 지옥을 만날까봐 겁이 나서 typescript를 쓰기로 한다.

드래그 가능한 카드 만들기

일단 y축으로 드래그할 수 있는 카드를 만들었다. 직관성을 위해서 여러가지 작은 트윅들, 자간, 행간, margin, padding 같은 것들을 좀 신경썼고 그 밖에도 상태 관리라든지 애니메이션 종료 시점이라든지 카드를 움직일 때 텍스트가 드래그 된다는 점이라든지 신경써야 할 부분들이 산더미라는 걸 배웠다.

다운과 함께 끝내주는 유저 인터페이스를 만드실 UI Engineer님의 연락을 언제든 기다리고 있습니다.

  • iam@nyanye.com

#BUILD_IN_PUBLIC #TIL #FRONTEND