\(@^0^@)/
[TDL] 05/13 Today's-Done-List 본문
728x90
- JS 기본 문법
es-module
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
/* export */
const a = 'a';
function hello() {
return 'hello';
}
export {a, hello};
============================
// 기본 export
export default function hello() {
return 'hello';
}/* import */
import from './module-export.js';
console.log(a); // a
console.log(hello()); // hello
==================================================
// 별칭 만들어서 import 하기
import * as i from './module-export.js';
console.log(i.a); // a
console.log(i.hello()); // hello
==================================================
// 기본 import
import hello from './module-export.js';
console.log(hello()); // hellohtml에 연결하여 사용할 때 type에 module을 꼭 적용해주어야 하며,
script태그 안에 src로 파일을 불러오지 않고, 인라인으로도 구현할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script type="module" src="./module-export.js"></script>
<script type="module">
import hello from "./module-export.js";
console.log(hello());
</script>
</head>
<body></body>
</html>/* export */
export default function hello() {
return "hello";
}
예외처리
- 특정 문 실행 시 에러가 발생된다면?
- 나머지 코드를 계속 실행하는 것은 의미가 없다.
/* 에러 던지기 */
function login(id, pw) {
if (id === "zero" && pw === 0000) {
return true;
}
throw new Error("로그인 실패");
}
try {
login("haha", 1234);
} catch (error) {
console.error(error);
} finally {
console.info("로그인 시도 시간 : " + new Date());
}- if문에서 문법적으로 error가 발생하진 않기에, catch의 error가 발생하지 않는다.
- 그럴 때는, throw를 통해 Error를 직접 생성하여 에러를 던져줘야 한다.
- window.alert(error)를 통해 사용자에게 에러를 안내해 줄 수도 있음.
stack error
/* try-catch */
try {
x();
} catch (e) {
console.error(e.stack);
} finally {
}- error가 중첩돼서 쌓이면서 stack형식으로 보인다.
- 브라우저에서도 에러가 날 경우 stack형식으로 보임.
- 이러한 stack logs를 추적하면서 error를 잡아내면 된다.
커스텀 에러
코드가 길어지면, 커스텀 에러를 만들어, 예외처리를 견고하게 해주는 것이 좋은 개발자!
// class 문법을 활용하여 LoginError만들기
class LoginError extends Error {
constructor(message) {
super(message);
this.name = "Login Error";
}
}
function login(id, pw) {
if (id !== "zero") {
throw new LoginError("아이디 불일치");
}
if (id === "zero" && pw === 0000) {
return true;
}
throw new Error("로그인 실패");
}
try {
login("haha", 1234);
} catch (error) {
console.error(error);
if (error instanceof LoginError) {
console.error('로그인 에러가 발생했습니다.')
} else {
console.error('에러가 발생했습니다.')
}
} finally {
console.info("로그인 시도 시간 : " + new Date());
}- class 문법을 활용하여 LoginError를 생성.
- LoginError에서 Error를 확장.
- login함수 : 아이디가 일치하지 않다면 LoginError를 불러오기
- try&catch : LoginError을 불러오는 에러를 발생했다면, "로그인 에러가 발생했습니다" 출력.
- 생활코딩 강의
- Callback
// filter + callback 메서드 기본형
words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
function callback(element){
if(element.length > 6){
return true;
} else {
return false;
}
}
newWords = words.filter(callback);
console.log(newWords); // ['exuberant', 'destruction', 'present']// 기본 filter + callback 메서드에서 if문 생략
words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
function callback(element){
return element.length > 6;
}
newWords = words.filter(callback);
console.log(newWords); // ['exuberant', 'destruction', 'present']// 기본 filter + callback 메서드에서, 인라인 함수로 코드 생략.
words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
newWords = words.filter(element => element.length > 6);
console.log(newWords); // ['exuberant', 'destruction', 'present']// filter메서드 직접 구현.
words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
function myfilter(origin, callback) {
var result = [];
for(var i = 0; i < origin.length; i++) {
var current = origin[i];
if(callback(current)){
result.push(current);
}
}
return result;
}
newWords = myfilter(words, element => element.length > 6);
console.log(newWords); // ['exuberant', 'destruction', 'present']
- Promise
- promise를 사용하면 그 즉시 pending상태.
.then()으로 넘어가면 resolved (정상 작동)
.catch()로 넘어가면 rejected (error 발생)
새로운 promise를 리턴하면 다시 pending상태가 시작되면서 then과 catch로 나뉘게 됨. - https://www.youtube.com/watch?v=Sn0ublt7CWM&list=PLuHgQVnccGMBVQ4ZcIRmcOeu8uktUAbxI&index=2
- promise를 사용하면 그 즉시 pending상태.
<script>
fetch('https://jsonplaceholder.typicode.com/posts')
.then(function(response){
// response.json().then(function(data){
// console.log('data', data);
// });
return response.json();
})
.catch(function(reason){
console.log('reason', reason);
})
.then(function(data){
console.log('data', data);
});
</script>
- Async & await
반복문에서 비동기 함수 실행하기(2)_배열
배열요소에 비동기 작업을 실행할 때 순차처리와 병렬처리로 나눌 수 있다. <⭐순차처리>는 배열의 순서대로 비동기 작업을 실행하며 실행순서를 보장하는 경우이다. 시간이 다소 소요되는 작
velog.io
// 콜백 헬을 겪을 수도 있는 함수안의 함수
timer(1000, function() {
console.log('작업');
timer(1000, function() {
console.log('작업');
timer(1000, function() {
console.log('작업');
});
});
});
// promise를 사용한 비동기 함수
timer(1000)
.then(function(){
console.log('작업')
return timer(1000);
})
.then(function(){
console.log('작업')
return timer(1000);
})
.then(function(){
console.log('작업')
})
// async & await을 사용한 비동기 함수
async function run() {
await timer(1000)
console.log('작업')
await timer(1000)
console.log('작업')
await timer(1000)
console.log('작업')
}
run()- new Promise
<script>
function job1() {
return new Promise (function(resolve, reject){
setTimeout(function(){
resolve('job1 ok!');
}, 2000);
});
};
function job2(){
return new Promise (function(resolve, reject){
setTimeout(function(){
resolve('job2 ok!');
}, 2000);
});
};
/* nesting */
// job1().then(function(data){
// console.log('data', data);
// job2().then(function(data){
// console.log('data2', data);
// })
// })
/* chaining, nesting과 같은 동작을 하지만, 조금 더 간결.*/
job1()
.then(function(data){
console.log('data1', data);
return job2();
})
.then(function(data){
console.log('data2', data);
})
</script>- Promise All | Race
<script>
function timer(time){
return new Promise(function(resolve, reject){
setTimeout(function(){
resolve(time);
}, time)
});
}
// Promise.all로 비동기로 실행되는 모든 timer의 시간을 출력.
console.time('Promise.all');
Promise.all([timer(1000), timer(2000), timer(3000)]).then(function(result){
console.log('result', result);
console.timeEnd('Promise.all');
});
// Promise.race 비동기로 실행되는 timer중에 가장 빠른 하나만 출력.
console.time('Promise.race');
Promise.race([timer(1000), timer(2000), timer(3000)]).then(function(result){
console.log('result', result);
console.timeEnd('Promise.race');
});
</script>17:50 오후 회고 스터디 (만족도 : 6)
- JS스터디 사전 테스트
스터디 들어가기 전에 내가 얼마나 알고 있는지 파악하기 위해 주어진 사전 테스트를 푸는데, 생각보다 어렵다ㅠㅠ
10문제를 2시간 넘게 붙잡고 있는 중..
그래도 내가 현재 어떤 개념을 알고 있고, 모르고 있는지 파악이 가능해서 뜻깊고 유익한 것 같다.
스터디 끝난 후에는 자스의 기본적인 부분들은 다 끝낼 수 있을 것 같아서 기대된다ㅎ.ㅎ
아직 두문 제정도 남아서 내일마저 끝내고, 다시 한번 훑어서 마무리해야겠다.
22:50 저녁 회고 스터디 (만족도 : 8)
오랜만에 몰입도있게 공부했던 시간이었다. 내일도 이렇게!
[ 출처, 참고 : 제로베이스 프런트엔드 스쿨 ]
728x90
'TDL' 카테고리의 다른 글
| [TDL] 05/16 Today's-Done-List (0) | 2022.05.16 |
|---|---|
| [TDL] 05/14 Today's-Done-List (0) | 2022.05.14 |
| [TDL] 05/12 Today's-Done-List (0) | 2022.05.12 |
| [TDL] 05/11 Today's-Done-List (0) | 2022.05.12 |
| [TDL] 05/10 Today's-Done-List (0) | 2022.05.11 |
'TDL' Related Articles
more
