2022-07-13


SSL

SSL( Secure Sockets Layer ) 프로토콜로 Nescape에 의해서 SSL이 발명되었고, 지금은 TLS라는 이름으로 바뀌었다. 그러나 TLS보다 SSL이라는 이름이 훨씬 더 많이 사용되고 있다.

 

SSL DIgital Certification

SSL 인증서는 Client와 Server간의 통신을 제3자가 보증해주는 전자화된 문서이다. Client가 Server에 접속한 직후에 서버는 클라이언트에게 이 인증서를 전달한다. Client는 Server로 부터 전달받은 인증서가 신뢰할 수 있는 인증서인지를 검증한다.

 

SSL Digital Certification을 통해서

1. Client와 Server간의 통신내용을 공격자가 엿듣는 것을 방지할 수 있다.

2. Client가 접속하고자 하는 Server가 신뢰할 수 있는 Server인지 판단할 수 있다.

3. 공격자의 악의적인 통신내용 변경을 방지할 수 있다.

 

SSL Certification Structure

아래는 Node.js 공식 홈페이지의 인증서를 X509 module을 사용해서 정보를 추출한 것이다.

X509Certificate {
  subject: 'CN=*.nodejs.org',
  subjectAltName: 'DNS:*.nodejs.org, DNS:nodejs.org',
  issuer: 'C=GB\n' +
    'ST=Greater Manchester\n' +
    'L=Salford\n' +
    'O=Sectigo Limited\n' +
    'CN=Sectigo RSA Domain Validation Secure Server CA',
  infoAccess: 'CA Issuers - URI:http://crt.sectigo.com/SectigoRSADomainValidationSecureServerCA.crt\n' +
    'OCSP - URI:http://ocsp.sectigo.com\n',
  validFrom: 'Jan 11 00:00:00 2022 GMT',
  validTo: 'Feb 11 23:59:59 2023 GMT',
  fingerprint: '3E:CB:75:F0:77:06:6A:8C:A0:4A:9F:01:6E:EC:1B:0F:98:95:8F:63',
  fingerprint256: '9D:33:45:9A:91:1A:B5:2F:D5:11:01:5F:5E:29:4B:D6:1D:C2:37:5B:4F:46:20:7C:E8:62:D0:30:50:D6:73:5E',
  fingerprint512: '7C:D0:4C:83:B8:D9:B1:7B:1B:74:83:13:D3:F1:98:92:07:EE:7B:79:E8:94:71:83:4D:7D:A3:F8:8C:E1:B4:30:47:47:84:27:AF:4F:9B:4C:41:CA:7A:8F:2B:25:BF:FB:82:94:69:88:CF:90:75:31:BF:CC:92:40:30:B4:79:E1',
  keyUsage: [ '1.3.6.1.5.5.7.3.1', '1.3.6.1.5.5.7.3.2' ],
  serialNumber: '5F6C6A819EFF2783C1DC54DD3502E901'
}
  • subject : 소유자 
    • CN ( CommonName ) : 이름
  • subjectAltName(SAN) 
    • DNS 
    • IP
    • Email
  • issuer : 발행자 
    • ST : StateOrProvinceName
    • L : Locality
    • OU : OrganizationUnit : 부서
    • O : Organization : 회사, 조직
    • C : Country : 나라
    • CN : Common Name : 이름
  • validFrom : 인증서 발행일
  • validTo : 인증서 만료일
  • fingerprint == signature 

 


2022-07-27

2022-07-28일 Demo 시연과 내용 발표를 준비하다가 블로그에 SSL 인증서 내용을 작성했던게 생각나서 PPT자료에 넣은 것을 추가하게 되었따.

728x90

Array.prototype.at(index);

Array.prototype.at(index); method는 parameter로 반환받고 싶은 element의 index값을 넘겨주며, parameter로 음수와 정수 모두 사용가능하며 음수인 경우 배열의 뒤에서부터 indexing한다.

const array = ["apple", "banana", "lemon"];

console.log(array.at(0)); // "apple"
console.log(array[0]); // "apple"

console.log(array.at(-1)); // "lemon"
console.log(array[array.length -1]); // "lemon"

 

Array.prototype.concat(elements);

Array.prototype.concat(elements); method는 기존 배열에 인자로 들어온 요소나 배열을 합하여 새로운 배열을 반환하는 메서드이다.

- 기존 배열을 변경하지 않는다.

- 인자가 추가된 새로운 배열을 반환한다.

const array = ["apple", "samsung"];
const array2 = ["LG"];

console.log(array.concat(array2)); // [ "apple", "samsung", "LG" ]
console.log(array); // ["apple", "samsung"]

const array3 = array.concat(array2);
console.log(array3); // ["apple", "samsung", "LG"]

 

Array.prototype.copyWithin(target, start [,end]);

Array.prototype.copyWithin(target, start [,end]); method는 배열의 일부를 얕게 복사한 뒤, 동일한 배열의 다른 위치에 덮은 후 해당 배열을 반환한다. 이때 배열의 길이는 변경되지 않는다.

const array = ['a','b','c','d','e','f'];
const array2 = ['a','b','c','d','e','f','g'];
array.copyWithin(2,5); // ['a','b','f','d','e','f']
array2.copyWithin(1,2,5); // ['a','c','d','e','e','f','g']

console.log(array); // ['a','b','f','d','e','f']
console.log(array2); // ['a','c','d','e','e','f','g']

 

Array.prototype.entries()

Array.prototype.entries(); method는 배열의 각 인덱스에 대한 키/값 쌍을 가지는 새로운 Array Iterator 객체를 반환한다.

const array = ["apple", "lemon", "orange", "strawberry"];
const iterator = array.entries();

console.log(iterator.next().value)); // [0, "apple"] => Array
console.log(iterator.next().value)); // [1, "lemon"] => Array
console.log(iterator.next().value)); // [2, "orange"] => Array
console.log(iterator.next().value)); // [3, "strawberry"] => Array
console.log(iterator.next().value)); // undefined

 

Array.prototype.every(function)

Array.prototype.every(function) method는 배열의 모든 요소가 주어진 판별함수를 통과하는지 테스트하는 메서드로, 반환값은 boolean이다.

const isTenOver = (element) => element > 10;
const array = [11,12,14,20];

array.every(isTenOver); // true

 

Array.prototype.fill(value [, start [ , end] ] );

Array.prototype.fill() method는 배열의 시작부터 끝 이전까지 정적인 값 하나로 모두 채우는 메서드이다.

* parameter

- value : 배열을 채울 값

- start : 시작 인덱스 기본값 0

- end : 끝 인덱스 기본값 array.length

const array = [1,2,3,4,5];

array.fill(5);
console.log(array); // [5,5,5,5,5]

array.fill('a',2,4); // [5,5,'a','a',5]

 

Array.prototype.filter( callback(element [ , index [ , array ] ] ) [ , thisArg ]);

Array.prototype.filter() 메서드는 매개변수로 주어진 callback 함수의 테스트를 통과한 요소들만 모아 새로운 배열을 반환한다. 

- callback : true 를 반환하면 요소를 유지 false를 반환하면 요소를 버린다. 

- element : 현재 처리할 요소

- index : 현재 처리할 요소의 인덱스

- array : filter를 호출한 배열

- thisArg : callback을 실행할 때 this로 사용하는 값

const number = [1,2,3,"4",5,6];
const newNumber = number.filter( (element) => typeof element === "number" );

console.log(newNumber); // [1,2,3,5,6]

 

Array.prototype.find( callback [ , thisArg ] )

Array.prototype.find() 메서드는 주어진 판별함수를 만족하는 첫 번째 요소의 값을 반환한다. 해당하는 요소가 없다면 undefined를 반환한다.

const array = ["a",3,4,"b"];
const found = array.find((element) => typeof element === "number");

console.log(found); // 3

const fruits = [
	{ name : "banana", quantity : 3 },
    { name : "apple", quantity : 5 },
    { name : "lemon", quantity : 2 }
];

function findApple(fruit){
	return fruit.name === "apple";
}

const Apple = fruits.find(findApple);
console.log(Apple); // {name: 'apple', quantity: 5}

 

Array.prototype.findIndex( callback(element [ , index [ , array ] ]) [ , thisArg ] );

Array.prototype.findIndex() 메서드는 주어진 판별함수를 만족하는 첫 번째 요소의 인덱스를 반환한다. 배열의 첫 번째 요소가 존재하지 않는다면 -1을 반환한다.

const fruits = [
	{ name : "banana", quantity : 3 },
    { name : "apple", quantity : 5 },
    { name : "lemon", quantity : 2 }
];

function findApple(fruit){
	return fruit.name === "apple";
}

function findCherry(fruit){
	return fruit.name === "cherry";
}

const Apple = fruits.findIndex(findApple);
console.log(Apple); // 1

const Cherry = fruits.findIndex(findCherry);
console.log(Cherry); // -1

 

Array.prototype.forEach(callback(currentValue [ , index [ , array ]] ) [ , thisArg ] );

Array.prototype.forEach(); method는 주어진 함수를 배열 요소 각각에 대해 실행한다.

const array = ["apple", "banana", "lemon", "cherry"];
array.forEach( fruit => console.log(fruit) );
// "apple"
// "banana"
// "lemon"
// "cherry"

 

Array.prototype.includes(valueToFind [, fromIndex ]);

Array.prototype.includes(); method는 배열이 특정 요소를 포함하고 있는지를 판별한다. 반환값은 boolean이다.

- valueToFind : 찾고자하는 요소

- fromIndex : 검색을 시작할 위치 

const array = ["apple", "banana", "lemon"];
array.includes("apple"); // true
array.includes("cherry"); // false
array.includes("apple",0); // true
array.includes("apple",2); // false
array.includes("lemon",1); // true

 

Array.prototype.indexOf(searchElement [, fromIndex])

Array.prototype.indexOf(element, [fromIndex]); 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번재 인덱스를 반환하고 존재하지 않으면 -1을 반환한다.

const array = [ "a", "b", "c", "d", "e" ];
console.log( array.indexOf("e") ); // 4
console.log( array.indexOf("f") ); // -1
console.log( array.indexOf("a",2) ); // -1

 

Array.isArray(obj);

Array.isArray() 메서드는 메서드의 인자가 Array인지 아닌지를 판별한다. 반환값은 Boolean이다.

const array = [1,2,3];

Array.isArray(array); // true
Array.isArray(3); // false

[ + ] 계속 추가할 예정

Array.prototype.join()

Array.prototype.map()

...

push()

pop()

reduce()

reverse()

shift()

slice()

some()

sort()

unshift()

toString()

values()

 

 

728x90

async/await ?

async/await 은 자바스크립트에서 Promise 객체를 통해 처리하던 비동기 처리를 더 쉽고, 편하게 처리/사용할 수 있도록 나온 ECMAScript 2017 문법이다.

 

async/await 기본문법

async function 함수명() {
	await 비동기처리메서드명();
}

비동기 처리메서드가 꼭 프로미스 객체를 반환해야 await가 의도한 대로 작동한다.

promise 앞에 await keyword를 붙이면, javascript는 promise가 처리될 때 까지 대기하고, 처리가 완료되면 조건에 따라 동작한다.

1. 에러발생 => 예외 생성

2. 에러 미발생 => 프로미스 객체의 result 반환

 

async/await 예외처리

async function 함수명(){
	try{
    	...
    }
    catch(err){
    	console.log(err);
    }
}

try/catch 로 예외처리

 


[ + ] 나중에 내용 더 추가할 예정

728x90

'Language > Javascript' 카테고리의 다른 글

[ Javascript ] setTimeout, setInterval  (0) 2022.07.27
[ Javascript ] Array.prototype Methods  (0) 2022.03.08
[ Javascript ] Promise  (0) 2022.03.06
[ Javascript ] Class { ES6 (ES2015) }  (0) 2022.02.20
[ Javascript ] Set Object  (0) 2022.01.11

Asynchronous ( 비동기 )적 처리는 작업을 요청하지만 결과는 그 자리에서 꼭 받지 않아도 되는 데이터 처리 방식

Synchronous ( 동기 )적 처리는 작업을 요청함과 동시에 작업의 결과를 그 자리에서 받을 수 있는 데이터 처리 방식


Promise

Javascript Engine은 Single Thread로 동시에 두가지 작업을 할 수 없다. 이러한 Javascript가 비동기 처리를 할 수 있게 나온 것이 Promise이다.

 

Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다. 

► 코드의 실행 흐름에서 비동기처리를 유연하게 처리하기 위한 API

 

Promise 객체 상태

1. 대기 ( pendding ) : 이행하지도, 거부하지도 않은 초기 상태.

2. 이행 ( fulfilled ) : 연산이 성공으로 완료됨.

3. 거부 ( rejected ) : 연산이 실패함.

 

Promise.prototype.then() 및 Promise.prototype.catch() 메서드의 반환 값은 새로운 Promise로서 서로 연결할 수 있다. 



 

Promise 객체는 return 값으로 새로운 Promisse를 만들며 이는 서로 연결할 수 있다. 

 

Pendding  대기

new Promise() 메서드를 호출했을 때 pendding ( 대기 ) 상태이다.

Promise 메서드의 인자는 콜백함수이며, 콜백함수의 인자는 resolve, reject 이다.

new Promise(function(resolve, reject) {
	...
});

 

Fulfilled 이행

new Promis() 메서드의 콜백함수에서 resolve()를 수행하면 Fulfilled 이행 상태가 된다.

new Promise(function(resolve, reject) {
	resolve(); // 수행한 경우 fulfilled state
});

이행이 되면 .then() 메서드를 통해서 return 값을 받을 수 있다.

 

Rejected 실패

new Promise() 메서드의 콜백함수에서 reject()를 호출하면 Rejected 실패 상태가 된다.

new Promise(function(resolve, reject) {
	reject(); // rejceted state가 된다.
});

reject 반환값은 .then.catch(error)를 통해서 받을 수 있다.

 

 

참고 :

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

728x90

'Language > Javascript' 카테고리의 다른 글

[ Javascript ] Array.prototype Methods  (0) 2022.03.08
[ Javascript ] async/await  (0) 2022.03.07
[ Javascript ] Class { ES6 (ES2015) }  (0) 2022.02.20
[ Javascript ] Set Object  (0) 2022.01.11
[ Javascript ] Map Object  (0) 2022.01.11

+ Recent posts