abcdefghklpqrstuvwxyz

라우팅: 웹 페이지 간의 이동 방법 서버 측 라우팅 / 클라이언트 측 라우팅서버 측 라우팅은 사용자가 방문하는 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..

2024.05.22 - [Canvas] - [Canvas] dat.GUI 사용하기 [Canvas] dat.GUI 사용하기2024.05.21 - [Canvas] - [Canvas] svg 필터 입히기(feGaussianBlur, feColorMatrix) | Gooey Effect [Canvas] svg 필터 입히기(feGaussianBlur, feColorMatrix) | Gooey Effect2024.05.20 - [Canvas] - [Canvas] 파티클 그리기 | 애니메이션 추가(regamzaggang7.tistory.com 현재 캔버스는 화면의 크기를 변경해도 바뀌지 않는다. 처음 js가 로드되었을 때const canvasWidth = innerWidthconst canvasHeight = inn..

2024.05.21 - [Canvas] - [Canvas] svg 필터 입히기(feGaussianBlur, feColorMatrix) | Gooey Effect [Canvas] svg 필터 입히기(feGaussianBlur, feColorMatrix) | Gooey Effect2024.05.20 - [Canvas] - [Canvas] 파티클 그리기 | 애니메이션 추가(requestAnimationFrame) [Canvas] 파티클 그리기 | 애니메이션 추가(requestAnimationFrame)* 현재 js 코드 *const ctx = canvas.getContext('2d')const dpr = widdow.devigamzaggang7.tistory.com dat.GUI는 js 라이브러리로, 웹 애플..

2024.05.20 - [Canvas] - [Canvas] 파티클 그리기 | 애니메이션 추가(requestAnimationFrame) [Canvas] 파티클 그리기 | 애니메이션 추가(requestAnimationFrame)* 현재 js 코드 *const ctx = canvas.getContext('2d')const dpr = widdow.devicePixelRatioconst canvasWidth = 300const canvasHeight = 300canvas.style.width = canvasWidth + 'px'canvas.style.height = canvasHeight + 'px'canvas.width = canvasWidth * dprcanvas.gamzaggang7.tistory.com *..

* 현재 js 코드 *const ctx = canvas.getContext('2d')const dpr = widdow.devicePixelRatioconst canvasWidth = 300const canvasHeight = 300canvas.style.width = canvasWidth + 'px'canvas.style.height = canvasHeight + 'px'canvas.width = canvasWidth * dprcanvas.height = canvasHeight * dprctx.scale(dpr, dpr)  이번엔 파티클을 그리기 위해 arc 메서드를 사용한다.먼저 ctx.beginPath()로 Path를 그릴 것을 선언한다.ctx.beginPath()ctx.arc()로 원을 그린다. h..

js로 커서 팔로워를 만들 수 있다. 먼저 html에 cursor 클래스 div 태그를 생성한다. css로 팔로워를 꾸민다. 나는 분홍색 원으로 만들었다..cursor { z-index: 100000; position: absolute; width: 15px; height: 15px; background-color: rosybrown; border-radius: 50%; pointer-events: none; transition: transform 0.15s ease; transform: scale(1);} mouse_follower.jsdocument.addEventListener("DOMContentLoaded", function () { cons..