Vue 3 (Composition API) + Vite 기반 프로젝트에서 Axios 인스턴스를 구성하고, 기능별로 API 디렉터리를 모듈화 하여 관리하는 실전적인 구조에 대해 알아보겠습니다. 이 글에서는 axios 설정부터 인터셉터 활용, API 모듈 분리, 컴포넌트 연동, 환경 변수(. env) 사용 팁, 확장 포인트, 그리고 팀 협업 관점의 적용 사례까지 폭넓게 다룹니다. Composition API 문법과 마크다운 형식으로 작성되었으며, 예제 코드는 Vue 3 기준으로 설명합니다.1. Axios 인스턴스를 구성하는 이유와 인터셉터 원리Axios 인스턴스를 별도로 생성하여 사용하는 것은 대규모 Vue 프로젝트에서 반복 코드를 줄이고, 설정을 일원화하기 위해 매우 유용합니다. Axios 인스턴스를 사용..

Vue.js란 무엇인가Vue.js는 사용자 인터페이스를 구축하기 위한 자바스크립트 프레임워크이다.표준 HTML, CSS, JavaScript 위에 구축된 Vue는 선언적이고 컴포넌트 기반의 프로그래밍 모델을 제공하여 복잡한 UI도 효율적으로 개발할 수 있게 한다. Vue는 React나 Angular와 달리, 프로그레시브 프레임워크를 지향한다. 필요한 기능만 점진적으로 채택할 수 있어 기존 프로젝트에 무리 없이 도입하기 쉽다.Vue 3 버전에서는 컴포지션 API (Composition API)를 도입하여 상태와 로직을 보다 유연하게 구성할 수 있게 되었고,성능과 개발자 경험 면에서도 여러 개선이 이루어졌다.즉, Vue.js는 가볍지만 강력한 프론트엔드 프레임워크로, 뷰(View) 레이어를 중심으로 한 빠른..

JavaScript실습 지금 실습을 통해 만들어볼 애플리케이션은 기존에 HTML과 CSS를 사용해 만들었던 JavaScript교육 페이지에 다크모드를 JavaScript를 통해 추가할 예정이다. 버튼 생성 위와 같이 input을 통해 button을 생성하고 button의 값으로 white을 입력하면, white가 적힌 버튼이 생성된다. type으로 text를 적게 되면, 텍스트가 생성이 된다. type으로 checkbox를 입력하면, 체크가 가능한 박스가 생성된다. 이렇게 type으로 주는 값에 따라 다양한 타입의 input이 생성된다. type button text checkbox 경고문 script태그 안에 alert("")을 사용하면, 브라우저에서 경고문이 생성된다. 이벤트 프로그래밍 HTML 태그..

변수 JS PHP 변수명; $변수명; PHP는 변수명 앞에 달러표시($)를 붙여야 한다. 붙이지 않을 경우, Error가 발생한다. 연산자 JS PHP + + - - * * / / 문자열을 더할 경우 JS는 +연산자를 사용해 문자열을 더할 수 있지만, PHP는 점(.)을 사용해야지 문자열끼리의 결합이 가능하다. JS document.wirte("안녕"+"하세요"); → 안녕하세요 PHP echo "안녕"."하세요" → 안녕하세요 비교 JS PHP == == != != > > 배열 배열은 연관되어있는 정보를 하나의 그릇에 담아서 체계적으로 관리할 수 있다. JS PHP list = new Array( "one","two","three" ); list[0]; $list = array( "one","two",..