sizzF의 프로그래밍 공부

함수가 만들어졌을때 생성되는 this

this는 함수가 동작하고 있는곳에 오브젝트와 연결됨(어디서 동작중인지에 따라 바뀜)

let getThis = function() {
	console.log(this);
    }
    
let testObject = {
    name: 'seungmin',
	getThis: getThis,
    }
    
getThis();
testObject.getThis();

위와같은걸 묵시적 바인딩

명시적바인딩(this를 어디에 연결할지 정하기)을 하기위해서 call(), apply()를 사용

명시적바인딩이 묵시적바인딩보다 우선순위가 높음

하드바인딩

하드바인딩은 this를 지정한 새로운 함수를 반환해줌

myMethod = myMethod.bind(myObject);

myMethod(); // this === myObject

우선순위 : 하드바인딩 > 명시적바인딩 > 묵시적바인딩

let getThis = function () {
  console.log(this);
};

let obj1 = {
  a: 2
};

let obj2 = {
  a: 3
};

getThis = getThis.bind(obj1); // 2
getThis.call( obj2 ); // 2 명시적 바인딩은 obj2이나, obj1로 하드바인딩 되어있음

화살표함수는 함수를 짧게쓰는 용도로만 사용하는것이 아니다.

화살표함수는 자체 컨텍스트가 없는 짧은 코드를 담는 용도로 만들어짐

자바스크립트에서는 함수를 생성하고 그함수를 어딘가에 전달하는 경우가 많은데

이경우 함수의 컨텍스트를 잃을 수 있는데 이때 화살표 함수를 사용하면 컨텍스트를 유지하는것이 가능.

화살표 함수에는 this가 없다.

자기자신의 this가 없기때문에 외부에서 값을 가져올수있음

 요약

this가 없음

arguments가 없음

new와 함께 호출 불가

클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수

클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수다

클로저는 외부변수를 기억하고 외부변수에 접근할 수 있는 함수를 의미

자바스크립트에서는 모든함수가 자연스럽게 클로저가 된다

자바스크립트의 함수는 숨김프로터티인 [[Enviroment]]를 이용해서 자기가 어디에서 만들어졌는지를 기억한다.

이걸 이용해서 외부의 변수에 접근할수 있다

poiemaweb.com/js-closure

프론트에서는 encodeURIComponent(한글내용)으로 감싸서 전송

백엔드에서는 decodeURIComponent(한글내용)으로 감싸서 전송

서버 : express

로그인 관리, 세션, 쿠키 : passport, passport-local(네이버, 카카오등 여러 로그인 옵션 있음), express-session, cookie-parser

비밀번호 암호화 : bcrypt, scrypt, pbkdf2

서버 접속 예외 : cors

데이터 베이스 : sequelize, mysql2

Vuex는 데이터를 중앙에서 모두 관리

EventBus는 메소드들을 중아에서 모두 관리 (root 컴포넌트에 모든 메소드가 다들어가서 너무 커짐)

data() {
            return {
                tableData: [
                    ['', '', ''],
                    ['', '', ''],
                    ['', '', ''],
                ],
                turn: 'O',
            };

this.turn  = 'X';이렇게 하면 turn에 관한 데이터는 알아서 잘변경 되지만

tableData[0][1] = 'O'; 와 같이 인덱스로 데이터에 접근해서 변경하는 경우는 데이터 변경부분이 적용되지않는다.

배열에 있는 매소드를 사용해 데이터를 바꾸는건 또 적용된다. ex) tableData.push(['', '', '']);

인덱스를 사용해서 배열을 변경하고 화면에도 적용하려면

import Vue from 'vue';

Vue.set(this.tableData[1], 0, 'X'); //tableData[1][0] = 'X';

or
//Vue임포트하기 귀찮으면
this.$set(this.$root.$data.tableData[this.rowIndex], this.cellIndex,this.$root.$data.turn);

이렇게 Vue.set을 사용하여 변경해주면 적용된다.

#나중에 컴포넌트가 많아지다보면 this.$root나 this.$parent.$parent.$parent이런식으로 너무복잡해져서 답이없다 이럴때쓰는게 vuex(대충 데이터 중앙통제실)을 써서 모든데이터를  한곳에서 관리하는 라이브러리를 사용한다고 한다.

가로 가운데정렬

<div style="text-align:center;"></div>

세로 가운데정렬

<style>
.center {
	position: relative;
    top: 50%;
    transform: translateY(-50%);
}
</style>
<div class="center"></div>
    

마진상쇄 예시

첫번째 div에는 margin-bottom 20px, 두번째 div에는 margin-top 20px를 줘서 총 40px의 마진이 생겨야하지만 마진상쇄가 일어나 20px밖에 표시가 안됨

See the Pen yLYvYgN by sizzF (@sizzf) on CodePen.

display: inline-block; width:100%; 로 해결

See the Pen JjYpYGW by sizzF (@sizzf) on CodePen.

tbody.addEventListener('click', function(e){
	console.log('커런트타겟', e.currentTarget); //커런트타겟 <tbody></tbody>
	console.log('타겟', e.target); //타겟 <td></td>
});

e.currentTarget : 실제 이벤트리스너를 단 대상이 표시됨

e.target : 실제로 이벤트리스너가 발생한 부분이 표시됨