방과후 개발&계발노트

프론트엔드 분야에서는 이제 단순히 화면에 데이터를 뿌려주는 것만으로는 부족해지고 있습니다. 사용자 경험(UX)을 향상시키기 위해서는 자연스럽고 매끄러운 모션 그래픽이 점점 더 중요해지고 있죠. 부드러운 애니메이션과 미려한 전환(transition)은 단순히 시각적 만족을 넘어 사용자의 몰입감과 이해도를 높여주며, 브랜드 이미지를 강화하는 데도 큰 역할을 합니다. 이번 글에서는 프론트엔드 엔지니어가 갖춰야 할 모션 그래픽 기술과 함께, 어떤 부분에 집중해 학습하면 좋을지 정리해보겠습니다.1. CSS 애니메이션과 트랜지션CSS Transition • 간단한 상태 변화버튼 호버 시 색상이 부드럽게 바뀌거나, 요소의 위치가 슬라이드 되는 등 기본적인 모션을 구현할 때 주로 사용됩니다. • 사용 예시button ..

const url = window.location.href; // 확장자포함한 파일명 const filename_ex = url.match(".+/(.+?)([\?#;].*)?$")[1]; // 확장자없이 파일명만 const filename = url.match(".+/(.+?)\.[a-z]+([\?#;].*)?$")[1];

일단 프로젝트안에서 dayjs를 인스톨할것 https://day.js.org/ $ npm install dayjs 간단한 dayjs사용법 import dayjs from 'dayjs' let dayjsDate = dayjs('2019-03-01') // 2019-03-01일자 dayjs 객체 할당 dayjsDate.add(1, 'day') // 1일 추가(반영 X) console.log(dayjsDate.format('YYYY-MM-DD')) // '2019-03-02'가 아닌 '2019-03-01'가 출력됨 dayjsDate = dayjsDate.add(1, 'day') // 1일 추가 console.log(dayjsDate.format('YYYY-MM-DD')) // '2019-03-02' utili..