알게된 것* 

 

자식에서 

this.$emit("listJW", 담을내용); // listJW에 this.memo를 담아서, 부모로 보내면, 부모는 @listJW = 함수()//

즉 ,@listJW 자식으로부터 listJW의 내용이 온다면 뒤에 문을 실행한다라는 의미. 

 

 

 

todoList[]에 데이터를 담고,  todoLT라는 이름으로 보낸다는 말이 된다. 

 

(부->자)
부모와 자식 사이는 props(부모-> 자식, 단방향) 와 event(자식-> 부모) 를 통해서 관리

<자식 message="data"><자식>
자식.vue
<script> 
props: ['message']
// 부모는 message ="data"를 통해서 전달, v-bind는 동적.
// 자식 컴포넌트에서 props를 쓴다. 

 

(자->부) 
자식.vue $emit을 통해 부모에게 전달  
부모.vue v-on:을 통해서 전달 받아 사용. !

vuex의 장점은? 

즉, method를 향상 시켜놓은 느낌이네, computed에서는 속서으이 함수와 상관없이 없는 값는 재실행하지 않기 때문이다.
둘의 차이점은 데이터가 변동되지 않는다고 가정했을때에 드러난다.

데이터 변동이 없는 상태에서 computed는 이전의 계산된 값을 캐시해 두었다가 함수 호출시 다시 쓰게 된다.

반면 methods는 사용될 때마다 함수의 계산을 다시 하게 된다.

만약 데이터가 자주 변동되지 않는다면, 비용적인 면에서는 computed가 좋다고 할 수 있고,

데이터가 수시로 업데이트 된다면 계속해서 캐시를 저장하는 computed보다는 methods가 더 좋을 수 있다.

 

v-if dom을 건드리니까 자주 발생하지 않는 것에 유리하다.  methods느낌 

v-show css를 가렸다 보였다하기 때문에 변동이 많은 것을 넣어줌. computed도 캐시에 두고 호출하고 씀, 데이터 값에 변동이 없으면 computed가 효율적. 

 

https://medium.com/@hozacho/%EB%A7%A8%EB%95%85%EC%97%90-vuejs-%EA%B3%84%EC%82%B0%EB%90%9C-%EC%86%8D%EC%84%B1-vuejs-instance-computed-93cb6ad7dca9

 

계산된 속성 computed, computed vs methods / VueJS Instance / [맨땅에 VueJS]

우리는 이전 글을 통해 template에 직접 표현식을 통해 계산된 값을 보여주는 방법 등을 배웠습니다.

medium.com

 

 

(깃 브랜치 , 깃 add, 깃 commit ) 은 로컬에서 일어나는 작업이니, 새로운 브런치라도 git add는 상관없다?

- git init //  (로컬에) .깃을 생성해줌.
- git checkout -b jungwon // 브랜치를 새롭게 만들어준다.
- git branch -d tmp // tmp라는 브랜치를 삭제
- git add . // 모두 더해서 넣어줌.
- git status // 깃 상태 확인
- (jungwon) git commit -m "hi there" -> jungwon Git 용에 올려준다.
- git 로그로 확인한다.
- git push origin jungwon // 정원 원격 브랜치에 데이터 올린다.// 오리진에 jungwon 원격으로 올린다. (나의 이름으로 올려야하네) 
++++ gitlab에서 합치는거 요청 확인해준다.
- git checkout master 로 주체 변경.
- (master) 입장에서 git merge jungwon //최종 합친다.
- git branch -d jungwon // 브랜치 삭제

( jungwon 브랜치에서 ) git pull origin master (당겨온다, 오리진(레파지토리)에서 master의 것을 당겨온다. ) 
( jungwon 브랜치에서 ) git pull origin develop하면 당겨온다, 오리진에서 develop에 올려져있는 것을 당겨온다.
* pull은 git fetch (업데이트) + git merge(병합) 를 한다.

 


즉. git 의 내용에 변경 사항만 추가 혹은 바꿔준다.
* git clone 깃주소는 복제만 해서 가져옴.

//깃 접속
git config --global user.name "kimjungwon"
git config --global user.email "koo_m@naver.com"

//원격으로 삭제 (3가지 방법)
git push origin --delete jungwon // git에서도 jungwon삭제
git remote prune origin
git remote update --prune


[git과 관련된 일화]
브랜치는 업데이트할 것이 있으면 항상 만들어주어야한다.
push 하기전에 늘 pull이 되어있는 상황이어야한다.

이유는? 상대방 것이 업데이트 되어있지 않으면 충돌이 일어나는 문제가 있기 때문에 , 최신의 상태로 

업데이트 해주고 내것을 push해준다. 그렇지 않으면 충돌이 일어난다. 

한 팀원이 pull은 출석 체크 처럼 해주어야한다라고 말하면서 했다. 

하지만, 좀 환경이 익숙해지고 난 뒤에 git master환경에서 승인할 것인지 거절할 것인지 전, 후 비교해보면서 

git이 굉장히 편리한 도구라는 것을 알게 되었다.

 

* 작업공간은 항상 분리해서 해줘야 한다.  

그래서 조심해야하는 것이 내 것이 업데이트할 것이 있는데 , 동기화가 안되어있어서 pull을 하면 내꺼가 다 날아간다.

인성 형님 왈: 

동기화 작업이 필요하다. (pull ) ->
깃 브랜치 어려움

 

 

직접해본 결과

.git에서 config파일에 있었음.

git pull origin master하니까 원격 레퍼지토리( 그냥 저장공간 ) 에서 나의 로컬폴더로 가져온다는 뜻. 

=> push전에 선행되어야하는 작업이다.

 

git status 

git add .

git commit -m "ff" => 변경된 확정파일을 로컬 헤더에 저장. 

로컬의 마스터에서 pull을 당겨받고 최신의 상태에서 branch를 만들어서 변경 사항들을 저장한다. 

-> 그리고 push를 할 때는 git add를 해서 로컬의 저장소를 업데이트 해주고, 

-> git commit -m "변경사항에대한내용" //header에 장착. 

->  

결론 

= 깃 브랜치로 만들고 파일 추가-> 깃 add -> 깃 commit -> 깃 push (로컬원격과 같은 이름)

 

 

궁금한점 추가 

1번, 로컬에 새로운 브랜치 fjf를 만들었다  (jwjw의 것을 pull해왔다라 치자 거기에 있는 거로 했으니까 ) 
2번, 새로운 txt파일을 넣었다. ( 사진첨부 g.txt )++ 내용 업데이트  
3번, git add. git status확인 git commit  후
4번, jwjw (원격)에 쳐넣음.  하지만 안됨.

5번 하지만, git push origin fjf는 됨. 

Vue에 데이터 출력 방법 : Mustache, v-html , v-bind. 

<span>메세지 :{{ msg}}</span> // 템플릿을 컴파일하면서 데이터 값을 바인딩. 

 

v-html( xss의 위험 존재 

<div v-html = "rawHtml"></div> //데이터의 값을 그대로 html형태로 바인딩. 

 

v-bind ( 속성명: id 등 

<div v-bind: 속성명 = "데이터이름:A"></div> // 태그의 속성에 데이터를 바인딩 

// v-bind는 생략이 가능하다. 
// <a v-bind:href ="url> -> <a :href ="url> 

 

 

v-if : dom을 렌더링할지 안할지 여부를 결정. 

<h1 v-if = "??" > Yes  // ??가 true면 출력, 아니면 렌더링하지 않음. 

v-for = " item in items 로 쓴다. 

<button v-on: click =" " >  v-on = @이렇게 써도 된다. 

<input v-on:input = "typing" v-bind: value ="message" > 
만약 인풋의 속성이 타이핑이라면 즉시 message값을 바인딩해준다. 

* v-model은 input, textarea와 같은 태그에 양방향 바인딩.  
-> 걍 데이터 받아온 값 메세지를 바꿔준다.

 

 

module.exports를 vue 인스턴스 객체처럼 설정해줘야한다.  
module.exports= 
{ 
data : function() 
{ 
return { 
} 
} 
}

 

 

vu i 

npm i vue vuex vuetify vue-router // node -module

vue create itda 

.gitignore // 역할 : git에 올릴 때 필요없는건 삭제한다. 

gitignore.io = > visualStduioCode, Node, vue   //  사용자 환경 변수. 

-> gitignore를 통해서 삭제된 거를 다시 받으려면, 해당 폴더에서 npm init -> npm install -> npm run serve

이후 , 기본 셀을 git bash로 설정하면 된다.

 

 

뷰 웹팩은 vue를 html로 변환해줌.

비어있는 html + 완성되어 있는걸 같이 보냄

비어있는 곳에 html로 변환? 

index.html -> 뷰 -> main.js -> app.뷰(최상단)으로? 

 

component, view 영역 - templete, script, style 로 존재.

new Vue

{

el

data 

method

created // 이게 훅? 

}

lifeCycle이 존재함: Hook하여 데이터를 수정하거나 받을 수 있다. 

vue()가 실행되면, beforecreated가 가장 먼저 실행됨.

1. queryselector 및 getter, setter

// 1 
var mailTitle = document.querySelector('#main_title small') 
=> #은 id고 id안에 small 자식 text값을 가져온다. 
console.log(mailTilte); //하면 나온다. 

var ilbuni = document.querySelector('.ilbuni'); 
// .=> class다 , 처음 하나만 가져옴.
var ilbuniAll = document.querySelectorAll('.ilbuni');  
// 다 가져온다.
console.log(ilbuniAll[1]);// 두번째 놈을 가져온다. 
=> querySelector는 getElementByTag 대용으로 쓰인다.!!!!! 

// 2번
<li class ="ilbuni">
<a href = "www.google.com">Google</a>
<a class = "www.google.com">Google</a>
</li>
<script>
//JQuery에서는 어떻게 쓰는지 알아야 한다.=>>> Jquery 는 완전 편하게 for문도 돌 필요없다. 
for( var i =0 ; i< ilbuni.length; i++)
{
	ilbuni[i].style.border = 'lpx solid red' ; 
	//2번 
    var link = document.querySelector( '.ilbuni a'); 
    console.log( link.getAttribute('href'));  //google을 가져옴.  
    //즉, href의 속성을 가져온다. 
    //즉, href = ' ' 부분을 가져온다. 
	console.log( link.getAttribute('class'));  //google을 가져옴. 
    //즉, class의 속성을 가져온다. 
    //즉, class = ' ' 부분을 가져온다.
    
    // setattribute  
    link.setAttribute( 'href' , "www.naver.com") ; 
    구글이었었는데 네이버로 바뀜. 
}
</script>

//getAttribute는 return값이 있다. 
//setAttribute는 return값이 없다. 



getter는 리턴값있다, setter는 없다. 

 

 

classList.add, remove 

.special
{
	background: pink; 
}
.link-google
{
	color: red; 
}

a.className ="b" ; 
a의 className을 b로 바꾼다. 
a.className ="b c" ; 
a의 className을 b 그리고 c를 추가한다. 
or 
link.classList.add('c' , 'd', 'e' ); // 클래스갯수를 추가해서 늘릴 수 있다.  
setTime(function()
{
link.classremove('link-google'); 
}, 2000); 

 

 

var listElem = document.createElement('li'); 
listElem.innerHTML 

innerhtml 기억하기 , 

appencChild 기억하기

 

요즘엔, onload안하고 window.addEventListener(load, function(){ });으로 실행한다. 

클릭이벤트 눌렀을때, 땠을 때 등등 

마우스 이벤트 

키보드 이벤트 

폰이라면 터치 이벤트

로드 이벤트 

리사이즈 이벤트 .

 

동적인 이벤트 들이 있다. 

 

//미친 코드다 외우자. 

<button class ="btn" > 클릭하세요 </button> 
<script> 
var btn = document.querySelector('.btn'); 
var mainTilte = document.querySelector('#main-title'); 

function btnClickHandler() //기능이다. 이를 버튼과 연결해줘야함.
{
	mainTitle.style.background = 'dodgerblue'; //css 직접 조작. 
}
btn.addEventListner('click', btnClickHandler); 
or 
btn.onclick = btnClickHandler ;  

하지만 차이가 있다 . 
함수 여러개 가능하다. addEventLister자체가 메소드기 때문에
btn.addEventListner('click', btnClickHandler); 
btn.addEventListner('click', btnClickHandler1); 
btn.addEventListner('click', btnClickHandler2); 

onclick 3번을 지정할 수 있지만 속성을 3으로 바꿔버린다. 
btn.onclick = btnClickHandler;  
btn.onclick = btnClickHandler1;  
btn.onclick = btnClickHandler2; //이거로 덮어써버리는 결과가 나온다? 

 

 

1시 43분 인강 꼭 다시 듣기. 

 

 

 

 

btn활성화  클릭이벤트가 들어올 때 

일단 queryselector로 다가져온 뒤 , 메뉴 엑티브가 활성화 되어있는 놈이 있다면 비활성화 시키고 클릭하는놈은 활성화 시켜버린다. 

 

다른 방법. 

 

 

두시 10분까지 들었다 // 이벤트 .. !!!!

 

 

'개발 및 언어 > 자바스크립트' 카테고리의 다른 글

JAVA SCRIPT_CS.  (1) 2020.01.11
CSS 기초 지식 함양.  (0) 2020.01.11
09.20_웹프로젝트( JS + JQuery )  (0) 2020.01.11

상속 

root 

 |   |

A   B 

 |   |

C   D

형태라면 ? Root r = new A,B,C,D()가능하다. 

A = new C() 가능 

A = new root() 불가능 // 부모가 자식을 만들 순 있지만 제약이 따름.

C = new A,root() 불가능. //자식이 부모를 만들 순 없음.

 

Animal.java
public class Animal {
    String name;

    public void setName(String name) {
        this.name = name;
    }
}
Dog.java
public class Dog extends Animal {
    public void sleep() {
        System.out.println(this.name+" zzz");
    }

    public static void main(String[] args) {
        Dog dog = new Dog();
        dog.setName("poppy");
        System.out.println(dog.name);
        dog.sleep();
    }
}

https://hyeonstorage.tistory.com/186 이거 무조건 봐라 ( 객체 타입 ) 
부모타입 = 자식객체 ( 오버라이딩해서 메소드 씀) 
즉, 자식 메소드 사용, 부모 변수 사용 

 

IS-A 관계

Dog클래스는 Animal클래스를 상속받았다. 즉, Dog는 Animal의 하위 개념이라고 할 수 있겠다. 이런 경우 Dog는 Animal에 포함되기 때문에 "개는 동물이다"라고 표현할 수 있다.

자바는 이러한 관계를 IS-A 관계라고 표현한다. 즉 "Dog is a Animal" 과 같이 말할 수 있는 관계를 IS-A 관계라고 한다

 

Animal dog = new Dog(); //개(설계도)로 만든 객체는 동물 자료형이다

Dog dog = new Animal();  
// 컴파일 오류: 부모 클래스로 만든 객체는 자식 클래스의 자료형으로 사용할 수 없다.
// 자식 자료형 X = new 부모클래스(); // 부모(설계도)로 자식의 자료형을 만들 수 없다. 
//
Animal dog = new Dog();
// 부모 자료형으로 만든 개는 개의 설계도로 만들었다. 

즉, 부모 자료형으로 dog1을 만들지만, 자식 설계도이다. 그래서 자식만 가지고 있는 sleep을 쓰면 컴파일 에러가 난다. 이때 형변환을 해주면 쓸 수 있다. 

 

 

즉, 부모 타입 A = new 자식 , 부모() 만 가능하다. 

Root r = new 1,2,3,4() 된다. 로 외우자. 

상속의 완전한 이해 완료.. 

하지만, 아직 멤버객체에 대한 이해 필요.

 

 

객체변수(인스턴스 및 클래스 변수)는 오버라이딩 되지 않는가? 네, 객체 타입을 따라갑니다. 

https://kldp.org/comment/512939#comment-512939

재밌는 코드 공유 

 

java 클래스 상속시 멤버 변수를 오버라이드 | KLDP

아래와 같이 3개의 클래스를 만든 후 Main 클래스의 main 함수를 호출하면, 기대한 대로 동작을 하지 않네요. 뭔가 제가 잘못 이해하고 있었는지도 모르지만... 기대값은 this is b인데 결과는 this is a이네요. 그냥 상속을 하더라도 부모 클래스의 메소드이니 해당 클래스의 멤버 변수가 참조된다.. 라고 외워버려도 되긴 하겠지만 정확한 설명을 할 수 있으신 분의 도움을 부탁드립니다. public class A { String a = "thi

kldp.org

인스턴스 변수는 heap에 생긴다. 

일단은 부모의 변수는 오버라이딩 되지않고 부모의 것을 취한다라고 이해했다. 
http://superjang.com/archives/3095 나름 잘 설명했다. 

 

public class jungwon {
   static class A 
   {
      int d = 1; 
      int method() {
         return 3;
      }
   }
   static class B extends A 
   {
      int d = 2;
      int method() {
         return 3;
      }
   }
   static class C extends B 
   {
      int d = 3;
      int method() {
         return 3;
      }
   }   
   public static void main(String[] args) {
      A a = new C(); 
      B b = new C();
      C c = new C();
      System.out.println(a.method() + b.method() + c.method());
      System.out.println(a.d + b.d + c.d);
   }
}

정답은: 9 , 6이다. 
// 변수는 참조타입을 따른다. 

+ Recent posts