뷰(Vuejs)를 처음 배우면서 알게된 것 정리 (특징, 문법, 에러, 세팅하는법)

Vue 특징

1. 단위UI + JavaScript여서 재사용성이 좋다.

2. SAP(싱글 어플리케이션 페이지) 특징이 있어서 하나의 파일로 실행이된다.
- 결국 html파일하나로 실행되지만 그 안에서 자바스크립트가 구동되는 원리이다.

3. 3의 최신버전에서는 네이밍 룰을 맞추는것이 권장된다. ex) views폴더안에 vue파일은 00View.vue 이런식으로 권장된다.

4. vue안에서는 function키워드 없이 함수명() 이렇게 사용이 가능하다

5. style 태그에서 scoped를 빼주면 전체 컴포넌트에 반영된다. 
하지만 그렇게 사용하지 않으니 해당 화면에만 적용해야하니까 scoped를 써주는 것이 좋다.

6. html, js, css 를 완벽하게 분리해서 관리할 수 있다.

리액트에서는 명확하게 3가지를 분리되어 있지 않다.
복잡도가 높아지고 불편할 수 있다. 

ex) 퍼블리셔가 던져주면 뷰는 그대로 끌어서 쓰면된다.
ex) 퍼블리셔가 던져줘도 리액트는 또 수정하고 복잡도가 많아진다.

7. <template>태그안에서는 리액트와 마찬가지로 최상위 태그가 감싸주고
해당 태그안에서 다른 태그를 유기적으로 사용해야한다.

대표적으로 div태그로 전체를 감싸주고 그 태그안에서 
필요에 따른 태그를 사용할 수 있다.

그렇지않고 중구난방으로 뒤죽박죽 사용하려고해도 어차피 에러가 발생하게되니까
뷰에서 제공하는 룰을 권장해서 코드를 짜는 것이 중요하다고 할 수 있다.

단! vue2버전과 다르게 vue3버전부터는 해당 방식을 무시하고 사용해도
에러가 발생되지 않는다. 브라우저에서도 잘 사용된다.

그래도 따라야하는 이유는?
재사용컴포넌트는 우리가 매번 어플리케이션을 만들때마다 써야하는 
글로벌한 컴포넌트가 있을 수 있다.

뷰2버전에서도 쓸 수 있고 재사용성을 높여야하는데
뷰3버전에만 맞춰서 사용하면 다른 버전에서 사용할 때 에러가 발생한다.
그러니까 처음부터 규칙을 잘 준수하는 것이 후에 있을 사용성에 큰 도움이 된다.

8. 뷰는 양방향 데이터 바인딩이 가능하다.

v-model ← 이것을 사용해주면 return에서 작성된 값만 올려버리는 단방향이 아닌
양방향으로 데이터바인딩이 가능해진다. 단! 셀렉트 인풋 같이 사용자가 값을 변경할 수 있는곳에만 사용함

원래는 getElement~~~ 이걸 해야하는데 그렇게 안해줘도 된다.

9. 리액트와 동일하게 return {} 안에 넣어서 써야한다.
키 벨류 키 벨류 형태로 선언해야만 사용이 가능하다.

10. 데이터바인딩은?

문자열을 바인딩할 경우에!

{{}} 콧수염괄호를 이용해서
return 값 안에 키, 벨류로 선언한 것중에 키를 넣어주면 바인딩된다.

11. pakage.json을 수정했을 경우에는
서버를 재시작해야만 반영이된다.
ex) `"space-before-function-paren": "off"`

 

Vue 자주쓰는 템플릿 복붙용

 

<template>

<div>

</div>

</template>

<script>

export default {

components: {},

data() {

return {

sampleData: ''

}

},

setup() {},

created() {},

mounted() {},

unmounted() {},

methods: {}

}

</script>

<style scoped>

</style>

Vue 프로젝트 세팅

 

1. 터미널창오픈
2. cd를 이용할 때 제대로 된 경로인지 더블체크
3. sudo npm install -g @vue.cli 입력 후 엔터
4. vue create 원하는프로젝트명 입력 후 엔터
5. 버전선택 나오면 상황에 맞게 선택 → 지금은 일단 메뉴얼설정
6. 바벨,라우터,뷰엑스,린터 포멧 선택(선택은 스페이스바로 가능)후 엔터
7. 버전선택나오면 3.x 최신버전 선택
8. 히스토리 모드 라우터 y/n나오면 y입력후 엔터
9. ESLint는 스탠다드로 선택
10. save할 때 Lint되도록 선택
11. 모두 pakage.json에 넣기로 선택
12. preset저장할꺼냐 물으면 y
13. 프리셋이름 적으라고 나오면 알아서적기 → 지금은 프로젝트 명 그대로 project로 설정
14. 설정되면 안내에 따라 cd project → npm run serve 입력

Vue 문법

 

 

v-model?

 

 

양방향 데이터 바인딩이 가능하게 해줌 

단! 아무대서나 쓰는 것은 아니고 input 또는 select처럼 사용자가 값을 변경할 수 있는 곳에만 사용함
숫자로 변환할때는 parse~이런거 필요없이 
v-model.number 이렇게 써주면 끝!

넘버를 쓰지않고 그냥쓰면 문자열로 인식해서 산수처리가 안된다

select, input은 양방향 데이터바인딩을 할 때 value값 연결을 통해서 가능한데

checkbox같은 경우는 value값이 아니라 checked를 통해서 선택했다 선택안했다 

그것만을 가지고 연결이 가능한 것이다

그리고 체크박스는 v-model을 사용시 배열로 연결해서만 사용해야한다 필수로!

두가지의 경우가 다른점에 대해 정확히 알고 있어야한다.

또한 radio를 사용할 경우에도 우리가 알고있듯이

라디오는 다중선택을 하는 것이 아니라 단일 선택이 기본이기때문에

[’ ‘ ] 으로 했던 데이터를 : ‘ ‘ 으로 수정해준다 

라디오 역시 체크박스처럼 체크했다 체크하지않았다 2개를 통해서 사용되는 것을 참고하자

 

v-on:click or @click?

 

onClick이랑 동일하다고 생각하면된다.

골뱅이를 붙여서 더 간단하게 사용할 수도 있다.

 

v-bind?

 

v-model에 대해서 계속 알아보고 사용해봤는데 여기서 문제가 있다

만약 readonly속성을 통해서 사용자가 값을 바꿀 수 없고 단순히 읽기전용을 만들었는데

ex)

<input type="text" name="" id="" value="abc" readonly>

위 예시처럼 쓰면 인풋창에 abc가 찍히게 되는데 

아래에서 userId를 넣어두고 인풋창에 넣게되면

<input type="text" name="" id="" v-model="userId" readonly>

이렇게 v-model을 사용하게 되는데 

혹여라도 어떤 사용자가 해당 값을 개발자도구에서 수정해버리면 안된다.

그렇다면 그 값이 바뀌는 것을 막아야하는데 그때 v-model을 쓰면 문제가 발생할 수 있다.

양방향데이터바인딩이 되지 않도록 해야하니까 

그럴때는 v-model을 사용하는 것이 아니라 v-bind를 쓰면 되는데

예시는 아래처럼 쓰면 된다.

v-bind:value

ex)

<input type="text" name="" id="" v-bind:value="userId" readonly>

여기서 알아야하는 것은 위 코드에서 v-bind는 생략이 가능하다.

v-bind: → :  

이렇게만 써줘도 된다.

데이터바인딩은 이미지를 넣을경우에도 사용되는데

동일하게 :src 이런식으로 써주면 된다.

예를들어 하단에서

imgSrc: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1200px-Vue.js_Logo_2.svg.png'

이렇게 지정했다면

상단에 템플릿에서 

<img :src="imgSrc" alt="" style="width: 100px; height: auto;">

이렇게 작성해주면 된다.

class 바인딩 : 

클래스 바인딩은 :class=”{}” 기본적으로 이렇게 작성되는데 

예를 들어 하단에 style 태그에서 

.textred{

 color : red;

}

 라고 지정했다면 

위에서 사용할 경우에는 

<div :class=”{textred: true}”> 클래스 바인딩 </div>

이렇게 넣어주면 된다.

하지만 여기서 주의해야할점이 만약 하단에 스타일을 적용할 때

text-red 이런식으로 - 를 넣어줬다면 

위에서 사용할 때 ‘text-red’ ← 이런식으로 홑따옴표로 감싸줘야한다. 그렇지 않으면 에러가 발생한다.

또한!

원하는 스타일을 미리 만들어놓고 붙여서 쓸수도 있다.

return {

  style1: {

    color: 'green',    fontSize: '30px'

  }

}

이렇게 색상과 폰트 사이즈를 미리 만들어놓고

<div style="color: red; font-size: 30px">스타일 바인딩 글씨는 red, 폰트크기:30px</div>

이렇게 기존의 방식에서 벗어나서

<div :style="style1">스타일 바인딩 글씨는 green, 폰트크기:30px</div>

이런식으로 : 콜론을 이용해서 style1을 넣어서 바로 적용할 수 있다. 

결과는 동일하게 나온다

만약 해당 색상을 빨강에서 파랑으로 돌리고 싶다면 하단에서 바꿔줄 수 있지만

상단에서도 가능하다

<button @click="style1.color='blue'">색상바꾸기</button>

이렇게 버튼으로 구현한다고 했을 때 @click을 사용해서 

클릭 시 style1.color를 가져와서 기존의 빨강속성을 파랑으로 바꿔주면 된다.

또한 preventDefault같은 경우에도 @click.prevent로 간단하게 사용할 수 있다

에러?

quote 에러???

최초 프로젝트 생성 메뉴얼에서  standard config로 생성하면

문자열은 홑따옴표 ‘’ 로 저장해야한다.

쌍따옴표 “” 로 저장하면 바로 에러발생 EsLint 스탠다드와 충돌이 발생해서 그렇다.

진짜 에러라기 보다는 코딩규칙이 맞지 않아서 생기는 에러라고 볼 수 있다.

실질적문제라고 보기는 어렵지만 규칙에러라고 받아들이면 된다.

pakage.json 건들이고 에러가 발생했다

해당 경로로 cd로 프로젝트 들어가서 npm run lint --fix 라고 입력하고 엔터를 쳐주자
그리고 다시 npm run serve해보면 에러가 사라진다.

이유는 아직 모르겠지만 일단 해결했다.

프리티어 설정 코드

{ "semi" : false,  "bracketSpacing": true,  "singleQuote": true,  "useTabs": false,  "trailingComma": "none",  "printWidth": 80}

여러가지 규칙들을 정리해서 한번에 넣는 코드이다.

pakege.json rules 코드

"rules": {  "space-before-function-paren": "off"}

function 파라미터 전에 공백으로 한칸 주는게 기본옵션인데
그걸 쓰지 않겠다고 룰을 변경해주는 코드이다.

webpackPrefetch:true

component: () => import(/* webpackChunkName: "about",webpackPrefetch:true */ '../views/AboutView.vue')

위 해당코드를 index.js에 

이렇게 넣어주면 미래에 사용될 리소스를 브라우저 캐시에 등록을 하게 되고 

prefetch로 변경되며 as를 사용해서 어떤 파일인지 script라는 as script라고 명명되고

캐시에 저장되고 해당 파일을 사용하게 되는 순간 캐시에 저장된 해당 파일을 사용하게 되는 것이다.

캐시에 미리 저장이 되기 때문에 클라이언트가 눌렀을 때 훨씬 빠르게 불러올 수 있다.

해당 방식이 없으면 누르는 즉시 서버에서 받아오게 되는데 

작은 사이즈면 상관이 없는데 큰 파일이라면 느리다고 느낄 수 있다.

그런 상황을 방지하기위해서 해당 코드를 추가해주면 미리 캐싱해서 사용하기 때문에

빠르게 불러와지고 속도면에서도 느리게 느껴지지 않는 것이다.

단! 무조건 프리패치가 좋은 것은 아니다.

사용자가 해당 파일을 안누를수도 있는데

미래에 사용할 가능성이 높은 파일을 프리패치하면 좋은 것이다.

미리 저장했다가 불러오니까

하지만 그렇지 않으면 ? 

사용자가 누르지 않으면 

사용하지도 않을 파일을 미리 브라우저 캐시에  넣게되면

저장하기 위한 시간이 걸리기 때문에 그것 또한 시간이 오래 걸린다.

이것또한 라우터 설계시 고려해야한다.

100개의 메뉴를 모두 프리패치걸면? 아주 비효율적이다.

이 페이지는 무조건 들어간다 싶은 파일들만

잘 설계해서 캐싱해두면 된다.

사이즈가 작은 파일이거나 자주 들어가지 않을 파일이라면

굳이 웹팩 프리패치 트루를 넣을 필요가 없다.