then()의 리턴값은 promise객체이며, 인자로 받은 함수의 리턴값이 promise객체이면 그 객체의 상태와 결과값을 가진다.
보통 then안에
return new Promise((resolve, reject)=>{
if(조건문)resolve(전달할게 있다면 전달)
else reject(전달할게 있다면 전달)
})
이런식으로 사용하여 비동기적 코딩을 실행한다.
리턴값이 일반 데이터면 그 일반데이터를 결과값으로 가지는 promise객체를 반환하지만 비동기적으로 순차적으로 then이 실행되는지 장담하기 힘들다.
Promise.resolve('foo')
// 1. "foo"를 받고 "bar"를 추가한 다음 그 값으로 이행하여 다음 then에 넘겨줌
.then(function(string) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
string += 'bar';
resolve(string);
}, 1);
});
})
// 2. "foobar"를 받고 그대로 다음 then에 넘겨준 뒤,
// 나중에 콜백 함수에서 가공하고 콘솔에 출력
.then(function(string) {
setTimeout(function() {
string += 'baz';
console.log(string);
}, 1)
return string; //여기에서 일반 데이터를 반환하면 문제가 생김@@@@@@
})
// 3. 이 부분의 코드는 이전의 then 블록 안의 (가짜) 비동기 코드에서
// 실제로 문자열을 가공하기 전에 실행됨
.then(function(string) {
console.log("마지막 Then: 앗... 방금 then에서 프로미스 만들고 반환하는 걸 까먹어서 " +
"출력 순서가 좀 이상할지도 몰라요");
// 'baz' 부분은 setTimeout 함수로 비동기적으로 실행되기 때문에
// 이곳의 string에는 아직 'baz' 부분이 없음
console.log(string);
});
// 로그 출력 결과 (순서대로):
// 마지막 Then: 앗... 방금 then에서 프로미스 만들고 반환하는 걸 까먹어서 출력 순서가 좀 이상할지도 몰라요
// foobar
// foobarbaz
await를 사용하면 promise객체를 리턴하는 함수 앞에 키워드를 쓰게되는데,
async function getNewsAndWeatherAsync() {
let result = {}
let data1 = await fetch(newsURL).then(response => response.json())
let data2 = await fetch(weatherURL).then(response => response.json())
result = { news : data1.data, weather : data2}
return result
}
여기서 data1의 값은 promise객체가 아니라 promise객체의 결과값이다!!
Promise.all
var newsURL = 'http://localhost:5000/data/latestNews';
var weatherURL = 'http://localhost:5000/data/weather';
function getNewsAndWeatherAll() {
// TODO: Promise.all을 이용해 작성합니다
return Promise.all([ fetch(newsURL), fetch(weatherURL) ])
.then((responses) => {
return Promise.all(responses.map((response) => response.json()))
})
.then((responses) => {
let result = {}
// console.log(responses[0])
result = { news: responses[0].data, weather: responses[1] }
return result
})
}
if (typeof window === 'undefined') {
module.exports = {
getNewsAndWeatherAll
}
}
promise.all 또한 await와 마찬가지로 위의 responses에 promise객체들의 배열을 인자로 전달해주는것이 아닌 promise객체들의 결과값을 담은 배열을 then에 넘겨준다.
Promise 실행함수가 가지고 있는 두 개의 파라미터, resolve, reject는 각각 무엇을 의미하나요?
resolve는 주어진 값으로 이행하는 Promise객체를 반환합니다. 값이 then가능한 (즉, then메서드가 있는) 경우, 반환된 프로미스는 then메서드를 따라가고 마지막 상태를 취합니다. 그렇지 않은 경우 반환된 프로미스는 주어진 값으로 이행합니다. 어떤 값이 프로미스인지 아닌지 알 수 없는 경우,Promise.resolve(value)후 반환값을 프로미스로 처리할 수 있습니다.
reject는 주어진 이유로 거부하는 Promise객체를 반환합니다.
resolve, reject함수에는 인자를 넘길 수 있습니다. 이때 넘기는 인자는 어떻게 사용할 수 있나요?
때로는 직접 눈으로 확인해보는 것이 이해하기 쉽습니다. 반드시 다음을 실습해보세요.
sleep함수를 아래와 같이 바꿉니다.constsleep=(wait)=>{returnnewPromise((resolve)=>{setTimeout(()=>{resolve('hello')}, wait);});}
runPromise함수를 다음과 같이 바꿉니다.functionrunPromise(){resetTitle();playVideo();sleep(1000).then((param)=>{console.log(param);pauseVideo();displayTitle();return'world'}).then((param)=>{console.log(param);sleep(500);}).then(highlightTitle).then(sleep.bind(null,2000)).then(resetTitle)}
브라우저 콘솔을 확인해서, 어떤 일이 발생했는지 확인해보세요.
new Promise()를 통해 생성한 Promise 인스턴스에는 어떤 메소드가 존재하나요? 각각은 어떤 용도인가요?then() 메소드: then을 호출한 함수에서 반환되는 promise의 인자가 resolve를 호출할때 실행
then(), catch(), finally() 메소드가 존재한다.
catch() 메소드: 이전 then에서 호출한 함수에서 반환되는 promise의 인자가 reject를 호출 할때 실행
finally() 메소드: Promise가성공적으로 수행 되었는지 거절되었는지에 관계없이 Promise가 처리 된 후에 코드가 무조건 한 번은 실행되는 것을 제공합니다.
Promise.prototype.then메소드는 무엇을 리턴하나요?
then 메소드를 호출한 promise객체를 리턴하고, 그 안에는 promise객체에서 호출한 함수의 반환값을 키와 값의 형태로 갖고있다. 또한 현promise객체의 상태에 대한 정보도 갖고있다.
Promise.prototype.catch메소드는 무엇을 리턴하나요?
때로는 직접 눈으로 확인해보는 것이 이해하기 쉽습니다. 반드시 다음을 실습해보세요.
catch를 테스트해보고 싶다면 sleep함수를 다음과 같이 고쳐봅시다.constsleep=(wait)=>{returnnewPromise((resolve, reject)=>{setTimeout(()=>{reject(newError('에러'))}, wait);});}
runPromise함수의 Promise 사용 부분에 catch메소드를 붙여봅니다.// 생략.then(resetTitle).catch(err =>{console.log(err);})
catch 메소드를 호출한 promise객체를 리턴하고, 그 안에는 promise객체에서 호출한 함수의 반환값을 키와 값의 형태로 갖고있다. 또한 현promise객체의 상태에 대한 정보도 갖고있다.
Promise의 세가지 상태는 각각 무엇이며, 어떤 의미를 가지나요?
Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태
await키워드 다음에 등장하는 함수 실행은, 어떤 타입을 리턴할 경우에만 의미가 있나요?
promise타입을 리턴하는 경우에만 의미가 있다.
await키워드를 사용할 경우, 어떤 값이 리턴되나요?
때로는 직접 눈으로 확인해보는 것이 이해하기 쉽습니다. 반드시 다음을 실습해보세요.
sleep함수를 아래와 같이 바꿉니다.constsleep=(wait)=>{returnnewPromise((resolve)=>{setTimeout(()=>{resolve('hello')}, wait);});}
브라우저에서 개발자 콘솔을 열어 다음을 실행해본 후, returnValue에 담긴 값을 확인해보세요.let returnValue =awaitsleep(1000);
return 되는 promise객체에 담겨져 있던 [[PromiseResult]]의 값이 담긴다.
브라우저는 노드와 마찬가지로 V8이라는 자바스크립트 엔진이 구동될수 있는환경이다. 즉 우리가 자바스크립트로 작성한 클라이언트 코드를 브라우저 상에서 구동해서 우리가 볼수 있는 view단은 환성시키는 역할을 주로 진행한다.
2.클라이언트
직역하면 고객인데 이 단어로는 쉽게 설명하기 어렵다. 대신client가 주로 쓰는 부분이라고 이해하면 조금더 편하다고 한다. 주로 유저와 interaction하는 기능을 보유하고 있다. 예를들어 버튼을 클릭하면 컨텐츠를 요청해서 가져오는것, 탭을 클릭하면 다른페이지로 넘어가서 다른 페이지를 보여주는 등 유저의 동작에 따라 반응하는 기능들을 주로 보유하고 있다. 하지만 클라이언트는 컨텐츠 혹은 데이터 등으로 불리는 리소스 자체를 직접 가지고 있지는 않기 때문에 우리가 유저에게 어떠한 데이터를 보여주는 웹서비스를 기획한다고 한다면 그 데이터를 가지고 있는 주체(데이터베이스)와 해당 데이터를 다뤄서 우리가 필요한 데이터로 만들어주는 과정을 해주는 로직을 돌리는 주체(서버)가 필요하다. HTTP통신에서 주로 요청을 담당하게된다.
3. 서버
데이터는 저장하고 불러오는것 뿐만 아니라 꺼내온 데이터를 핸들링하고 권한이 있는 사용자인지, 우리의 회원이 요청하는 것인지, 나쁜집단이 우리 자료를 빼내가려고 하는 요청이 아닌지를 검색하는 관문이 필요하다. 나는 이 관문을 node서버로 만들게 될 것이다. 그리고 구현을 편하게 하기 위해 Express라는 프레임워크를 활용할 것이다. 이렇게 만들어진 서버는 크게 두가지 역할을 갖게된다.
클라이언트의 요청을 받는다.
요청을(request) 처리하기 위해 필요한 데이터들을 만들기 위해서 데이터베이스와 통신하여 데이터를 꺼내와 응답(response)한다.
결론적으로 서버가 하는 역할은 클라이언트가 필요하다는 요청을 받고, 데이터베이스에서 해당자료를 꺼내와서 조립해서 응답해주는 것이다.콜센터혹은물류센터와 비교하면 좋을것 같다.
4. 데이터베이스
이름에서부터 의미가 느껴진다. 우리 서비스의 모든 리소스들을 저장하는 공간이다. 어려운 개념같지만 간단하게 생각해보면 잘 저장하고 잘 꺼내쓰는것이다. 이것들을 잘하기 위해 처음에는 query문을 배우게된다. 이 query문은 어렵고 생소하며 작성자의 코드스타일에 영향을 많이 받기 때문에 ORM이라는 개념으로 획일화된 코드를 작성하게된다. 어렵게생각하지말자하는일은 잘저장하고 잘꺼내오는 일이고 이 일을 잘하기 위해 query, ORM등 다양한 시도를 하는것이다.
5.HTTP
HTTP(HyperText Transfer Protocol) 초본문전송규약, 하이퍼본문전송규약 말이 어렵다. 앞의 단어는 이해가 어렵지만 protocol이라는 것은 알수있다. 즉 통신규약이다. 웹아키텍처에서 클라이언트와 서버가 정보를 주고받을때 사용하는 통신규약이라고 이해하면 될 것 같다. 우리가 일상생활에서 견적서를 쓰거나 물건을 주문할 때 양식을 지켜서 주문,발주를 해야하는것과 같다. '서버로 무엇인가 요청할 때에는 헤더와 바디의 형식을 갖춘 요청을 양식에 맞게 보내라 !'
클라이언트는 인터넷에 연결된 사용자의 디바이스, 또는 웹에 접근할 수 있는 소프트웨어를 뜻한다. 대표적인 예로 [A]가 있는데, [A]는 HTML, CSS, JavaScript 등으로 작성된 코드를 내부 엔진으로 해독하여 사용자가 쉽게 이해할 수 있는 형태의 컨텐츠로 보여주는 역할을 한다. - 서버는 클라이언트가 어떤 자원을 요청하면 해당 요청을 적절하게 처리하는 역할을 한다. 클라이언트는 서버의 자원을 어떻게 사용할 수 있는지 명시해 둔 인터페이스 [B]에 따라 요청을 전송한다. - 이렇게 클라이언트와 서버가 서로 요청과 응답을 주고받을 수 있는 것은 [C]라는 통신 규약 덕분이다.
선생님께서는 미리 모든 발표 순서의 경우의 수를 저장해 놓았지만 김코딩의 버릇을 고치기 위해 문제를 내겠다고 말씀하셨습니다.
김코딩은 모든 조별 발표 순서에 대한 경우의 수를 차례대로 구한 뒤, 선생님께서 숫자를 말하면 그 순서에 맞는 경우의 수를 말해야 하고, 발표 순서를 말하면 이 발표순서가 몇번째 경우의 수인지를 대답해야 합니다.
총 학생의 수 N과 선생님이 말하는 k가 주어질 때, 김코딩이 정답을 말 할 수 있게 올바른 리턴 값을 구하세요.
모든 경우의 수가 담긴 배열은 번호가 작을수록 앞에 위치한다고 가정합니다. ex) N = 3일경우, [[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]]
입력
인자 1: n
Number 타입의 1 <= N <= 20인 조의 갯수
인자 2: k
k가 Number 일 때, k번째 배열을 리턴합니다.
ex) n이 3이고 k가 3일 경우
모든 경우의 수를 2차원 배열에 담는다면 [[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]]이 되고,
반환하는 값은 [2, 3, 1]이 됩니다.
k가 Array일 때, 몇 번째인지를 리턴합니다. (0 <= index 입니다.)
ex) n이 3이고 k가 [2, 3, 1]일 경우
모든 경우의 수를 2차원 배열에 담는다면 [[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]]이 되고,
반환하는 값은 3이 됩니다.
function orderOfPresentation(n, k) {
// TODO: 여기에 코드를 작성합니다.
let numbers = []
for(let i = 1; i<=n ; i++){
numbers.push(i)
}
//obj에다가 key를 경우의 수로 두고 value를 boolean으로 줘서 이미 사용했던 숫자인지 판별
//만들었던 숫자이면 for문 안에서 numbers의 인덱스를 올려서 숫자 조합하기.
//n이 몇이 될지 모르니까 재귀를 통해서 구현해야한다.
//조합한 숫자는 result에 담고 obj에 키로 추가
//사용했던 카드의 정보를 담아야한다
let result = []
// let rec = (obj = {} ,combinated = '') =>{
// for(let i = 0; i < numbers.length; i++){//카드들을 순회
// //카드를 선택하기전에 사용가능한 카드인지 확인
// if(obj[numbers[i]] === true || obj[numbers[i]] === undefined){//사용 가능한 카드
// combinated += numbers[i]//카드를 선택하고
// obj[numbers[i]] = false //사용했던 카드로 표시
// console.log('combinated: ', combinated)
// console.log('obj[numbers[i]]: ', obj[numbers[i]])
// //그다음 카드를 선택하기 위해 재귀
// if(combinated.length < n){
// console.log("재귀-----------")
// combinated = rec(obj,combinated)
// }
// else{//카드가 다 만들어지면 체크
// let strArr = combinated.split('')
// let numArr = strArr.map((el)=>Number(el))
// //result에 넣기전에 숫자로 변환시키기
// result.push(numArr)
// console.log('result: ', result)
// }
// combinated = combinated.slice(0,-1) //다음 숫자 확인을 위해 썼던거 뺴주기
// obj[numbers[i]] = true //재귀가 끝났으니 다시 사용 가능하게 해줌
// }
// console.log("obj: ", obj)
// console.log('end of for loop @@@@@@@@@@@@@@@@@@@@')
// }
// return combinated
// }
// rec()
//위의 코드는 나의 코드인데 아래 코드처럼 순회해야하는 배열 자체를 줄여주면 더 효율적으로 순회할 수 있다
const permutation = (arr, m = []) => {
// 탈출 조건을 생성합니다.
// arr의 length가 0일 때 result에 만들어진 발표 순서 배열을 담습니다.
if (arr.length === 0) {
result.push(m);
} else {
// 순열의 재료가 담긴 배열을 순환합니다.
for (let i = 0; i < arr.length; i++) {
// 현재 배열을 카피합니다. (원본을 건드리면 모든 경우의 수를 찾을 수 없습니다.)
let currentArray = arr.slice();
// 제일 앞에 있는 요소를 가지고 와서 변수에 할당합니다.
let element = currentArray.splice(i, 1);
// 제일 앞에 있는 요소가 사라진 배열 ([1, 2, 3]이었다면 현재는 [2, 3])을 arr 인자에 넣고, m 배열과 element를 합쳐서 m 인자에 넣습니다.
permutation(currentArray.slice(), m.concat(element));
// 이렇게 되면 다음은 [2, 3]을 카피하고, element가 [2]가 될 것이며
// 제일 앞에 있는 요소가 사라진 배열 [3]이 arr에 들어갈 것이고, element는 m과 다시 합쳐져 [1, 2]를 만들 것입니다.
// 이렇게 계속 재귀를 돌려서 m이 [1, 2, 3]이 되면, arr의 lenght는 0이 될 것이고, 재귀에서 빠져나옵니다.
// arr === []일 때(m이 [1, 2, 3]) result에 push를 하여 함수를 종료하고, 그다음 arr === [3]일 때(m이 [1, 2]) for문의 길이가 1이었으므로 함수를 그대로 종료하고,
// arr === [2, 3]일 때(m이 [1]) for문은 arr.length에 따라 2번 돌기 때문에 2를 지나 3이 될 것입니다.
// [1] => [1, 3] => [1, 3, 2] => (1의 모든 경우의 수를 다 돌았으니 2로 진입) [2] => [2, 1] => [2, 1, 3] ...
}
}
};
permutation(numbers);
console.log('final result: ', result)
//리턴
if(Array.isArray(k)){
return result.findIndex((el)=>{
return String(el) === String(k)
})
}else{
return result[k]
}
}
orderOfPresentation(5,3) //5만들어오게 되도 경우의수가 120가지, 9가 들어오게되면 36만가지가된다.
Javascript는 프로토타입 기반 언어라고도 불리우는데, 모든 객체들이 속성과 메서드를 상속받기 위해 프로토타입 객체를 기본적으로 갖고있다. 상속받은 메서드와 속성들은 프로토타입 객체에 담긴다. 객체 인스턴스와 프로토타입간의 연결이 구성되고 이 연결을 따라 프로토타입 체인을 타고 올라가며 속성과 메서드를 탐색한다.
은닉화(hiding)라는 특징도 포함이 되어있는데, get/set 함수를 만들어 내부 데이터나 내부 동작이 외부로 전달되지 않도록 하는것이다. 하지만 javascript의 언어 특성상 은닉화는 불가능하다. (c#에서는 public/private 키워드로 가능)
느슨한 결합(Loose Coupling)에 유리: 언제든 구현을 수정할 수 있다
Inheritance (상속)
상속은 부모클래스의 메서드나 데이터등을 자식클래스가 물려받는것이다. 정확한 표현으로는; 기본 클래스(base class)의 특징을 파생 클래스(derive class)가 상속받는다.
부모클래스에게 상속받은 자식클래스는 부모의 모든 데이터 속성과 메서드들을 사용할수 있으며, 자식클래스가 데이터 및 메서드를 추가 한다고 해서 부모클래스에게 영향이 가지 않는다.
Abstraction (추상화)
추상화는 메서드의 사용을 사용자에게 맞추어 보다 편리하게 사용할 수 있도록 도와준다. 메서드의 복잡한 내부를 신경 쓸 필요 없이 사용할 때에는 단순하게 사용 할 수 있도록 하는것이다.
추상화와 캡슐화의 차이:
캡슐화가 코드나 데이터의 은닉에 포커스가 맞춰져있다면, 추상화는 클래스를 사용하는 사람이 필요하지 않은 메소드 등을 노출시키지 않고, 기능 단순한 이름으로 정의하는 것에 포커스가 맞춰져 있다.
Polymorphism (다형성)
다형성은 특정 기능을 선언(설계)부분과 구현(동작)부분으로 분리한 후 구현부분을 다양한 방법으로 만들어 선택하여 사용할 수 있게 하는 기능이다. 일반 객체지향 언어에서는 데이터 타입이 있다. 그래서 변수를 선언할 때 데이터 타입을 명시해야 한다. 하지만 자바스크립트의 경우는 그냥 변수라는 것만 알 수 있게 var 변수명 과 같은 식으로 데이터 타입을 명시하지 않고 선언을 한다.
**일반 객체지향언어의 경우 데이터 타입을 맞추지 않으면 에러가 난다.
하지만 자바스크립트의 데이터 타입을 명시하고 변수 사용을 하지 않기 때문에 변수값에 어떤 데이터를 넣어도 에러가 나지 않는다.
그리고 일반 객체지향에서 다형성을 구현하려면 매개변수와 리턴값을 상속받는 메서드에 맞추어 구현하여야 한다. 그렇지 않으면 에러가 난다.
하지만 자바스크립트에서는 인터페이스, 추상 클래스 그리고 엄격한 데이터 타입 체크 등의 다형성과 관련된 문법은 지원되지 않는다. 그렇다면 자바스크립트에서의 다형성은 어떻게 구현해야 할까? 그냥 다형성이 지원한다고 생각하고 규칙에 맞춰 구현하는 방법밖에 없다. 즉 구현부에서 메서드를 작성할 때 선언부가 있다는 가정 하에 맞춰 구현해줘야 한다.
