inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

웹 프론트엔드를 위한 자바스크립트 첫걸음

[학습자료] 강의 대본 웹 페이지

비동기 처리 질문있습니다.

해결된 질문

329

초록천사

작성한 질문수 24

1

🚨질문 작성법 및 안내사항

질문 작성법
- 몇 섹션의 어떠한 강의에 대한 질문인지 작성해주세요. (ex. 섹션2 조건문에 대한 질문)
- 질문은 최대한 구체적으로 작성해주세요.
- 비슷한 질문이 올라와있는지 확인해주세요.
- 코드가 포함된 질문은 아래와 같이 코드블록을 사용해주세요.

console.log("hello world");


안내사항
- 질문에 대한 답변은 보통 주말, 공휴일을 제외한 평일 오전 시간에 답변해드립니다.

 

 

강의에서 종료 라는 문장을 정말 이 코드가 종료됐을 때 출력하고싶다면, 우리는 콜백함수를 이용해 해당 코드를 인수로 넘겨주어야합니다. 이 부분이 이해가 되지 않습니다. 콜백함수로 왜 넘겨줘야하는지 헷갈립니다.

 

<이렇게는 안되나요>

const work = () => {
2  setTimeout(() => {
3    console.log("3초만 기다리세요");
4    console.log("종료");
5  }, 3000);
6};
7

 

 

const work = (callback) => {
2  setTimeout(() => {
3    console.log("3초만 기다리세요");
4    callback();
5  }, 3000);
6};
7
8 work(() => {
9  console.log("종료");
10});

 

setTimeout(() => {
2    console.log("3초만 기다리세요");
3}, 3000);
4
5console.log("종료");

javascript dom

답변 1

0

효빈 Hyobin

안녕하세요 :) 우선 좋은 질문 작성해주셔서 감사드립니다.

답변부터 드리자만 초록천사님이 제안해주신 방법으로 작성해도 코드가 알맞게 작동합니다.

const work = () => {
  setTimeout(() => {
    console.log("3초만 기다리세요");
    console.log("종료");
  }, 3000);
};

 

강의 [함수] 챕터에서 배웠던 것처럼 자바스크립트에서 함수는 동일한 동작을 하는 코드들을 하나로 묶어서 하나의 명령으로 실행할 수 있게 도와주는 기능입니다. 비록 예시에서는 "종료"라는 단어를 출력하는 한줄의 코드를 콜백함수로 넘겨주었으나, 어떠한 기능을 하는 긴 코드가 작성되어있는 함수를 비동기 함수가 종료된 이후에 실행되게 하고 싶다면 함수를 콜백함수로 전달해주어야합니다.

이렇게 콜백함수를 사용하게 되면 비동기 처리 방식의 문제점 중 하나인 "실행 순서를 보장하지 못한다"를 해결할 수 있습니다.

브라우져 호환성 문의

0

68

2

4-23 Promise객체 12:05 코드 질문

0

60

2

<div class="bookmark-item-add-btn"> 질문

0

58

2

랜덤이미지

0

61

2

"6. 1. (최신 버전) 자바스크립트 코딩 환경 설정"의 화면이 정상적으로 출력되지 않습니다

1

72

2

북마크바 디폴트가 "북마크 열기"로 뜹니다.

1

132

1

홈페이지 이미지 추가 방법 문의드립니다!

0

116

2

북마크 추가 버튼 활성화 오류 문의드립니다!

0

115

1

북마크바 배치 문의드립니다!

0

115

2

명언 설정하는데 위치설정 오류가 있어요!

0

143

2

4:45 부터 무한로딩되어 재생이 안됩니다ㅠ

1

105

1

BigInt Type 에 대하여

0

89

1

계속 헷갈리네요. 이게 맞나요?

1

149

2

섹션 7 - 7 프로젝트 적용하기

1

121

2

섹션7 - 7 프로젝트 적용하기

0

89

1

섹션7-4 api사용해서 명언 설정하기

0

136

2

6분 53초 질문입니당

1

119

2

왜 전부다 div태그로 만드는지 궁금합니다.

1

234

2

[수업질문] bookmark.js에서

0

130

2

최종 프로젝트 적용

0

184

2

append&appendChild+메소드 호출

1

139

1

코드샌드박스 업데이트

0

171

2

async pending상태의 promise객체

1

153

2

화면이 다릅니다.

1

179

1