- 책 정보최신 기술 흐름을 반영해 Vue 3의 핵심 기능을 실무에 바로 적용할 수 있도록, 실용적인 코드 예제와 함께 구체적으로 설명한다. 컴포지션 API, Pinia, 라우터 설정, 그리고 서버 사이드 렌더링 등 현대 웹 애플리케이션 구축에 필수적인 주제들을 상세히 소개한다. 또한, 최신 프런트엔드 개발 트렌드에 맞춘 단위 테스트, CI/CD 통합, 트랜지션 및 애니메이션 기능까지 설명하며 실전에서 바로 사용할 수 있는 프로젝트를 구축하는 방법을 제시한다.- 도서 리뷰이 책은 Vue의 기본 동작 원리와 구체적인 활용법을 상세히 다루면서도, 초보자와 중급자 모두 쉽게 따라할 수 있는 친절한 설명을 제공한다. 기초적인 Vue 인스턴스 구성부터 시작해 고급 컴포넌트 간 통신 방법, API를 통한 데이터 통..

[Toy Project] 웹페이지에서 랜덤한 픽셀 떨어뜨리기 애니메이션 구현하기 [CSS 애니메이션과 JavaScrip- 웹페이지에서 랜덤한 픽셀 떨어뜨리기 애니메이션 구현하기웹페이지에서 픽셀들이 화면 상단에서 하단으로 랜덤하게 떨어지는 간단한 애니메이션을 구현해보려 한다.HTML, CSS, JavaScript를yermi.tistory.com- 떨어지는 픽셀이 바닥에 쌓이는 애니메이션 구현하기이번에는 화면 상단에서 떨어지는 랜덤한 색상의 픽셀이 바닥에 쌓이는 애니메이션을 구현해보려고 한다.- stacking-pixels.htmlpixel-container를 포함한 HTML 기본 구조를 설정한다.이 컨테이너는 픽셀들이 쌓이는 공간이 된다. - stacking-pixels.csspixel-con..

- 웹페이지에서 랜덤한 픽셀 떨어뜨리기 애니메이션 구현하기웹페이지에서 픽셀들이 화면 상단에서 하단으로 랜덤하게 떨어지는 간단한 애니메이션을 구현해보려 한다.HTML, CSS, JavaScript를 사용하여 간단하게 만들어 볼 것이다.- falling-pixels.htmlHTML 파일에서는 기본적인 구조와 컨테이너 요소(pixel-container)를 정의한다.pixel-container는 픽셀들이 떨어질 영역을 지정한다. -falling-pixels.csspixel-container와 pixel 클래스에 대한 스타일을 지정한다.픽셀의 크기, 초기 위치, 애니메이션 키프레임(@keyframes fall)을 설정하여 픽셀들이 떨어지는 동작을 구현한다.body { margin: 0; p..

- 이미지맵 반응형 웹 사이트에 적용하기반응형 웹이거나 브라우저 크기를 변경할 때 이미지맵의 크기가 달라진다.jQuery-rwdImageMaps를 쓰면 해결할 수 있다.기존 라이브러리에서는 브라우저 크기 조정 시 이미지맵 coords가 NaN으로 변하는 버그가 있었다.해당 버그는 내 repo로 fork 해서 수정해놓았다. GitHub - kycasdzxc/jQuery-rwdImageMaps: Responsive Image Maps jQuery PluginResponsive Image Maps jQuery Plugin. Contribute to kycasdzxc/jQuery-rwdImageMaps development by creating an account on GitHub.github.com- jQue..

- 브라우저 URL에서 매개변수 값 추출하기 웹 애플리케이션을 개발하다보면 종종 현재 페이지 URL에서 특정 매개변수 값을 추출해야 할 때가 있다. 이를 위해서는 JavaScript를 사용하여 URL을 파싱하고 필요한 정보를 추출해야 한다. 이번 글에서는 JS의 URLSearchParams 객체를 활용하여 브라우저 URL에서 매개변수 값을 추출해 볼 것이다. 이 객체를 사용하면 URL의 쿼리 문자열을 쉽게 파싱하여 매개변수 값을 가져올 수 있다. 아래는 getValueFromPreviousPage 함수를 통해 이전 페이지에서 특정 매개변수 값을 가져오는 예제이다. 이 함수는 페이지가 로드될 때 실행되어 이전 페이지에서 전달된 매개변수 값을 추출하고, 해당 값이 존재하면 추가적인 작업을 수행한다. // 이..