CodeHoon

안녕하세요 상훈입니다.

Vue.js 에서 라우팅을 정리해볼까합니다. 

Route, Routing...  Laravel 에서는 web.php가 그 역할을 가지고 있습니다. 

하지만 저는 Front Framework 부분에서 그 내용을 처리하는 것이 더 옳다고 생각하기 때문에 vue-route에도 신경을 써보았습니다.

처음에는 진짜 정말 ? ? ? 하는 순간에 파일이 휙휙 지나가고 내가 한 게 이게 무엇인가...나는 감자다 이랬는데 여러 번 반복하여 자료를 살펴보고 직접 세팅을 해보았으며 정리를 해보니 대략적인 감을 잡았습니다.

Vue.js 3 에서는 아직 적용해보지 않았고, 현재는 Vue.js 2 만 적용해본 상태입니다.

기본 구성은 위와 같습니다. 

0. Vue project를 설치하고, vue-router를 설치합니다.

$ vue create '프로젝트명'
$ npm i -S vue-router
$ npm install 

1. router/index.js 생성
2. views/...  : vue 파일들 생성
3. main.js 수정
4. App.vue 수정

이렇게 진행하도록 하겠습니다.

1. router/index.js 생성

router 폴더와 그 안에 index.js를 생성하겠습니다. 그리고 아래와 같은 코드를 작성해줍니다.

import Vue from 'vue'
import VueRouter from 'vue-router'
import FirstPage from '@/views/first-page.vue'
import SecondPage from '@/views/second-page.vue'
import MainPage from '@/views/main-page.vue'

Vue.use(VueRouter)

const routes = [
        {
            path: '/', name: 'MainPage', component: MainPage
        },
        {
            path: '/FirstPage', name: 'FirstPage', component: FirstPage
        },
        {
            path: '/SecondPage', name: 'SecondPage', component: SecondPage
        },
    ]

const router = new VueRouter({
    mode: 'history',
    routes
})
export default router

vue route 관련한 내용을 import.

VueRouter를 사용한다고 선언.

routes의 경로를 직접 지정 저장. => Web.php가 하는 라우팅 역할

router를 출력(?) 내보내기(?) 느낌 실행

2. views/...  : vue 파일들 생성

views라는 폴더를 생성해주시고, 그 안에 해당되는 .vue파일들을 생성해줍니다.

여기서 잘 보시면 파일제목 <-> route 했던부분의 이름이 다른 것을 확인하실 수 있습니다.

바로 snake-case와 camel-case를 지원하는 것인데요, 이에 대해서는 아시리라 생각하고 넘어가겠습니다.

3. main.js 수정

기존에 src/main.js 에 있던 파일을 살짝 수정하도록 하겠습니다.

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

변경된 부분은

1. import router from './router'
2. Vue 객체 내에 router 선언 
입니다.

이 곳에서 router를 호출하게 되고, app을 렌더링 시켜줍니다.

4. App.vue 수정

마지막으로 App.vue 수정입니다. 이곳에서는 쓸데없는 기존의 부분들을 모두 걷어내주고, 아래와 같이 작성합니다.

<template>
  <div id="app">
    <h1>Router Start</h1>
    <router-link to="/">Main Page</router-link> |
    <router-link to="/FirstPage">First Page</router-link> |
    <router-link to="/SecondPage">Second Page</router-link>
    <router-view />
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<router-link> </router-link>
<router-view />

이 두 가지만 잘 알고 있으면 됩니다. 나머지는 없애도 됩니다.

<router-link to="경로"> a 태그 라고 생각하세요 </router-link>

router link 는 a 태그와 생김새가 동일합니다. 해당 태그를 클릭하면 (1)의 index.js에 의해 routing되어 해당되는 경로로 이동합니다. 

router-view 는 해당되는 view를 출력해줍니다. 대신 contents만 갈아끼워준다는 느낌이 강합니다.

[ F12 개발자모드 ] 를 켜서 확인해주시면 <div id="app"> 내의 태그들만 reload 되기 때문입니다.

이제  $ npm run serve 를 통해 서버를 띄워주시면 아래의 결과가 나옵니다.

위의 내용 중에 오류나 잘못 서술한 부분이 있다면

코멘트 남겨주시면 감사하겠습니다.

뷰 초보자이지만 천천히 꾸준히 나아가려고 합니다. 감사합니다.

제가 정리한 전체적인 흐름입니다.

강의는 짐코더님의 Vuetify 강좌 중에서 반복적으로 연습해보았습니다.

안녕하세요 상훈입니다.

테이블 데이터를 업데이트 하는 2가지 방법을 포스팅하겠습니다.

// Router : web.php
Route::get('/posts/update/{id}', 'PostController@update');

// Controller
PostController

//table 
posts

//column 
title, body

1. save() 메서드 사용하는 방법

 - 정공법이지만, 불필요하고 깔끔하지 않습니다. 2번을 추천합니다. 

  PostController

public function update ($id) {
        $post = Post::find($id);
        $post->title = "updated title";
        $post->body = "updated body";
        $post->save();
    }

입니다. $id 값을 라우팅으로 받아오면, 해당하는 id를 가진 데이터를 조회하고, 직접 하나씩 바꿔주는 겁니다.

그리고 마지막에는 저장까지. 아주 정공법이죠. 비효율적이기도 하구요.

2번으로 넘어가겠습니다.

2. update() 메서드 사용하는 방법

Post::where('id', $id)->update([
            'title'=>'updated title2',
            'body'=>'updated body2'
        ]);

update 엘로퀀트(Eloquent)를 사용하여 해당 테이블의 컬럼의 id를 조회하고 업데이트하는 과정입니다.

자동으로 save.

이제 저장해주시고, uri를 통해 접속해주시면, table에 데이터가 변경되었음을 확인하실 수 있습니다.

이상입니다.

안녕하세요 상훈입니다.

1. 깃 연결

$ git remote add origin "git주소입력해주세요"

2. 깃 연결 확인

$ git remote -v

2. 깃 연결 해제

$ git remote remove origin

-> origin으로 등록을 하셨으면 origin으로 작성하시고, 아니라면 해당되는 이름을 작성하시면 됩니다.

안녕하세요 상훈입니다.

React.js 로 input 태그 내에 값을 입력하면 내용을 곧바로 h1 태그 내에 작성되게 하는 기능을 구현하겠습니다.

 <div id="root"></div>

    <script type="text/babel">
    class App extends React.Component {
        constructor (props){
            super(props)
            this.state = {
                text: '',
            }
            this.handleChange = this.handleChange.bind(this)
        }

        render () {
            return (
                <div>
                    <input type="text" 
                        value={this.state.text}
                        onChange={this.handleChange} />    
                    <h1>{this.state.text}</h1>
                </div>
            )
        }

        handleChange (event) {
            this.setState({
                text: event.target.value
            })
        }
    }

    const container = document.querySelector("#root")
    ReactDOM.render(<App />, container)

    </script>

지난번과 마찬가지로, 

root라는 id를 가진 div 태그를 생성하였습니다.

text = '' 로 놓고,  값이 변할때마다 handleChange() 함수를 호출하고, 그 값을 h1태그에 보여주는 형식입니다.

자바스크립트를 이용해서 영어 키보드를 구현하도록 하겠습니다.   (다음 포스팅은 한글 키보드..)

물론 cdn을 이용해서 기본 키보드에서 좀 더 꾸며진 모습을 확인할 수 있습니다.

head태그 내에 넣을 내용

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/css/index.css">
</head>

body 태그 내에 작성할 내용

<body>
    <input class="input" placeholder="Tap on the virtual keyboard to start" />
    <div class="simple-keyboard"></div>
  
    <script src="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/index.js"></script>
    <script src="src/index.js"></script>

    <script>
        const Keyboard = window.SimpleKeyboard.default;

        const myKeyboard = new Keyboard({
        onChange: input => onChange(input),
        onKeyPress: button => onKeyPress(button)
        });


        function onChange(input) {
        document.querySelector(".input").value = input;
        console.log("Input changed", input);
        }


        function onKeyPress(button) {
        console.log("Button pressed", button);
        }

    </script>
</body>

확인해보니 최소 px의 가로길이는 500px 로,

모바일 환경에서는 불가능하다는 판단을 내렸고, 태블릿 정도까지는 갈 수 있다고 판단됩니다.