Vue 시작하기

junho5336·2022년 9월 13일
0

Vue

목록 보기
1/2
post-thumbnail

서론

코로나에 재감염되서 자가격리를 또하게되었다.

회사가서 일을 못하니(현장실습이라 재택환경이 안갖춰져있다ㅠ..)
이참에 그동안 미뤄왔던 클라이언트 공부를 해보려고한다.

Vue Angular React 중 무엇을 사용해볼까 고민되어 주변에 Front개발을 하는 친구에게 물어봤다. React는 입문 난이도가 높으니 러닝커브가 비교적 낮은 Vue를 사용해보는 것을 추천해줬다.

짧은 시간내로 써먹을수 있을만큼 사용하기 위해서는 러닝커브가 짧은 프레임워크가 가장 큰 매력으로 다가왔다.

시작하기

공식문서를 참고하여 진행해봤다.

Vue가 동작하는 방식은 다음과 같다.

single file components

  1. main.js에서 App.vue 파일을 mount한다.
    이때 bootstrap, router 등 전역으로 설정해야할 파일들을 여기서 import한다.

  2. App.js에서 컴포넌트를 관리한다.

<template>
  <my-header v-if="this.$route.path !== '/login'"></my-header>
  <router-view></router-view>
  <my-footer v-if="this.$route.path !== '/login'"></my-footer>
</template>

<script>
import headerComponent from "@/components/header-component";
import footerComponent from "@/components/footer-component";

export default {
  name: 'App',
  data() {
    return {
      pathname: window.location.pathname
    }
  },
  components: {
    'my-header': headerComponent,
    'my-footer': footerComponent,
  }
}

</script>

<style scoped>
</style>

위 코드에 있는 $routeroute-view같은 것들은 view Route에 관련된 내용이라 뒤에 정리할 예정이다.

  • <template> : html을 작성하는 부분이다.
    아래 components에서 선언한 컴포넌트를 넣을 수도 있다.

  • <style scoped> : 선언해두면 해당 컴포넌트에서만 style이 적용된다.

  • data() ~ return : 변수를 선언, 관리할 수 있다.

  • components : 컴포넌트를 선언할 수 있다.

  1. 하위 컴포넌트들을 만들어준다.
    대강 기능을 익히기 위해 Header, Footer, Login, main으로 만들었다.

아래는 main-contents-components.vue의 코드다.

<template>
  <div class="main-contents">
    <span>Welcome~ {{name}}</span>
    <form>
      <textarea v-model.number="message" typeof="" placeholder="여러줄도 입력해보시지 ㅋㅋ"></textarea>
      <p style="white-space: pre-line"></p>
      <div>
        <select v-model="selected">
          <option disabled value="">Please select one</option>
          <option>자유게시판</option>
          <option>유머게시판</option>
        </select>
        <div>Selected: {{ selected }}</div>
      </div>
      <button type="submit" class="btn btn-outline-primary">제출하기</button>
    </form>
  </div>
</template>

<script>
export default {
  name: "main-contents-component",
  data() {
    return {
      number: 0,
      message: '',
      selected: ''
    }
  },
  created() {
    this.name = "최준호";
    this.number = 0;
  }
}
</script>

<style scoped>
.main-contents {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.btn {
  margin-top: 5px;
}
</style>

vue에서는 v-model을 이용하여 데이터 바인딩을 도와준다.
{{ }} 일명 콧수염 문법 을 이용하여 데이터에 접근할 수도 있다.

라우팅

경로에 따라 보여주는 페이지를 다르게 하고싶은 고민이 생겼다.
Vue Router를 이용하여 이를 해결할 수 있었다.

vue3부터는 vue-router가 아닌 vue-router@next를 설치해줘야한다.

npm install vue-router@next로 설치한다.

main.js에 router를 import 해주고 App을 mount하기 전 use(router)를 붙여준다.

...
import router from "@/router";

createApp(App).use(router).mount('#app')

router > index.js 파일을 생성해준다.

// index.js
import { createWebHistory, createRouter } from "vue-router";
import mainContentsComponent from "@/components/main-contents-component";
import loginComponent from "@/components/login-component";
const routes = [
    {
        path: "/login",
        component: loginComponent,
    },
    {
        path: "/",
        component: mainContentsComponent,
    }

];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

routes에 경로(path)와 해당 경로에서 사용될 컴포넌트(component)를 설정해준다.

App.vue에서 <router-view> 부분이 위에서 설정한 컴포넌트가 보여지는 부분이다.
추가로 로그인 화면에서는 header와 footer를 보여주지 않기 위해 아래와 같이 v-if를 통해 조건문을 사용했다.

<template>
  <my-header v-if="this.$route.path !== '/login'"></my-header>
  <router-view></router-view>
  <my-footer v-if="this.$route.path !== '/login'"></my-footer>
</template>

결론

첫 시도동안 꽤 많은걸 알게되었다.
구현 과정간 모르는 내용을 추가로 정리하는 방식으로 포스팅을 이어나가려고 한다.

Reference

https://yemsu.github.io/vue3-router/
https://v3.ko.vuejs.org/guide/introduction.html

profile
BackEnd

0개의 댓글