클래스 생성
set,get 키워드
메서드 앞에 set, get 키워드를 추가하여 변수와 같은 방식으로 사용 가능하게 만들 수 있다.
setXxx() -> setXxx
생성자
클래스이름을 사용하지 않고 constructor 키워드를 사용하여 생성자를 만든다.
자바스크립트 클래스는 생성자가 하나만 존재할 수 있다.
명시적인 생성자가 없으면 기본생성자가 암묵적으로 생성된다.
자바스크립트에서는 생성자의 인자를 전달하지 않아도 문제가 발생하지 않는다.
class Person{
// constructor(){
// console.log("생성자");
// }
constructor(name){
console.log("생성자2");
this.name=name;
}표현방식
아래와 같은 방식으로 클래스 선언이 가능하다.
class Person{}
var Person = class {}
상속과 주의점
3, 4 주의
자식에 생성자를 만들면 자식의 생성자 내에 부모의 생성자를 명시적으로 호출해야한다.
왜냐하면 자바와는 다르게 생성자 내에 super()가 자동으로 삽입되지 않기 때문이다.
<script>
class Pet{
};
class Cat extends Pet{
constructor(gender){
super();
this.gender=gender;
}
};
var cat = new Cat("암컷");
</script>예제 2 - 응용
<script>
class Pet{
constructor(name, age){
this.name =name;
this.age = age;
}
setName(name){
this.nane= name
}
setAge(age){
this.age=age;
}
}
class Cat extends Pet{
constructor (name, age, gender){
super(name,age);
this.gender=gender;
}
}
var c = new Cat("길고양", 999, "암컷");
console.log(`${c.name} ${c.gender}, ${c.age}`);
</script>클래스 상속 함수 사용하기(오버라이딩)
<script>
class Pet{
constructor(name, age){
this.name =name;
this.age = age;
}
info(){
return this.name+"\t"+this.age;
}
}
class Cat extends Pet{
constructor (name, age, sex){
super(name,age);
this.sex=sex;
}
info(){
return super.info()+"\t"+this.sex;
}
}
var c = new Cat("길고양", 999, "암컷");
console.log(c.info());
</script>static 메서드
<script>
//static함수
class Person{
getPerson(){
return "hello";
}
static getXXX(){
return "world";
}
}
console.log(Person.getXXX());
let p = new Person();
console.log(p.getPerson());
</script>모듈 (중요 x 2)
html에서 활용하려면 임포트하는 곳의 script태그의 속성에서 <script typs="module"></script> 필수
a.js :
export 변수, 함수, 클래스, 다른 js에서 사용할 수 있도록 제공
1) 일반 export : 여러개를 export 가능
2) export default : 한 js파일 안에서 한번만 사용 가능. 예를들어 변수를 export default하면 함수에는 불가능
b.js
1) import {export이름, export이름} from a.js - 반드시 {}브레이스로 묶어야함
1-2) 별칭(Alias) 부여가 가능 - import {a as aaa} from xxx
2) import default이름 from a.js
2-2) 별칭 부여 불가능
2-3) 대신 아예 이름을 다르게 받는 것이 가능함. 어차피 파일당 default는 한개니까
vue - 프론트 - javascript파일
Vue.js는 사용자 인터페이스를 구축하기 위한 진보적인 JavaScript 프레임워크입니다. 이는 웹 개발에서의 모델-뷰-뷰모델(MVVM) 패턴을 기반으로 하며, 뷰 레이어에 초점을 맞추고 있습니다. Evan You에 의해 처음 개발되었으며, 그는 AngularJS를 사용하면서 겪었던 문제점들을 해결하기 위해 Vue.js를 만들었습니다. Vue.js는 가볍고, 빠르며, 유연한 프레임워크로서 개발자들 사이에서 높은 인기를 얻고 있습니다.
Vue.js의 주요 특징은 다음과 같습니다:
반응형 시스템: 데이터가 변할 때 자동으로 뷰를 업데이트합니다. 이는 개발자가 상태 관리에 집중할 수 있도록 도와주며, 복잡한 데이터 바인딩과 상태 관리를 단순화합니다.
컴포넌트 기반 구조: Vue.js는 재사용 가능한 컴포넌트를 사용하여 애플리케이션을 구축합니다. 이는 코드의 재사용성을 높이고, 테스트를 용이하게 하며, 대규모 애플리케이션 개발을 보다 체계적으로 할 수 있게 도와줍니다.
가상 DOM: Vue.js는 가상 DOM을 사용하여 실제 DOM에 대한 변경 사항을 효율적으로 계산하고, 필요한 최소한의 DOM 변경만을 수행합니다. 이는 애플리케이션의 성능을 향상시킵니다.
직관적인 API와 설계: Vue.js는 간결하고 이해하기 쉬운 API를 제공합니다. 이는 학습 곡선을 낮추고, 개발자가 빠르게 개발을 시작할 수 있도록 도와줍니다.
다양한 도구 및 지원 라이브러리: Vue.js 생태계는 Vuex(상태 관리), Vue Router(라우팅), Vue CLI(프로젝트 생성 도구) 등 다양한 도구와 라이브러리를 제공하여, 개발 과정을 보다 효율적이고 강력하게 만들어 줍니다.
Vue.js는 단일 페이지 애플리케이션(SPA)에서부터 복잡한 웹 앱, 모바일 앱까지 다양한 프로젝트에 활용될 수 있으며, 작은 프로젝트에서부터 큰 규모의 엔터프라이즈 애플리케이션까지 폭넓게 사용됩니다. 또한, 그 사용의 용이성과 유연성 덕분에 프론트엔드 개발자들 사이에서 매우 인기가 높습니다.
가. 에반 유(Evan You) 가 2017년에 발표.
나. Angular 와 React의 장점만 가진 프레임워크.
dom 접근 방식이 완전히 다름
백엔드와 데이터 통신이 훨씬 편함
vue2 : 23/12월 기준 업데이트 종료 / 하지만 시중의 교재들이 전부 vue2로 되어있음. vue3로 강제로 바뀌는 과정에 있음. / 이걸 배울 예정임.
cli방식 p/g : 프로젝트 단위로 vue파일 작성 js코드 => build => .jsp파일 생성후 html이나 jsp에 포함시켜줘야한다.
cdn방식 p/g : 라이브러리를 html, jsp, thymeleaf 에서 직접 사용 (jquery방식)
vue3 : 똑같이 cli, cdn 방식
cli 배워서 개념을 먼저 잡고 -> cdn 방식 배울 예정(4월중)
지그받은 교재는 vue2, cdn 방식 위주로 진행
기본 세팅
nodejs 설치
cmd
node -v 버전확인
c:에 vue 폴더 생성
vue cli 환경 설치
cmd에서 cd명령어로 해당 폴더까지 이동
cmd 명령어
cd C:\vue
npm install -g @vue/cli
vue 프로젝트 생성
vue 폴더에 들어간 상태에서 명령어 실행
vue create [프로젝트명]
vue create vue_stu
2버전으로 방향키 바꿔서 설치
프로젝트 실행 확인
visual stuio 사용
cd vue_stu
npm run serve
사용 중 포트 피해서 자동으로 포트 사용해줌
접속확인 : http://localhost:8081/
cmd에서 서버 강제로 죽이는 방법 : ctrl+c
프로젝트 기본 세팅
vscode에서 파일->폴더->vue 위치까지 잡아주기
메뉴->터미널->새터미널
터미널에서 npm run serve 그냥 안됨
powershell 옆에 작은 아래 화살표에서 command prompt 누르면 cmd창이 뜸
여기서 npm run serve 이용
안되면 cmd나 vscode 등 재시작
에러가 있다면 서버가 실행되지 않음
프로젝트 구성
src 폴더 가장 중요
src - App.vue에서
src - components - HelloWorld.vue를 사용
http://localhost:8081/ 에 들어가면
...
프로젝트 백업 및 새롭게 생성
프로젝트 생성이 시간이 오래걸리기 때문에 아래와 같은 방식으로 꼼수를 사용
src 복사
src_copy -> src_template
vscode가 멈추면 껐다가 재실행
플러그인 설치
자동완성 플러그인 등
HelloWorld에서 다 지우고 꺾쇠 입력 자동완성하면 vue with default 어쩌고 자동완성 사용.
vetur
vue 3 Snippets
Prettier - Code formatter
프로젝트 세팅2
HelloWorld.vue
template 부분 - 삭제
script 부분
style 부분 - 삭제
App.vue
이미지태그 삭제
해당 src를 원본, 수업용1,2로 저장
이렇게 src 템플랫을 교체하면서 새로운 프로젝트를 만드는 효과를 얻을 것임.
src를 폴더를 직접 찾아가서 백업하면 프로젝트 백업과 같은 효과를 낼 수 있음.
파일생성시 카멜표기법 지키기 (앞대문자중간대문자)
template에는 div 하나 필수임
기본 프로젝트 시작
.vue : 컴포넌트
기능 하나 = 컴포넌트
App.vue에서 전부 사용
기본적인 형식
부모 css가 자식 컴포넌트에 영향을 줌
<template>
<div>
<!-- 3. 자식 컴포넌트 사용 -->
<HelloWorld/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'; //1. import
export default {
name: 'App',
components:{ //2. 임포트 후 컴포넌트 사용 등록
HelloWorld
}
}
</script>
<style>
</style>template = html구간, 에서 script 변수를 쓰기 위해서는 아래와 같은 방식으로 등록해야한다.
export{
data:function(){
return {
변수명:변수값
}
}
}예시
<template>
<div>
<HelloWorld/>
<!-- 부모 컴포넌트의 로컬값 : {{x}}, {{y}} -->
{{ [x, y] }}<br>
{{ z[0] }} <br>
{{ k.aa }} <br>
{{ p.getUsername }} <br>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue';
import {Person} from './components/Person.js';
export default {
name:"App",
components:{
HelloWorld
},
// 로컬 상태를 저장하는 data옵션은 반드시 함수로 지정한다. (arrow함수도 가능)
// template에서 {{}}를 이용해서 사용할 수 있다. (머스테치?)
data:function(){
return {
x:"홍길동",
y:"100",
z:[10,20,30],
k:{aa:"hong", bb:30},
p: new Person("aaa", 20) //components/Person.js import
};
}
}
</script>
<style>
</style>컴포넌트
컴포넌트 이름은 단어의 첫글자가 대문자여야하고
최소 2개의 단어가 합쳐진 형태여야한다.
하지만 2개 단어 제약을 해지하는 방법이 있다.
vue.config에 ,lintOnSave:false를 추가하면 2단어 제약이 해지된다.
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false // 컴포넌트 이름의 멀티워드 제약 해지
})
// 노드 최신버전에서는 해장 제약사항이 없음중첩 컴포넌트
부모-자식간 데이터를 전달할 수 있다.
방식 :
1. 부모-> 자식 : 속성를 통해
2. 자식-> 부모 : 이벤트를 통해
1. 부모에서 자식으로 속성을 이용해 데이터 전달
- 태그에 용하지 않는 속성명을 이용하여 값읗 전달
2-1. 자식에서 props로 받음
2-2. key: value (속성명 : 데이터타입) 형식으로 받음 - {{ key }} 방식으로 사용
v-bind
숫자, boolean, 객체 등은 v-bind:속성명을 사용하여 전달한다
자식에서 props로 받을 때 명시하는 데이터타입 :
String, Number, array, object
<!-- 숫자, boolean, 객체 등은 v-bind:속성명을 사용하여 전달한다 -->
<HelloWorld
msg="홍길동"
v-bind:test="10"
/><template>
<div>
HelloWorld msg : {{ msg }}<br>
Helloworld test : {{ test+1 }} <br>
</div>
</template>
<script>
export default {
props:{
msg:String,
test: Number
}
}
</script>