TIL_211217_Frontend

 

오늘은 vue.js를 시작했다.

기억하고 싶은 내용은 *로 구분했다.

 

 

vue.js 설치

vue.js의 버전은 안정화된 2.x로 했다.

3.x까지 나오긴 했는데 호환성에서 아직 부족하다.

새로 프로그램이 나온다고 무조건 좋은 게 아니고 다른 사람들이 검증한 뒤 탑승해도 늦지 않다!

 

node랑 npm은 버전을 따로 확인하는 게 좋다. npm은 node를 설치하면 같이 설치된다.

이건 이미 예전에 깔아놨다.(nvm 이용 : 버전이 자주 업뎃되는 node.js의 버전을 변경하면서 개발 가능하기 때문)

 nvm 설치부터 한다.

Releases · coreybutler/nvm-windows

nvm 설치 사이트에서 nvm-setup.zip파일을 선택해 압축 해제 후 setup.exe 파일을 찾아 설치한다.

nodejs의 버전을 먼저 확인한 후 설치한다.(나는 14.18.1로 깔았다)

> nvm install 14.18.1 64(설치할 버전을 64비트용으로 하겠다)

 

설치 되면 nvm을 통해 설치된 nodejs 버전을 선택한다.

> nvm use 14.18.1

 

nvm을 통해 설치된 node js의 버전을 확인한다.

> nvm list

   * 14.18.1 (Currently using 64-bit executable)

 

기본 명령프롬포트 대신 conemu를 사용했다.

vue의 개발 환경을 설정해주는 도구인 vue-cli부터 설치했다.

먼저 설치할 폴더로 cd로 이동한 뒤

npm install -g @vue/cli

쳐주면 설치 된다.

*-g : 전역 설치 옵션(모든 프로젝트에서 사용 가능)

 

그리고 vue 프로젝트를 생성했다.

프로젝트명은 vuestudy로 통일했다.

vue create vuestudy

치고 설치 옵션을 선택 해준다.

* ESLint: 개발자들마다 다르게 짠 코드를 정형화 시켜주는 기능

* 모를 땐 그냥 엔터치며 설치 된다. 선택 옵션이 궁금할 땐 구글링(하지만 처음엔 설명 봐도 뭐가 좋은 지 모를 수 있음 주의)

설치 끝

 

 

서비스 실행

프로젝트 디렉토리(vuestudy)로 이동한다

cd vuestudy

 

VS code 실행한다.

code .

* code(vsc) .(현재 위치에서 실행)

 

서비스를 실행한다.

npm run serve

* package.json 파일의 scripts 확인하면 serve 명령어 확인 가능

  (= npm run으로 package.json의 scripts에 들어가서 serve를 실행했다고 보면 된다) => package.json의 중요성!

* 서비스 종료는 ctrl+c

localhost:8080으로 가면 환영해준다(포트 번호는 설치 후 꼭 확인할 것)

 

 

코드 빌드

vue 파일을 html과 javascript 코드로 변환해야 nginx에서 서비스가 가능하다.

npm run biuld

다음과 같이 /dist 폴더에 js 파일들이 생성 된다.

* 생성된 dist폴더의 파일만으로 Nginx에서 서비스 할 수 있다. (*.vue파일 사용하지 않음)

 

 

VS Code 환경 설정

Extensions 설치

Vetur : vue파일의 코드 색 처리

ESLint : ESLint 처리

Vue VSCode Snippets : vue에 대한 snippet을 지원(VSCode에서는 나만의 Snippet을 만들어 사용 가능)

 

ESLint + Prettier 설정

(개발자마다 다 다르고 다른 형태의 적용 방법이 많으나 한가지에 적응하면 다른 방법도 가능)

* 인터넷에서 찾아보고 자신에게 맞는, 팀에게 맞는 설정을 써야한다.

* SingleQuote : '(작은 따옴표) 사용 여부

* printWidth : 한줄에 몇 바이트(팀이랑 맞춰야한다 안맞추면 코드 깨진다)

* bracketSpacing : 괄호 여백 여부

* arrowParens : 화살표 함수에서 (a) => {} 괄호() 사용 여부

* no-unused-vars에 대해서 warn으로 설정하지 않으면 사용하지 않는 변수에 대한 에러를 발생시키기 떄문에 코딩을 진행하기 어렵다

 

VS Code의 환경 설정(settings.json)

* Prefernces - Text Editor - edit insettings.json (setting.json 파일 생성 됨)

환경설정 파일(setting.json)을 다음과 같이 설정한다.(이 파일로 모든 설정을 다 할 수 있다)

{
  "eslint.validate": [
    "vue", "javascript", "html" //vue, javascript, html에서 ESLint를쓰겠다
  ],
  "eslint.alwaysShowStatus": true, //상태를 항상 보겠다
  "editor.codeActionsOnSave": { 
    "source.fixAll.eslint": true //저장할때마다 ESLint 동작하게 하겠다
  },
}

 

 

Vue 실습

테스트 페이지 만들기

1. 파일 생성

Vue VSCode Snippets를 설치한 경우 vbase만으로 기본 코드 구조가 자동으로 생성 된다.

이렇게 생성 완료

* vbase 많이 쓴다

* 코드 설명

<template></template> : 모습 view

<script></script> : 로직(코딩하는 부분)

<style lang="scss"(CSS 적용) scoped(여기서만 적용하겠다 지우면 전역됨)></style> : 스타일

 

2. 라우터 연결

URL을 통해 해당 페이지를 서비스 하기 위해서는 라우터에서 웹주소와 페이지를 연결해야한다.

/src/router/index.js <=여기서

const routes = [ 이 부분에 다음 내용 추가(test 경로 맵핑)

  {
    path: '/test', //라우터 호출
    //name: 'test' //(name은 편의상 사용하지 않는다)
    component: () => import('../views/Test.vue')
  }

* 인터넷 킬 때마다 개발자모드+Console 필수!

 

3. 링크 작성

<router-link to="/">Home</router-link>

* to 대신 name을 쓸 수도 있다(index.js에서 작성한 코드)
to => path
name => name(우린 위에서 name을 안썼기 때문에 to를 써야한다)

* SPA : 싱글 페이지 애플리케이션
* anker 태그는 전체 페이지를 리로드하기 때문에 vue에서 사용하지 않는다.

 

vue의 life-cyle-hooks

beforeCreated -> create(최초 빈 거 / 데이터 가져오기) -> beforeMount -> monted(그림) -> beforeUpdate -> updated -> beforeDestroy -> destroyed

 

Data binding

vue에서는 별도의 노력 없이 데이터를 실시간으로 바인딩 할 수 있다.

<input v-model="title"/>

v-model 사용, input에 입력되는 값이 title이라는 변수에 바인딩되게 하겠다.

<template>

  <div>

    <h1>binding test {{ title }}</h1> //변수명 title 동일

    <div>

      <input v-model="title" /> //title 동일

    </div>

  </div>

</template>

<script>

export default {

  data() {

    return {

      title: '' //title 동일

    }

  }

}

</script>

 

* 새로운 파일 작성은 src-view 폴더에!

 

 

event, method

이벤트를 발생시켜 method에서 처리할 수 있다.

* 변수를 늘 먼저 만들어야한다!(methods에 먼저 쳐라)

* methods에서는 this.age를 사용하여 위에 return { age: 20 }와 동일한 변수로 인식하게 한다.

* v-click = @click (이런 형태의 함수는 모두 vue에서 만든 함수)

* 내가 만든 함수랑 vue에서 제공하는거랑 구분해야 한다.

* 만들 땐 틀부터 만들고 작업하는 게 좋다.(보면서 할 수 있으니까)

* 문서명에 우클-split up or down 써서 똑같은 파일을 위아래 나눠서 보면 편하다

* 함수 호출할 때 ()를 안써도 된다!

 

camelCase/kebab-case/snake_case/PascalCase

대표

vue.js : camelCase

url : kebab-case

db , Python: snake_case

객체 : PascalCase

섞어쓰는 건 지양해야함

 

 

method vs computed

method와 computed에겐 차이가 있다.

동작 시점, 리턴 값 필요유무 등...

method는 함수를 호출했을 때 수동으로 동작하고

computed는 페이지가 로딩될 때 자동으로 동작한다.

computed는 return 값이 반드시 필요하다(실시간으로 return 값 변경을 감지해서 자동 return을 시켜준다).
언제 쓰냐?: 나중에 하다보면 알게 되겠지만 일단 무조건 method에 넣고 method로 해결이 불가능하면 그때 computed에 넣으면 된다.

(ex. 로그인 하기 전 리스트에 없다가 로그인한 후 -> 재로딩 되어서 데이터가 늦게 들어오는데 갱신되어야 할 때)

 

 

v-if, v-show

if문과 show문을 사용하면 특정 조건일 때 해당 노드를 제어할 수 있다.

v-if : 권한이 없는 경우 소스코드를 보여주지 마라

v-show : 둘다 보여줘도 상관 없는데 하나씩 왔다갔다 보여주고 싶을 때(보여줘라, 보여주지 마라 두가지밖에 없음)

언제 쓰냐?: 일단 if가 기본이고 show가 낫다 싶을 때 show

* error = !error

  => if (error === false) {

         error === true

         } else if (error === true) {

         error === false

         }

error : 에러 상태가 아닙니다만 보임 / sucess : 성공, 성공 상태가 아닙니다 둘다 보임

* if문에서 null이 들어가면 false로 처리될 수 있으니 조심해야한다.

  boolean에 null이 어디 해당되는지 확인해야한다. null 처리 별도로 필요하면 해줘야 한다(if (active === nul))

 

 

v-for

for 문을 이용해 반복 처리 가능

fruits의 낱개 : fruit(이름 맘대로 해도 됨)

* 변수 설정할 때 목록이면 users, list 등 복수형으로 써야한다. 그래야 for일 때 앞에 낱개에 변수명 지정할 때 편하다.

* key 값은 페이지 전체에 중복이 있으면 안된다. 따라서 앞에 썼던 낱개의 변수명에 인덱스(0, 1, 2...)를 붙여서 중복 없도록 하는 게 좋다.

 

 

mixin

전역 변수나 전역 메소드 같은 효과를 줄 수 있다.

* import 할때 @/경로 와 같이 @를 사용하면 현재 서버의 절대 경로를 사용하게 된다.(@ = root 역할)

 

 

Bootstrap-vue

부트스트랩에서 vue용으로 만들었다.

부트스트랩이란 트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 css와 javascript로 만들어서 사용하기 쉽도록 제공하는 라이브러리다.(부트스트랩을 이용한 상용 디자인 프레임워크도 많이 있다.)

비슷한 기능을 제공하는 vuetify도 있는데 모양 제어가 안된다.

둘 중 하나 쓸 줄 알면 둘 다 쓸 수 있다.

 

* 설치할 때 bootstrap이랑 bootstrap-vue랑 같이 설치되는데 둘의 버전이 안맞으면 작동이 안되니 주의해야 한다.

npm install bootstrap@4.5.3 bootstrap-vue@2.21.2 --save

* --save는 예전엔 이걸 안치면 package.json에 기록이 안됐었다. 그러나 npm 버전이 올라가면서 이젠 무조건 기록 되므로 안써도 상관 없다.

 

부트스트랩 컴포넌트

다양한 컴포넌트들이 존재한다.

참고 : https://bootstrap-vue.org/docs/components/layout#layout-and-grid-system

열심히 문서를 뒤져보자

 

 

 

 

---

느낀 점

오타/port/path 등 기본적으로 체크할 게 많다.

교정/교열할 때 생각나기도 하고...낯섦 속에 익숙함이 있다.

특히 } ) , 이것들 정말 놓치기가 쉬운 것 같다. 지금 에러나면 99퍼는 얘네다...

마우스 움직임 감지 이벤트(@mousemove)는 만들고 싶은 것 중 하나를 만드는 데 쓸 수 있을 것 같다!

배울수록 확실히 백엔드랑 느낌이 좀 다르다...왜 분리된건지 조금은 알 것 같다.