프로젝트 생성 및 초기 설정vue create [프로젝트명]으로 프로젝트 생성 awesome icon 사용 (index.html)link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> 컴포넌트 생성할 일 관리 앱의 컴포넌트 구조는 헤더, 입력, 목록, 푸터로 구성된다. 컴포넌트 폴더에 To..

Vue의 template은 html, css 드으이 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 html로 변환해 주는 속성이다. template 속성 및 문법데이터 바인딩데이터 바인딩(Data Binding)은 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미한다.1. 텍스트 보간법 - {{ }}template>  span>{{ msg }}span>template>script>export default {  data() {    return {      msg: 'Hello Vue'    }  }}script>이중 중괄호 태그 내 msg 해당 컴포넌트 인스턴스의 msg 속성 값으로 대체된다.2. HTML 출력 - v-html이..

axios는 HTTP 요청을 보내기 위한 라이브러리로, Vue에서 비동기 통신을 쉽게 처리할 수 있다. axios APIaxios.get('url').then().catch(): 해당 url 주소에 대해 HTTP GET 요청을 보낸다. 서버에서 보낸 데이터를 정상적으로 받아오면 then() 안에 정의한 로직이 실행되고, 데이터를 밥아올 때 오류가 발생하면 catch()에 정의한 로직이 수행된다.axios.post('url').then().catch(): 해당 url 주소에 대해 HTTP POST 요청을 보낸다. then()고 catch()의 동작은 위와 같다.axios{( 옵션 속성 )}: HTTP 요청에 대한 자세한 속성들을 직접 정의하여 보낼 수 있다. 데이터 요청을 보낼 URL, HTTP 요청 방식..

라우팅: 웹 페이지 간의 이동 방법 서버 측 라우팅 / 클라이언트 측 라우팅서버 측 라우팅은 사용자가 방문하는 url 경로에 기반하여 서버가 응답을 보내는 것을 의미한다. 전통적인 서버 렌더링 웹 앱에서 링크를 클릭하면 브라우저는 서버로부터 html 응답을 받고 새 html로 전체 페이지를 다시 로드한다. 그러나 싱글 페이지 애플리케이션(SPA)에서는 클라이언트 측 js가 탐색을 가로채고 새 데이터를 동적으로 가져와 전체 페이지를 다시 로드하지 않고 현재 페이지를 업데이트할 수 있다. * 싱글 페이지 애플리케이션(SPA): 페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지들을 받아 놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 ..

컴포넌트란 조합하여 화면을 구성할 수 있는 블록을 의미한다.컴포넌트를 등록하는 방법은 전역과 지역이 있다. 지역 컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖고, 전역 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있다. 컴포넌트 정의하기template>  button @click="count++">당신은 {{ count }} 번 클릭했습니다.button>template>script setup>import { ref } from 'vue'const count = ref(0)script>위 코드는 Vue 3dml 을 사용한 단일 파일 컴포넌트(SFC)이다. Vue 3에서는 Composition API를 사용하여 상태 및 로직을 구성할 수 있는 새로운 기능인 을 제공한다. 을 사용하면 템플릿과 상태 및 ..

2024.05.24 - [분류 전체보기] - Vue.js 개발 환경 설정 (vs code) Vue.js 개발 환경 설정 (vs code)* 브라우저: chrome* 에디터: vs code 1. node.js 설치(설치되어 있으므로 생략) 2. Vue CLI 설치Vue CLI: Vue.js 프로젝트를 생성하고 관리하기 위한 도구npm install -g @vue/clivue --version3. 새로운 Vue.js 프로젝트gamzaggang7.tistory.com 이전에 생성한 프로젝트에서 화면에 Hello Vue를 출력해보자. 현재 화면은 App.vue를 통해 출력되고 있다. App.vue에서 HelloWorld.vue를 가져와 아래와 같은 화면이 보인다. App.vue를 다음과 같이 수정한다.templ..

* 브라우저: chrome* 에디터: vs code 1. node.js 설치(설치되어 있으므로 생략) 2. Vue CLI 설치Vue CLI: Vue.js 프로젝트를 생성하고 관리하기 위한 도구npm install -g @vue/clivue --version3. 새로운 Vue.js 프로젝트 생성vue create [프로젝트명]위 명령을 실행하면 프로젝트 초기 설정을 선택하는 인터페이스가 나타난다.Default ([Vue 3] babel, eslint): Vue 3을 사용하며, Babel과 ESLint를 포함한 기본 설정을 사용Default ([Vue 2] babel, eslint): Vue 2을 사용하며, Babel과 ESLint를 포함한 기본 설정을 사용Manually select features: 프로..

index.js  CanvasOption.jsexport default class canvasOption { constructor() { this.canvas = document.querySelector('canvas') this.ctx = this.canvas.getContext('2d') this.dpr = window.devicePixelRatio this.fps = 60 this.interval = 1000 / this.fps this.canvasWidth = innerWidth this.canvasHeight = innerHeight }}  index.jsimport canvasOption from "./CanvasOption.js"class Canva..