상세 컨텐츠

본문 제목

080224 TILawait, async , try , catch

TIL

by wangmandoo1 2024. 8. 2. 12:59

본문

걷기반 수업 

 

lice


const numbers =[1,2,3,4,5]

 

나머지만 남게 하는 , 

 

인자 주개 , 넘버 ,넘버 ,

뒷 넘버에서 -1 한다 

 

slice(1,3 )

 

2,3 

 

start 와 end 를 입력 

 

인덱스 배열의 몇번쨰를 의미 하냐 

 

3전 까지 짜르겠다 

 

3번쨰인덱스 전까지 짜른다 . 

 

짤라낸다 

 

 

 

some 

 

numbers.some() 

함수가 들어감 . 

 

numbers.some (function (n) {

conesole.log (n) ;

return n===2 ;

} 

 

매개 변수 ,  

 

 

주어진 조건을 하나라도 만족하는것이 있냐 라고 물어 보는 것이 some

존재 하냐 아니냐 . 만 물어볼떄 . 

 

fcunstion (person){

 

fi(person.age>=30) {

return true;

}else {

return flase;
]

});

console.log (result) ;

리턴문 우측에는들어가야함

const resutl =people.some (function (person) {
return persone.age >30 ;  

});

 

모든 사람이 30이상이니 ?
const result =people.every(function (person) {

return persone.age >= 30;

 

every. 는 논리 곱 연산자 다 

some 과 every 는 똑같다 

 

 

비동기 . !!!!!!!

 

const a=1 ;

const b=2 ;

 

console.log (a);

console.log (b);

 

동기적 처리 . 

 

 

 

—————————

기상청 날.씨 데이터 가져와서 콘솔로그 찍는 함수 호출하기  () ; 

배달의 민족리뷰데이터받아오기받아와서 콘솔로그찍는함수호출하기 ();

 

 

ㄱ;ㅣ상청이 데이터 가지고있음. 배민 , 

 

순서 보장 안됨 . 

가장 먼저 주는 사람이. . 데이터 먼저 준다 

 

firebase 에서 데이터 받아오는 것도 비동기 다. 

외부로 부터 데이터를 받아 올때 . 

 

—————————————————
promise 

약속 

 

규칙을 정할려고 . 


비동기 처리를 할때 , promise 를 쓴다 

 

이걸 믿고 니가. 코드를 짜 . 

 

요청 중 성공 실패

pending, fulfiled rejected

프로미스 3. 가지상태
대기 중(Pending): 일이 아직 끝나지 않은 상태에요.

이행됨(Fulfilled): 일이 성공적으로 끝난 상태에요.

실패함(Rejected): 일이 실패한 상태에요.

 

 

코드에서 비동기 관련 처리를 한다 

promise 객체를 이용하여 코딩을 한다 


promise 를 사용 하는 방법
then , fetch 사용 

 

 

async /await 사용 

 

async 함수안에서만 사용 

await 프로미스가 해결될때 까지 기다려줌 

 

await 함수는 async 함수안에서만 쓸 수있다 . 

에러 처리를 간단하게 하고 싶을 때: try와 catch 블록을 사용해서 async 함수 안에서 발생하는 오류를 쉽게 처리할 수 있어요.


함수를 호출 할 떄 , await 

 

fetch , 알들을 품고 있는 외부로 부터 데이터를 가지고 와서 품고있는 

데이터를 외부에 요청 , 

 

fetch 쓰는 방법 

tecth () 괄호 열고닫으면됨 

fetch(“”) 

 

fetch  프로미스를 반환 하는 함수기 때문에 나중에 결과 값을 가져올수밖에 없다 .

이 요청을 기다려주는것이 필요하다 . 그것이 await 를 넣어준다 .
await 데이터를 가지고 올떄까지 기다린다 .
fetch. 를 기다려준다

await 가 비동이 앞에 붙으면 풀필을 , 펜딩이 아닐 떄까지 어웨이트가 멱살을 잡고 있는다 . 

 

정보가 주고 받아야 하는데 요청만 해서 , 어웨이트를 쓴다 . 

정보요총 어 ? wait
fetch 너 왜이트 기둘리 .

3초 후에 풀필드가 완성. 

 

비동기 함수를 실행하는 함 수를 사용하는이유 

외부로 부터 데이터를 가지고 올떄 사용 . 

받아온것을 가지고 태그를 만들어야 해서 . 

 

기다려줘 .. 요청을 … 

 

fetch 앞에 await 만 붙혀주면된다

 

 

await 를 가지고 있는 함수는 async 를

 

어웨이트를 넣고 싶으면 함수 앞에 async 키워드를 넣어주어야한다 

 

 

async function printtest () {

const result = await fetch (url ) 

 

console..log(result);

}

 

printtest() ; 

 

———————

 

fetch 로 가져온것은 

 

 

늘 .json 과 같이 써줘야한다. 

 

 

 

정보를 주고 받을 떄는 json 이라는 형식으로 주고. 받는다 . 

json.

fetch &.json 은 같이 쓰인다 .메모


json은 어떤것의 메소드 .
뭔가.json  

result.json ()


.json  할 때도 await 해야한다 

.json 은 프로미스를 반환 하기 때문에 await 가 필요하다 

 

 

.json 도 비동기 라서 시간이 조금 걸린다 

완료될떄까지 기달려줘야한다 . 

 

.json 도 완성된 결과를 받으려면 기다려야하는구나 

비동기적으로 동작하는구나 ! 

 

fetch , json 프로미스를 반환 하기 때문에 await 가 필요하다 . 
그래야console.log 해서 답을 받을 수있다 .


————————————
/ 함수 만들기

async function printTest() {

//외부로부터 데이터 요청 fetch 사용, await 비동기 함수 앞에 붙여서 밑으로 죽어도 안내려가게 함.

const result = await fetch("https://jsonplaceholder.typicode.com/users");

// result는 promise 객체

// JSON이라는 형태로 가져와야함 fetch + .JSON

const users = await result.json(); // jSON도 promise를 반환하기 때문에 얘도 기다려줘야 함.비동기임

console.log(users);

}

// 함수 호출하기

printTest();

————————

결과물을 가지고 뿌리기 .
후속 처리 .

에러가 났을 떄 .

성공 할수도 있고 실패할수도있는 것을 가지고 사용 

url 이 안.될 수도 있으니  제어권이 나한테 없다 .
외부사항에 따라서 , 될수도 있고 안될수도 있으니 

오류 를 체크하는것이 필요하다 

 

 

안전빵으로 , 

제어권이 나한테 없다 . 



try 

한번 시도해보자 이게 되는 지 안되는지 . 

 

 

try {

 

시도하고 ~ 

 

}

}catch {(문제가 발생하면 잡아라 )

} 

 

 

try -catch 블럭 

 

try 안에서 문제가 생기면 catch 로 간다 

 

 

aatch (error) { 

 

if (error.에러의 종류가 ====“심각한오류 “
개발자한ㅌ ㅔ 알려주는 로직 () ;  

console.log(error) 

 

}


async, await . try , catch 까지 배움 . 



오늘은 걷기반 마지막 , 하고 4시에 다시 보충 수업 하고 

 

알고리즘 특강 까지 매우 바빳다 .. 

 

 

드디어 firebase 데이터 가져오고 

 

css 수정 하고 , 

 

나머지 영화 클릭 하면 다시 , 정보 받아오는 걸 , 해야된다 

 

내일 도 일 끝나고 , 코딩 할 생각 이다 ..

 

그래도 firebase 기초 문서 보고 

 

어찌저찌 잘 따라해서 , 

 

작성자 창에 입력 하면 firestore 로 입력이되는 것 까지 확인 했다 . 

 

후 ..뿌듯 .. 

 

뭔가 계속 에러가 나서 

 

계속 골머리 앓았는데 그래도 ,

 

끝내서 뿌듯 하다 ! 

 

주말동안에 팀프로젝트 를 최대한 끝낼 생각이다 

 

 

게속 commit 하고 푸쉬 해서 충돌을 적개 만 들 예정이다 

 

 

'TIL' 카테고리의 다른 글

080624 til css 반응형  (0) 2024.08.06
080524 til firebase 데이터 수정 ,삭제하기  (0) 2024.08.05
080124 til  (0) 2024.08.02
073124 til  (0) 2024.07.31
240730Til  (0) 2024.07.30

관련글 더보기