JavaScript 강의 - 9
유튜브 강의
자바스크립트 9. 유용한 10가지 배열 함수들. Array APIs 총정리 | 프론트엔드 개발자 입문편 ( JavaScript ES6)
'use strict'
// q1. make a string out of an array
{
const fruits = ['apple', 'banana', 'orange'];
let a1 = '';
for (const value of fruits) {
a1 += value;
}
console.log(a1);
const r1 = fruits.join();
const r1_1 = fruits.toString();
console.log(r1);
console.log(r1_1);
}
// q2. make an array out of a string
{
const fruits = 'apple, kiwi, banana, cherry';
const a2 = fruits.split(',');
console.log(a2);
}
// q3. make this array look like this: [5,4,3,2,1]
{
const array = [1,2,3,4,5];
const a3 = array.reverse();
console.log(a3);
console.log(array); // array 자체를 변경시킴
}
// q4. make new array without the first two elements
{
const array = [1,2,3,4,5];
const a4 = array.slice(2)
console.log(a4)
console.log(array)
// splice : 배열 자체를 수정
// slice : 배열 중 원하는 부분만 가져옴
}
class Student {
constructor(name, age, enrolled, score) {
this.name = name;
this.age = age;
this.enrolled = enrolled;
this.score = score;
}
}
const students = [
new Student('A', 29, true, 45),
new Student('B', 28, false, 80),
new Student('C', 30, true, 90),
new Student('D', 40, false, 66),
new Student('E', 18, true, 88)
];
// q5. find a student with the score 90
{
// find : parameter로 받은 함수 결과가 true이면 해당하는 element 반환
const r5 = students.find((student) => student.score === 90);
console.log(r5);
}
// q6. make an array of enrolled students
{
const a6 = students.filter((student) => student.enrolled);
console.log(a6);
}
// q7. make an array containing only the students' scores
// result should be: [45, 80, 90, 66, 88]
{
const a7 = students.map((student) => student.score)
console.log(a7)
}
// q8. check if there is a student with the score lower than 50
{
const a8 = students.some((student) => student.score < 50)
console.log(a8)
const r8 = !students.every((student) => student.score >= 50)
console.log(r8)
}
// q9. compute students' average score
{
const r9 = students.reduce((prev, curr) => prev + curr.score, 0)
console.log(r9 / students.length)
}
// q10. make a string containing all the scores
// result should be: '45, 80, 90, 66, 88'
{
const a10 = students
.map((student) => student.score)
.join();
console.log(a10)
}
// bonus do q10 sorted in ascending order
// result should be: '45, 66, 80, 88, 90'
{
const aBonus = students
.map((student) => student.score)
.sort((a,b) => a - b)
.join();
console.log(aBonus);
}JavaScript 강의 - 10
유튜브 강의
자바스크립트 10. JSON 개념 정리 와 활용방법 및 유용한 사이트 공유 JavaScript JSON | 프론트엔드 개발자 입문편 (JavaScript ES6)
HTTP
- Hypertext Transfer Protocol
- 클라이언트 서버 통신 규칙
- 클라이언트가 서버에게 request / 서버가 클라이언트에게 response
- Hypertext : 하이퍼링크, 리소스, 문서, 이미지 등
- AJAX(Asynchronous JavaScript And XML)
- 웹페이지에서 동적으로 서버에게 데이터 주고 받는 기술
- XHR(XMLHttpRequest)
- 브라우저 API에서 제공하는 object
- 서버에게 데이터 요청하고 받을 수 있음
- fetch() API
- XML
- 데이터 표현하는 방법
JSON
- JavaScript Object Notation
- 데이터 주고받을 때 가장 간단한 format
- key, value로 이루어져 있음
- 서버와 데이터 주고받을 때
- object를 file system에 저장할 때
- 직렬화할 때 사용
- 프로그래밍 언어, 플랫폼에 상관없이 사용 가능
- 공부포인트
- object를 어떻게 serialize할지
- json을 어떻게 deserialize할지
- overloading
- 이름은 같지만 전달하는 매개변수가 다른 함수
stringify
- object를 json으로 만들 때 사용하는 API
- object를 json으로 만들 때 object의 함수는 데이터가 아니므로 json에 포함되지 않음
- replacer 사용하여 세밀하게 조정 가능
// object to JSON
// stringify(obj)
let json = JSON.stringify(true);
console.log(json);
json = JSON.stringify(['apple', 'banana']);
console.log(json);
// object
const rabbit = {
name: 'tori',
color: 'white',
size: null,
birthDate: new Date(),
jump: () => {
console.log(`${name} can jump`);
}
};
json = JSON.stringify(rabbit);
console.log(json);
json = JSON.stringify(rabbit, ['name', 'color']);
console.log(json)
json = JSON.stringify(rabbit, (key, value) => {
console.log(`key: ${key}, value: ${value}`);
return key === 'name' ? 'ellie': value;
})
console.log(json);parse
- json을 object로 만들 때 사용하는 API
- json에는 함수가 없으므로 object에서 method 실행할 수 없음
- 원본 object에서 object를 사용했어도 json에서는 string이기 때문에 함수 사용 불가
- ex. rabbit.birthDate.getDate() - 사용 가능
obj.birthDate.getDate() - 사용 불가
obj.birthDate - 사용 가능 - reviver 사용하면 object 새롭게 사용 가능
- ex. rabbit.birthDate.getDate() - 사용 가능
// JSON to object
// parse(json)
json = JSON.stringify(rabbit);
const obj = JSON.parse(json);
console.log(obj);
rabbit.jump();
// obj.jump(); // error
console.log(rabbit.birthDate.getDate());
// console.log(obj.birthDate.getDate()); // error
const obj2 = JSON.parse(json, (key, value) => {
console.log(`key: ${key}, value: ${value}`);
return key === 'birthDate' ? new Date(value) : value;
})
console.log(rabbit.birthDate.getDate());
console.log(obj2.birthDate.getDate())유용한 사이트
-
json 다른 곳 찾아주는 사이트
디버깅에 사용
JSON Diff - The semantic JSON compare tool -
json format 만들어주는 사이트
Json Beautifier - Json Formatter | Json Viewer | Json Editor -
json을 object로 확인할 수 있는 사이트
Json Parser Online -
유효한 json인지 확인할 수 있는 사이트
JSON Formatter & Validator
JavaScript 강의 - 11
유튜브 강의
자바스크립트 11. 비동기 처리의 시작 콜백 이해하기, 콜백 지옥 체험 😱 JavaScript Callback | 프론트엔드 개발자 입문편 (JavaScript ES6)
Synchronous vs Asynchronous
-
Javascript는 동기적(symchronous)
- hoisting 이후부터 코드 작성 순서대로 실행됨
- hoisting : var, function declaration이 제일 위로 올라가는 것
-
Asynchronous
- 언제 코드가 실행될 지 예측할 수 없음
callback function
- 전달 인자로 다른 함수에 전달되는 함수
- 간단한 함수는 arrow function으로 표현 가능
- synchronous callback
- 즉각적으로 실행
- asynchronous callback
- 나중에 실행됨
'use strict';
// JavaScript is symchronous
// Execute the code block in order after hoisting.
console.log('1');
setTimeout(function () {
console.log('2');
}, 1000);
console.log('2');
console.log('3');
// Synchronous callback
function printImmediately(print) {
print();
}
printImmediately(() => console.log('hello'));
// Asynchronous callback
function printWithDelay(print, timeout) {
setTimeout(print, timeout);
}
printWithDelay(() => console.log('async callback'), 2000);callback hell
// Callback Hell example
class UserStorage {
loginUser(id, password, onSuccess, onError) {
setTimeout(() => {
if (
(id === 'ellie' && password === 'dream') ||
(id === 'coder' && password === 'academy')
) {
onSuccess(id);
} else {
onError(new Error('not found'));
}
}, 2000);
}
getRoles(user, onSuccess, onError) {
setTimeout(() => {
if (user === 'ellie') {
onSuccess({name: 'ellie', role: 'admin'});
} else {
onError(new Error('no access'));
}
}, 1000);
}
}
const userStorage = new UserStorage();
const id = prompt('enter your id');
const password = prompt('enter your password');
userStorage.loginUser(
id,
password,
user => {
userStorage.getRoles(
user,
userWithRole => {
alert(`Hello ${userWithRole.name}, you have a ${userWithRole.role} role`)
},
error => {}
);
},
(error) => {
})JavaScript 강의 - 12
유튜브 강의
자바스크립트 12. 프로미스 개념부터 활용까지 JavaScript Promise | 프론트엔드 개발자 입문편 (JavaScript ES6)
Promise
- JS에서 제공하는 비동기를 간편하게 처리할 수 있도록 도와주는 object
- 공부포인트
- state
- producer와 consumer 차이점 이해
Producer
- promise가 만들어지자마자 executor 바로 실행됨
- 네트워크 통신 바로 수행하게 됨
- 사용자가 요청했을 때에만 네트워크 요청해야 하면 불필요한 네트워크 통신이 발생할 수 있음
- resolve : promise 정상 수행되었을 때 값 전달
- reject : promise 수행되지 않았을 때 에러 발생
// producer
// when new promise is created, the executor runs automatically.
const promise = new Promise((resolve, reject) => {
// doing some heavy work (network, read files)
console.log('doing something...');
setTimeout(() => {
resolve('ellie');
// reject(new Error('no network'));
}, 2000);
})Consumer
- promise 이용하여 값을 받아옴
- then : promise 정상적으로 수행되었다면 resolve로 전달된 값 반환
- catch : promise에서 에러 발생했을 때 처리할 방법 등록
- finally : 성공 실패와 관련 없이 마지막에 무조건 호출됨
// consumer
// then, catch, finally
promise
.then((value) => {
console.log(value);
})
.catch(error => {
console.log(error);
})
.finally(() => {
console.log('finally');
})Promise chaining
// Promise chaining
const fetchNumber = new Promise((resolve, reject) => {
setTimeout(() => resolve(1), 1000);
});
fetchNumber
.then(num => num * 2)
.then(num => num * 3)
.then(num => {
return new Promise((resolve, reject) => {
setTimeout(() => resolve(num - 1), 1000);
});
})
.then(num => console.log(num));Error Handling
// Error Handling
const getHen = () =>
new Promise((resolve, reject) => {
setTimeout(() => resolve('🐔'), 1000);
});
const getEgg = hen =>
new Promise((resolve, reject) => {
setTimeout(() => reject(new Error(`${hen} => 🥚`)), 1000);
});
const cook = egg =>
new Promise((resolve, reject) => {
setTimeout(() => resolve(`${egg} => 🍳`), 1000);
});
getHen() //
.then(getEgg)
.catch(error => {
return '🍗';
})
.then(cook)
.then(console.log)
.catch(console.log);Callback Hell fix
'use strict'
// Callback Hell example
class UserStorage {
loginUser(id, password) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (
(id === 'ellie' && password === 'dream') ||
(id === 'coder' && password === 'academy')
) {
resolve(id);
} else {
reject(new Error('not found'));
}
}, 2000);
});
}
getRoles(user) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (user === 'ellie') {
resolve({name: 'ellie', role: 'admin'});
} else {
reject(new Error('no access'));
}
}, 1000);
})
}
}
const userStorage = new UserStorage();
const id = prompt('enter your id');
const password = prompt('enter your password');
userStorage.loginUser(id, password)
.then(userStorage.getRoles)
.then(user => alert(`Hello ${user.name}, you have a ${user.role} role`))
.catch(console.log);JavaScript 강의 - 13
유튜브 강의
자바스크립트 13. 비동기의 꽃 JavaScript async 와 await 그리고 유용한 Promise APIs | 프론트엔드 개발자 입문편 (JavaScript ES6)
Async
- 비동기적 코드를 동기적으로 보이게끔 하는 것
- async, await : promise를 간편하게 쓸 수 있게 하는 syntactic sugar
- function 앞에 async를 붙이면 new Promise 선언하지 않고 사용할 수 있음
// async
async function fetchUser() {
// do network request in 10 secs
return 'ellie';
}
const user = fetchUser();
user.then(console.log);
console.log(user);Await
- async 붙은 함수 안에서만 사용 가능
- delay가 끝날 때까지 기다림
- 코드를 쉽게 이해할 수 있도록 만들어 줌
// await
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms))
}
async function getApple() {
await delay(3000);
return 'apple';
}
async function getBanana() {
await delay(3000);
return 'banana';
}
function getBanana() {
return delay(3000)
.then(() => 'banana');
}
function pickFruits() {
return getApple()
.then(apple => {
return getBanana().then(banana => `${apple} + ${banana}`)
})
}
pickFruits().then(console.log);await 병렬
// 위 함수에 async 사용
async function pickfruits() {
const applePromise = getApple();
const bananaPromise = getBanana();
const apple = await applePromise;
const banana = await bananaPromise;
return `${apple} + ${banana}`;
}유용한 Promise APIs
- race : 가장 먼저 값을 반환하는 것만 호출
// useful Promise APIs
function pickAllFruits() {
return Promise.all([getApple(), getBanana()]).then(fruits => fruits.join(' + '));
}
pickAllFruits().then(console.log);
function pickOnlyOne() {
return Promise.race([getApple(), getBanana()]);
}
pickOnlyOne().then(console.log);
beginner