Vue tab

import _ from 'lodash';

//https://lodash.com/
//https://velog.io/@kysung95/%EC%A7%A4%EB%A7%89%EA%B8%80-lodash-%EC%95%8C%EA%B3%A0-%EC%93%B0%EC%9E%90



export const getHashPage = (hash: string, pages: string[], def: string): string => {
    let page = def;
    if (hash && hash.length > 0) {
        let check = hash.substr(1);
        if (_.indexOf(pages, check) != -1) {
            page = check;
        }
    }
    return page;
}



export default class extends Vue {
    private type: string = '';

    mounted() {
        this.type = getHashPage(this.$route.hash, ['탭1', '탭2', '탭3'], '탭1');
    }

}

<컴포넌트명 v-if="type == '탭1'" />

<li :class="{on: type == '탭1'}"><a @click="type = '탭1'" href="javascript:;"><span>탭이름</span></a></li>


//https://jeonghwan-kim.github.io/2018/04/07/vue-router.html

//https://devraphy.tistory.com/226

router로 처리하여 페이지명을 붙여서 할수도 있지만

단순히 같은 url에서 변경될경우는 조건문으로 하여 컴포넌트를 조작하는 것이 수월하다.

새로고침시 그 페이지가 유지되게 할 경우에는 router 처리하여 link 자체를 바꾸어주며 작업

그저 탭기능으로 사용할 경우는 조건문으로 컴포넌트를 조작

위의 방식은 조건문으로 컴포넌트를 조작하는 방식임 

 

 

#웹팩과 모듈

웹팩은 프로젝트의 구조를 분석하고 자바스크립트 모듈을 비롯한 관련 리소스들을 찾은 다음 이를 브라우저에서 이용할 수 있는 번들로 묶고 패킹하는 모듈 번들러(Module bundler)다.

 

모듈이란 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미
웹팩에서 지칭하는 모듈이라는 개념은 위와 같이 자바스크립트 모듈에만 국한되지 않고 웹 애플리케이션을 구성하는 모든 자원을 의미한다. 

웹 애플리케이션을 제작하려면 HTML, CSS, Javascript, Images, Font 등 많은 파일들이 필요하다. 
이 파일 하나하나가 모두 모듈이다.

모듈은 프로그램을 구성하는 구성 요소로, 관련된 데이터와 함수를 하나로 묶은 단위를 의미
  
https://tecoble.techcourse.co.kr/post/2021-07-10-webpack-exercise/