pages/videos/index.vue 를 생성했고 pages/videos/_id.vue 를 만들면 http://localhost:8000/videos/1 을 하면 _id.vue 내용이 나온다.
videos 에서 사용한 dataSet을 사용하여 id=1 인 Data만 추출하여 화면에 표시 해 보자
data() 에 videoDataSet 을 정의한 다음 url의 id 를 추출하려면 computed 안에 videoData() funtion을 선언한 뒤 videoDataSet.find 로 route를 통해 전달된 id와 같은 object를 반환하도록 한다. template 안에 {{ videoData }} 를 출력하면 videoData() 의 결과를 보여준다. ( {{ videoData.name }} 을 하면 이름만 출력 된다.)
* 주의 : filter를 사용하는 경우에는 1과 16이 모두 검색결과로 나타나므로 find를 사용해야 한다.
pages/videos 폴더를 추가한 뒤 그 아래에 1.vue 를 생성한다 대충 내용을 입력하고( We're in video 1) localhost:8000/videos/1 해 보면
어? 1.vue 의 내용이 아닌 이전에 만들어 놓은 videos.vue의 내용이 나온다 자동으로 routing 한다며? 왜 안돼?
이렇게 해 보자. "1.vue"는 저대로 놔 두고(저장은 하고) pages/videos.vue 파일에 가서 <nuxt-child> 라는 태그를 추가한 뒤 브라우저에 그대로 입력 localhost:8000/videos/1 해 보면 videos.vue 내용 + 1.vue 내용이 합쳐져서 나온다.
근데 1.vue만 보고 싶은데 어떻게 하느냐 /pages/videos.vue 파일을 /pages/videos/index.vue 로 이름을 바꾸어 옮긴다. http://localhost:8000/videos 를 하게되면 자동으로 index.vue 파일의 내용을 보여준다.
http://localhost:8000/videos/1 을 하면 1.vue의 내용만 보여준다.
videos.vue 파일을 videos/index.vue 로 바꾸었는데 그럼 videos.vue 도 있고 videos/index.vue도 있으면 어떻게 될까? pages/videos.vue 를 추가하여 동일하게 <nuxt-child>내용을 입력 한 뒤 확인 http:localhost:8000/videos 를 입력하면 새로만든 videos.vue 에 index.vue 까지 포함되어 나타난다.
또한 http://localhost:8000/videos/1 을 입력해보면 vedios.vue + 1.vue 가 나타난다.
* 중간 정리 . page 에 vue 파일을 생성하면 주소입력시 바로 확인됨. . index.vue 파일이 없으면 videos.vue 와 videos/1.vue 처럼 <nuxt-child>를 사용하면 아래에 있는 내용이 같이 나옴 . 파일 내용을 분리하려면 videos폴더 아래에 index.vue 파일을 생성. . 파일내용이 분리되면 video/index.vue 폴더안에 <nuxt-child> 가 있음에도 "1.vue"의 내용은 나타나지 않음. . "1.vue" 를 확인해보면 videos.vue + 1.vue 가 나타남.
그러면 videos 아래에 1.vue, 2.vue, 3.vue ... 으로 되는 경우 _id.vue 파일을 만들고 호출하면 된다. /pages/videos/_id.vue 파일을 만들고 1.vue 내용을 복사한다. 다름을 확인하기 위해 느낌표(!!!)를 추가하고 확인한다 http://localhost:8000/2
아직 1.vue를 지우지 않았으므로 http://localhost:8000/1 을 입력하면 1.vue 파일 내용이 나온다.
우선순위는 해당 경로에 파일이 있으면 파일우선. 없으면 _id.vue 사용
경로에 있는 parameter를 사용하려면 {{ $route.params.id }} 를 쓰면 된다.
nuxt 시작. Youtube의 screencast 강좌 참조 매우 만족스러운데 2019년도 에 올라온거라 현재 화면과 조금 다른게 있으나 내용은 크게 다르지 않음. https://youtu.be/NS0io3Z75GI
1. 생성 명령 실행 : npx create-nuxt-app vue-screencast-nuxt
2. 생성이 다 되면 프로젝트 폴더로 이동하여 Run 해 보자 (vue-screencast-nuxt 강좌를 그대로 가기 때문에 프로젝트 이름을 "cd 프로젝트이름" 으로 하면 된다. 시작하려면 npm run dev를 build 한 다음 start하려면 npm run build 하고 npm run start 하면 build로 생성된 것으로 시작된다. 개발모드이므로 npm run dev를 실행한다. 정상적으로 뜨면 Listening: http://localhost:3000/ 이 나온다.
cd vue-screencast-nuxt 한 다음 npm run dev
3. Port 변경(optional) 해도 되고 안해도 되는데 front-end, back-end로 분리하게되면 각각 포트를 사용하는데 위 강좌에서는 ruby를 back-end로 쓴다. ruby port가 3000 이어서 둘 중 하나는 바꿔야 하기 때문에 설명함
프로젝트를 생성하면 nuxt.config.js 가 있는데 여기에 설정을 추가한다. - 추가 전
- 추가 후
저장 후 실행해보면 port가 8000으로 바뀐 것을 확인할 수 있다.
localhost:8000을 브라우저에서 실행해보면 강좌에서와는 조금 다른 내용이 나타난다. (그동안 내용이 바뀜.) Tutorial.vue라는 Component를 기본으로 하고 pages/index.vue 부터 시작하면된다고 친절하게 설명이 되어있네
az login을 하면 브라우저가 뜨고 로그인하라고 나온다. 로그인 하고나서 다시 shell로 돌아온다.
az ad sp create-for-rbac --sdk-auth > credentials 위 명령을 치면 credentials라는 파일이 생성된다. (windows\system32에서 바로 했더니 그냥은 안열리더라는) 생성되었는지 확인을 위해 dir creden* 목록에 credentials 라는 파일이 확인된다.
type credentials (파일내용보는 명령어이므로 credentials의 내용 표시) "clientId": "xxx", "clientSecret": "xxx", "subscriptionId": "xxx", "tenantId": "xx",
