Pass-ta를 실행시키기 위한 조건으로 "Virtualize Intel VT-x/EPT or AMD-V/RVI" 기능이 지원되어야 한다>
CPU에서 지원하는지 여부를 확인해야 한다.
ubuntu setting에서 체크를 한 뒤에 play 버튼을 눌렀을 때
에러가 나면
제어판 - 프로그램 및 기능 - Windows 기능 켜기/끄기
Hyper-V 설정 체크 해제 확인하고
그 다음 Windows 하이퍼바이저 플랫폼과 가상 머신 플랫폼 체크 해제를 확인한다.
빨간부분 체크해제하니 정상적으로 가동이 된다.
다만, WSL은 동작하지 않는다.
WSL을 하려면 빨간부분체크 -> Paas-TA 실행안됨
Paas-TA 하려면 빨간부분 체크 해제 -> WSL 안됨.
둘 중 하나만 가능.
Pass-Ta 환경구성할 때
Linux에 이것저것 설치하기 때문에
간단히 MS Store에서 Ubuntu 18.04 다운받아서 설치했다.
bosh 환경설 정 중....
종속성 파일 설치 명령을 내렸는데.. zlibc 설치가 안된다.
sudo apt-get install -y build-essential zlibc zlib1g-dev ruby ruby-dev openssl libxslt1-dev libxml2-dev libssl-dev libreadline7 libreadline-dev libyaml-dev libsqlite3-dev sqlite3
경로에 E: 로 되어있어... 안되니
맘 편히 VMware 의 workstation-player 에 설치하기를... ㅠ.ㅠ
VMware Player 설치
https://www.vmware.com/kr/products/workstation-player/workstation-player-evaluation.html
front-end 와 back-end 를 따로 구축하는 경우
proxy issue가 있다.
axios 를 이용하여 기존 서비스에 로그인을 시도했는데
parameter 수신이 되지 않았다.
전송자체는 동일한 값이 전송되었는데 수신 url에 대한 호출은 되나 param 정보가 없었다.
이유는 (일주일 정도 삽질했나?? ㅠㅠ)
크로스 도메인 이슈 때문이다.
| 스크립트가 실행되는 페이지와 비동기 호출 시 주소의 프로토콜, 호스트, 포트가 같아야 함. |
즉 front-end 실행 포트가 3000번이고
back-end 실행 포트가 8000번인 경우 위 경우에 해당되기 때문에
proxy 설정을 해야 정상적으로 처리가 가능하다.
먼저 모듈 설치
npm i @nuxtjs/axios
npm i @nuxtjs/proxy
그 다음 nuxt.config.js 설정
| module.exports = { modules: [ '@nuxtjs/axios' ], axios: { proxy: true // proxy 사용 }, proxy: { '/prefix-url': 'proxy-url' // proxy url } } |
나의 경우 로그인만 Test 했으므로 nuxt.config.js 에 추가
proxy: { '/login/': 'http://localhost:8000' },
호출하는 login.vue에서
<input v-model="userid" type="text" class="input" name="userid"/>
<input v-model="password" type=password" class="input" name="password"/>
// login function
const frm = new FormData()
frm.append('userid', this.userid) // model로 연결되어 있으므로 this.userid
frm.append('password', this.password) // model로 연결되어 있으므로 this.password
this.$axios.post(`login/proc`, frm)
수신하는 back-end 의 경로가
http://localhost:8000/login/proc
proxy에 /login 설정이 되어 있으므로
proxy에서 "/":"localhost:8000" 으로 하면 proxy로 바로 redirect 되므로 경로가 있어야 함.
하지만 proxy로 하는경우 경로 구별을 위해
/api/ 라는 경로를 주어 분리하는 용도로 사용해 봐야겠음.
참조하는 강좌에서 진행한 것으로
주된내용은 아니므로 Skip해도 됨.
npm install vue-video-player --save
https://www.npmjs.com/package/vue-video-player 참조
근데 안된다....
별거없이 추가했는데.. 안되네
오류가 could not find declaration file for module 'vue-video-player'
지나가자 ㅋ
시작부터 vuex의 store를 사용한다.
src/store/index.js 에서
state 안에 video dataset(videos)을 선언해둔다.
Home.vue 에서 videos 를 사용하는데
style 관련해서 sass 를 사용하므로 두개의 모듈을 추가로 설치한다
npm i sass-loader 로 최신버전을 깔았더니...
Syntax Error: TypeError: this.getOptions is not a function 에러가 나네... 쩝.
이런경우 npm uninstall sass-loader 로 삭제하고 10버전을 설치한다.
vue랑 sass-loader 버전이 호환되지 않는 경우가 있다고 하네...
npm install --save sass-loader@10
npm i node-sass
src/views/Home.vue 를 수정한다.
video dataset 이 목록으로 나오는 것을 확인할 수 있다.
이제 목록을 클릭하면 상세로 들어가자.
보통은 VideoWatchList -> VideoWatchDetail 과 같이 목록에서 상세로 가는데
Home 화면에 목록이 나오므로 VideoWatch화면을 상세로 사용하자.
그러기 위해서는 목록에서 값을 상세로 넘겨줘야하는데...
일단 화면의 링크를 클릭해봤는데 video watch화면이 나오네?? 흠...
src/route/index.js
path에 id를 받을 수 있게 :id 를 추가하고, params: true 로
url에 id가 넘어올 것이므로
VideoWatch.vue 에서 id를 이용해 store의 state 안에 있는 videos 에서 id로 값을 가져오게 한다.
computed에서 video라는 function을 정의하고
this.$store.state 로 state값에 접근하여 videos를 찾는다.
이때 this.$route.params.id 를 Number()로 감싸서 숫자로 바꾸어 주는데
이유는 videos 에 id 가 숫자로 되어있기 때문이다.
Number()로 감싸지 않으면 숫자와 문자를 비교하게 되어 return되는 값이 없다.
id를 '1' 과 같이 문자로 처리하면 Number()로 감싸줄 필요 없다.
결과는 this.$route.params.id 를 넘겨서 state.videos 에서 id에 해당하는 값을 가져왔다.
참고1.
console.log(this.$store.state.videos) 를 찍었을 때
data가 Proxy 아래로 나타나게 되는데 이것은 상관하지 않아도 된다.
똑같이 array며 표현만 저렇게 된 것임.
참고2
store/index.js 에 videos 를 선언한 것은 vuex 3.x 형 표현이다.
vuex 4.x 로 하면 형태가 조금 다른데 3.x 대 형태도 문제없이 동작한다.
Youtube 강좌 따라하기 : https://youtu.be/vaCrzaeC-RE
-- vue cli 와 npm 설치(업데이트)
npm i -g @vue/cli
npm install -g npm
vue create 프로젝트 이름
vue create screencast_1
(첫번째 default 로 설정한 프로젝트의 실패로... _1 이 붙었다.)
- vuex, vue-router만 추가했다.
프로젝트를 설정하면
src/views/Home.vue
src/views/About.vue
src/views/components/HelloWorld.vue
components 폴더에 있는 vue는 재사용하는 것들이고
views 폴더에 있는것을 화면단위이다.
이제부터 시작.
src/views/VideoWatch.vue 파일을 만든다.
route/index.js 파일을 수정한다.
import 시키고
routes 에 내용추가해서 경로를 입력한다.
http://localhost:8080/video
Project setting
Youtube 강좌 따라하기 : https://youtu.be/vaCrzaeC-RE
vue create 프로젝트 이름
vue create screencast
일단은 세팅하지 말고 default로 하면 폴더가 아~주 빈약하다.
따라서 default 세팅은 하지 말자...
아래 내용은 default 설정 Episode 정도로만 봐 주자.
----
추가로 만들 것들이 많다. ㅎ
우선 router부터
npm install vue-router
설치가 끝나면
src/router/index.js 파일을 만들어서 필요한 내용을 정의한다.
기본 포맷은
| import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) |
필요한 파일을 생성한다.
(views 폴더도 없다니...)
src/views/Home.vue
src/views/About.vue
두 개의 파일을 생성한다.
| -- Home.vue <template> <div class="home"> <h1>This is an Home page</h1> </div> </template> |
| -- About.vue <template> <div class="about"> <h1>This is an about page</h1> </div> </template> |
src/route/index.js 파일을 다음과 같이 정의한다.
| import Vue from "vue"; import VueRouter from "vue-router"; import Home from "../views/Home.vue"; Vue.use(VueRouter); const routes = [ { path: "/", name: "home", component: Home }, { path: "/about", name: "about", component: () => import(/* webpackChunkName: "about" */ "../views/About.vue") } ]; const router = new VueRouter({ routes }); export default router; |
Home.vue 는 상단의 import 구문으로 정의했고
About.vue 는 component 안에서 import로 불러온다.
설정을 마치고 npm run serve로 가동하면 에러는 없으나... 화면이 하얗다.
process.env.BASE_URL 을 못찾는다고 에러가나는데... 진짜로 없다.
| const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) |
그래서 default 말고 몇가지 설정한 프로젝트를 실행해보니... process.env.BASE_URL 이 문제가 되지 않는다 ㅜㅜ.
default 설정은 빨리 포기하자. ㅋ
목록을 뿌려줄 때
videos에 목록을 정의해서 사용했는데 실제로는 서버에서 값을 받아온다.
axios 는 프로젝트 설정에서 이미 set했으므로 바로 사용가능하다.
pages/videos/index.vue 에서 script 에 data(){ return { videos : [ ... ] } } 으로 정의 한 부분을 주석하고
axios 호출로 바꾼다.
return을 videos 로 해야 위에 v-for에서 videos 로 사용이 가능하다.
videos 에서 목록을 뿌려주고 목록에서 item선택시 해당 page로 이동할 준비는 끝났다.
이제 여기에서 link작업만 하면 해당 page로 이동하려면
<nuxt-link>에 :to 로 경로를 넣는다. 따옴표 안에 "` `" 키보드 1번 옆에 있은 ` 를 쓰는 점에 유의
클릭시 해당 page로 이동하는 것을 확인할 수 있다.
수정화면으로 이동하려면
마찬가지로 nuxt-link를 이용하여 경로에 edit로 가도록하고 button으로 정의하여 Edit button 이 화면에 나옴
Edit버튼을 클릭하면 해당화면으로 이동하는 것을 확인할 수 있다.
Edit화면에서 다시 view화면으로 가기위해 back버튼을 추가한다.
클릭시 해당 id를 가진 화면으로 이동한다.
(history를 이용하지 않음)
블로그의 post와 edit page 와 같이 Edit page를 추가해보자
pages/videos/_id.vue 파일을
pages/videos/_id 폴더 아래에 index.vue 파일로 옮긴다.
pages/videos/_id/edit.vue 파일을 만들어 Edit라는 내용을 추가한다.
(기존 _id.vue 는 _id.vue_old 로 이름을 바꿈)
http://localhost:8000/videos/1/edit
로 pages/videos/videos.vue + edit.vue의 내용이 나오는 것을 확인할 수 있다.
( videos.vue 안에 <nuxt-child/> 태그가 있으므로 )
자꾸 _id.vue와 index.vue 가 나와서...
아래 설명내용이 맞는지는... 검증이 필요한데...
결과는 확인되므로 일단은 적어놓기로
pages/videos/_id.vue 라는 파일을 만들고 dataSet을 정의한다.
<next-child>에 전달할 parameter를 넣는다.
넘기는 parameter 이름을 video로 하고 data는 가져오는 functionName( videoData )을 사용한다.
넘어오는 Data들을 받아서 처리하는 부분을 보자
/pages/videos/_id/index.vue 파일에서
props 로 video 를 받는다. 받았으면 {{ video }} 로 확인가능.
/pages/videos/_id/edit.vue 파일에서도 동일하게
props 로 video 로 받은뒤 이번에는 {{ video.name }} 으로 확인가능.
|
