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

GrpahQL(gql)은 페이스북에서 만든 쿼리언어.

sql은 데이터 베이스 시스템에 저장된 데이터를 효율적으로 가져오는게 목적

gql은 웹 클라이언트가 서버로 부터 데이터를 효과적으로 가져오는게 목적

그래서

sql은 주로 백엔드에서 작성, 호출하고

gql 클라이언트에서 작성, 호출합니다.

REST API와 차이

REST API는 URL, METHOD조합하기 때문에 다양한 endpoint가 존재,

gql은 하나의 endpoint만 존재

이러한 점때문에 여러번 요청할필요 없이 한번의 네트워크 요청으로 처리가 가능

클라이언트에서 가져오고 싶은 데이터 쿼리로 잘 정리해서 요청하면 그냥 받을수있어! 백엔드에서 쿼리 작성해두고 그럴 필요가없어 좋다

리졸버 (데이터를 가져오는 구체적인 과정) 직접 구현해야함, 데이터 소스에 상관없이 구현가능?

gql의 협업 구조상 프론트엔드쪽에 할일이 조금더 많아지고 힘이실리는 느낌이다.

const fullUser = await db.User.findOne({
                where: { id },
                attributes: ['id', 'nickname'],
                include: [{
                    model: db.TodoList,
                    attributes: ['id', 'startDate', 'finish'],
                }],
                order: [[{ model: db.TodoList },'startDate', 'ASC']],
            });

include먼저 해주고 나서 order써서 정렬하는 모델을 정해준다

리눅스 : sudo -H pip install --upgrade --ignore-installed pip setuptools

파이참 : pip install --upgrade --ignore-installed pip setuptools

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

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

서버 : express

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

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

서버 접속 예외 : cors

데이터 베이스 : sequelize, mysql2

• 2XX: 성공 코드, 200(성공), 201(작성됨)

• 3XX: 리다이렉션(다른 페이지로 이동) 상태 코드. 특정 주소 입력시 다른주소로 넘어갈때 사용, 301(영구 이동), 302(임시 이동)

• 4XX: 요청 오류. 요청에 오류가 있을때 사용. 401(권한 없음), 403(금지됨), 404(찾을 수 없음)

• 5XX: 서버 오류를 나타냅니다. 요청에는 문제없는데 서버에서 오류가 생겼을경우 사용. 500(내부 서버 오류), 502(불량 게이트웨이), 503(서비스를 사용할 수 없음)

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

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