노방이야기

아무것도 안하고 flutter app을 생성했는데 오류가 난다.

이유는 android sdk를 못잡아서 그렇다 ㅡㅡ;
flutter는 android studio로 하는게 맘편하지만
일단 Intelli J 에다 설정하려면
android studio를 설치하고 그곳의 sdk경로를 intelliJ 에 set하는 방법이 있다
(물론 다른방법도 있겠지만 다른것은 못찾았다.)

mac의 경우 android studio를 실행하고
화면 좌측 상단에서 "Android Studio" > Prefrences를 누르면
Appearance & Behavior > System Settings > Android SDK 가 있다.
여기에서 Android SDK Location 위치를 복사한다.

이제 Intelli J를 실행하고
화면 좌측 상단에서 "Intelli J IDEA" > Preferences를 누르면
Android Studio와 위치가 좀 다르다
Build, Execution, Deployment > Android > Android Project Structure에서
SDK Location 이 비어있을 것이다.
(비어있지 않고 sdk경로가 있다면 문제가 없겠지만 ㅎㅎ)
위에서 복사한 Android SDK Location을 붙여넣고 Apply를 하면 된다.

이렇게 하면
flutter Cannot resolve symbol 'Properties' 오류는 잡힌다.

만약
GradleException 오류가 나고 있다면
해당 app/build.gradle 파일에서 오류나는 GradleException을 FileNotFoundException 으로 변경한다 API29부터 바뀌었다고 한다.

Error: MissingPluginException(No implementation found for method getDatabasesPath on channel com.tekartik.sqflite)

Android Studio에서 target을 android나 ios 로 하면 sqflite가 저장되는 곳이 있어서 에러가 나지 않지만
web 으로 했을 때는 에러가 나는 것 같다.

동일한 소스를 web 으로 run했을 때만 위의 에러가 난다.

프로젝트 구조는
- myproject
   - frontend : 여기에 UI 프로젝트(nuxt)
   - backend 

npx create-nuxt-app 입력하고 다음항목을 선택한다.
 . 기본으로 생성한 후 추가 할 예정
 . Lint 는 나중에 추가

생성되면
npm run dev 를 실행

npm run build
npm run start

기본 port는 3000번이므로
http://localhost:3000 으로 접속

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 설정

나의 경우 로그인만 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 파일을 만들어서 필요한 내용을 정의한다.

기본 포맷은

필요한 파일을 생성한다.
(views 폴더도 없다니...)
src/views/Home.vue
src/views/About.vue
두 개의 파일을 생성한다.

src/route/index.js 파일을 다음과 같이 정의한다.

Home.vue 는 상단의 import 구문으로 정의했고
About.vue 는 component 안에서 import로 불러온다.

설정을 마치고 npm run serve로 가동하면 에러는 없으나... 화면이 하얗다.
process.env.BASE_URL 을 못찾는다고 에러가나는데... 진짜로 없다.

그래서 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를 이용하지 않음)