abcdefghklpqrstuvwxyz

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): 페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지들을 받아 놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 ..

Vue.jsvue 개발 환경 설정 및 프로젝트 생성컴포넌트 기초뷰 라우터Canvas캔버스 사이즈, resize파티클 그리기, 애니메이션 추가svg 필터 (feGaussianBlur, feColorMatrix), Gooey 효과dat.GUI 활용코딩 테스트프로그래머스 PCCE 기출문제 1~10번프로그래머스 입문 30문제JLPT한자 읽기pp.28~26, 40~43 암기pp.34~39 문풀문법pp.238~239 암기pp.240~241 문풀단어 테스트 1회

컴포넌트란 조합하여 화면을 구성할 수 있는 블록을 의미한다.컴포넌트를 등록하는 방법은 전역과 지역이 있다. 지역 컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖고, 전역 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있다. 컴포넌트 정의하기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..

npm init -ynpm install -D parcel package.json{  "name": "js",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "dev": "parcel ./index.html",    "build": "parcel build ./index.html"  },  "keywords": [],  "author": "",  "license": "ISC",  "devDependencies": {    "parcel": "^2.12.0"  }}index.htmlDOCTYPE html>html lang="en">head>  meta charset="UTF-8">  meta name="viewp..

int i=7;int j=3;double answer = i/j;System.err.println(answer);결과) 2.0         int i = 7;        int j = 3;        double answer = i / (double) j;        System.err.println(answer);결과) 2.333333333