[업무][베트남🇻🇳] 개발 코드로 학습-1 app.vue 코드 뭉치 분리하기

개요

시니어 개발자가 개발한 코드를 볼 일이 있었습니다. 이 코드에서는 하나의 vue 컴포넌트 파일이 긴 경우가 없었습니다. 그리고, 하나의 컴포넌트 파일에 하나의 feature요소만을 담고 있었습니다. 코드가 깔끔해보였고, 기능을 바로 파악할 수 있는 코드였습니다. 이에 비해서, 저희 제품 코드는 뭉처있는 코드들이 정말 많았습니다. 

 

베트남 개발자 코드를 보고 난 뒤에 제 머리는 패치가 되었고, 뭉쳐있는 코드(하나의 컴포넌트인데, 여러 feature를 가진 경우나 코드가 긴 경우)를 보면 리펙토링 의지를 불태울 수 있었습니다.🔥

---

긴 코드 분리하기

리펙토링의 첫 대상은 app.vue였습니다.

app.vue의 문제점.

• app.vue의 코드가 정말 길었다. 2000줄 이상
• app.vue에 header와 footer 각종 전역에서 사용하는 화면 요소들의 template, css 그리고 javascript 코드가 작성되어 있었다.

 

app.vue가 긴 이유는, app.vue에 화면 요소(header, footer, modal ...)들의 코드가 작성되어 있었기 때문입니다. header를 유지보수 해야할 때도, footer를 코드를 수정할 때에도 app.vue의 긴 코드 속에서 찾아야 했습니다.(물론 Ctrl+F 기능을 사용하겠지만요.)

유지보수 해야할 기능을 찾기 어려운 문제가 있었고, 수정으로 인해서 다른 feature가 정상 작동을 하지 않을 가능성이 많은 코드였습니다.

문제의 app.vue 코드는 아래와 같습니다. 너무 길어서 중간에 잘랐습니다.

📁 src/app.vue

...

 

문제 해결 방법

코드를 분리하는 것입니다.

app.vue에 다른 화면 요소 코드들은 삭제하고, 각 feature들을 컴포넌트로 분리하는 작업을 진행했습니다.

header.vue에 header에 사용되는 코드만 작성하고, footer.vue에 footer에 사용되는 코드만 작성해 놓는 것입니다.

 

작업 방법

1. global폴더를 만들었습니다. 여기에는 전역 컴포넌트로 사용할 컴포넌트 파일(header, footer, alert...)을 넣어두었습니다.
2. index.js 파일에 모듈 시스템 방식을 사용해서 global 디렉토리 하위의 컴포넌트들이 Vue 인스턴스에 자동 등록되도록 하였습니다.

🤔 이렇게 해두면, 전역으로 사용할 컴포넌트 파일만 global 디렉토리에 작성해주고, 사용하고 싶은 컴포넌트의 template에 사용 선언만 해주면 됩니다. 편하게 개발할 수 있습니다. 그리고, 전역컴포넌트에 대해서 import를 하지 않아도 되는 장점도 있습니다.

 

🥳 개선 후 코드 

📁 src/global/BaseHeader.vue 👈 전역 컴포넌트

📁 src/global/BaseFooter.vue  👈 전역 컴포넌트

📁 src/global/BaseAlert.vue     👈 전역 컴포넌트

📁 src/global/BaseConfirm.vue     👈 전역 컴포넌트

📁 src/app.vue👇

//📁 src/app.vue
<template>
    <div id="App" @click="($event) => handleClickGlobal($event)">
        <BaseHeader></BaseHeader>   <!-- 분리 -->
        <router-view />
        <BaseFooter></BaseFooter>   <!-- 분리 -->
        <BaseAlert></BaseAlert>     
        <BaseConfirm></BaseConfirm> 
    </div>
</template>

<script>
import { EventBus } from '@/main';

export default {
    name: 'App',
    async created() {
        sessionStorage.getItem('id') || this.$router.push('/login'); // 로그인이 안되어있으면 dashboard로 이동
    },
    methods: {
        handleClickGlobal(event) {
            if (event.target.id !== 'profile') {
                this.sClickedProfile = false;
            }
            if (event.target) {
                EventBus.$emit('gClick', event.target);
                EventBus.$emit('gIsNotVisibleEdgeCardDetailPopup');
            }
        },
    },
    data() {
        return {
            sClickedProfile: false,
        };
    },
};
</script>

<style lang="scss">
@import '@/assets/scss/common';
.view {
  @include flex(center, flex-start, row, nowrap);
  min-height: 92.1vh;
  padding-top: 60px;
  margin: 0 auto;
  position: relative;
}

.default {
    //map 모드가 아닐 때 적용
    min-width: 1220px;
    max-width: 1220px;
  }
}
</style>

 

app.vue의 코드를 분리해서 코드를 정리하니 이렇게 코드가 좋아보일 수가 없었습니다. 이번 작업은 베트남 개발자의 코드를 분석하면서 느낀점으로 시작한 리펙토링작업이었습니다. 정말 만족스러운 작업이었습니다. 👍