Jacob's Development Blog

커머스의 배송 상태, 음식 배달앱에서 배달 상태에 따라 타임라인 형식으로 구현된 화면을 많이 볼 수 있다. 교육 서비스인 우리 앱에서는 현재 구현할 일이 없어 혼자 한번 구현해 봤다. 실제 상태가 존재하지 않다 보니, hover를 통해 상태가 이동되도록 구현하였다. 여기 코드에서 조금 눈여겨볼 방법은 'component selector'를 사용했다는 것이다. 안타깝게도 react-native에서는 지원하진 않지만, 일반적인 웹과 웹뷰에서는 사용할 수 있다. const Date = styled...; const Title = styled...; const Contents = styled...; const TimelineItem = styled.div` position: relative; padding: 2..

더보기 넋두리... 오랜만에 받은 2주의 휴가. 사실 전부 주말근무 대체 휴가다. 신규 서비스 오픈으로 인해 어쩔 수 없이 대체휴가를 내야 했고, 연말에 몰아 쓴(?) 덕분에 시간이 많이 생겼고 너무 행복했다. "아 드디어 내 공부를 할 수 있겠구나...!" 물론 회사일도 재밌긴 하지만, 파이썬부터 블록체인까지 너무 해보고 싶은 공부가 많았다. 그리고 그 하고 싶던 공부를 하기 시작했다. 하다 보니 문뜩 심심해졌다. 왜지? 나는 이번 회사에서는 온전한 프론트 개발자였다. 늘 내가 친 코드는 화면에 모두 보였다. 그런데 파이썬으로 백엔드를 만들다 보니 크게 보이는 게 없었다. 리액트를 view로 쓸 거기 때문에 템플릿을 써서 장고로 어드민을 굳이 만들고 싶지가 않았다. "그래서 내가 쉬는 시간마다 아니면 ..

간단하게 아코디언(Accordion)을 구현해 보려고 한다. 사실 Bootstrap, Material-ui 등 이미 많이 구현되어 있어서 직접 구현할 일은 많지 않겠지만, 자체 디자인 시스템을 만들기 시작한 지 얼마 안 되었다면 가끔은 직접 구현할 일도 있다. 사실 내 이야기이다... 뭐 여하튼... 어려운 것은 아니니깐 살짝만 구현해 보려고 한다. Accordion이 뭔데? Accordion은 접었다 펼수 있는 카드 컴포넌트라고 생각하면 쉽다. 예를 들어 실제 우리 홈페이지에서 내가 구현한 컴포넌트를 본다면 아래와 같은 모습이다. 결제 페이지인만큼 애니메이션은 과하지 않은 선에서 자연스럽게 적용해봤다. Typescript와 styled-components를 이용해서 만들어 봤는데, 사실 성능을 생각한다..