비동기

이 게시물에서:

The Problem

Uncovering the Issue

More to come

나는 비동기의 세계와 그것을 탐색하는 데 도움이 되는 Javascript 기능에 대해 연구하고 게시하기 위해 몇 가지 생각을 하고 있습니다.

그러나 항상 그렇듯이 더 시급한 느낌이 드는 무언가가 방해가 되며 더 이상 할 수 없을 때까지 미루게 됩니다. 그 순간이 오늘 나에게 다가왔다.

이 글을 쓸 때 내 의도는 내가 직면하고 해결한 문제를 설명하고 그것을 처리하기 위한 대안 전략에 대해 읽고 보고하는 것입니다. 나는 약속과 특히 async/await를 다루기를 희망합니다.

문제

내가 고심했던 기능은 다음과 같습니다.

아참, 여기에서 사용한 방식git에 정말 만족합니다. 나는 내가 다시 방문하고 싶다고 생각한 흥미로운 점을 기록하기 위해 커밋을 사용했습니다. 문제를 해결하고 원래 상태에 대해 게시하기로 결정한 후 커밋 기록으로 롤백하여 여기에 붙여넣는 이전 상태를 찾을 수 있었습니다.

app.post('/api/create', (req, res) => {
  var email = req.oidc.user.email 
  //below should really be a 'find one query'
  var userName = fetchUsername.getUserNameFromEmail(email, (err,data)=>{
    if (err){
      throw (err)
    } else {
      console.log('test', data[0].username)
      return data[0].username
    }
  })
  console.log(userName)
  var title = req.body.title
  var text = req.body.text
  const author = {userName:userName}
  fetch.createPost(title, text, author, (err,data)=>{
  })

})

블로그 게시물을 제출한 후 React는 UserName 문제로 인해 피드(새 게시물 포함)를 렌더링할 때 오류를 발생시킵니다. 수동 쿼리를 수행하여 db를 조사한 결과 userName 필드 입력 없이 문서가 저장되고 있었다고 합니다.

나는 한 가지 분명한 문제를 해결하기 위해 시간을 보냈습니다. 바로 userName을 요구하도록 블로그 스키마를 변경하는 것입니다. 그러나 그것은 내가 기꺼이 커밋할 수 있는 토끼 구멍이었기 때문에 누락된 사용자 이름의 특성을 파악하는 데 다시 초점을 맞췄습니다.

이메일 주소에 오류가 있는지 확인하기 위해 일부 로깅을 수행했는데 이메일 주소를 잘못 읽고 큰따옴표로 묶어 저장한 것으로 나타났습니다. 그러나 그것이 내 문제의 원인이 아니었습니다. 나는 그 작은 버그를 수정하고 검색을 계속했습니다.

여기서 저는 데이터베이스 쿼리를 변수에 반환하려고 시도했음을 지적하겠습니다. 제가 인식한 것은 Node 세계에서는 비표준이지만 표준 코딩 관행으로 편안하게 수행할 수 있습니다. 디버깅 프로세스의 이 시점에서 이것이 내 문제의 원인이라고 의심하기 시작했습니다.

문제 발견

내 데이터 가져오기 프로그램에서 반환된 내용을 확인하기 위해 몇 가지 로깅 문(위 코드에 표시됨)을 던졌고 다음 결과를 얻었습니다.

undefined
test zach

이것은 나에게 무엇을 말해주는가?

비동기가 발생합니다.

데이터 가져오기 프로그램이 데이터베이스를 쿼리하는 동안 인터프리터는 코드를 통해 아래로 이동하고 행 120: console.log(userName) 에 도달하면 데이터가 이 변수에 값을 주기 위해 반환되지 않았으므로 대신 정의되지 않았습니다. 콘솔에 대한 결과 출력을 보니 유감스럽게도 undefined가 userName 값으로 createPost 함수에 입력됩니다.

결국 쿼리 데이터는 test Zach 문에서 볼 수 있듯이 반환되지만 이 시점에서는 너무 늦습니다.

앞으로 더

나는 내 솔루션이나 내가 존재한다고 생각하는 대안 전략에 도달하지 못했습니다. 다음 포스트를 위해 저장하겠습니다.