4단계

Phase 4가 끝나고 새로운 프로젝트 주간이 시작됩니다!! 또는 시작되었습니다. & 완료되었습니다. 그러나 그럼에도 불구하고 이 여정을 통해 새로운 통찰력이 생겼고, 내가 새롭게 발견한 지식을 소중한 독자들과 공유하는 것보다 더 좋은 일은 없을 것입니다!

자바스크립트는 어렵다. 자바 스크립트로 시작했지만 언어가 진정한 마인드 벤더 인 경우가 아니라면 주위에 실제 방법이 없습니다 !! 4단계 프로젝트를 설계하는 데 있어 가장 큰 장애물은 어디로 가야 하는지, 무엇을 해야 하는지, 가장 중요한 것은 JAVASCRIPT의 동기 구현을 관리하는 방법이었습니다.

그 전에 Ayana Cotton이라는 훌륭한 Flatiron 강사로부터 배운 이 아름다운 만트라를 공유하고 싶습니다. "어떤 이벤트가 발생하면 어떤 페치를 하고 Dom을 어떤 방식으로 조작하고 싶나요?"이것은 처음부터 끝까지 단방향 트랙에 내 두뇌를 집중시키는 데 도움이되었습니다. 확장하려는 요소에 이벤트 리스너를 추가하고 이벤트가 수신되면 fetch를 사용하여 백엔드를 조작하고 마지막으로 프론트엔드에서 해당 변경 사항을 반영하도록 DOM을 변경합니다. 기억하기 쉽죠?

이제 동기식으로 돌아갑니다. 이것이 의미하는 바는 Javascript가 한 번에 하나씩 작업을 수행한다는 것입니다. 그러나 백엔드 서버를 조작하는 것과 같은 일부 작업에는 시간이 걸립니다. 애플리케이션의 나머지 부분이 하나 이상의 특정 작업을 기다리지 않게 하고 싶기 때문에 우리는 이러한 것을 약속이라고 하는 것을 사용합니다. 약속은 일상 생활에서 기본적으로 자바 스크립트에 우리가 작업을 수행하기로 약속하여 다른 모든 것이 걱정없이로드 될 수 있다고 말하는 일상 생활과 같습니다. Promise가 실패하는 경우에도 catch를 사용하여 해당 실패를 포착하고 관련 작업을 수행합니다.

가져오기 요청은 약속 구문이 가져오기 요청을 하려는 URL을 취하는 간단한 단어 "가져오기"로 결합되는 경우 이 프로세스를 훨씬 쉽게 만듭니다. 반환된 정보로 한 번만 수행하려는 작업은 ".then"을 통해 연결됩니다.

이를 시각화하기 위해 "iRemind"라는 내 응용 프로그램의 가져오기 요청이 있습니다.

 getLists(){
        fetch(this.baseListURL)
        .then(response => response.json())
        .then(lists => {
            lists.data.forEach(list => {
                let newList = new List(list, list.attributes)
                document.querySelector("#list-container").innerHTML += newList.renderList()
            })
            reminderForm.addCreateReminderForm()
        })
    }

여기에서 내 레일 API 백엔드에 저장된 모든 목록을 얻고 싶었습니다.

fetch(this.baseListURL)

이것은 baseListURL이 다른 곳의 전역 상수에 저장된 내 백엔드에 대한 URL인 가져오기 요청입니다.

.then(response => response.json())

다음은 가져오기가 완료되면 내 프로그램에 해당 응답을 json으로 전환하도록 지시하는 연결 작업입니다!

.then(lists => {
            lists.data.forEach(list => {
                let newList = new List(list, list.attributes)
                document.querySelector("#list-container").innerHTML += newList.renderList()
            })
            reminderForm.addCreateReminderForm()
        })
    }

마지막에 있는 나머지 코드는 단순히 json화된 데이터의 이름을 목록으로 지정합니다.

Fetch 요청과 함께 "어떤 이벤트가 발생하면 어떤 종류의 가져오기를 수행한 다음 Dom을 어떤 방식으로 조작하고 싶습니까?"내 이해에 통합되었고 다른 방법보다 훨씬 쉽게 점을 연결했습니다. 바라건대 이것은 당신에게도 약간의 공백을 없앴습니다! 다음 시간까지.