[실습] 뷰(Vue)로 계산기 구현하기 - 웹(WEB)에 계산기 구현하기

제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 

제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다.

 

혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요!

---

오늘의 Vue.js 실습 목표는 "계산기 만들어보기!" 입니다.

본 게시글에서 다루는 사항은 지난 게시글에서 다룬 웹 어플리케이션에 계산기를 올리기 위한 준비를 하는 과정입니다.

---

계산기 구현하기

사전 준비

아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다.

1. Vue 프로젝트 생성 (참고: https://logs-jejustone.tistory.com/5)

 

혹시라도 아래 개념이 잘 기억나지 않으시는 분들은 관련 링크를 참조하시기 바랍니다.

• 뷰 라우터(Vue Router) - 네스티드 라우터: https://logs-jejustone.tistory.com/20

 

파일 구조

웹 어플리케이션의 기본적인 레이아웃을 구현하기 위해서 수정하거나 새로 생성해야하는 파일은 총 4개입니다.

아래 이미지에서 파란색으로 표시한 파일은 수정할 파일들이고 초록색으로 표시한 파일들은 신규 추가할 파일들입니다.

작업할 파일에 대한 간략한 설명은 아래를 참고하시면 됩니다.

• TheSidebar.vue
  • Web Sidebar이자 Menu 영역을 정의하는 파일
  • 콘텐츠 영역에서 보여줄 콘텐츠 페이지의 지시자 역할을 하는 영역을 정의하는 파일
• router\index.js: 라우터 관련 정보를 설정하는 파일
• views\PracticePage.vue: 라우팅 결과로 표현되어지는 콘텐츠를 정의하는 파일
• views\Practice\PracticeCalculator.vue: PracticePage.vue 하위 컴포넌트로 네스티드 라우팅 결과 파일

 

 

결과 이미지

구현하기에 앞서 본 글을 따라하시면 아래와 같이 계산기 구현 결과를 콘텐츠 영역에서 확인하실 수 있습니다.

지난 시간에 만든 웹 애플리케이션 레이아웃에 띄운 계산기 결과 이미지는 아래와 같습니다.

• 경로: http://localhost:8080/practice/calculator

좌: 가로가 짧은 화면 우: 가로가 긴 화면

 

 

소스 코드

src\component\TheSidebar.vue

위 결과 이미지에서 'Menu'로 좌측에 위치한 메뉴이자 사이드바 영역을 정의하고 관리하는 코드를 구현합니다.

<!-- TheSidebar.vue -->

<template>
    <div id="sidebar">
        <h3>Menu</h3>
        
        <div class="defaultMenu topMenu">
            <router-link to="/home">Home</router-link>
        </div>
        <div>
            <p class="defaultMenu topMenu">Practice</p>
            <div class="defaultMenu subMenu">
                <router-link to="/practice/calculator">Calculator</router-link>
            </div>
        </div>
    </div>
</template>

<script>
export default {};
</script>

<style scoped>
#sidebar {
    background-color: green;

    float: left;
    height: 100%;
    width: 15%;
}

.defaultMenu {
    padding: 5px;
    font-style: oblique;
}
.topMenu {
    text-align: left;
    font-size: 2vw;
}

.subMenu {
    text-align: right;
    font-size: 1.5vw;
}

div h3 {
    text-align: center;
    color: white;
}
</style>

이전 글에서 새롭게 추가된 코드는 2곳입니다.

• <template> 내 Practice, PracticeCalculator의 메뉴를 정의하는 코드
  
  • Practice 메뉴는 라우팅하지 않을 메뉴로 표시만 하기 위해 <p> 태그 사용
• <style> 내 subMenu라는 CSS 스타일을 정의하는 코드

 

src\router\index.js

router\index.js은 라우팅 기능을 사용하기 위한 최소한의 정보 및 라우팅될 페이지 정보를 설정하는 파일입니다. 

본 파일에서 Sidebar인 메뉴에서 Element 클릭시 변경될 Path 정보와 Path에 해당하여 콘텐츠 영역에 보여질 컴포넌트 파일을 지정합니다. 

import { createRouter, createWebHistory } from 'vue-router'

// 라우팅될 페이지 경로 및 별칭
import HomePage from "../views/HomePage.vue";
import PracticePage from "../views/PracticePage.vue";
import PracticeCalculator from "../views/Practice/PracticeCalculator.vue";

// 라우팅될 페이지 정보를 담는 변수
const routes = [
    {
        path: "/home",
        name: "home",
        component: HomePage
    },
    {
        path: "/practice",
        name: "practice",
        component: PracticePage,
        children: [
            {
                path: "calculator",
                component: PracticeCalculator
            }
        ]
    }
];

// 라우터 정보
const router = createRouter({
    history: createWebHistory(),
    routes,
})

export default router;

이전 글에서 새롭게 추가된 코드는 2곳입니다.

• Practice.vue와 PracticeCalcualtor.vue를 import 하는 코드
• Practice.vue와 PracticeCalculator.vue관련 라우팅 페이지 결과, 경로를 지정하는 코드

 

src\views\PracticePage.vue

위 결과 이미지에서 Sidebar 메뉴에서 Practice가 콘텐츠 영역에서 보여질 컴포넌트를 구현합니다.

실질적으로 Practice 메뉴는 클릭하여 콘텐츠 영역이 변경되지는 않습니다.

다만, 노란색으로 표시되고 있는 콘텐츠 영역에서 Practice로 개발할 계산기, Todo 등의 컴포넌트를 주체적으로 관리하는 페이지이자 파일로 사용됩니다.

그렇게 하기 위해 뷰 라우터 중에서 네스티드 라우터 개념을 착안하여 구현하였습니다.

<template>
    <div id="wrapPractice">
        <h1> Vue Practice </h1>

        <div>
        <router-view></router-view>

        </div>
    </div>
</template>

<script>
export default {}
</script>

<style scoped>
#wrapPractice {
    height: 100%;
}

#wrapPractice h1 {
    margin: 0;

    height: 10%;
}

#wrapPractice div {
    height: 90%;
}
</style>

 

src\views\Practice\PracticeCalculator.vue

계산기의 레이아웃과 주요 기능을 구현하는 파일입니다.

보다 상세하게 다루기 위해 별도의 게시글로 작성하였으니 관련 코드는 아래 링크를 참조해주세요.

https://logs-jejustone.tistory.com/33

 

 

---

References

• HTML Tutorial: https://www.w3schools.com/html/default.asp

HTML Tutorial

• CSS Tutorial: https://www.w3schools.com/css/default.asp

CSS Tutorial

• Vue.js 공식 사이트: https://vuejs.org/guide/quick-start.html

Quick Start | Vue.js