Vue.js46 [Vuejs] 엔터로 서브밋 보내기 2022. 5. 11. [Vue.js2 + tailwindcss] build 설정 방법 main.js import Vue from "vue"; import App from "./App.vue"; import "tailwindcss/tailwind.css"; 👈 import "@/src/assets/global.css"; 👈 new Vue({ render: (h) => h(App), }).$mount("#app"); tailwind.config.js module.exports = { purge: ['./src/**/*.html', './src/**/*.js'], // 👈 prefix: 'tw-', // ... } postcss.config.js 프로젝트 홈 경로에 postcss.config.js 파일 생성 후 다음을 작성 const autoprefixer = require("autoprefi.. 2022. 2. 10. [Vuetify] v-btn hover effect circle -> square shape로 변경하기 다음처럼, v-btn을 사용해서 버튼을 생성하고, 브라우저에서 마우스를 올리면, 사각형 형태로 모양을 표시하고 싶었습니다. 을 사용한다면, 그림자가 아래 그림처럼 원형태로 보일겁니다. 를 사용하거나, tile 옵션을 주게되면, 으로 버튼을 표시하더라도, 사각형 형태의 그림자 효과를 줄 수 있습니다. 2022. 1. 4. [Vuetify] global font family 설정하는 방법 방법 src/sass/variables.scss 파일을 똑같이 생성해 줍니다. 내용에 다음 코드를 입력합니다. $body-font-family: 'jost-medium', 'sans-serif'; 폰트가 변경된 것을 확인할 수 있습니다. 참고 https://vuetifyjs.com/en/features/sass-variables/#example-variable-file SASS variables Customize Vuetify's internal styles by modifying SASS variables. vuetifyjs.com 2021. 12. 24. [Vue2 + SASS] 전역으로 SCSS 적용하기 1. sass, sass 설치 npm i -D sass sass-loader 2. scss 파일 작성 /src/assets/scss/_variables.scss /src/assets/scss/base.scss /src/assets/scss/reset.scss 3. vue.config.js 작성 module.exports = { css: { loaderOptions: { sass: { data: ` @import "@/assets/scss/_variables.scss"; @import "@/assets/scss/reset.scss"; @import "@/assets/scss/base.scss"; ` } } } } 4. 세팅할 때 에러 Sass Loader has been initialized using a.. 2021. 12. 11. [vue.js]vue-router 튜토리얼-3 개요 이번에는 vue-router의 중첩 라우팅 기능을 간단하게 구현해보겠습니다. 중첩 라우팅은 다음과 같은 개념입니다.(제가 만든 그림입니다.) 구현 방법 간단합니다. 1. 프로젝트 홈/router/index.js 파일을 수정하면 됩니다. children 내부에 router 객체를 정의할 때에 path에는 '/'를 붙히지 않습니다. import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const routes = [ { path: '*', redirect: '/404' }, { path: '/404', name: 'NotFound', component: () => import('@/pages/404.vue') }, {.. 2021. 9. 7. [vue.js]vue-router 튜토리얼-2 개요 jquery나 pure js로 개발된 페이지는 사용자가 매 번 요청하는 경로가 달라지면, 서버에서 페이지 자원을 다시 받아오게 됩니다. 받아오는 동안에도 시간이 걸리기 때문에 화면이 번쩍하면서 랜더링이 됩니다. 반면어 spa는 사용자가 처음 애플리케이션에 접속할 때 보내는 서버 요처으로 애플리케이션에 필요한 자원을 모두 받아옵니다. 사용자가 경로를 다르게 요청하면, 서버에 다시 페이지 자원을 요청하지 않습니다. 처음에 받아온 script 파일로 동적으로 페이지를 변환합니다. 덕분에 서버는 해당 경로에 페이지에 필요한 데이터만 브라우저에 전송해 주면되므로, 서버에 부담이 덜 하게 됩니다. 그럼, 브라우저에서는 어떻게 동적으로 경로에 맞는 페이지를 랜더링해주는 걸까요? vue에서는 사용자가 요청한 경로.. 2021. 9. 7. vue.js에서 SASS 사용하기 1. 설치 npm i -D sass-loader@7.3.1 node-sass 2. 사용 header { .title { font-weight: 300; } } 2021. 9. 4. [Vue Test Utils] Vue 테스트 코드 작성 방법2️⃣- jest에 라이브러리 설정하고 사용하기 개요 app을 빌드하고 실행하면, vue 인스턴스에 라이브러리들이 import되어서 빌드되면서 라이브러리의 필요한 기능을 사용할 수 있었습니다. jest에서는 컴포넌트를 mount해서 실행합니다. jest가 컴포넌트를 실행하다 보니, 컴포넌트가 의존하는 라이브러리의 경로를 못 찾거나 라이브러리의 기능을 온전히 실행하지 못하는 경우가 많습니다. 그래서 test코드나 jest 설정으로 의존하는 라이브러리를 설정하거나 테스트하는 컴포넌트에 주입해줘야 jest로 제대로 기능을 테스트할 수 있습니다. 팀에서는 제가 최초로 웹 테스트 방법을 개척하고 있기 때문에 기술문서를 많이 찾아보면서 문제를 해결해 나갔습니다. jest에 컴포넌트에서 사용하는 라이브러리에 맞춤 설정하기 ⚡️ Vuetify를 사용할 경우 설정 j.. 2021. 8. 21. [Vue Test Utils] Vue 테스트 코드 작성 방법1️⃣- 테스트 환경 설정 및 간단한 테스트 코드 작성 방법 개요 프로그램은 테스트가 가능하게 개발되어야 합니다. 프로그램이 개발만 되고, 자신이 작성한 코드 기능을 증명할 수 없다면 완전이 개발된 프로그램이 아닙니다. 제가 담당하는 제품은 테스트 코드가 전혀 작성되지 않았습니다. 이제서야 테스트 코드를 작성하기 시작하려고 하고 있습니다. 팀에 테스트 코드를 작성하는 문화?가 없고, 개발만 하기 때문에 이번 이 글을 통해서 웹 테스트 코드를 작성하는 방법을 공유해보려고 합니다. 목표는 올 해 안에 테스트 커버리지 80%를 달성하는 것입니다. 사용 라이브러리 제품이 vue 2 로 개발되어 있습니다. 라이브러리 설명 jest@27.0.6 vue-jest@3.0.7 Vue 파일을 Jest가 실행할 수 있는 자바스크립트로 컴파일을 합니다. @vue/test-utils@1.. 2021. 8. 5. 이전 1 2 3 4 5 다음
