vue.js

vue.js vue는 js의 프레임웤이며 interactive하고 reactive한 web font-end를 구축하기위해 사용한다. JS JS는 브라우저에서 사용하는 프로그래밍 언어이고 사용자가 페이지를 로드한 후 브라우저에서 실행한다. 서버에서 새로운 페이지를

Vue.js의 사용법 multi-page-application에서 "widget"(not a general term)을 사용하여 일부만 interactive, reactive하게 개발 single-page-application에서 모든 요소를 vue.js가 관리 V

속성값을 설정할 때 사용 : 가 반드시 뒤에 붙는다.특정 이벤트(JS이벤트)에 반응할 때 click, mouseOn, mouseLeave, wheel... etc.만약 당신이 DB에서 최초로 값을 가져오고 이를 다시 "평가"하고싶지 않을 때 사용하는 directive이

react 에서도 자주 사용하던 패턴으로 state의 value값을 해당 input tag에 넣어서 동기화시켜주는 작업을 했었다.마찬가지로 vue도 이러한 기능이 있고 사용법은 아래와 같다.하지만 위와같은 패턴을 매우 자주 사용하는 vue는 이를 단순화한 특수 내장 d

이때 "" 안에 ''를 한 번 감싸서 써야하는데 그 이유는 여기 JavaScript 객체가 있고 또 프로퍼티명에 대시를 쓸 수 없기 때문이다.그러므로 작은따옴표로 래핑하거나 또 다른 방법으로는 카멜 케이스 표기법으로 작성하는 방법이 있다.하지만 이를 보완하기 위해 나온

v-if react에서는 state와 일반 JS 문법을 섞어서 구현을 했었다. 하지만 vue는 v-if라는 directitve를 제공한다. 그래서 위와같이 컨디션을 주고 만약 컨디션이 거짓이라면 아래와같은 결과가 나오기도 한다. 이는 vue가 나중에 truthy가

위 코드는 가장은 스크립트 게임을 만들어보는 과정이다. 코드를 보면 4번째 줄에 this.attckplayer를 확인할 수 있는데 이를 자세히 보면this 키워드를 사용하면 data 프로퍼티도 액세스할 수 있고 Vue 인스턴스 구성 객체 내의 method도 액세스할 수

data props에서 가장 중요한 것은 data에서 정의한 내용을 Vue가 지속적으로 추적한다는 것이다.이전에 설명했듯 Vue는 이 data 객체의 모든 프로퍼티를 전역 프로퍼티와 합쳐서 내부에서 관리하는 하나의 객체로 만든다.이때 methods도 해당 객체에 합쳐진

먼저 앱을 생성한다. 또한 HTML 코드, 즉 DOM에 Vue가 앱을 어디에 렌더링할지 알 수 있도록 메서드로 mount한다.앱을 생성하고 화면에 무언가 나타나기 시작하면 해당 앱이 몇 개의 지점에 도달한다. 이 지점은 생명 주기 단계로 메서드에 반영되며 Vue 앱 구

v-if 디렉션이 있는 곳을 보면 seeDetail 메서드가 존재하는데데이터와 메서드가 위와같다고 생각할 때 toggleDetails의 메서드에 id값을 구분해주는 로직이 없다보니 어떠한 버튼을 눌러도 모든 데이터가 동시에 활성화되고 동시에 비활성화되는 문제가 발생한다

우선 최대한 사용자와 비슷한 환경에서 작업하기 위해선 web server가 필요하다.가장 큰 문제는 file에서 되던 작업들이 local server로 돌리면 몇몇 feature는 안 먹을 우려가 있기 때문이다.또 개발에 더 나은 환경을 제공한다. 지금까지는 변경사항을

우선 프로젝트를 생성하면 위와같은 파일구조를 갖는다.root dir을 보면 굉장히 많은 설정(config)파일이 있는 것을 확인할 수 있다.또 pulic 폴더를 보면 깔끔한데 index.html에 <div id="app"> 요 부분이 실제로 Vue app이 마운트

대신 중괄호를 써서 named export를 불러올 수도 있고 default export도 가능하다. default export 같은 경우는 이름을 아무렇게나 설정해도 된다.

react와 완전히 동일한 개념이다. props로 부->자 데이터를 넘겨주는 방식이다.하지만 문법이 조금 다른데 알아보자.우선 부->자 데이터를 내릴 때 컴포넌트에서 props 즉, 속성값으로 넘기는 방식은 동일하다. 다만, 속성값을 kebab-case로 적어주어야한다

Vue 구성 객체 중 data, methods, computed, watch, props... 말고도 또 emit 이라는 속성값이 있다.이 emit은 props에 대응한다. 무슨말이냐면 props에서는 컴포넌트가 수신하는 프로퍼티를 정의했고 emits에서는 컴포넌트가

위와같이 BaseButton이라는 예제 UI component가 있다고 해보자.이때 별다른 속성값이 지정이 안 되어있다.그런데 사용할 때 여러 속성값을 지정해줘도 에러가 안 나고 잘 작동한다. Vue에는 "fallThrough" property(event) 지원이 내장

component 메서드를 사용해서 앱에 컴포넌트를 등록하면 소위 말하는 전역(global) 컴포넌트로 등록된다.즉 전역 컴포넌트 : Vue 앱 어느 곳에서나, 즉 어느 템플릿에서나 사용할 수 있는 컴포넌트이다.그렇게되면 어느 컴포넌트에서든지 사용할 수 있다.main.

react의 children 포지션.개발자는 기본적으로 중복을 굉장히 싫어한다.그러면서 앞서 포스팅했던 내용을 보면 styling을 scoped로 지역으로 관리하면서 문제가 같은 코드를 반복하여 사용해야한다는 단점이 생겼다. 하지만 이 slot을 이용하면 해당 컴포넌트

만약 위와같은 코드가 있다고 가정하자. 지금은 조건이 2개밖에 없어서 짧지만 규모가 커진다면 동적으로 렌더링할 때 작성해야하는 코드가 2n으로 늘어날 것이다. 이를 방지하고자 나온 Vue 기능이 바로 <component> 이다.당연하게도 v-bind: 나 축약어

우선 재사용이 가능한 경고 컴포넌트부터 만들어보자.우선 <dialog>로 뼈대를 잡아주고 내부에 children인 <slot> 을 넣어준다.내장 다이얼로그 요소를 표시하려면 open 속성이 필요하다. open이 없다면 동작하지 않는다.그러므로 이 다이얼로그를

fetch API fetch 메서드의 첫번재 인수는 URL이고 2번째 인수로 request을 구성하는 JavaScript 객체이다. 이 객체 안에 method 프로퍼티를 써 넣는다. 기본으로 값은 GET 문자열이지만 POST로도 설정할 수 있다. 그리고 발신 요

앞서 작성했던 포스팅을 보충하고자 추가적으로 작성함.v-model을 사용하면 양방향 바인딩이 가능해서 양식 리셋에도 도움이 된다.또한 양방향 바인딩을 통해 사용자가 입력한 데이터만 수신하는 게 아니라 form에 있는 데이터를 덮어쓸 수도 있다.게다가 input 요소에

라우팅 라우팅은 우리의 URL을 누군가에게 공유하였을 때 화면을 보면 더 정확하게 알 수 있다. 또는 어떠한 작업을 해 놓았다고 가정할 때 URL이 메인페이지 밖에 없다면 다시 처음부터 일련에 행동들을 다시 수행해야한다는 단점이 있다. 이를 방지하고자 라우팅이라는 기능

scrollBehavior 프로퍼티는 사실 메서드인데 페이지가 바뀔 때마다 Vue 라우터로 호출하는 메서드이다.이는 3개의 매개변수를 갖고있는데 이중 to, from은 사실 라우트 오브젝트이다.그래서 자동으로 this.$route를 갖고있다. 그래서 to는 .back(

그렇다면 아래 코드와는 무슨 차이가 있을까?만약 코드의 중복성을 줄인다는 점에서 nested route를 사용하고 싶다면 밑에 children에 해당하는 커스텀 컴포넌트단에서 <router-view> 가 적혀있어야한다.Vue 라우터가 어디로 로드할지 모르기 때문에

내비게이션 가드는 인증과 같은 기능을 추가할 때 유용하게 쓰인다.인증하지 않은 사용자가 특정 라우트에 액세스할 수 없도록 방지하는 경우를 예로 들 수 있다.하지만 일부 코드를 실행하고 싶을 때 페이지 변화를 감지하기에도 유용하며사용자가 양식을 수정한 걸 저장하지 않은

3항 연산자로 class 부여하기 앞서도 포스팅하였지만 더 간단한 방법이 있다. 일반 class는 고정값이고 :을 동적으로 바인딩하여 : 3항 연산자로 참일때 클래스를 부여하도록 하였다. 문제점 react와 같은 문제를 갖고있다. dom에서 해제되면서 즉시 사라지기

transition-group 컴포넌트가 있는데 이름에서부터 알 수 있듯이 이 컴포넌트는 여러 요소에도 사용할 수 있다.또한 여러 요소에 동시에 애니메이션을 적용할 수 있다.ul 요소에 사용하면 유용하다. 또한 한 번에 여러 항목을 추가하거나 제거하는 목록에서도 사용

우선 animation이기 때문에 당연 <transition> 과 관련이 있다.그리고 이때는 animation을 적용하기에 route-enter-from, route-enter-to가 필요없고 -active만 필요하다.router-view가 내부에서 렌더링될 콘텐

react에서 매일 써왔던 state(상태) 이 개념을 알고는 있지만 정확하게 무엇이다 라고 정의하긴 어려웠다. 하지만 여기서 알아보자.state는 data로 변환가능하다. 이때 data는 애플리케이션이 필요로 하는 데이터와 사용자가 화면에서 무엇을 보는지에 영향을 주

만약 우리가 작업하는데 있어 동기작업인 http와 함께 로직을 짜야하는 상황이 온다 가정해보자.하지만 문제는 mutaions는 언제나 동기식이라는 것인데 mutaions에는 비동기식 코드가 허용되지 않는다.따라서 mutaions이 실행되면 중단없이 단계별로 실행되면서

이는 store drilling을 방지하고자 나온 개념이다. 우선 아래와 같은 예시를 봐보자.사실 위 코드는 큰 무리는 없지만 this. 키워드 밑으로 $store... 가 너무 귀찮다면 mapGetters를 이용해봐도 좋겠다.computed 객체 내부에서 이 함수를

프로젝트에 사용되는 UI boiler plate를 작성했습니다.

vuex로 굳이 store module을 왜 만들까?로그인할 때 요청을 보낼 수 있는 엔드포인트 주소가 있다. 이 컴포넌트 내에서 요청을 발송하면 안되기 때문이다.또 나중에 토큰이나 사용자 로그인 여부 등의 정보도 결국 Vuex에 저장하기 때문이다.우리가 현재 작업 중

만약 로그인도 안 했는데 특정 글쓰기 페이지라든지, admin 페이지를 접근하면 곤란하다. 그래서 앞서 배운 것들을 종합하여 로직을 만들어보고자 한다.여기서 store는 수동으로 import해와야한다!!

을 하면 원래 다 사라지는게 정상이다. 왜냐면 새로고침 === 새로운 vue앱 생성 이기 때문에 이전에 있던 vuex의 state도 새로 시작하는 것이 원래는 맞다. 하지만 30초 전에 로그인 한 정보가 새로고침 한다고 해서 다 날아가는 것은 정말 non sense이다

중요하지 않은 컴포넌트(로딩, 세부사항, 조건이 충족할 때, 조건이 충족하지 않아 로드할 필요가 없는 컴포넌트)들을 나중에 천천히 로드하겠다는 뜻이다.이는 사용자가 로드할 때 최소한의 컴포넌트를 로드하여 조금이라도 더 빠른 컴포넌트를 로드하여 사용자로 하여금 더 빠른

npm run build를 실행해서 스크립트를 실행한다. 스크립트는 모든 코드를 살펴보고 필요한 모든 파일을 하나의 큰 앱 파일과 비동기 컴포넌트를 위한 작은 청크 파일로 묶어준다. 그리고 코드를 브라우저가 이해하는 코드로 변환하고 최적화해서 최대한 작고 효율적으로 만

특징 우선 Vue3로 넘어오면서 가장 크게 바뀐 점이 될것이다. 조금 다른방식으로 컴포넌트를 구축하는데 이게 완전히 바뀌는게 아니고 템플릿과 스타일링은 그대로이고 프로퍼티나 사용자 설정 이벤트도 그대로인데 컴포지션 API를 사용하면 JavaScript 코드는 달라진

ref와 reactive의 차이를 사진 한 장으로 구별해보겠다.위가 ref 앞서 말 했든 .value에 값이 들어있고 getter, setter 메서드가 존재한다.아래가 reactive Proxy 객체로 만들어졌고 객체 내부에 값이 들어가있다.즉, 전체 객체는 반응형이

근데 computed:{}를 안 쓰고 computed() 메서드를 쓴다 ㅋㅋcomputed(function(){}, ) 여기서 function(){}에 사용된 의존성을 자동으로 Vue가 function() 함수를 실행하면서 return문에서 지정한 의존성의 변화를 파악

아마 가장 미친 개편한 기능이 아닐까 싶다.이건 Options API, Composition API의 setup() 보다 훨씬 편하고 그냥 미친 기능이다.JetBrain 社의 IDE에서 자꾸 자동완성을 할 때 <script setup>이 튀어나와서 이건 뭔가 했는

아코디언 사진우선 위 사진과 같은 아코디언 메뉴를 구현해야한다. 요는 다음과 같다.active(아무거나 가능) 변수(data(){})를 선언한다. 그리고 이 active 변수는 click 이벤트 때 실행되는 index값이 한 턴 늦게 적용된다.그리고 똑같은 메뉴바를 눌

혹시나 <template> 를 빼먹은게 없나 확인해보자.위와 같은 에러는 html 코드에서 자주 확인할 수 있다. 로직보단 html 태그를 우선적으로 확인하자.

문제 > 개발을 하다보니 클릭 후 서버에 갔다오고 나서 데이터를 렌더링해줘야하는데 한 틱 늦게 적용되는 것을 확인했다. 그 코드는 다음과 같다. App.vue 해당 스크립트 해결법 computed 속성 추가하여 데이터를 listen하여 변경된 값을 바로 적용할

vuex 흐름 순서 javascript 파일 => Actions,Mutations, Getters,State 접근 가능 router.js 참고 : store.getters["myStore/isLogin"] Vue Components => Actions 호출 (비동기일

Proxy 설정

백앤드와 협업하여 Rest API를 기반으로 코드를 작성하다 보면 에러처리를 해야하고 그럼으로써 사용자로 하여금 더 좋은 react를 부여한다.자 다음은 axios docs와 stackOverFlow 형님들이 제공하는 에러 처리 코드이다.그리고 아래는 기존에 사용하던

event.pageX는 마우스 이벤트가 발생한 위치의 x좌표를 나타낸다. (파란색 선)this.$refs.scrollable.offsetLeft는 스크롤 가능한 div 엘리먼트의 왼쪽 가장자리에서 브라우저 창 왼쪽 가장자리까지의 거리를 나타낸다. (주황색 선)즉, ev

작업을 하다보면 optionsAPI에서 compositionAPI로 변환작업을 하다보면 문제가 발생하는 경우가 있을 것이다.라고 가정할 때 위 코드는 작동하지 않는다. 왜? setup 메서드에는 객체를 반환하기에 여기서 자체적으로 참조할 만한 this값이 존재하지 않기

defineProps defineProps 함수를 사용하여 props를 정의한다. defineProps는 객체를 반환하며, 각 속성은 유효성 검사 규칙을 정의한다. 위의 예제에서는 message props를 정의하고, 이 속성은 문자열 형식이어야 하며 필수 속성으로

사실 생명주기라고 적었지만 composition api에서는 라이프사이클 훅을 추가하지 않는다.대신 앞서 <script setup> 처럼 어떠한 함수를 호출한다.beforeCreate, created 훅은 필요치 않다. 왜냐하면 기본적으로 setup 메서드가 be

얘는 주로 dynamic route의 매개변수 얻을 때 사용된다.기존에 위와같은 route.js가 있었다면 ProductDetails 컴포넌트에서는 this.$route를 이용하여 해당 url에 대하여 접근할 수 있었다. 그런데 수차례말하지만 setup 메서드는 lif

앞서 포스팅한 vue-router의 useRouter, useRoute 처럼 vuex의 useStore composable한 함수가 존재한다.컴포넌트에서 useStore를 호출하면 이 애플리케이션에 연결되어 있는 Vuex 저장소에 액세스할 수 있다.이 store에서도

앞으로 코드 재사용성에 관하여 Mixin과 커스텀 컴포지션 함수에 관하여 포스팅하는데 이는 정확하게 말하자면 Options 및 Composition API를 활용해 코드 재사용에 관한 기본 개념에 대해 포스팅 하겠다. 재사용성의 개념

$emit 우선 부모컴포넌트부터 살펴보자. 그리고 자식 컴포넌트이다. 그런데 자식 컴포넌트에서 emit:[] 속성이라든지 defindEmit 함수든지 따로 정의하지 않았는데 에러없이 함수 drilling이 가능했다 무슨일일까? 바로 $emit 에 있다. $emit

Vanilla JS에서 re-usealbe한 코드를 작성하려면 어떻게 할까? 중복되는 코드를 덜어서 그냥 함수를 생성하면 된다.즉, JS는 일반적으로 함수를 통해 기능을 공유하고 아웃소싱한다.그리고 Composition API의 setup은 그저 여러 로직을 뭉쳐놓은

만약 기존의 코드를 migration 할 때 props는 어떻게 처리할까?물론 props를 import해온다고 해도 사용할 수 없다. 그렇다면 방법이 없을까? => X바로 앞서 언급한 "인수"를 활용하면 된다.이때 코드의 유연성을 위해 props.filterFn을 적어

vue에서 개발 서버로 돌리고 이때 axios 나 fetch 를 사용하여 req를 날릴 때 매번 번거롭게 모든 주소값을 사용하면 매우 불편하다.또한 주소값이나 포트번호가 바뀌게 되는 순간 모오오오든 req의 url을 바꿔야한다. 이는 끔찍하다. 그래서 우리는 vue.c

fontAwesome 설치 앞서 포스팅한 react + fontAwesome 설치항목들과 일치한다. 물론 바뀌어야하는 부분은 reat-fontawesome 패키지가 => vue-fontawesome으로 바뀌어야한다. import 사용

vue.js transition 검포넌트의 before-render를 구현해보자.

PS. 위 사진을 이제보니 마우스 커서가 보이지 않는다;; 1,2,3,4 단계가 깜빡깜빡하는 것은 각 depth의 폴더에 어느 곳을 눌러도 동작이 잘 된다는 것을 보여주는 코드이다. 1. 각 depth별 데이터 가져오기 프론트에서 DB에 몇 depth의 데이터가

Chart.js는 HTML5 기반의 유연하고 강력한 차트 라이브러리이다. Vue.js와 함께 사용하기 위해 Vue-Chart 라이브러리를 사용하면 간단한 API와 컴포넌트 기반 인터페이스를 제공하여 차트를 쉽게 구성할 수 있다.ApexCharts는 SVG 기반의 멋진

이번 구현 과제 중 하나가 실시간으로 값을 listen 하고 있어야한다. 이때 정기적으로 http req를 보내면 굉장히 서버에 부담이 될 뿐만 아니라 클라이언트 성능도 떨어질 것이다. 그래서 websocket를 사용하여 백앤드로부터 항상 listen할 수 있도록 작업

OpenLayers OpenLayers는 오픈 소스 지리 정보 시각화 라이브러리이다. 참고로 OpenLayers는 JavaScript로 작성되어 있으며, HTML5의 Canvas 요소를 사용하여 지리 데이터를 렌더링하고 상호 작용할 수 있는 맵을 생성한다. 또한 Op

storeToRefs > storeToRefs를 사용해야만 반응형이 유지가 된다. 사실 Vue3, Composition API를 사용하다 보면 그렇게 이상할 거 없는 문법이다. 구조 분해 할당을 통해 값을 가져올 때 반응형을 잃지 않도록 도와주는 toRefs가 이

Vue.js로 JS의 Confirm함수 구현하기 아래코드는 이라는 Confirm 함수를 구현한 코드이다. 위 컴포넌트가 사용되면 위와 같이 생겼다. 마크업 컴포넌트 마크업 컴포넌트의 참고 위 코드는 단순히 promise 객채를 갖고 실행하는 코드이고 위 코

Typescript Vue 프로젝트에서 .vue 없이 파일을 import하려고 하면 위와 같은 이슈가 발생합니다. 해결 src 폴더 안에 shims-vue.d.ts 파일을 생성하고, 해당 파일에 .vue 파일에 대한 타입을 정의합니다. 위 코드는 Vue3에서 사

state는 직접 건들면 안 되니 항상 구조분해도 편하게 복사한 다음 복사본으로 v-for를 돌리든지 씹고뜻고맛보고 즐기고 한다는 생각v-model로 편하게 조작 후 해당 값 담는 것도 아래 코드처럼 편하게 담는 다는 생각만약 위 처럼 state에서 받아오는 값이 없다

VueQuery는 React Query의 개념을 Vue.js 프레임워크에 적용한 것으로, 서버 상태 관리를 위한 라이브러리이다. 이는 Vue 애플리케이션에서 비동기적으로 데이터를 가져오고, 캐시하고, 동기화하는 과정을 쉽게 만들어 준다.자동으로 데이터를 캐시하여, 사용

Queries 쿼리는 unique key에 연결된 asynchronous source of data에 대한 declarative dependency이다. 쿼리는 서버에서 데이터를 가져오기 위해 GET 및 POST 메소드를 포함한 모든 Promise 기반 메소드와 함께

1. Query Keys vue query 는 일반적으로 query keys 를 바탕으로 쿼리 캐싱을 관리한다. 이 query keys 는 그냥 문자열 도 가능하고 배열도 가능하다. 일단 serializable 하고 고유하다면 사용가능하다. convention 보통은