user 로그인 상태를 관리하기 위해 안전한 방법으로 Server에서 Client에게 쿠키로 sessionID를 발급해주고 이 쿠키를 통해 Server에 접속하면 sessionID값을 활용해 어떤 Client인지 식별하고 관련 정보를 제공하는 방법을 사용한다. 관련 기능을 쉽게 사용할 수 있게 해주는 express-session 모듈을 사용해 보자.
express-session을 미들웨어로 등록한다. sessionID를 발급할 때 username이나 password같은 정보만으로 만들어 발급한다면 외부에서 이 정보를 알아낼 가능성이 있다. 이는 심각한 보안사고이다. 그래서 추가적으로 secret키를 sessionID 생성에 참고해서 이 sessionID를 역으로 해석해서 원래 정보를 알아내기 힘들도록 한다.
이렇게 등록을 하면 Server에 접속했을 때
와 같은 sessionid가 발급된다.
2. Login
로그인을 구현하기 위해서 Client에서 ID와 Password가 Server에 오면 이를 user database에 있는 user정보와 비교해서 제대로 된 유저인지 확인한다. 만약 제대로 된 user라면 sessionId를 발급해주면 된다.
데이터베이스를 외부에(AWS나 NCP, 혹은 다른 PC나 가상환경 등등) 두고 그 곳에 접속하는 환경을 만들 때 고려해야 할 것들을 정리했다.
고려해야할 4가지 그림
1. 접속 가능 포트 설정
먼저 외부 서비스에 접속하기 위해서 Mysql로 접속하기 위한 포트를 포트포워딩 해주어야 한다. NCP에서는 ACG 규칙에 추가해주는 것으로 설정이 가능하다.
2. Mysql에 접속 가능한 IP주소
Mysql에 접속가능한 IP주소는 default로 localhost로 지정되어 있다. 이를 수정하기위해 다음과 같은 경로에 있는 파일을 열어서 bind-address를 localhost에서 0.0.0.0(전역) 으로 수정해주거나 접근가능하게 하고싶은 IP주소를 입력해서 외부에서 접속 가능하게 할 수 있다.
/etc/mysql/mysql.conf.d/mysqld.cnf
위 사진 맨 아래의 bind-address의 값이 초기에 127.0.0.1로 되어있다. 이 것을 원하는대로 바꾸면 된다.
3. user에 접속가능한 IP주소 설정
위 그림을 예로 들면 userA에 접근가능한 IP주소는 127.0.0.1인데 2.2.2.2인 IP에서 접근을 시도해서 user에 로그인 할 수 없다. 로그인 하고싶은 IP에 접속 가능하도록 추가해준다.
CREATE USER ‘userA’@’%’ IDENTIFIED BY ‘user_password’;
4. 접근 가능한 database인지 확인
user가 접근하고자 하는 database의 접근권한이 없으면 접근할 수 없다. 아래와 같은 명령어를 통해 접근 권한을 부여하자.
grant all privileges on 'DB 이름'.'Table 이름' to ‘root’@‘%’ identified by ‘root의 패스워드’
node.js의 웹 프레임워크인 Express를 Express답게 쓰기 위해 조사했다. Express Reference에서는 Express generator를 사용해서 빠르게 앱 스켈레톤을 구성할 수 있게 해준다. 위의 사진은 Express generator를 통해 생성한 스켈레톤 앱의 구조이다.
npm install -g express-generator
명령어를 통해 설치한 후
express —view=pug myapp (pug는 템플릿 엔진. ejs를 사용할 수도 있다)
를 통해 스켈레톤 앱을 생성한다.
빌드
빌드는 npm start 명령어를 통해 빌드한다. package.json파일의 "script"키 값으로 "start" 명령시 빌드 명령어가 앱 생성과정에서 함께 들어가있다.
var o = {
m: function() {
var self = this;
console.log(this === o); // true
f();
function f() {
console.log(this === o); // false
console.log(self === o);
}
}
}
o["m"]();
Output :
생성자 호출
new keyword -> 생성자 호출
인자가 없으면 두 문장은 완전히 같은 것.
var o = new Object();
var o = new Object;
생성자 함수는 보통 return 사용하지 않음. 함수의 마지막에서 객체를 반환, 혹은 return만 명시 되어있으면 거기서 객체 반환 기본 자료형 값(primitive value)을 반환하면 무시되고 새로생성된 객체가 호출 표현식 값.
간접 호출
call() -> 자신에게 주어진 전달인자를 호출할 함수의 전달인자로 사용 apply() -> 값 배열을 전달인자로 사용.
두 메서드 모두 호출 때 this 값을 명시적으로 지정 가능. -> 어떤 함수든지 특정 객체의 메서드로 호출할 수 있다는 의미
함수 전달인자와 매개변수
Javascript는 함수 매개변수타입, 전달인자 개수, 전달하는 인자의 타입 모두 검사하지 않음. 이를 프로그래머가 관리하는 방법들.
생략 가능한 매개변수
본래 정의된 것 보다 적으면 -> 나머지는 undefined 이렇게 두지 말고 생략된 매개변수에는 기본값을 주는 코드를 쓰자.
function getPropertyNames(o, /*optional*/ a) {
if(a == undefined) a = [];
//or a = a || []
// || -> 첫번째가 true나 true로 반환되는 값이면 그 값 return, 그렇지 않으면 뒤에 것 return
for(var property in o) {
a.push(property);
}
return a;
}
가변길이 전달인자 목록 : Arguments객체
본래 정의된 것 보다 많을 때.
function f(x, y, z) {
if(arguments.length != 3) {
throw new Error("인자개수가 3이 아닙니다.")
}
}
이렇게 해도 좋지만 javascript의 기본동작인
빠진 인자는 undefined
추가된 인자는 무시 로도 잘 동작하게 구현 가능.
argument 객체를 직접 수정시
function g(x) {
console.log(x);
arguments[0] = null;
console.log(x);
}
엄격모드가 아니면 값 변경, 엄격모드 시 값 변경되지 않음.
callee와 caller 속성
엄격모드에서는 사용 못함. callee -> 프로퍼티가 현재 실행되고 있는 함수를 참조, 이름없는 함수를 재귀적으로 호출하는데 유용 caller -> 비표준. 이 함수를 호출한 함수를 참조. 호출 스택에 접근할 수 있도록 해줌.
객체의 프로퍼티를 전달인자로 사용하기
easycopy({from : a, to : b, length : 4});
값으로서의 함수
function square(x) {return x * x};
var s = square;
square(4);
s(4);
var o = {square: function(x) {return x * x}};
var y = o.square(16);
var a = [function(x) {return x*x; }, 20];
a[0](a[1]);
자신만의 함수 프로퍼티 정의하기
C 에서의 static 지역변수 역할
uniqueInteger.counter = 0;
function uniqueInteger() {
return uniqueInteger.counter++;
}
함수 이름을 배열처럼 다룸
function factorial(n) {
if(isFinite(n) && n>0 && n == Math.round(n)) {
if(!(n in factorial)) {
factorial[n] = n * factorial(n - 1);
}
return factorial[n];
}
else return NaN;
}
factorial[1] = 1;
네임스페이스로서의 함수
javascript 는 단위 block 내에 유효한 변수를 정의하는 방법을 제공하지 않음. 간단한 임시 네임스페이스 처럼 작동하는 함수를 정의하는 기법 사용.
function mymodule() {
// 모듈의 지역변수로 사용해서 전역을 어지럽히지 않음
}
mymodule(); // 함수 실행 필수
// 하나의 프로퍼티 선언도 과하다면
(function() {
// 모듈 코드가 위치
}()) // 바로 호출하고 끝냄. function앞 뒤 괄호는 반드시 필요 -> 표현식임을 알림
클로저
함수 객체, 함수의 변수가 해석되는 유효범위(변수 바인딩의 집합) 을 아울러 클로저라고 함 모든 자바스크립트 함수는 클로저. -> 함수는 객체이고 함수 자신과 관련된 유효범위 체인을 가지고 있기 때문.
클로저는 자신을 정의한 바깥쪽 함수에 바인딩된 지역변수를 포착한다.
var scope = "global";
function checkscope() {
var scope = "local";
function f() {return scope;};
return f;
}
checkscope()() // local 출력
EX) Counter
내부변수는 private. 오직 count와 reset을 통해서만 제어가능
function counter() {
var n = 0;
return {
count: function() {return n++;},
reset: function() { n = 0; }
}
}
var c = counter(), d = counter();
console.log("c : ", c.count());
console.log("d : ",d.count());
c.reset()
console.log("c : ",c.count());
console.log("d : ",d.count());
Output:
Function 생성자
동적으로 자바스크립트 함수를 생성하고 실행 시간에 컴파일 되는 것을 가능하게 한다.
이걸로 생성하는 함수는 언제나 최상위 레벨 함수로, lexical scoping을 사용하지 않는다.
var f = new function("x", "y", "return x*y);
// 마지막 인자는 함수의 몸체 텍스트
var empty = [];
var primes = [2,3,5,7,11];
var misc = [ 1.1, true, "a" ];
// 임의의 표현식도 사용 가능
var base = 1024;
var table = [base, base+1, base+2, base+3];
var count = [1,,3]; // 가운데 값은 undefined
var undefs = [,,]; // 원소는 2개 (마지막원소에 , 가능)
Array 생성자
var a = new Array();
var aa = new Array(10); // length
var aaa = new Array(5,4,3,2,1, "testing, testing"); // 인자값이 배열의 원소
console.log(aaa)
배열에 속한 원소의 위치가 연속적이지 않은 배열 원소가 undefined가 아니라 아예 없는 것
arr = new Array(5); // 원소는 없지만 a.length의 값은 5
arr2 = [] // length값이 0인 빈 배열
arr3[1000] = 1; // 하나의 원소 할당, 길이는 1000
배열의 길이
배열의 length Property : 배열의 원소 개수, 배열의 가장 큰 인덱스+1
length 값 변경 :
a = [1,2,3,4,5];
a.length = 3; // 결과가 1,2,3이 된다.
a.length = 0; // 결과 []
a.length = 5; // new Array(5)와 같은 결과
length Property 읽기전용으로 만들기 :
a = [1,2,3];
Object.defineProperty(a, "length", {writeable: false});
a.length = 0; // 값 바꿔도 배열은 변하지 않음
배열 원소 추가 제거
a = [];
a[0] = "zero";
a.push("one");
a.push("two", "three");
console.log(a.length);
delete a[1];
console.log(1 in a); // false -> 지워졌다.
console.log(a.length);
Output :
배열 순회하기
var o = new Array(7,5,3,2);
var keys = Object.keys(o);
var values = [];
for(var i = 0; i < keys.length; i++) {
var key = keys[i];
values[i] = o[key];
}
console.log(o);
console.log(keys);
console.log(values);
for(var i = 0, len = keys.length; i < len; ++i) {
// 성능향상 위해 length를 한번만 불러오기
}
Output :
루프 돌릴 때 고려해야 할 점
원소가 null / undefined 일 때 어떻게 처리할 지
상속받은 Property 등의 고유 Property 가 아닌 값들을 어떻게 처리할 지
for in loop에서 원소 반환 순서
정해져있지 않음.
순서가 중요한 알고리즘에서는 for문을 통해 명시적으로 사용할 것을 권장
다차원 배열
var table = new Array(10);
for(var i = 0; i < table.length; ++i) {
table[i] = new Array(10);
}
for(var i = 0; i < table.length; ++i) {
for(var j = 0; j < table[i].length; ++j) {
table[i][j] = i*j;
}
}
console.log(table[5][7]);
Output :
배열 메서드
join()
* 배열의 모든 원소를 문자열로 변환, 변환한 문자를 이어붙인 결과를 return
* seperator를 지정하지않으면 , 가 기본 separator
* String.split() -> join의 반대. 문자열을 배열로
var a = [1, 2, 3];
console.log(a.join());
console.log(a.join(' '));
console.log(a.join(''));
Output :
reverse()
배열의 원소 순서를 반대로 뒤집어 반환.
배열안에서 직접 수행되어 배열 정렬순서 변환됨.
var b = [1,2,3];
b.reverse();
console.log(b);
Output :
sort()
정렬
undefined는 배열의 끝부분으로
정렬 조건도 바꿀 수 있음
var c = [1,2,3,4];
c.sort();
console.log(c);
c.sort(function(a,b) {
return b - a;
})
console.log(c);
Output :
concat()
concat의 전달인자를 추가한 배열 반환
var d = [1,2,3];
console.log(d.concat(4,5));
console.log(d.concat([4,5]));
console.log(d.concat([4,5], [6,7]));
console.log(d.concat([4, [5,6]]));
Output :
slice()
subarray 반환
-1은 마지막 원소
음수는 뒤에서부터 세는 것
var e = [1,2,3,4,5];
console.log(e.slice(0,3));
console.log(e.slice(3));
console.log(e.slice(1,-1));
console.log(e.slice(-3,-2));
temp.newProperty : 식별자가 와야 함 -> 코딩할 때 fix됨. temp.["new Property"] : 표현식을 인자로 받음 -> 프로그램 실행중 입력받은 것 사용 가능
function addName(nameList, name, studentNumber) {
nameList["name"] = studentNumber
}
// 이런 코드가 동작 한다는 뜻!
상속
객체에서 Property를 찾을 때, 고유 Property안에 찾고자 하는 Property가 없으면, 상속받은 Prototype 객체에서 해당 Property를 찾는다.
function inherit(p) {
if (p == null) throw TypeError();
if (Object.create) // ECMAScript 5 이상에 정의되어 있음
return Object.create(p);
}
var o = {};
o.x = 1;
var p = inherit(o); // 객체 o와 Object.prototype를 상속받는 객체
p.y = 2;
var q = inherit(p); // 객체 p와 o, Object.prototype을 상속받는 객체.
q.z = 3;
var s = q.toString(); // q 는 Object.prototype을 상속받았기 때문에 toString 사용가능
var result = q.x + q.y; // 값은 3
console.log(result);
Output :
상속받은 Prototype Property를 바꾸고 싶을 때
상속받은 Property 가 read only 라면 수정 불가. 그렇지 않다면 두 가지 경우의 수
고유 Property로 재정의 된다. // 기본
Prototype Property 의 값이 재설정된다. // setter method가 정의되어있을 경우
Property 접근 에러
존재하지 않는 Property에 접근하는 경우
에러 발생하지 않음. -> undefined return
존재하지 않는 객체의 Property에 접근하는 경우
에러 발생
var temp2 = o.a;
console.log(temp2) // undefined
var length = o.a.length; // undefined에서 Property를 찾으려 해서 error
Output :
에러 방지
var len = temp2 && temp2.a && temp2.length
객체 o에 Property p를 설정할 수 없는 경우
p가 o의 고유 Property이고 readonly일 경우
읽기전용 Property p 에는 값 설정할 수 없다.
p가 상속된 Property 이고 readonly일 경우
동일한 이름의 고유 Property로 감출 수 없음.
p가 고유 Property도, 상속받은 Property도 아닌데 extensible 속성이 false일 경우.
프로퍼티 삭제하기
delete 연산자. Property의 값이 아니라 Property 자체를 지움
delete book.author;
delete book["main title"];
delete 연산자는
고유 프로퍼티만 지울 수 있다.
삭제에 성공, 프로퍼티가 존재하지 않아 영향을 미치지 못한 경우, return true를 한다.
o = {x:1}
delete o.x; // 삭제 성공 return true
delete o.x; // 존재하지 않아 return true
delete o.toString; // 고유프로퍼티가 아니라 아무일도 안일어나고 true
delete 1; // 말도 안 되지만 return true
* configurable 속성이 false 인 프로퍼티는 지우지 않는다.
아래는 nonreconfigurable
delete Object.prototype; // 지울 수 없음
var x = 1;
delete this.x; // 지울 수 없음
function f() {}
delete this.f; // 지울 수 없음
var oo = {x : 1};
console.log("x" in oo);
console.log("y" in oo);
console.log("toString" in oo);
console.log(oo.hasOwnProperty("x"));
console.log(oo.hasOwnProperty("y"));
console.log(oo.hasOwnProperty("toString"));
var ooo = inherit({y : 2});
ooo.x = 1;
console.log(ooo.propertyIsEnumerable("x")); // 고유 프로퍼티 열거 가능 -> true
console.log(ooo.propertyIsEnumerable("y")); // 상속받은 프로퍼티 -> false
console.log(ooo.propertyIsEnumerable("toString")); // 내장프로퍼티, 열거불가능 -> false
Output:
!== 와 === 연산자
undefined 와 null 을 구분할 수 있음.
프로퍼티 열거하기
for / in loop
var o = {x:1, y:2, z:3};
for(p in o) {
console.log(p, o[p]);
}
Output :
상속받은 Property 생략, method 생략
for(p in o) {
if(!o.hasOwnProperty(p))
continue;
}
for(p in o) {
if(typeof o[p] === "function")
continue;
}
프로퍼티 Getter / Setter
ECMAScript 5 에서는 Property의 값을 getter / setter method로 대체할 수 있음. 단순히 값을 값는 "Data Property" 와 다른 "Accessor Property" 라고 한다.
프로그램이 객체의 Accessor Property에 접근하면 getter method의 반환 값이 Property 접근 표현식의 값이 됨.
프로그램이 객체의 Accessor Property의 값을 바꾸려고 하면 getter method가 실행된다. = 오른쪽의 값이 method의 인자로 전달된다.
getter / setter 존재 유무로 읽기전용, 쓰기전용 결정. 특이한 것 : setter 만 있으면 쓰기전용. read 하려고 하면 있음에도 undefined return
Accessor Property의 정의
var oo = {
// Data Property
data_prop: value,
get accessor_prop() { /* 함수 몸체 */},
set accessor_prop(value) { /* 함수 몸체 */ }
}
Example : 2차원 좌표와 극좌표를 가지는 Property
var p = {
x: 1.0,
y: 1.0,
get r() {
return Math.sqrt(this.x*this.x + this.y*this.y);
},
set r(newValue) {
console.log("in setter : ", newValue);
var oldValue = Math.sqrt(this.x*this.x + this.y*this.y);
var ratio = newValue / oldValue;
this.x *= ratio;
this.y *= ratio;
console.log("now x : ", this.x);
console.log("now y : ", this.y);
},
get theta() {
return Math.atan2(this.y, this.x);
}
}
var q = inherit(p);
q.x = 1; q.y = 1;
console.log(q.r);
console.log(q.theta);
q.r = 777
console.log(q.r);
console.log(q.theta);
Output
Example : 일련번호 생성
var serialnum = {
$n: 0, // 프로퍼티 이름의 $는 private 프로퍼티라는 힌트
get next() {return this.$n++;},
set next(n) {
if(n>=this.$n) this.$n++;
else throw "serial number can only be set to a larger value";
}
}
Property 속성
이름, 값, 그리고 속성
value
데이터 프로퍼티의 값도 속성으로 본다.
writeable
값 변경 가능 여부
enumerable
열거가능 여부
configurable
3가지 속성 변경 가능한지.
Property의 3가지 속성 값을 질의하고 설정할 수 있도록 하는 ECMAScript 5 API
라이브러리 만들 때 중요
프로토타입 객체에 method 추가 , 추가된 method를 내장 method처럼 열거할 수 없게 만들기 위해
변경, 삭제 불가한 프로퍼티를 정의, 객체를 고정(lock down) 시키기 위해
접근자 Property의 속성 표현 위해 Property descriptor라는 객체 사용.
데이터 Property의 Property descriptor
value, writeable, enumerable, configurable 등의 Property를 가짐
접근자 Property의 Property descriptor
get, set, enumerable, configurable
객체의 특정 Property에 대한 Property descriptor객체 -> Object.getOwnPropertyDescriptor() 를 통해 얻을 수 있음.
console.log(Object.getOwnPropertyDescriptor({x:1}, "x"));
// 없는 Property거나 상속받은 Property 는 undefined
console.log(Object.getOwnPropertyDescriptor({}, "x"));
console.log(Object.getOwnPropertyDescriptor({}, "toString"));
Output
getOwnPropertyDescriptor 는 고유 프로퍼티만 검사 가능. 상속된 프로퍼티를 검사하고 싶으면 프로토타입 chain을 명시적으로 순회해야함.
var empty = {};
var point = {x:0, y:0};
var point2 = {x: point.x, y:point.y + 1}
var book = {
"main title" : "Javascript", // 공백도 가능
"for" : "all audiences"
}
console.log("empty : ", empty);
console.log("point : ", point);
console.log("point2 : ", point2);
2. new 키워드
var o = {};
var o2 = new Object();
// o 와 o2는 같다.
var a = new Array();
var d = new Date();
var r = new RegExp("js") // 패턴매칭을 위한 RegExp 객체
3. prototype
Javascript 의 모든 객체는 또 다른 Javascript의 객체와 연관되어 있음. 이 두 번째 객체 : Prototype 객체는 Prototype으로부터 Property를 상속받는다.
객체 리터럴로 생성된 모든 객체는 Prototype 객체가 같다.
Object.prototype으로 접근 가능
new Array()는 Array.prototype을 객체의 프로토 타입으로 사용하는 식
Object prototype : 프로토타입이 없음.
다른 객체들은 보통 prototype이 다 있음.
Array.prototype은 Object.prototype을 상속받음.
위와 같은 걸 Prototype chain이라고 한다 .
4. Object.create()
create()
첫 번째 인자 : 프로토타입 객체
두 번째 인자 : 새 객체의 프로퍼티 정보 생략가능
var o1 = Object.create({x:1, y:2});
console.log(o1);
var o2 = Object.create(null);
console.log(o2);
var o3 = Object.create(Object.prototype)
console.log(o3);
o1 :
o2 : -> 어떠한 객체도 상속받지 않는다.
o3 : -> Object객체는 상속받고 싶을 때
inherit 함수 구현
상속 받도록 구현하지 않고 객체 자체를 인자로 넣어 Property를 추가하려 한다면, 기존에 있는 수정되어서는 안되는 Property를 수정하게 되는 실수를 할 수 있다.
Prototype을 이용한 상속으로 원하는 Property를 추가하면서도 그 실수를 방지하기 위해 inherit function을 구현해 사용한다.
function inherit(p) {
if (p == null) throw TypeError();
if (Object.create) // ECMAScript 5 이상에 정의되어 있음
return Object.create(p);
// Object.create 가 정의되어있지 않으면
var t = typeof p;
if (t !== "object" && t !== "function") {
throw TypeError();
}
function f() {};
f.prototype = p;
return new f();
}
