Front-End
-
[Vue.js] dayjs로 날짜 포맷 변경하기Front-End/Vue.js 2023. 2. 24. 08:33
vue에서 date를 출력하면 다음과 같은 형식으로 출력된다. 깔끔하게 원하는대로 출력하고 싶으면 어떻게 해야할까? dayjs를 이용하면 된다. 2011년에 첫 공개된 moment.js 라이브러리를 사용하려고 했는데 moment는 이제 더이상의 업데이터가 없다고 발표하여 moment.js보다 dayjs를 많이 사용하는 것 같다. 📑 설치 방법 vue.js의 npm 방식으로 dayjs를 설치해줍니다. npm install dayjs --save dayjs를 import할 수 있는 방법은 2가지가 있는데 첫번 째는 컴포넌트 안 data()에 추가해주는 방법입니다. import dayjs from 'dayjs' export default { data() { return { dayjs } } } 두번 째 방법은..
-
[Vue.js] Bootstrap 적용하기 (bootstrap-vue-3)Front-End/Vue.js 2023. 2. 20. 15:57
📑 Bootstrap 설치 vue에서 부트스트랩을 사용하는 방법은 간단하다. vue.js 프로젝트 경로로 이동한 후 아래 명령어를 입력해준다. npm install vue bootstrap bootstrap-vue-3 만약 기존 bootstrap을 받았다면 기존의 것을 삭제 후 다운 받는다. npm uninstall vue bootstrap bootstrap-vue 📑 2. main.js에 import 추가로 BootstrapVue3에 관련된 경로들을 모두 import 해준다. import { createApp } from 'vue' import App from './App.vue' import BootstrapVue3 from 'bootstrap-vue-3' import 'bootstrap/dist/c..
-
[Vue.js] Vuex란? (설치, 셋팅, 사용법)Front-End/Vue.js 2023. 2. 12. 21:11
상위 컴포넌트에서 하위 컴포넌트까지 데이터를 전송해서 갖다쓰기가 어렵다. 하위 컴포넌트 전송은 props, 상위컴포넌트 전송은 custom event or mitt 을 사용해야 한다. 그럼 어디서 어떤 데이터를 보낸건지 헷갈린다,, 그럴때 쓸 수 있는 라이브러리가 Vuex인것. Vuex는 모든 컴포넌트들이 데이터를 공유할 수 있는 라이브러리이다. js 파일을 하나 만들고 데이터들을 몰아넣으면 모든 컴포넌트에서 직접 꺼내쓸 수 있다. 어느 컴포넌트에서 수정이나 사용이 가능한 것. 그러나 코드가 길어진다는 단점이 있으니 컴포넌트가 많을 때 사용하면 된다. 📑 Vuex 설치하기 https://vuex.vuejs.org/installation.html#direct-download-cdn Installation ..
-
[Vue.js] nested routes와 pushFront-End/Vue.js 2023. 2. 9. 09:32
vue-router의 개념은 아래 포스팅을 통해 확인 가능하다. https://wonisdaily.tistory.com/203 [Vue.js] vue-router란 ? 기본 개념과 설치 방법 📑 라우팅이란? 웹 페이지 간의 이동 방법을 말한다. 라우팅은 현대 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션(SPA)에서 주로 사용하는 방식이다. 화면 간의 전환을 매끄럽게 진행 시킬 수 wonisdaily.tistory.com 📑 nested routes 실제 웹이나 앱 UI는 일반적으로 여러 단계로 중첩된 컴포넌트로 이루어져 있다. 예를들어 상세보기 페이지에 작가 소개글이 보이기도 하다 다른 경로로 들어가면 그 자리에 댓글창이 보이기도 한다. 이 중첨 outlet에 컴포넌트를 렌더링하려면 children을..
-
[Vue.js] vue-router란 ? 기본 개념과 설치 (+ query, params)Front-End/Vue.js 2023. 2. 8. 22:11
📑 라우팅이란? 웹 페이지 간의 이동 방법을 말한다. 라우팅은 현대 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션(SPA)에서 주로 사용하는 방식이다. 화면 간의 전환을 매끄럽게 진행 시킬 수 있다. 서버에서 응답을 받아 웹 페이지에서 처리하면 화면상에서 깜빡일 수 있는데, 라우팅을 사용할 경우 깜빡임 없이 매끄럽게 사용할 수 있다. 여기서 뷰 라우터란? 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리이다. 뷰 라우터를 이용하여 뷰로 만든 페이지 간에 자유롭게 이동이 가능하다. 태그 설명
-
[WEB] SPA(Single Page Application)이란?Front-End/Vue.js 2023. 2. 2. 13:37
SPA의 중심에는 대표적인 라이브러리/프론트프레임워크 React, Vue/Angular가 있다. 📑 SPA란? Single Page Application의 약자로 단일 페이지 어플리케이션이다. 기존의 웹 서비스는 요청시마다 리소스들과 데이터를 해석하고 화면에 렌더링하는 방식이다. SPA 형태는 브라우저에 최초에 한 번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터 바인딩하는 방식이다. 아래 ajax 동작 방식을 참고하자. https://wonisdaily.tistory.com/70 [Ajax란? ] 제이쿼리와 $.ajax() , $.get(), $.post() 메서드 Ajax란? Ajax란 Asynchronous JavaScript and XML의 약자이다. Ajax는 빠르게 동..
-
[Vue.js] Vue의 라이프사이클 (create, mounte, update, destroy)Front-End/Vue.js 2022. 11. 25. 15:01
📑 Vue의 라이프사이클이란? 어떤 vue 인스턴스나 컴포넌트가 생성될 때, 미리 사전에 정의된 몇 단계의 과정을 거치게 된다. 이를 라이프사이클(lifecycle)이라고 한다. 다시 말해, Vue 인스턴스가 생성된 후 우리 눈에 보여지고, 사라지기까지의 단계를 일컫는 말이다. Vue 인스턴스는 크게 생성(create)되고, DOM에 부착(mount)되고, 업데이트(update)되며, 없어지는(destroy) 4가지 과정을 거치게 된다. 이 과정에서 Vue는 각각 단계에, Vue를 사용하는 사람들을 위해 Hook을 할 수 있도록 API를 제공한다. 일반적으로 많이 사용하는 종류로 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, be..
-
[Vue.js] v-model, watcher, TransitionFront-End/Vue.js 2022. 11. 24. 16:17
📑 v-model 값 이용하기 사용자의 입력값 받으려면 v-model을 사용한다. 예를들어 원룸을 판매하는 어플이 있을 때 몇 개월을 살지 입력하면 그에 맞는 가격이 출력되도록! {{month}} 개월 선택함 : {{외부데이터[사용자클릭].price * month}} v-model을 안 쓴다면, @input 이벤트를 통해 사용자가 값을 입력하면 month라는 변수에 $event.target.value 사용자가 입력한 값을 받아오게 만들었다. 그 후 {{ }} 데이터 바인딩을 통해 {{month}}의 값을 출력한다. 만약 데이터 바인딩을 하려면 data()에 month라는 데이터를 선언해줘야한다. 초기값을 1로 출력한다. input 태그에 값이 들어오면 string 형태로 저장되는데 이를 숫자로 변환하기 ..