GT.IT.

안녕하세요, 오늘은  Vue3 컴포넌트(Component)를 선언, 등록하고 사용하는 방법에 대해서 알아보겠습니다.  우선 컴포넌트(Component)에 대해 알아보겠습니다.   컴포넌트(Component) 란?UI를 재사용 가능한 작은 단위로 나눈 것입니다. 1. 재사용 가능: 컴포넌트는 여러 곳에서 재사용할 수 있는 독립적인 UI 블록입니다. 2. 독립성: 컴포넌트는 자신의 데이터(data), 로직(methods), 스타일(CSS)을 가질 수 있어 서로 간섭 없이 동작합니다. 3. 계층적 구조: Vue 애플리케이션은 루트 컴포넌트를 중심으로 자식 컴포넌트를 계층적으로 포함합니다.  컴포넌트(Component) 종류1. 전역 컴포넌트: Vue 애플리케이션 전역에서 사용할 수 있는 컴포넌트입니다. 2. ..

안녕하세요. 오늘은 vue3(뷰) axios(엑시오스) 설치 및 설정 예시에 대해서 알아보겠습니다. 우선 axios에 대해서 알아보겠습니다. axios란?Axios는 JavaScript에서 HTTP 요청을 쉽게 처리할 수 있도록 돕는 인기 있는 라이브러리입니다. 주로 웹 애플리케이션에서 API 호출을 처리할 때 사용됩니다. Axios는 비동기 방식으로 HTTP 요청을 보내고, 그 결과를 Promise 형태로 반환하여, 응답을 받았을 때 이후 처리 로직을 작성할 수 있게 합니다. axios 특징 Promise 기반: Axios는 기본적으로 Promise를 반환하여, 비동기 요청 후에 .then()이나 async/await 문법을 이용해 응답을 처리할 수 있습니다.브라우저와 Node.js에서 모두 사용 가능..

안녕하세요. 오늘은 vue-router를 설치 및 설정하고 예제를 통해 테스트까지 해보겠습니다. vue-router를 사용하기 앞서서 vue-router를 설치하여야 합니다. vue-router 설치 npm i vue-router@next 위 명령어로 vue-router를 설치 합니다. 명령어를 실행 후 package.json 파일에 dependencies에 vue-router가 있는지 확인합니다. 있으면 설치가 잘 된 것입니다. 설치가 완료 되었으면 이제 vue-router를 사용해 보겠습니다. vue-router 사용하기 전 폴더 및 파일 생성 1. src 아래 router 폴더를 만들어 줍니다. 2. router 폴더 안에 index.js 파일을 만들어 줍니다. 3. src 아래 views 폴더를 ..

안녕하세요. 오늘은 Vue 프로젝트를 생성하다가 날 수있는 에러에 대해 알아보고 해결방법에 대해 알아보겠습니다. helloVue 라는 vue 프로젝트를 생성하려고 vue create helloVue 명령어를 실행 하였는데Invalid project name: "helloVue" Warning: name can no longer contain capital letters라는 에러 메세지를 보았습니다. 에러의 원인은 vue 프로젝트 명에는 대문자가 올 수 없다는 에러입니다. 해결방법은 vue 프로젝트 명을 전부 소문자로 해주면 됩니다. vue create hellovue 명령어를 실행하자 에러 없이 프로젝트가 생성되는 것을 확인 할 수 있습니다. vue 프로젝트 생성시 프로젝트 명은 "소문자"로 입니다. 이..

안녕하세요. 오늘은 WINDOW에서 Vue JS를 설치하는 방법에 대해 알아보겠습니다. Vue JS를 설치하기 앞서서 Vue JS를 사용하기 위한 툴인 VSCode(Visual Studio Code)를 설치하여야 합니다. 아래 URL로 가면 VSCode(Visual Studio Code) 설치 방법이 있습니다. https://nazzang19.tistory.com/49 WINDOW에서 Vue JS 시작 전에 툴(tool) VSCode(Visual Studio Code) 설치 방법 안녕하세요. 오늘은 WINDOW에서 Vue JS를 시작하기전 툴(tool) VSCode(Visual Studio Code)를 설치하는 방법에 대해 알아보겠습니다. 1. 아래 VSCode(Visual Studio Code) 다운로..

안녕하세요. 오늘은 Vue JS를 시작하기 위해서 필요한 Node.js 설치하는 방법에 대해 알아보겠습니다. 1. 아래 Node. js 다운로드 URL로 접속합니다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. 자신에게 맞는 스펙과 버전을 선택 하여 Node. js 설치 실해 파일을 다운로드 받습니다. 2. node-v18.14.2-x64.msi 설치 파일을 실행시킵니다. 3. Next를 클릭합니다. 4. Node. js 라이센스 동의 체크 후 Next를 클릭합니다. 5. Node. js 설치 경로를 선택 후 Next를 클릭합니다. 저는 변..

안녕하세요. 오늘은 WINDOW에서 Vue JS를 시작하기전 툴(tool) VSCode(Visual Studio Code)를 설치하는 방법에 대해 알아보겠습니다. 1. 아래 VSCode(Visual Studio Code) 다운로드 URL로 접속합니다. https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optim..