js 기초 단어 정리 / 비동기 프로그래밍
코드를 모름 ▸ 구글링 함 ▸ 설명글에 써있는 개발단어들을 모름 ▸ 단어 구글링 ▸ 찾은 설명글의 개발단어를 모름 ▸ 구글링 ▸ ...무한굴레
이 지긋지긋한 루트가 질려서 기본적인 거는 머릿속에 넣기 위해 정리하는 글... : (
(이제 좀 외워...)
∙ Parameter(파라미터) / 매개변수
- 함수를 정의할 때 사용되는 변수.
- 함수의 매개변수는 undefined가 기본
∙ Argument(아규멘트) / 인수,인자
- 함수가 호출될 때, 넘기는 변수값
function multiply(a, b) { // a, b = 매개변수
return a * b;
}
multiply(10, 20); // 10, 20 = 인자,
∙ 동기 & 비동기
동기 - 한 작업이 실행되는 동안 다른 작업은 멈춘 상태를 유지하고 자신의 차례를 기다리는 것
- 자바스크립트는 동기식 언어이다.
- 자바스크립트는 한 번에 하나의 작업을 수행한다.
ex)
console.log("qwrty1");
console.log("qwerty2");
console.log("qwerty3");
result)
qwerty1
qwerty2
qwerty3
----------------
ex2)
function qwert1(print){
print();
qwrty1(()=> console.log('hello');
// hello
비동기 - 응답에 관계없이 바로 다음 동작이 실행되는 방식
· 비동기 시 생각해야 할 점.
요청을 만드는 사람. 요청을 받는 사람
== 요청 시, 성공/실패 할 때를 염두해 두어야 함.
- 존재 이유 : 버튼 하나 눌렀는데 자바스크립트가 처음부터 쭉 훑고 오느라 동작까지 30초 이상이 걸린다? -> 사용자 3초안에 창 닫음.
ex)
function qwerty2(print, timeout){
setTimeOut(pringt, timeoud);
}
qwerty2(()=>console.log'ㄱㄴㄷㄹㅁㅂㅅ',2000);
//2초후 불러와짐.∙ 비동기 함수 3가지
1. 콜백함수
다른 함수가 실행을 끝낸 뒤 callback(실행)되는 함수
- 비동기 방식으로 작성된 함수를 동기 처리하기 위해 필요
- 가독성, 코드 재사용성
- 동기,비동기로 나뉨.
- 콜백함수는 연관되게 한곳에 몰아쓰면 콜백지옥을 겪을 수 있음!
- 자바스크립트 구조: LIFO구조(List in Frist Out/ 먼저 들어온 것이 먼저 나간다.)
(내부의 설명이 많긴한데, 지금 단계에서는 그냥 키오스크에서 한명씩 결제하는 거 생각하면 될 듯.)
ex)
// 실행이 없다.(요청받는 유저가 없다.)
function print(callback) {
callback();
}
print();
================
ex1)
// 실행이 없다.(요청받는 유저가 있다.)
function print(callback, user) {
callback();
}
print(user);
ex2)
function print(callback) {
callback();
}
pringt(()=>조건문); // <- 이런식으로도 콜백함수 사용가능!
내가 만든 콜백함수..?(근데 콜백함수인지도 잘 모르겠네...ㅜㅜㅜ)
function PaintTodo2(listitem) {
const li = document.createElement('li');
li.id = listitem.id;
li.text = listitem.text;
let span = document.createElement('span');
const Xbtn = document.createElement('button');
const Mbtn = document.createElement('button');
let Input = document.createElement('input');
Xbtn.addEventListener('click', DeleteTodo);
span.innerText = li.text;
Xbtn.innerText = '삭제';
Mbtn.innerText = '수정';
console.log(Input.value);
Mbtn.addEventListener('click', (event) => modify(event));
li.append(span, Xbtn, Mbtn, Input);
Input.classList.add(LOGIFORM_HIDDEN);
TodoList2.append(li);
const modify = (event, listitem) => {
if (Input.value == '') {
console.log('qwerty1');
Input.value = span.innerText;
span.classList.add(LOGIFORM_HIDDEN);
Input.classList.remove(LOGIFORM_HIDDEN);
} else {
console.log('qwertytyuasdzfasdf');
span.classList.remove(LOGIFORM_HIDDEN);
Input.classList.add(LOGIFORM_HIDDEN);
SavedTodos1();
span.innerText = Input.value;
}
};
}· 콜백 문제
- 코드가 한눈에 안들어옴.
- 오류나면 찾기 힘들어짐.
- 새로운 기능을 넣으려면 다시 뜯어봐야함.(선임님들은 쉽게 하시던데 나는 눈물 쏟고 첨부터 다시 해야됨...)
∙ promise
작업의 중간상태를 확인할 수 있음.
- promise에서 신경써야 할 것
- state(상태) : 실패했는지, 끝났는지, 무거운지
- producing : 원하는 기능을 제공해주는 사람.
consumer : 기능을 쓰는 사람.
위에서 언급했듯 성공/실패를 염두해 두어야 함!!)
기본 코드
const promise(이름) = new Promise((resolve, reject) => {
ex) 에시 기능
setTimeout(() => {
resolve('1234');
reject(new Error('5678'));
}, 2000);
});
promise(이름)
.then((value) => {
기능
ex)console.log(value);
}) // 잘 실행됐을 때
.catch((error) => {
기능
console.log(error);
}) // 오류 났을 때
.finally(() => {
기능
console.log('finally');
}); // 상관없이 마지막에 나옴∙ async, await
promise도 콜백지옥에 빠질 수 있음. 조금 더 편하게 사용할 수 있음
// 1. promise로 작업했을 때
function getBanana() {
return delay(3000).then(() => 'good');
}
// 2, async로 작업했을 때
async function getBanana() {
await delay(3000); //3초 간 기다려줘
return 'gooood'; // 그리고 이제 보여줘
}- async 안의 알아둬야 하고 작성해야 할 내용이 더 깊고 많은데 이건 나중에 아예 비동기 페이지 따로 파서 서술하기로~~
참고
- https://velog.io/@coin46/%EB%B9%84%EB%8F%99%EA%B8%B0%EB%A5%BC-%EC%B2%98%EB%A6%AC%ED%95%98%EB%8A%94-%EC%BD%9C%EB%B0%B1-Promise-asyncawait
- https://velog.io/@rejoelve/%EB%B4%90%EB%8F%84-%EB%B4%90%EB%8F%84-%ED%97%B7%EA%B0%88%EB%A6%AC%EB%8A%94-resolve-reject
- https://hi-zini.tistory.com/entry/%EB%B9%84%EB%8F%99%EA%B8%B0%EC%A0%81-%EB%B0%A9%EC%8B%9D-%EC%B2%98%EB%A6%AC-%EB%B0%A9%EB%B2%95-Callback-Promise-async-ahttps://youtube.com/watch?v=aoQSOZfz3vQ&si=WzikvxgZPamrT-pFwait
- https://youtube.com/watch?v=aoQSOZfz3vQ&si=WzikvxgZPamrT-pF
강의를 들을 때는 이해가 그렇게 잘 가는데, 직접 코드짜서 응용하라하면 말하는감자 그 자체
Boo-yah