노방이야기

블로그의 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 }} 으로 확인가능.

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 }} 를 쓰면 된다.

/pages/videos.vue 파일을 생성한 뒤 내용을 작성한다.

저장한 후 실행해보면(기본 port를 8000으로 바꾸었으므로 localhost:8000 을 호출)

내용은 videos 라는 data set을 화면에 for 루프를 이용해 뿌려 줌.
Nuxt는 pages 폴더의 파일을 자동으로 routing하므로 따로 경로설정 필요없음.

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 부터 시작하면된다고 친절하게 설명이 되어있네

nuxt.config.js 파일에서

server: { port: 8765 }  를 추가한다.
기본 port는 3000번

ex)
build{
    extend{ config, ctx) {}
}, // 서버를 추가하므로 콤마(,)를 붙인다.

server: {
    port: 8765
}

간단하게 설치는 

vue init vuetifyjs/nuxt 프로젝트명
cd 프로젝트명
npm install

프로젝트 설치가 끝나면
npm run dev

제대로 설치가 안되면
npm install -g @vue/cli