[Internship] Training 2일차 : Vue.js

1. Class, Object, Instance ( https://geonlee.tistory.com/11 )
Class : 틀
Object : 추상적. 구현될 만물.
Instance : 실체화 된 것. 

2. 추상클래스와 인터페이스의 차이점
추상클래스 : 클래스내부에 abstract으로 해서 자식에서 알맞게 써라.
Interface : 구현 객체가 같은 동작을 한다는 것을 보장하기 위함.

3. Controller, Service, DAO(mapper), Component 차이

4. ArrayList, LinkedList, Vector 차이 + JAVA Collection Framework
https://hwan1001.tistory.com/10

5. StringBuilder vs StringBuffer 차이
threadsafe냐 아니냐 buffer = safe. builder쓰지마라. 성능차이 거의없다.
string temp = "abc"  , temp+temp+temp 하는데 어마어마한 연산.
https://novemberde.github.io/2017/04/15/String_0.html

 

6. Component 의 구성. 순서 상관없음. 생명주기
Templete : html 태그가 들어감
Script :
Style : 자주 바꿀일 없음. 

 

7. 데이터 바인딩
동적 바인딩 : reloading을 하지 않아도, 숫자 등을 바꿀 수 있다.

---

Vue.js

폴더

public : 한번 실행하면 건들지 않음
src :
dist : webpack을 돌리면 나오는 결과물들의 종착지.
package.json : vue가 이것을 읽어서 라이브러리들을 가져옴
node-modules : nodejs로 동작하는 모든 라이브러리들이 받아지는 곳.
#spa 단점 : crawler에서 검색이 안됨. script로 전부 이뤄져 있기 때문. crawler는 text만 읽음.

 

라이브러리

vuetify : 버튼이나 테이블 등 ui를 만들어주는 라이브러리
router : url에 맵핑해주는 라이브러리
store : vue의 상태를 저장해주는 라이브러리. vuex.
i18n : 다국어 지원 라이브러리

소스파일

main.vue : 서버에서 가장 먼저 읽음
App.vue : 첫 시작에 이녀석을 렌더한다.

소스코드

export : default : 해당 vue를 다른 곳에서 쓰일 때 가장 기본적으로 들어갈 것. JSON 형태. 
구성 : name : 로깅의 편의성. data : 클래스변수들. 익명함수형태로 선언해야함. 컴포넌트도 태그형식으로 사용할 수 있다.
computed : 자동계산할 것들을 넣어준다.
watch : 특정 변수를 계속 감시. 그 변수가 바뀌었을 때! ~하라.
created : 생명주기에서 생성되었을때!
mounted : 생명주기에서 부착 되었을때!
methods : 메소드들.
: : 데이터 바인딩 call by reference로 사용. 변수, 함수 전부 가능
@ : 내 소스 기준 절대경로
name, meta : 변수처럼 사용도 가능. 
history mode off 시 path 추적 불가능.
img : 상대경로로 넣을 수 없다. 상대경로는 : 써서 require 메소드로 사용.
id 사용하지 않고, webpack에서 난독화해서 바꾼다.
props&emit