unref

  • argument 가 ref 인 경우 내부 value return
function useFoo(x: number | Ref<number>) {
  const unwrapped = unref(x) // unwrapped is guaranteed to be number now
}

toRef

  • 반응성 객체에 ref 사용할 때 씀
  • prop로 ref 넘길 때 용이
const state = reactive({
  foo: 1,
  bar: 2
})

const fooRef = toRef(state, 'foo')

fooRef.value++
console.log(state.foo) // 2

state.foo++
console.log(fooRef.value) // 3
export default {
  setup(props) {
    useSomeFeature(toRef(props, 'foo'))
  }
}

toRefs

  • 일반 객체에서 반응성 객체로 바꿈
  • 여기서 결과 객체의 각 속성은 원본 객체의 해당 속성을 가리키는 참조
  • 반응성 객체를 반환 시 용이
const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)
/*
Type of stateAsRefs:

{
  foo: Ref<number>,
  bar: Ref<number>
}
*/

// The ref and the original property is "linked"
state.foo++
console.log(stateAsRefs.foo) // 2

stateAsRefs.foo.value++
console.log(state.foo) // 3
function useFeatureX() {
  const state = reactive({
    foo: 1,
    bar: 2
  })

  // logic operating on state

  // convert to refs when returning
  return toRefs(state)
}

export default {
  setup() {
    // can destructure without losing reactivity
    const { foo, bar } = useFeatureX()

    return {
      foo,
      bar
    }
  }
}

isRef

  • ref 객체 값 체크

isProxy

  • reactive 이거나 readonly 일 때 객체 체크

isReacitve

  • reactive에 의해 만들어진 반응형 proxy 객체 체크
  • 만약 프록시가 readonly로 만들어 진경우 true return
  • 다른 프록시가 reactive에 의해 만들어진 다른 프록시가 감쌈

isReadonly

  • readonly로 만들어진 객체가 readonly인지 체크

'Vue.js > vue3' 카테고리의 다른 글

[vue3] composition API  (0) 2020.09.30
[vue3] Reactivity APIs  (0) 2020.07.02
[vue3] setup  (0) 2020.07.02
[vue3] vue 2 > vue3  (0) 2020.07.02

초기세팅

  1. git repository 생성
  2. 내 컴퓨터에서 directory 생성 수 git repository clone
$git clone ~~~~~

cf ) git repository 와 내가 생성한 dir 명이 다른 경우 매번 파일을 옮겨야 하는 불편함이 생김

그러니 repository 와 dir 을 같게 하는게 편함

  1. 내 컴퓨터에서 git repository clone 한 dir 에서 .git 파일을 찾음
$ls -al 
  1. vue 초기 세팅 설치
$vue init webpack <project-name>
  • webpack 을 이용한 vue-cli 초기 세팅

  • 예시 ) 해당 값들은 package.json 에서 변경 가능

  1. vue-cli을 이용한 내 컴퓨터의 초기 프로젝트 세팅을 git에 올림
# add
# . 은 현재 stage에 있는 모든 파일 올림
$ git add . 

# commit 
$ git commit -m '~~~~커밋할 메시지~~~'

# push
# 처음 push할때는 git 계정 물어봄
# 만약 게정을 물어보지 않으면 권한 문제가 있어 github에서 따로 설정해줘야함
$ git push

# status
# 현재 내 브랜치에서 깃 상태 보기위한 명령어
$ git status

Vue 파일 실행 원리

vue 는 웹팩을 통해 웹에서 읽을 수 있는 html 형태로 바꿔줌

  1. index.html

    • 처음 읽히는 파일 여기에서 App.vue를 불름
  2. App.vue

    • 찐으로 뷰가 처음 시작되는 부분
  3. main.js 를 처음 읽음

  4. main.js 안에 http import

  5. import 시킨 http관련 파일(http/index.js) 를 처음 읽음 여기에서 라우터 사용하면서 페이지 불러옴

  • main.js
    • 용도 - router, vuex 와 같은 plugins import 관련만 사용
    • 주의 - 로직은 안들어가는게 좋음
      • 왜? 유지보수 때문에, 문제가 생기면 언제 main.js를 다 까봄..?
      • 다른 js파일로 뺄것 예를 들면 http/index.js , store.js , etc
  • config
    • 어떤 포트로 띄우며 url 가 뭐고 이런거 설정되어있음
    • 서버에 따라서 설정을 다르게 하려면 파일을 나누면됨
    • config/env.js
      • 포트번호, url과 같은 환경 설정 파일
      • 서버 프로필 어디를 물로 실행 하는지에 관한 설정파일
  • http/index.js
    • .config 에서 설정한 환경 설정을 불러다가 씀
    • axios 관련
// index.js 파일 내용
// BASE_URL 은 .config 에서 설정해놓은거 불러다가 http 요청할거다라고 명시
axios.defaults.baseURL = process.env.BASE_URL

cf ) main.js , index.js 관계는 무엇?

  • index.js - 뭣도 없는 html 뷰
  • main.js - 라우터 등등 javascript, 포트.. 등등

cf ) 파일 구조 잡을 때 주의

  • views dir - 실제 그려지는 뷰
  • component dir - 페이지에서 공통으로 쓰는 것들
    • ex ) 뷰 타이알로그를 여러곳에서 쓰는데 이걸 커스터마이징 하고 싶을 때 여기에 넣음# 1주차 (2020-06-11)

초기세팅

  1. git repository 생성

  2. 내 컴퓨터에서 directory 생성 수 git repository clone


$git clone

~\\~

cf ) git repository 와 내가 생성한 dir 명이 다른 경우 매번 파일을 옮겨야 하는 불편함이 생김

그러니 repository 와 dir 을 같게 하는게 편함

  1. 내 컴퓨터에서 git repository clone 한 dir 에서 .git 파일을 찾음

$ls -al
  1. vue 초기 세팅 설치

$vue init webpack <project-name>
  • webpack 을 이용한 vue-cli 초기 세팅

  • 웹펙이란?

프로젝트 세팅 방법

  • 예시 ) 해당 값들은 package.json 에서 변경 가능

![1%202020%2006%2011%20bcfcec2f4dfa4a758ba34a5b88da46bd/_2020-06-11__5.52.54.png](1%202020%2006%2011%20bcfcec2f4dfa4a758ba34a5b88da46bd/_2020-06-11__5.52.54.png)

  1. vue-cli을 이용한 내 컴퓨터의 초기 프로젝트 세팅을 git에 올림

# add .

# . 은 현재 stage에 있는 모든 파일 올림

$ git add .

# commit

$ git commit -m '~

~커밋할 메시지~

'

# push

# 처음 push할때는 git 계정 물어봄

# 만약 게정을 물어보지 않으면 권한 문제가 있어 github에서 따로 설정해줘야함

$ git push

# status

# 현재 내 브랜치에서 깃 상태 보기위한 명령어

$ git status
  • cf ) windows 에서 계정이 엉켰을때 참고 한 사이트

https://yunseul-light.blogspot.com/2017/08/github-windows-git.html

Vue 파일 실행 원리

vue 는 웹팩을 통해 웹에서 읽을 수 있는 html 형태로 바꿔줌

  1. index.html
  • 처음 읽히는 파일 여기에서 App.vue를 불름
  1. App.vue
  • 찐으로 뷰가 처음 시작되는 부분

    1. main.js 를 처음 읽음

    2. main.js 안에 http import

    3. import 시킨 http관련 파일(http/index.js) 를 처음 읽음 여기에서 라우터 사용하면서 페이지 불러옴

  • main.js

    • 용도 - router, vuex 와 같은 plugins import 관련만 사용

    • 주의 - 로직은 안들어가는게 좋음

    • 왜? 유지보수 때문에, 문제가 생기면 언제 main.js를 다 까봄..?

    • 다른 js파일로 뺄것 예를 들면 http/index.js , store.js , etc

  • config

    • 어떤 포트로 띄우며 url 가 뭐고 이런거 설정되어있음

    • 서버에 따라서 설정을 다르게 하려면 파일을 나누면됨

  • config/env.js

    • 포트번호, url과 같은 환경 설정 파일

    • 서버 프로필 어디를 물로 실행 하는지에 관한 설정파일

  • http/index.js

    • .config 에서 설정한 환경 설정을 불러다가 씀

    • axios 관련


// index.js 파일 내용

// BASE\_URL 은 .config 에서 설정해놓은거 불러다가 http 요청할거다라고 명시

axios.defaults.baseURL = process.env.BASE\_URL

cf ) main.js , index.js 관계는 무엇?

  • index.js - 뭣도 없는 html 뷰

  • main.js - 라우터 등등 javascript, 포트.. 등등

cf ) 파일 구조 잡을 때 주의

  • views dir - 실제 그려지는 뷰

  • component dir - 페이지에서 공통으로 쓰는 것들

  • ex ) 뷰 타이알로그를 여러곳에서 쓰는데 이걸 커스터마이징 하고 싶을 때 여기에 넣음

+ Recent posts