Nuxt.js 기초 강좌 : 페이지와 컴포넌트

Nuxt.js·2021년 8월 29일

NUXT기초 배우기

목록 보기

12/20

페이지 != 컴포넌트

페이지는 컴포넌트가 아니다.
컴포넌트 이름에는 두단어 이상 사용 할것을 추천 한다. 왜냐하면 케밥 케이스(모두 소문자로 하되 단어 사이에는 하이푼을 넣는 명명법)를 사용하는 HTML 태그와 같은 이름이 겹칠 수 있기 때문이다.

Vue.js의 탑-레벨 App.vue는 넉스트의 레이아웃 컴포넌트 Default.vue 에 해당한다. 그래서 layout에 작성한 CSS는 모든 자식 컴포넌트 안에서 글로벌로 동작 한다.

예를 들어 pages/index.vue페이지에 아래와 같이 <h1>태그를 추가 하고

<template>
  <v-row justify="center" align="center">
    <v-col cols="12" sm="8" md="6">
      <v-card class="py-4 justify-center">
        <v-card-title>헬로월드</v-card-title>

        <h1 class="text-center">h1텍스트입니다.</h1>
      </v-card>
    </v-col>
  </v-row>
</template>

default.vue의 <style>태그 안에 스타일을 작성 해보면

<template>
  <v-app>
    <v-main>
      <v-container>
        <Nuxt />
      </v-container>
    </v-main>
    <v-footer :absolute="!fixed" app>
      <span>&copy; {{ new Date().getFullYear() }}</span>
    </v-footer>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      clipped: false,
      drawer: false,
      fixed: false,
      items: [
        {
          icon: "mdi-apps",
          title: "Welcome",
          to: "/"
        },
        {
          icon: "mdi-chart-bubble",
          title: "Inspire",
          to: "/inspire"
        }
      ],
      miniVariant: false,
      right: true,
      rightDrawer: false,
      title: "Vuetify.js"
    };
  }
};
</script>

<style>
h1 {
  color: green;
}
</style>

소스코드가 별개 임에도 불구 하고 index.vue에 해당 color가 적용 된것을 볼 수 있다.

자식 컴포넌트에도 동일한 룰이 적용 되는 것을 확인 하기 위해 components/MyComponent.vue 파일을 추가 해보자.

<template>
  <h1 class="text-center">마이컴포넌트!</h1>
</template>

<script>
export default {
  name: "MyComponent"
};
</script>

<template>
  <v-row justify="center" align="center">
    <v-col cols="12" sm="8" md="6">
      <v-card class="py-4 justify-center">
        <v-card-title>헬로월드</v-card-title>

        <h1 class="text-center">h1텍스트입니다.</h1>
        <MyComponent />
      </v-card>
    </v-col>
  </v-row>
</template>

실행 결과

<h1>의 스타일을 컴포넌트 내에서는 따로 지정 하지 않았 음에도 녹색이 적용 되었다.

CSS가 레이아웃별로 적용 된다는 사실을 확인하기 위해 layouts/default.vue 레이아웃을 복붙 해서 layout2.vue를 만들어보자. 그리고 <h1> 스타일에 핑크를 적용 한다.

그리고 inspire.vue 페이지에 방금 만든 layout2 레이아웃을 적용 한다.

<template>
  <v-row>
    <v-col class="text-center">
      <MyComponent />
    </v-col>
  </v-row>
</template>

<script>
export default {
  layout: "layout2"
};
</script>

같은 커스텀 컴포넌트임에도 불구하고 인스파이어 페이지에서는 핑크가 적용 된것을 알 수 있다.

참고로, 커스텀 컴포넌트 사용시 파스칼 케이스(단어의 첫자를 소문자로, 단어 사이는 대문자로 구분 하는 명명법)와 케밥 케이스(모두 소문자로 하되 단어 사이에는 하이푼을 넣는 명명법)가 둘다 사용 가능하다

<template>
  <v-row>
    <v-col class="text-center">
      <MyComponent />
      <my-component />
    </v-col>
  </v-row>
</template>

<style>태그를 열 때 scoped 키워드를 지정시 그 스타일은 그 파일 내에 종속 되게 된다.

웹브라우저 확인시 핑크 였던 텍스트색이 다시 그린이 된것을 알 수 있다.

추가로 디폴트 레이아웃에도 스코프트 키워드를 지정시

자식 컴포넌트 내의 텍스트 스타일이 전혀 지정 되지 않음을 알 수 있다.

복잡하고 큰 프로젝트를 팀원들과 공동 진행 한다면 scoped 키워드를 기본으로 지정 하고 가는 것이 좋겠다.

성능 측면

그리고 기본 아키텍쳐용(컬럼이나 기본폰트, 기본폰트 사이즈 같은것들) 외에는 글로벌 스타일 작성은 권장 되지 않는다. 장기적으로 관리가 어렵고 페이지 로딩시 퍼포먼스 측면에서 불리 하기 때문이다. 넉스트js(뷰js)에서는 필요한 페이지만을 로드 하는데 레이아웃은 기본으로 전체 로드에 포함 된다. 구글 크롬의 개발자 도구를 활용 하면 페이지가 자바스크립트 소스코드 단위 별로 로드 되는 사실을 쉽게 확인할 수 있다.

아래 스크린샷을 보면 inspire 페이지 진입시 inspire.js가 app.js(레이아웃)와 함께 로드 된것을 알 수 있다. index.js 등도 존재 하지만 최적화 되어 로드 되지 않는다. (만약 앞으로 프로젝트가 대형화 되어 레이아웃이 100여개가 존재 한다면 모두 로드 하는 것은 유저에게 엄청난 트래픽을 하중 시킬 것이다.)

페이지와 컴포넌트는 다르게 취급 되기 때문에 컴포넌트의 자바스크립트 파일도 별도로 표기 되지 않는다.

레이아웃과 컴포넌트 그리고 페이지에 작성한 함수들은 컴파일후 어디에 위치 할까?
확인을 위해서 페이지에 TestFunctionPage(), 레이아웃에 TestFunctionLayout(), 컴포넌트에 TestFunctionComponent()를 각각 작성 한후 저장 하고 개발자 도구에서 컴파일 결과를 확인 해보자.