Vue.js 에서 router 를 이용할 때 페이지 탭의 이름을 설정할 수 있다. 바로 router 의 index.js 에서 가능하다. const routes = [ { path: '/', name: 'Home', component: Home, meta: { title: 'IP Address Tracker' } }, ] Home.vue의 meta.title : ' ' 의 값을 설정 그리고 rotuer 아래에 작성 // page tab control router.beforeEach((to, from, next) => { document.title = `${to.meta.title}` next() }) 전체 코드 예시 // src/router/index.js import { createRouter, crea..

FrontEnd/Vue.js 2022. 2. 17. 20:32

Tailwindcss 를 사용하던 와중 커스터마이징을 할 수 있다는 것을 알았다. Vue.js 3 - tailwindcss3 를 사용하였습니다. 하는 방법 바로 가시죠. 우선 tailwind.config.js 파일이 /src 내에 있습니다. 이곳에다가 작성하는것인데요, theme.extend. 내에 작성 module.exports = { purge: ['./public/**/*.html', './src/**/*.{vue,js,ts,jsx,tsx}'], darkMode: false, // or 'media' or 'class' theme: { extend: { backgroundImage: (theme) => ({ 'hero-pattern': "url('pattern-bg.png')", 'second-im..

FrontEnd/css 2022. 2. 17. 20:27

사용환경 : window10, node-v: 16.14.0, npm-v: 8.2.0, Vue.js(React.js, Angular) Vue.js의 프로젝트를 vue-cli를 통해서 설치하려는데 node-sass 관련하여 자꾸 오류가 났다. node-sass 버전과 node 가 지원하는 버전간의 오류라고 한 블로그에서 확인하였지만, 버전은 잘 맞췄었다. 해결방법을 찾고 또 찾아 여러 가지 방법을 시도해보았다. 1. npm cache 정리 2. npm verify 3. node uninstall & install ... 그리고 마지막에 와서야 dart-sass로 설치하였다. (이래도 되냐...ㅠ) 그런데 npm에서 node-sass를 검색하던 와중에 대문짝만하게 아래와 같은 내용이 작성되어져 있었는데, 간략..

FrontEnd/JavaScript 2022. 2. 17. 16:39

"한빛미디어 활동을 위해서 책을 제공받아 작성된 서평입니다." 안녕하세요 상훈입니다. Javascript의 기초 중의 기초를 공부하게 되어 포스팅하게되었습니다. 1. 변수 선언 2. 황금규칙 (2/5) 3. 식별자 4. 산술연산자 5. Null & Undefind 6. Template Literal 1. 변수 선언 - 자바스크립트에서 변수는 형식을 가지지 않는다. - 자바스크립트에서는 ' ; ' 세미콜론을 사용하지 않아도 된다. - const, let 을 사용하자 → var 는 구시대의 유물 : 변수명을 잘못입력하게 되면 새로운 변수가 선언됨, 전역변수로 등록이 되어 사방팔방에서 나의 변수를 사용하게 된다. 2. 황금규칙 5가지 중 2가지 1. var 대신 let, const 를 사용하자 2. 엄격모드(..

FrontEnd/JavaScript 2022. 2. 15. 15:24

vue.js 3, vue-cli 4.5.x 버전에서 tailwind css 를 설치하려고하는데 에러가 발생하였다. 지난 포스팅에서는 아직 tailwindcss가 vue3에 맞춰서 나오지 않았기에 에러가 났지만, 지금은 출시가 되었다. 그런데 에러라니!? 그래서 해결책을 찾아왔다. core-js, vue, vue-cli 의 버전이 최신이 아니었기에 오류가 발생하였다. 그래서 각각 버전을 모두 최신화 하였고, 정상적으로 설치가 되었다. 최신화: core-js, vue, vue-cli npm install --save core-js@^3 npm install vue@next vue upgrade --next 아무래도 얼마전에 tailwind.css 가 최신화가 된만큼, node, core-js, vue 등의 ..

FrontEnd/css 2022. 2. 15. 00:15

사용 환경 및 기술 : vue-cli 4.5.x, vue.js 3, router, reference, etc.. Vue.js 3 를 사용하여 동영상 강의를 시청, 그리고 드래그-드롭 기능을 구현하였다. App.vue, Home.vue, DropZone.vue 이렇게 3가지 파일로 구분하였고, App.vue의 내용은 정말 없다 // App.vue router/index.js 에서 Home.vue를 / 경로로 인식하게 하여 아예 Home.vue만 보이게 사용하였다. (사실 굳이 router는 필요없었다.) Home.vue에서는 DropZone.vue 파일을 컴포넌트로 사용한다. // Home.vue Drag Or Drop File: {{ dropzoneFile.name }} Home.vue에 대한 간략한 설..

FrontEnd/Vue.js 2022. 2. 11. 11:45

"한빛미디어 활동을 위해서 책을 제공받아 작성된 서평입니다." 한빛미디어에서 리뷰어 이벤트를 하기에 정기적으로 개발관련 서적이 있으면 좋은 나는 신청을 하였고, 운 좋게 당첨되었다. 그래서 해당 글을 포스팅하게 되었다. 배송은 신경쓰고 있지않았지만, 약 2일-3일 정도 걸린 것 같다. (월요일 신청, 화요일 당첨, 수-목요일 수령 이런 느낌) 교재는 상당히 깔끔하게 생겼다. 1장을 바로 펼쳐보았다. 이미 아는 것들이 많았지만, 그래도 복습겸 1장을 다 살펴보았다. 내용은 정말 딱 필요한 핵심 내용만 작성되어져 있어서 가독성이 매우 우수했다. 고급 비구조화 - 객체 부분에서 잠깐 한동안 쳐다보게 되었는데 그래도 찬찬히 읽으니 이해가 잘 되었다. 역시 책은 1장부터 봐야 제맛. 앞으로 주기적으로 해당 교재에..

FrontEnd/JavaScript 2022. 2. 9. 23:48

사용환경 : Vue.js 3, Firebase 9.1.5 youtube에 있는 동영상 강의를 보던 와중 자꾸 firebase 관련한 에러가 해결이 안되어서 직접 찾아보고 적용하여 성공하였다. 1. 모듈 생성 (module exports part.) 2. 실제 적용 위치 이렇게 두 가지로 나뉘어서 어느곳에서도 사용할 수 있도록 모듈을 생성해놓았다. 그리고 실제 적용 위치에 대한 내용을 작성하도록 하겠다. 1. Module exports = { } ! firebase 8번대의 버전부터 이전과는 다르게 적용해야한다. import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore"; // 프로젝트 생성 후..

FrontEnd/Vue.js 2022. 2. 9. 16:53