새로운세계

Vue.js에서 mounted() 라이프 사이클 훅은 컴포넌트가 DOM에 완전히 렌더링된 후 실행되는 중요한 시점입니다. 이 시점부터 DOM 요소에 직접 접근하여 조작하거나, 외부 API를 호출하여 데이터를 가져오는 등 다양한 작업을 수행할 수 있습니다. 이 글에서는 mounted()를 활용하여 실제 개발에서 자주 마주치는 다양한 상황들을 예시와 함께 자세히 살펴보겠습니다.1. DOM 요소 직접 조작:특정 요소에 이벤트 추가: mounted()에서 addEventListener를 사용하여 DOM 요소에 이벤트 리스너를 추가할 수 있습니다. 예를 들어, 버튼 클릭 시 특정 함수를 실행하도록 설정할 수 있습니다.DOM 요소 스타일 변경: style 속성을 직접 변경하거나 CSS 클래스를 추가/제거하여 DOM..

Vue.js는 간결하고 유연한 구조로 프론트엔드 개발 생태계에서 널리 사용되는 프레임워크입니다. 이와 함께, axios는 자바스크립트에서 HTTP 요청을 간편하게 처리할 수 있는 라이브러리로, Vue.js 프로젝트에서 서버와 통신하는 주된 도구로 활용됩니다. 본 가이드에서는 Vue.js 프로젝트에서 axios를 이용하여 공공 API로부터 JSON 형태의 데이터를 가져오고, 이를 화면에 효과적으로 표시하는 방법을 상세하게 설명합니다. 1. 프로젝트 설정 및 axios 설치먼저, Vue.js 프로젝트를 생성하고 axios 라이브러리를 설치합니다. Vue CLI를 사용하여 간편하게 프로젝트를 생성할 수 있습니다.vue create my-projectcd my-projectnpm install axios 2. ..