2.0824_ react.js / vue.js /윈도우 유저네임 3년만에 바꾸기 성공,,

싱글페이지, 멀티페이지

- 요즘 대세는 싱글페이지(☞ﾟヮﾟ)☞

각각의 페이지에서 따로 만들기 때문에 간단하고 쉽게 코드 수정 개발이 가능하다.

React

Vue

Angular

---

* public 폴더에 있는 내용들이 url로 모두 접근가능하기 때문에 보안상 문제가 생길 수 있다.

* views 폴더로 index.html을 옮기고 확장자를 .ejs로 변경

 

 

- 템플레이트 : 파일로 미리 저장했다가 요청을 하면, 컨트롤러에서 이 파일을 읽어 보내주겠다~
                   JSP도 템플레이트임, index파일도 템플레이트이다.

일부를 요청에 따라 살짝 바꿔서 응답을 주겠다~

 

 

- public 폴더 안에 있는 index.html 을 복사해서 views 폴더에 복붙한 다음 index.ejs 로 확장자 바꾸기

  * ejs (Embedded Javascript) : 자바스크립트가 내장되어 있는 html , 동적 웹페이지를 짜는 것이 수월하다.

  * html은 <script>태그를 분리시켜야 하는데,

    ejs는 지정된 태그를 통해 스크립트 내용을 하나의 요소처럼 사용할 수 있음.

 

- controllers 폴더에 test2-controller.js생성

const util = require('../util/util') //외부 라이브러리를 불러올 때 require() 사용

class Test2{
    
    /**
     * @RequestMapping(path="/index.do", method="get")
     */
    index(req, res) {
        const context = {}
        util.render(req, res, 'index', context) //index.ejs파일을 말하는 것
    }
}

module.exports = Test2

render : 요청을 하면 응답으로 보내질 웹 파일을 만들어서 결과물을 보냄 --> 'index'
           ejs로 데이터를 전송하는 역할을 하는 함수

 

 

* 노랑으로 표시된 부분을 ejs코드로 바꿔보기

index.ejs에 원래 부트스트랩 코드로 돼있는 부분을 바꾸려고 함

 

 

test2-controller.js 에서 먼저 객체를 만들고

index.ejs에서 코드 바꿈

주의 : EJS language support를 설치해야 코드가 에러없이 먹힌다

 

---

react.js

사용자 인터페이스 구축을 위한 JavaScript 라이브러리

https://reactjs.org/

React – A JavaScript library for building user interfaces

 

vue.js

Ex01

 

1. C:\Users\username\vue_training 에  vue_training 폴더 생성 후

    VS Code에서 open folder로 vue_training 열기

2. 터미널 창에서 npm install -g yarn 입력 (g는 global)

   다시 yarn.cmd 입력

   오류나면 터미널 창에 yarn.cmd global add @vue/cli 입력

3. 터미널에 ./node_modules/.bin/vue.cmd create ex01

   > Manually select features 선택
   > router, vuex 스페이스바 로 선택해준 후 엔터
   > 3.x 선택 엔터
   > ESlint + standard config 엔터
     ESlint : JS코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석
   > Save this as projects?에 y 입력 엔터
   > myproject 입력 엔터

4. ex01 폴더 안에 들어가서 : 터미널창에 cd ex01 입력 엔터

    yarn.cmd serve 입력 엔터

    success 후 App running at: - Local: ________________________

local에 나타나는 주소를 웹브라우저에 입력하면 vue.js App 페이지가 뜸

 

5. vetur 익스텐션 검색해서 설치

6. ex01 폴더를 선택해서 오픈

   * src 폴더 안에 App.vue에서

    <template> 태그 안에 </div> 아래에 코드 적어주기

- template : 웹페이지 내용

- 웹브라우저 띄워서 보려면 서버 실행해주고 확인해야 함 : 터미널 창에 yarn.cmd serve 입력 엔터

<h1 id ="title1">내 프로젝트 </h1>

   * <style>태그 안에 코드 추가

#title1 {
  color : #ff0000
}

   * src 폴더 > views 폴더 안에 Home.vue의 <template> 태그 안에 코드 추가

<p>첫 페이지 입니다.</p>

 

 * views 폴더 안에 About.vue의 <template> 태그 안에 <h1> 텍스트를 아래 코드로 수정

<h1>안내 페이지 입니다.</h1>

 

yarn.cmd serve --fix 입력 후 서버 실행

 

http://localhost:8081/

또는 http://localhost:8080/

- import는 require()과 같은 역할을 한다.

 

- router 폴더 안에 index.js 에서
  const routes = [] 안에 속성 들어가 있는 것 확인 --> 웹브라우저의 화면 안에서 왔다갔다 할 수 있게 해준 것

---

Ex02 (--> 나중에 삭제함)

 

1. 터미널에 ./node_modules/.bin/vue.cmd create ex02   (vue.cmd create ex02로 하면 오류가 남)

   !  ESlint + standard config 말고 첫번째 >것으로 선택 (빈칸 하나도 깐깐하게 오류로 잡아서 피곤해짐,,)

 터미널에 yarn.cmd serve 입력 엔터

 src폴더 > views폴더 > Home.vue, About.vue 열기

함수를 저 안에 넣어줘야 함(이전에 했던 것과 다른 형태라는 것)

- 터미널창에 yarn.cmd serve 입력 엔터 후 브라우저 새로고침 해 보면

나타나는 화면

---

Ex03

1. Ex02에 있던 Home.vue내용을 그대로 복사해서 Ex03의 Home.vue에 바꿔 붙여넣기   자꾸 설정상 까다로운 오류체크때문에 Ex02 폴더채로 삭제함

 

! onclick="show()" 로 하면 안되는 것 같음 --> 확인 버튼 누르면 개발자도구에서 에러가 뜨는 것 확인할 수 있음

  다른 방식으로 함수를 실행하게 해줘야 한다. : @click="함수이름()"

2. jQuery 사용하기

   터미널에 yarn add jquery 입력

 

   Home.vue의 <script>태그 아래에 입력 : jquery로부터 $ 표시로 불러오겠다

터미널에 yarn.cmd serve 입력 엔터 후 브라우저 새로고침하면

나타나는 화면

 

 

3. axios 사용하기

   터미널에 yarn add axios vue-axios 입력 //axios와 vue-axios 2개를 설치하는 것임

   main.js 로 가서 axios 설정 해주기

   - main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// axios 사용 설정
import axios from 'axios'
import VueAxios from 'vue-axios'


// createApp(App).use(store).use(router).mount('#app')
createApp(App).use(store).use(router).use(VueAxios, axios).mount('#app')
//use(vueAxios, axios) --> 플러그인을 실행하기 위해서 필요한 코드

4. src / router / index.js /// 페이지 컴포넌트 연결

   * routes : Vue Router에 의해서 컨트롤되는 페이지의 정보를 담음

   * component의 코드를 나눔 : 한 번에 로딩하면 많은 시간이 걸리기 때문에 처음 로딩 때 파일을 전부 가져오는 게
                                          아니라 해당 url로 이동할 때 필요한 파일을 그때 그때 가져오게 된다.(동적 import)

   * 함수는 methods안에 생성할 수 있음

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue' //About.vue를 읽어서 About이란 변수상자에 넣겠다.
import Modify from '../views/Modify.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/modify',
    name: 'Modify',
    component: Modify
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

- 각각 import시킨 것을 const routes 에 넣어줌

 

- Home.vue

  axios 코드 추가

<template>
  <div class="home">
    <h1>홈 화면</h1>

    <div>
      <input type="text" value="홍길동" id="input1">
      <!-- <input type="button" value="확인" onclick="show()"> -->
      <input type="button" value="화면" @click="show()">
      <button type="button" class="btn btn-primary waves-effect font-weight-bold" @click="doList()">요청하기</button>
      <button type="button" class="btn btn-primary waves-effect font-weight-bold" @click="goTo('/about')">요청화면으로</button>
      <button type="button" class="btn btn-primary waves-effect font-weight-bold" @click="goTo('/modify')">수정화면으로</button>

    </div>

    <div id ="results"> </div>
  </div>
</template>

<script>
import $ from 'jquery'
import axios from 'axios'

export default {
  name: 'Home',
  components: {
  },

  methods: {

    show() {
      console.log('show 함수 호출됨.')

      const input1 = $('#input1').val()
      $('#results').html(`<p>입력한 글자 : ${input1}</p>`)
    },

    doList() {
      console.log('doList 호출됨')
      const page = 1
      const perPage = 10

      axios({
          method: 'get',
          url: `http://localhost:8001/student?page=${page}&perPage=${perPage}`,
          responseType: 'json'
      }).then((response) => {
          console.log(`요청에 대한 응답 : ${JSON.stringify(response.data)}`)
      }).catch((err) => {
          console.log(`에러 발생 : ${err}`)
      })
    },

    goTo(path) {
      console.log(`goTo 함수 호출됨 : ${path}`)
      this.$router.push(path)
    },
  },

  mounted() {
      console.log('mounted 함수 호출됨')
  }

}
</script>

- 오류가 발생하면 preferences → Text Editor → Files → Trim Trailing 을 켜서 시도

- <script>태그 안에 show() 함수를 넣는 방식이 다르다 ⇒ 인식이 안돼서 오류가 발생

 

 

- Modify.vue

<template>
  <div>
    <h1>고객화면수정</h1>
    <button type="button" class="btn btn-primary waves-effect font-weight-bold" @click="goTo('/')">메인화면으로</button>
  </div>
</template>

<script>
export default {
  name: '수정화면',
  methods: {
    goTo(path) {
      this.$router.push(path)
    }
  }
}
</script>

 

- App.vue : 화면 전체 페이지를 보여줌

  * <router-view/> : 각각의 화면으로 나눈 것들을 태그로 바꿔치기해서 보이게 해줌 , 항상 보임

<template>
  <div>
    <div id="nav">
      <router-link to="/">메인</router-link> |
      <router-link to="/about">안내화면</router-link> |
      <router-link to="/modify">수정화면</router-link>
    </div>
    <router-view/>
  </div>
</template>

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

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

---

 

- Home.vue

<template>
  <div class="home">
    <h1>홈 화면</h1>

    <div>
    <input type="text" value="홍길동" id="input1">
    <!--<input type="button" value="확인" onclick="show()">-->
    <input type="button" value="확인" @click="show()">
    </div>

    <div id="results"></div>
  </div>
</template>

<script>

export default {
  name: 'Home',
  components: {

  },
  methods: {
    show () {
      console.log('show 함수 호출됨.')
    }
  }
}
</script>

 

- yarn add jquery

<template>
  <div class="home">
    <h1>홈 화면</h1>

    <div>
    <input type="text" value="홍길동" id="input1">
    <!--<input type="button" value="확인" onclick="show()">-->
    <input type="button" value="확인" @click="show()">
    </div>

    <div id="results"></div>
  </div>
</template>

<script>
import $ from 'jquery'

export default {
  name: 'Home',
  components: {

  },
  methods: {
    show () {
      console.log('show 함수 호출됨.')

      const input1 = $('#input1').val()
      $('#results').html(`<p>입력한 글자 : ${input1}</p>`)
    }
  }
}
</script>

 

- index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>


    <!-- 부트스트랩을 위한 CSS 파일 불러오기 -->

        <!--  Font Awesome  -->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
        <!-- Bootstrap core CSS -->
        <link href="./mdb/css/bootstrap.min.css" rel="stylesheet">
        <!-- Material Design Bootstrap -->
        <link href="./mdb/css/mdb.min.css" rel="stylesheet">

        <!-- ================================  -->
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->

     <!-- 부트스트랩을 위한 JS 파일 불러오기 -->

        <!-- JQuery -->
        <script type="text/javascript" src="./mdb/js/jquery.min.js"></script>
        <!-- Bootstrap tooltips -->
        <script type="text/javascript" src="./mdb/js/popper.min.js"></script>
        <!-- Bootstrap core JavaScript -->
        <script type="text/javascript" src="./mdb/js/bootstrap.min.js"></script>
        <!-- MDB core JavaScript -->
        <script type="text/javascript" src="./mdb/js/mdb.min.js"></script>

        <!-- ================================  -->

  </body>
</html>

 

- Home.vue

<template>
  <div class="home">
    <h1>홈 화면</h1>

    <div>
    <input type="text" value="홍길동" id="input1">
    <!--<input type="button" value="확인" onclick="show()">-->
    <input type="button" value="확인" @click="show()">
    <button type="button" class="btn btn-primary waves-effect font-weight-bold">추가하기</button>
    </div>

    <div id="results"></div>
  </div>
</template>

<script>
import $ from 'jquery'

export default {
  name: 'Home',
  components: {

  },
  methods: {
    show () {
      console.log('show 함수 호출됨.')

      const input1 = $('#input1').val()
      $('#results').html(`<p>입력한 글자 : ${input1}</p>`)
    }
  }
}
</script>

 

- yarn add axios vue-axios 터미널에 입력하고 설치

 

- main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

//axios 사용 설정
import axios from 'axios'
import VueAxios from 'vue-axios'

//createApp(App).use(store).use(router).mount('#app')
createApp(App).use(store).use(router).use(VueAxios, axios).mount('#app')

 

- Home.vue  --> doList함수 추가 => axios를 쓰던 index.html

<template>
  <div class="home">
    <h1>홈 화면</h1>

    <div>
    <input type="text" value="홍길동" id="input1">
    <!--<input type="button" value="확인" onclick="show()">-->
    <input type="button" value="확인" @click="show()">
    <button type="button" class="btn btn-primary waves-effect font-weight-bold" @click="doList()">요청하기</button>
    </div>

    <div id="results"></div>
  </div>
</template>

<script>
import $ from 'jquery'
import axios from 'axios'

export default {
  name: 'Home',
  components: {

  },
  methods: {
    show () {
      console.log('show 함수 호출됨.')

      const input1 = $('#input1').val()
      $('#results').html(`<p>입력한 글자 : ${input1}</p>`)
    },
    doList() {
      console.log('doList 호출됨')

      const page = 1
      const perPage = 10

      axios({
        method:'get',
        url:`http://localhost:8001/test1?page=${page}&perPage=${perPage}`,
        responseType:'json'
      }).then((response) => {
        console.log(`요청에 대한 응답 : ${JSON.stringify(response.data)}`)

      }).catch((err) => {
          console.log(`에러 발생 : ${err}`)
        })
      }
    }
}
</script>

 

- Modify.vue

<template>

  <div>
    <h1>고객정보 수정</h1>

    <button type="button" class="btn btn-primary waves-effect font-weight-bold" @click="goTo('/')">메안화면으로</button>
  </div>

</template>

<script>
  export default {
    name : '수정화면',
    methods : {
      goTo(path) {
        this.$router.push(path)
      }
    }
  }
</script>

 

- App.vue

<template>
  <div>
    <div id="nav">
      <router-link to="/">메인화면</router-link> |
      <router-link to="/about">안내화면</router-link> |
      <router-link to="/modify">수정화면</router-link>
    </div>
    <router-view/>
  </div>
</template>

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

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

 

- index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Modify from '../views/Modify.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/modify',
    name: 'Modify',
    component: Modify
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

 

 - App.vue

<template>
  <div>
    <div id="nav">
      <router-link to="/">메인화면</router-link> |
      <router-link to="/about">안내화면</router-link> |
      <router-link to="/modify">수정화면</router-link>
    </div>
    <router-view/>
  </div>
</template>

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

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

 

- Home.vue

<template>
  <div class="home">
    <h1>홈 화면</h1>

    <div>
    <input type="text" value="홍길동" id="input1">
    <!--<input type="button" value="확인" onclick="show()">-->
    <input type="button" value="확인" @click="show()">
    <button type="button" class="btn btn-primary waves-effect font-weight-bold" @click="doList()">요청하기</button>
    <button type="button" class="btn btn-primary waves-effect font-weight-bold" @click="goTo('/about')">안내 화면으로</button>
    <button type="button" class="btn btn-primary waves-effect font-weight-bold" @click="goTo('/modify')">수정 화면으로</button>
    </div>

    <div id="results"></div>
  </div>
</template>

<script>
import $ from 'jquery'
import axios from 'axios'

export default {
  name: 'Home',
  components: {

  },
  methods: {
    show () {
      console.log('show 함수 호출됨.')

      const input1 = $('#input1').val()
      $('#results').html(`<p>입력한 글자 : ${input1}</p>`)
    },
    doList() {
      console.log('doList 호출됨')

      const page = 1
      const perPage = 10

      axios({
        method:'get',
        url:`http://localhost:8001/test1?page=${page}&perPage=${perPage}`,
        responseType:'json'
      }).then((response) => {
        console.log(`요청에 대한 응답 : ${JSON.stringify(response.data)}`)

      }).catch((err) => {
          console.log(`에러 발생 : ${err}`)
        })
      }
    },
    goTo(path) {
      console.log(`goTo 함수 호출됨 : ${path}`)
      this.$router.push(path)
    }
}
</script>