Isaac Kim Dev Blog

HTML canvas 태그, Javascript로 제어하기 (게임 만들기) 좋아요, 구독 그리고 광고 클릭은 큰 힘이 됩니다. 기본적인 html, javascript, css 지식을 갖고 html canvas 태그를 제어해보자. canvas태그는 웹 페이지에서 도화지 같은 것으로 볼 수 있다. 그리고 캔버스 위에 어떤 것을 그리거나 이미지를 올리거나 할 수 있다. 만약 도화지의 그림이 계속해서 업데이트되어 연속되어 보인다면 우리는 애니메이션처럼 보일 것이라는 것을 알고 있다. 영상에서는 FPS라고 하는 초당 프레임 개념을 떠올리면 된다. 프레임이 계속 업데이트된다는 것은 캔버스라는 도화지가 계속 업데이트되어 보인다는 것. 작업은 다음과 같은 순서로 진행하면 될 것이다. 1. 웹 페이지에 도화지(canva..

[Vue.js | Vue 3] Vue.js CDN으로 시작하기 이전 글 2022.05.25 - [JS & Framework/vue.js] - [Vue.js | Vue 3] Vue.js 시작하기 (설치, 환경설정, CLI, CDN) Vue.js를 CDN으로 시작할 수 있습니다. Vue.js 라이브러리 링크를 걸어서 개발하는 것이죠. 다음은 Vue.js를 CDN으로 처음 시작할 수 있는 가장 간단한 코드입니다. {{ message }} 위 코드 샘플은 모든 API가 전역 Vue 변수 아래에 노출되는 Vue의 전역 빌드를 사용합니다. ref API 사용하려고 한다면 다음과 같이 사용할 수 있습니다. const { createApp, ref } = Vue 그리고 위 코드를 실행하면 화면에 'hello Vue!'..

[Vue.js | Vue 3] Vue.js 시작하기 (설치, 환경설정, CLI, CDN) Vue.js는 CLI, CDN 방식의 프로젝트 개발 환경을 제공하고 있는데, CLI를 권장합니다. Vue.js CLI 먼저 Vue.js CLI방식으로 프로젝트 개발 환경을 세팅합니다. 메인 페이지의 Install 버튼을 눌러서 Vue.js 개발 환경을 세팅할 수 있는데요. 먼저 Node.js를 설치해야 합니다. Windows 사용자라면, Node.js공식 홈페이지에 접속해서 Node.js LTS 버전을 설치해주시면 되고, 리눅스(Linux)/맥(Mac) 사용자라면 쉘 명령어로 설치할 수 있습니다. Node.js가 설치가 되었다면, 다음 명령어를 사용해 Vue 빌드 툴의 설치와 Vue 프로젝트를 생성할 수 있습니다. ..

[Vue.js] img 태그 src 속성 사용 시 이미지가 나타나지 않는 경우 해결 기본 html 문법처럼 img 태그와 src 속성 세팅을 했는데 이미지가 보이지 않는 경우이다. 이미지는 vue-cli 프로젝트에서 src > assets 폴더 내에 위치해있다. html 문서에서는 img태그를 사용해서 이미지를 불러올 때 다음과 같이 작성한다. 하지만 vue에서 위와 같이 작성하면 이미지가 나타나지 않았다. html 형식으로 작성을 했을 때 코드를 열어보면 다음과 같이 세팅이 되어 있는데, 링크가 저렇다면 정적 파일 위치에 접근해야 한다. 여기서 해결해낸 방법으로 2가지 방법이 있다. 1. Web Server 파일 접근 방식 (정적 파일 접근) 2. WAS 파일 접근 방식 (동적 파일 접근) 위 두가지 ..

[Vue.js] Vue 3 기초 문법 데이터 바인딩 (Data Binding) Vue에서 데이터 바인딩 하는 방법에 대해서 알아보겠습니다. 아래는 xxx.vue 라는 파일에서 데이터 바인딩을 하는 코드를 나타냅니다. // App.vue {{text}} data() { return { name : value } } 로 표현을 해도 되고 data : () => ( { name : value } ) 로 표현해도 됩니다. name에 세팅한 value값을 html 코드상에서 사용하려고 하는 위치에 {{ }} 콧수염 괄호에 세팅한 data의 name 값을 넣어주면, name에 세팅된 value가 출력됩니다. Vue 데이터 바인딩은 style에도 적용할 수 있습니다. 태그의 속성으로 사용될 때에는 콜론(:)속성명을 ..

[Vue.js] Vue CLI 프로젝트 : Mixins 활용, 유의사항 이전 글 2022.02.14 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : Mixin 이번 글에서는 Mixins을 활용해보려고 합니다. 지난 글에서 같은 기능을 모아 두고 mixins으로 공통 코드를 불러와 사용하는 방법을 알아보았는데요. Vue 옵션 중에 data, computed 등 다양한 옵션도 추가할 수 있습니다. # Vue 객체의 data를 mixin하기 지난 글에서 분리했던 코드를 src > mixins > dateFormat.js로 분리했는데요. 해당 파일에 data 변수 하나를 추가해보겠습니다. data : () = >({ mixinData : 'mixin data' }) ..

[Vue.js] Vue CLI 프로젝트 : Mixin Vue.js에서 Mixin은 공통으로 사용되는 기능을 한 곳에 모아서 관리하는 방식을 말합니다. 코드를 여러 컴포넌트에서 반복해서 사용하지 않고 한 곳에 모아 두고 mixins 옵션을 통해 공통 코드를 불러와 쓴다면 코드의 중복을 줄일 수 있습니다. 다음 캡처한 이미지를 보면, 부모 컴포넌트와 자식 컴포넌트에서 각각 날짜와 시간을 출력하는 것을 확인할 수 있습니다. 다음 이미지에서 보이는 getDateAndTime 함수는 부모 컴포넌트와 자식 컴포넌트에서 사용되고 있습니다. 아래 보이는 이미지는 methods에 직접 함수를 등록해서 사용하는 것이기 때문에 각 컴포넌트에 작성되어 있으므로 코드의 중복이 발생했다고 볼 수 있습니다. 부모 컴포넌트와 자식 ..

[Vue.js] Vue CLI 프로젝트 : 형제 컴포넌트로 데이터 전달하기 mitt 라이브러리 설치 (Vue 3.x) 이전 글 2022.02.14 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : props, $emit 부모-자식 컴포넌트 간 Object 전달 2022.02.13 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : Props 데이터 수정하여 부모 컴포넌트에도 알리기 $emit() 2022.02.13 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : props의 활용 이번 글에서는 이벤트 버스를 통해 형제 컴포넌트로 데이터를 전달하는 방법에 대해 알아보겠습니다. 이..

[Vue.js] Vue CLI 프로젝트 : props, $emit 부모-자식 컴포넌트 간 Object 전달 이전 글 2022.02.13 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : Props 데이터 수정하여 부모 컴포넌트에도 알리기 $emit() 2022.02.13 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : props의 활용 2022.02.12 - [JS & Framework/vue.js] - [Vue.js] Vue.js CLI 프로젝트 : 부모 자식 간의 데이터 전달 Props 오늘은 부모-자식 컴포넌트 간의 데이터를 전달할 때 Object 데이터를 전달하는 것을 보도록 하겠습니다. # 부모 컴포넌트 부모..

[Vue.js] Vue CLI 프로젝트 : Props 데이터 수정하여 부모 컴포넌트에도 알리기 $emit() 이전 글 2022.02.13 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : props의 활용 2022.02.12 - [JS & Framework/vue.js] - [Vue.js] Vue.js CLI 프로젝트 : 부모 자식 간의 데이터 전달 Props 2022.02.12 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : Vuetify Buttons 버튼 사용하기 Props를 사용하면 자식 컴포넌트에서는 부모 컴포넌트의 데이터를 받아서 사용할 수 있습니다. 그런데, 자식 컴포넌트에서 부모 컴포넌트에서 받아온 데이..