인프런 커뮤니티 질문&답변

안녕하세요 캡틴판교님

제가 비동기처리에 관해서 공부중인데 질문드리고 싶습니다.

본 강의를 완강했지만, 지금 드리는 질문은 본강의와는 내용이 멀지만 캡틴판교님께 질문드릴 다른 방법이 없어 여기서 조심스럽게 작성합니다.

 

캡틴판교님의 블로그 "비동기 처리 시리즈 3편" 글 모두 읽고

직접 테스트하고, 구글링하면서 이해하려고 했는데 풀리지않는 의문점이 생겼습니다.

 

일단 제가 비동기 처리를 이해한 바로는

동기식 처리는 해당 코드의 실행이 끝나야(요청의 응답이 있어야) 다음 코드를 실행하고

비동기식 처리는 해당 코드의 실행이 끝나지 않아도(요청의 응답이 아직 안와도) 다음 코드를 실행하는 것으로 이해했습니다.

그리고 자바스크립트는 기본적으로 동기식으로 수행하는데

이를 비동기식 처리가 필요한 부분에 async를 쓰고 그 안에 await를 이용하여 작성하는 것입니다.

 

그런데 여기서 궁금증이 생겨 테스트를 하게되었습니다.

1. 기본 동기식 작성

function fetchUser() {
  var url = "https://jsonplaceholder.typicode.com/users/1";
  return fetch(url).then(function (response) {
    return response.json();
  });
}

function fetchTodo() {
  var url = "https://jsonplaceholder.typicode.com/todos/1";
  return fetch(url).then(function (response) {
    return response.json();
  });
}

function logTodoTitle() {
  console.log("START");
  var user = fetchUser();
  console.log("fetchUser DONE", user.id);
  if (user.id === 1) {
    var todo = fetchTodo();
    console.log(todo.title); // delectus aut autem
  }
  console.log("END");
}

logTodoTitle();
// START
// fetchUser DONE undefined
// END

2. async만 사용하여 작성

function fetchUser() {
  var url = "https://jsonplaceholder.typicode.com/users/1";
  return fetch(url).then(function (response) {
    return response.json();
  });
}

function fetchTodo() {
  var url = "https://jsonplaceholder.typicode.com/todos/1";
  return fetch(url).then(function (response) {
    return response.json();
  });
}

async function logTodoTitle() {
  console.log("START");
  var user = fetchUser();
  console.log("fetchUser DONE", user.id);
  if (user.id === 1) {
    var todo = fetchTodo();
    console.log(todo.title); // delectus aut autem
  }
  console.log("END");
}

logTodoTitle();
// START
// fetchUser DONE undefined
// END

3. async + await 사용하여 작성

function fetchUser() {
  var url = "https://jsonplaceholder.typicode.com/users/1";
  return fetch(url).then(function (response) {
    return response.json();
  });
}

function fetchTodo() {
  var url = "https://jsonplaceholder.typicode.com/todos/1";
  return fetch(url).then(function (response) {
    return response.json();
  });
}

async function logTodoTitle() {
  console.log("START");
  var user = await fetchUser();
  console.log("fetchUser DONE", user.id);
  if (user.id === 1) {
    var todo = await fetchTodo();
    console.log(todo.title); // delectus aut autem
  }
  console.log("END");
}

logTodoTitle();
// START
// fetchUser DONE 1
// delectus aut autem
// END

 

여기서 왜 1.동기식 처리가 왜 2.async만 작성한 코드의 결과와 같은 지 이해가 되지 않습니다

이러한 부분에 관하여 캡틴판교님의 의견을 듣고 싶은 마음이 가득합니다.

행여나 제가 어리석게 잘못 알고 있는 내용이나 문제점이 있다면 소중한 가르침을 부탁드립니다.

 

마지막으로 프로젝트를 하고 나면 코드가 직관적이지 않고 기능만 실행하기 위해 짜여진 코드 같아 고민이 있습니다.

그래서 로버트 C.마틴의 클린코드 책을 읽고 적용해볼까 고민을 해보았지만, 진유림님의 실무에서 바로 쓰는 Frontend Clean Code 를 보고 프론트엔드에 좀 더 적합한 학습 방법이 있지 않을까 싶어 더 찾아보았더니 캡틴판교님의  멀티캠퍼스에서 활동하신것 보고 (현재는 영상을 볼수없고 공고만 다른곳에서 발견) 캡틴판교님이 생각하시는 프론트엔드 클린코드는 어떤것이고 어떻게 학습하면 좋을 지 궁금하여 질문을 드립니다.