'Study' 카테고리의 글 목록 (7 Page)

[Vue]Nuxt - 동적 Page 설정 및 Data binding

2021. 7. 7. 12:10

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를 사용해야 한다.

728x90

저작자표시 비영리 변경금지

트랙백 : 댓글

[Vue]Nuxt - 폴더아래 page 추가

Study/Front-end

2021. 7. 7. 11:01

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

728x90

저작자표시 비영리 변경금지

트랙백 : 댓글

[vue]Nuxt - Page 생성

Study/Front-end

2021. 7. 7. 09:55

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

<template>
  <div>
    <h1>Videos</h1>
    <div v-for="video in videos" :key="video.id">
      {{ video.name }}
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      videos: [{ id: '16', name: 'Intro to NuxtJs' }]
    }
  }
}
</script>

<style>

</style>

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

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

728x90

저작자표시 비영리 변경금지

트랙백 : 댓글

[vue] Nuxt start - 프로젝트 생성.

Study/Front-end

2021. 7. 7. 09:42

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

728x90

저작자표시 비영리 변경금지

트랙백 : 댓글

[Vue]Nuxt port 변경

Study/Front-end

2021. 7. 7. 09:22

nuxt.config.js 파일에서

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

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

server: {
port: 8765
}

728x90

저작자표시 비영리 변경금지

트랙백 : 댓글

[Vue]Vuetify + vuex

Study/Front-end

2021. 6. 30. 14:17

간단하게 설치는

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

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

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

728x90

저작자표시 비영리 변경금지

트랙백 : 댓글

Azure Credential 생성 방법-window

Study/Cloud

2021. 6. 17. 09:32

우선 azure cli가 설치되어 있어야 한다.

windows: https://docs.microsoft.com/ko-kr/cli/azure/install-azure-cli-windows?tabs=azure-cli

linux : https://docs.microsoft.com/ko-kr/cli/azure/install-azure-cli-linux?pivots=apt

Linux용 Azure CLI 수동 설치

Linux용 Azure CLI를 수동으로 설치하는 방법

docs.microsoft.com

설치가 되었으면 (window 기준으로 power shell 을 실행한다)

az login

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",

네가지 항목이 사용되는 항목이므로 잘 적어놓고 사용하면 된다.

728x90

저작자표시 비영리 변경금지

트랙백 : 댓글

cookie 보내기 받기

Study/Go lang

2021. 3. 16. 14:34

javascript에서

1. cookie로

document.cookie = "cookieuser=cookieus;bb=cc";

2. localstorage로

localStorage.LLL = "ABCD";

두 가지로 set을 했을 때
go lang의 echo에서 받는 법

func CallLoginInfo(c echo.Context){

tk, cookeierr := c.Request().Cookie("cookieuser")
    if cookeierr != nil {
        fmt.Println(cookeierr)
}
    tokenStr := tk.Value
    fmt.Println(tokenStr)
}