메로그

시맨틱 태그란? 시맨틱 태그란 의미가 있는 태그를 말한다. div 태그를 사용해서 영역을 만드는 것이 아닌, header, main, footer 와 같은 의미가 있는 태그를 이용하는 것을 말한다. 시맨틱 태그를 사용하는 이유 검색엔진 최적화 (SEO) 검색엔진이 알맞은 검색결과를 내기 위해 웹사이트를 크롤링할 때 웹사이트의 내부에 담긴 정보를 토대로 사이트를 분석한다. 그런 경우에, 시맨틱 태그를 사용하면 더 정확한 구조로 분석할 수 있도록 도와준다. HTML 구조화 HTML 에 코드가 구조화 되어 가독성 및 유지보수가 향상된다. 종류 header: 헤더 영역에 대한 태그. nav: 네비게이션 영역에 사용하는 태그. section: article 보다 큰 영역을 나타낼 때 사용하는 태그. aside: ..

Mixins 믹스인은 여러 컴포넌트 간에 사용하고 있는 로직, 기능들을 재사용하는 기법. 믹스인에 정의할 수 있는 로직은 data, methods, created 등과 같은 컴포넌트 옵션입니다. 사용법 export const HelloMixins = { data() { return { hello: false } }, methods: { showHello() { this.hello = true; }, closeDialog() { this.hello = false; } } // helloForm.vue import { HelloMixins } from './hello.js'; export default { mixins: [ HelloMixins ], methods: { submitHello()..

.env 파일 .env 파일은 기본적으로 환경 변수를 지정하는 파일로 프로젝트 최상위 루트에 존재합니다. 여기서 선언한 환경변수를 받아와 유지보수 및 보안에 이용합니다. 사용법 프로젝트 루트와 동일한 레벨에 .env 파일을 만듭니다. # Temp VUE_APP_TITLE=VUE TITLE VUE_ 키워드로 선언해주어야 애플리케이션에서 접근이 가능합니다. console.log(process.env.VUE_APP_TITLE); // VUE TITLE 웹팩에서도 했겠지만, 빌드와 데브시에 서로 가지고 있는 기존 값이 다름으로 그 값을 이용해서 제어할 수 있음.

컴포넌트 플러그인화 보통 이제 외부라이브러리를 가져와서 사용하는 경우에 import 를 사용해서 컴포넌트 단위로 가져와서 사용해주어야 하는데, 이러한 경우에 불필요한 소스, 리소스가 많아짐으로 플러그인화를 해서 줄일 수 있습니다. src 밑에 plugins 폴더를 만든다. 폴더 아래에 공통화할 컴포넌트 플러그인파일(js) 를 하나 만들어줍니다. main.js 에서 Vue.use 를 이용하여 플러그인을 등록시켜줍니다. import { Chart, registerables } from 'chart.js'; Chart.register(...registerables); export default { install(Vue) { Vue.prototype.$_Chart = Chart; console.l..

Vue Router vue 에서 페이지 간 이동시 url 이 변경되면 컴포넌트를 갱신하는 라이브러리 입니다. 설치 npm install vue-router --save[참고: Vue2의 경우, router@3, Vue3의 경우, router@4 버전을 설치해주어야 합니다.] 구성 src 밑에 router 폴더를 생성하고 index.js 를 하나 만들어줍니다. import Vue from 'vue'; import VueRouter from 'vue-router'; import NewsView from '@/views/NewsView.vue'; Vue.use(VueRouter); export const router = new VueRouter({ // 해쉬 값 제거..

Vue 생명주기 컴포넌트가 생성 후, 소멸될 때까지의 주기가 있습니다. 크게 create, mount, update, destory 로 나뉘며, 각각 before 를 가지고 있다고 생각하면 된다. 자주 사용하는 라이프사이클 함수로는 created, mounted, (beforeUpdate, update), destory 가 있습니다. created created 는 인스턴스가 생성되면 발생하는 라이프 사이클 함수로 처음에 실행하고자 하는 동작을 넣으면 된다. 하지만, 돔이 그려지지 않은 상태라는 것을 참고하자. mounted mounted 는 돔에 접근할 수 있는 라이프사이클로써 비동기로 인해 돔이 다그려지지 않는 경우도 발생한다. 그런 경우, $.nextTick() 을 이용하면 됨. update upd..