1만시간의법칙

v-model

v-model을 사용하면 양방향 데이터 바인딩이 가능함

v-model에 data key 값을 연결

<div>   
<input type="text" v-model="userId"/>   
</div>

 data(){       
  return{            userId:'value'       
 };   
}

v-model.number -> text 숫자로 변환 parse int 할 필요없음

이벤트 연결

1. 자바스크립트 onclick 방식이 아닌 @click 이용

<div>   
<button @click="myFunction"> click </button>   
<button @click="changeData"> change </button>
</div>

2. 함수 연결

함수 호출 시, 전달할 파라미터가 없는 경우 (); 생략 가능

스크립트 단에서 methods에 함수 정의

method

 methods:
{         myFunction (){       
console.log(this.userId)   
}

object 내 특정 key 값 연결 시 this. 사용

string 데이터 바인딩

component 폴더 : 단위 ui , 재사용 가능한 component

views 폴더 : 페이지 단위, 화면 전체

tag 분리되어 관리 가능

templete :

html 태그 사용

전체를 묶어주는 최상위 태그를 사용해야한다

script : js

style scoped : css (해당 컴포넌트에서만 적용)

설정 후 data 함수 선언

문자열 데이터 바인딩

script 함수 내 key, value 값 설정

templete에 {{ key 값 }} 으로 바인딩

html 데이터 바인딩

div-vhtml ="key value" 로 바인딩

div 태그 내에 innerhtml로 데이터가 들어가게 됨

router /index.js 에 데이터 바인딩

vue 파일 추가 시, router에 연결해주어야함

webpackchunkname 이 동일할 경우 동일한 js 파일이 된다

File > Preferences > User Snippets

탐색창에 vue 를 입력하여, vue(Vue) 를 선택

아래 내용 복붙

"Generate Basic Vue Code":{ "prefix":"vue-start", "body": [ "<template>\n<div></div>\n</template>\n<script>\n\nexport default{ \n\tname:'',\n\tcomponents:{},\n\tdata(){\n\t\treturn{\n\t\t\tsampleData:''\n\t\t};\n\t},\n\tsetup(){},\n\tcreated(){},\n\tmounted(){},\n\tunmounted(){},\n\tmethods:{}\n}\n</script>" ], "description": "Generate Basic Vue Code" }

vue-start 입력시 아래와 같은 화면

git clone

$ git clone [원격 저장소 주소]

git commit

git commit -m "커밋 메시지"

git push

git push 원격저장소명 브랜치명

새로운 브랜치 [브랜치명]을 생성 , 조회, 체크아웃

$ git branch [브랜치명]
$ git branch
$ git checkout [브랜치명]

참고

https://gorokke.tistory.com/22

router 란

클라이언트의 요청 경로에 따라 해당하는 컴포넌트를 불러와 페이지를 구성할 수 있다.
URL 변경 시 DOM을 새로 갱신하는 것이 아니라 미리 컴포넌트를 가지고 있다가 변경된 요소영역만 갱신한다.
따라서 유연하게 페이지 젼환이 가능하다. vue 프레임워크에서는 vue-router라는 라우팅 라이브러리를 지원한다.

name 중복 불가

component : 어떤 component로 연결할 지에대한 값

router에 component 연결하는 방법은 두 가지가 있음 

인스턴스 방식으로 생성

app.js로 무조건 들어오는 경우, main page , 사이즈가 큰 경우

import HomeView from '../views/HomeView.vue'Vue.use(VueRouter)

const routes = [  {    path: '/',    name: 'home',    component: HomeView  }

매서드를 이용해 생성 

미리 받아오면 좋은 페이지 or 사이즈가 작은 경우

{   path: '/about',   
name: 'about',    
component: () => import (/* webpackChunkName: "about" */ '../views/AboutView.vue')  }

 webpackChunkName: "about"  -> 설정해준 값으로 js 파일이 만들어짐

** prettier 확장 설치 시 아래 옵션 추가하기 (eslint와 다른 설정 수정)

package.json 과 동일 선상에

.prettierrc 파일 생성 

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

package.json 에 rules 추가

"rules": {"space-before-function-paren":"off"} //들여쓰기 디폴트 해제

prepatch 기능

webpackPrefetch:true 로 설정

미래에 필요하게 될 데이터의 요청/응답 시간을 단축 시키기 위해 서버로 부터 cache로 미리 데이터를 받아 놓는 기능

client로 내리는 건 아니지만 cache에 저장

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

npm create project 시 project 폴더 생성

main.js : npm run serve 시 실행되는 파일

인스턴스를 생성하고 index.html 파일과 연결해준다.  router, store를 사용하기 위한 Vue 함수를 넣어줌

App.vue : 화면구성

App.vue 파일은 하나의 컴포넌트이고, 여기에 여러 컴포넌트들을 불러와서 main.js로 넘겨주는 통합 컴포넌트

router-link to 라는 tag 사용  클릭 시 broswer url이 바뀜

>>url 변화는 router-view가 교체되는 것 =  index.js component로 연결되는 것 

router

화면이 이동되는 것 처럼 보일 수 있게 설정해주는 것

router/index.js > router-link to에서 연결한 path 라는 key가 존재

>> App.vue에서 Home을 클릭 -> router에서 설정한 path, name = home 에 맞는 component 값 = views/Homeview.vue  을 찾아서 보여줌

package.json : 프로젝트 정보, 실행 명령어, 운영을 위한 설치 정보

vue 셋팅 후 npm ryn serve 첫 실행 시 아래 오류가 떴다

PS C:\Project\test> npm run serve
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Project\test\package.json'  
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

 알고보니 경로가 package.json이 있는 경로의 상위 폴더 였음

-> 경로 재설정 후 npm run serve하니 정상 실행됨

1. Node js 설치

https://nodejs.org/ko/

terminal에서 설치 확인하기

node -v

2. npm 설치

npm install -g @vue/cli

-npm이란 Node Packaged Manager의 약자로 위에서 설치한 Node.js에서 사용할 수 있는 package(module)들이 모여있는 저장소

-설치 및 관리를 할 수 있는 기능을 제공

terminal에서 설치 확인하기

npm -v

설치 오류 시,

$ sudo npm install -g  @vue/cli --unsafe-perm=true--allow-root

3. 프로젝트 폴더 생성하기

vue create 폴더이름

1) vue 프로젝트 생성 옵션 -> 버전 선택 or manually 설정

2)버전선택

3)router history mode -.> Y

4) ESLinit + Standard config (코딩 컨벤션 규칙 선택)

.........

설정 옵션 전체

4. 실행하기

npm run serve

정상 실행 되었을 경우,

8080 port에서 아래 화면이 실행됨

권한 설정 오류 시 아래 명령어

Set-ExecutionPolicy Unrestricted -scope CurrentUser

*터미널 명령어

ctrl + c  터미널 끄기

clear 터미널 화면 지우기cd .. 부모폴더로 이동

테이블 설계의 이론적인 순서는 아래와 같다

요구 분석 -> 개념적 설계 -> 논리적 설계 -> 물리적 설계 -> 구현

1. 요구분석

- 실제  어떤 시스템을 구축할 것인지 요구사항 수집, 요구사항에 대해 어떤 데이터들이 필요한지 분석

2. 개념적 설계

- 목표 DBMS에 맞는 스키마 설계, 트랜잭션 인터페이스 설계

-  엔티티와 관계정도만 표현

3. 논리적 설계

- 관계 모델(Relation model)을 통해 개념적 설계를 논리적으로 표현 

- ER-다이어그램에서 엔티티를 테이블로 구체화

-이 단계에서 정규화를 거치게됨

4. 물리적 설계

- 목표 DBMS에 맞는 물리적 구조의 데이터로 변환

-BMS에 DDL로 CREATE문을 던지기만 하면 될 정도로 설계

-트랜잭션 실제로 작성

5. 구현

- 데이터베이스 스키마를 실제 파일로 생성하는 단계

- 앞서 다 설계된 데이터베이스를 SQL문으로 만들어서 DBMS에 던지는 것

@@ROWCOUNT

쿼리 실행문 실행 후 영향을 받은 로우의 수를 반환

별도 초기화하지 않으면 계속 유지

select, update, delete등 쿼리에서 사용 가능

예제

UPDATE #TEMP1 SET 가격 = 3000 WHERE 제품 = '티셔츠' SELECT

@@ROWCOUNT -- 결과 : 2

조건 맞는 2개 행만 영향을 받음

> rowcount 개수 따라 조건 설정

IF @@ROWCOUNT = 0 BEGIN INSERT INTO 테이블명 (유저명, 방문수) VALUES (@UserName, 1) END

> 지정 된 수 반환하면 쿼리 중지 

SET ROWCOUNT { number | @number_var }

SET ROWCOUNT 4; SELECT * FROM Production.ProductInventory WHERE Quantity < 300; GO --

(4 row(s) affected)

참고

https://learn.microsoft.com/ko-kr/sql/t-sql/statements/set-rowcount-transact-sql?view=sql-server-ver16