오늘 한 일
- 알고리즘 2문제 풀기
- 자바스크립트 공부(this 공부 함)
- 노드 공부(MVC패턴, 인증, 유효성 검사)
생각
배울 것도 많고 배우고 싶은 것도 많다. 그러다 보니 너무 빨리만 배우려고 하고 Why?에 대해 많은 생각을 안하는것 같다. 조급해 하지 않도록 마인드 컨트롤 하고 기본을 다지고 왜?를 생각하면서 새로운 걸 배우자.
오늘의 노드
MVC 패턴
Model View Controller 어플리케이션 아키텍쳐 디자인 패턴이다.
서버에서는 view부분을 라우터가 역할을 하고 데이터, 로직(controller)이 있다.
각각 분리해서 작성하면 유지보수하기 좋다. 왜? 데이터 부분을 수정해야 하면 데이터 부분에 가서 수정하고 로직을 수정해야한다면 로직 부분에 가서 수정하면 된다. 모듈화 해서 하기때문에 재사용성을 높일 수 있다. 라우터에서만 사용하는게 아니라 로직에 있는 함수를 다른 곳에서도 사용가능하다.
컨트롤러에는 데이터를 받아와서 어떻게 처리할 건지 로직이 들어있다.
데이터는 데이터에 관련된게 들어있다.
서로의 책임에 따라 분리를 해준다.
기존에 router폴더에서 다 작성했는데 router, model, controller 이렇게 분리해줬다. 처음에는 나누는게 불편했는데 막상 나누고 보니 각각의 역할을 알 수 있었고 규모가 커질수록 관리하기 편할꺼 같다는 생각이 들었다.
Validation
시간과 비용을 아끼기 위해 저장을 하기 전에 유효성 검사
sanitization을 하면서 데이터를 일관성있게 저장할 수 있다.
express-validation을 이용
Authentication
HTTP는 stateless이므로 상태를 보관하고 있지 않은데 서버에서 어떻게 authentication이 일어나는 걸까?
쿠키와 세션
사용자의 세션을 서버에서 보관하고 있는 방법
세션과 쿠키 방식이 좋은 이유
세션이라는 데이터베이스에 모든 세션에 대한 정보를 보관하고 있으므로 신뢰할 수 있는 데이터가 있다. 그리고 쿠키를 사용하기 때문에 서버에서 보낼 때고 쉽고 클라이언트에서 별도로 처리를 하지 않아도 브라우저에서 해줄 수 있으므로 간단하게 구현가능
또한 HTTP Only 옵션을 사용하는 경우 안전하게 보안성을 높여 사용할 수 있다.
사용자에게 사용자에 대한 정보를 보내는것이 아니라 세션아이디를 보내므로 보안성이 있다.
세션의 단점
세션을 보관하는 서버가 있으므로 고객이 요청 할 때마다 내부적으로 네트워크 요청을 해야한다. 그리고 분산형으로 서버를 늘린다 해도 세션을 보관하는 서버가 하나라면 그 한 곳에 다시 요청해야하므로 세션 때문에 성능이 안좋아질 수 있다.
JWT장점
서버에 state(상태)가 없다. 서버를 확장하거나 마이크로 서비스를 이용하거나 분산형 시스템으로 만들어도 서로 네트워크 처리를 하지 않아도 시크릿키만 가지고 있으면 사용자를 인증할 수 있다.
JWT단점
서버와 클라이언트간에 계속 끊임 없이 중요한 jwt를 주고 받는다는 것이다. 보안상 위험이 될 수 있다.
JWT
토큰을 발행 할 때 payload에 너무 많은 정보가 들어가면 네트워크 데이터를 많이 소비하기 때문에 정말 필요한 데이터만 넣는게 중요하다.
bcrypt
패스워드를 hashing할 수 있는 알고리즘
단방향이다. 암호를 hash만 가능하고 hash된 결과를 다시 패스워드로 변환할 수는 없다.
오늘의 자바스크립트
this
자바스크립트, 타입스크립트에서 this 바인딩은 런타임 시 동적으로 결정된다.
this는 어디에서 쓰이냐에 따라 다르게 정의 된다.
전역에서 사용될 경우 노드의 경우 모듈을 가리키고 브라우저에서는 window 전역 객체를 가리킨다.
함수 내에서 쓰일 때는 엄격모드(use strict)일 경우 this는 undefinded이다. 엄격모드가 아닐 경우는 globalThis이다.
생성자 함수 또는 클래스에서의 this는 앞으로 생성될 인스턴스 그 자체를 가리킨다.
자바스크립트에서 this는 누가 호출하냐에 따라 동적으로 결정된다. 자바의 경우 한 번 결정된 this가 바뀌지 않지만 자바스크립트에서는 호출 될때 결정이 된다. 쉽게 예를 들어보자
function Cat(name) {
this.name = name;
this.printName = function () {
console.log(`고양이의 이름을 출력한다옹: ${this.name}`);
};
}
function Dog(name) {
this.name = name;
this.printName = function () {
console.log(`강아지의 이름을 출력한다멍: ${this.name}`);
};
}
const cat = new Cat('냐옹');
const dog = new Dog('멍멍');
cat.printName();
dog.printName();
dog.printName = cat.printName;
dog.printName(); // 위에서 cat.printName을 할당했지만 this.name에서 this는 dog을 가리킨다. 누가 호출하냐에 따라 결정
function printOnMonitor(printName) {
console.log('모니터를 준비하고!, 전달된 콜백을 실행!');
printName();
}
printOnMonitor(cat.printName); //cat.printName함수의 참조값을 전달, printName()에서 호출되는데 객체가 없다.
// object.printName()이 아니라 printName()이다. 그렇기 때문에 undefined가 출력된다.
// 근데 cat.printName이 인수로 전달되는데 왜 cat.printName()이 아니고 그대로 printName()일까? 앞의 객체는 전달이 되지 않나보다.callback
콜백 함수는 다른 함수의 매겨변수로 전달되는 함수이다.
쉽게 콜백함수를 만들수 있는데 아래와 같이 쉽게 만들 수 있다.
비동기적으로 처리되는 혹은 이벤트가 발생했을 때 바로 다음 함수가 실행되길 원할 때 콜백함수를 쓸 수 있다.
만약 1을 출력하고 2를 출력하고 싶은데 1을 출력하는게 비동기적으로 데이터를 받아오는 등의 일이라면 콜백함수를 쓰지 않으면 2가 바로 출력안될 수 있다. 그렇기 때문에 콜백함수를 써서 해당 함수가 끝이나면 바로 call~~back해서 호출할 수 있다.
function first(callback){
console.log(1)
callback();
}
first(second);
function second(){
console.log(2)
}