DELETE 메서드

이것은 기본적으로 내 마지막 블로그 게시물의 후속 조치입니다. https://evanrpavone.github.io/the_struggle_was_real

나는 그 당시 엉망이었고, 거의 같은 혼란에 빠졌지만 마침내 내 문제가 무엇인지 알아 냈습니다!

문제

백엔드 파괴 방법 및 경로가 제대로 설정되지 않았습니다.

프론트엔드에서 제거 버튼을 포함하여 생성된 카드가 이벤트 리스너를 추가할 때 인식되지 않았습니다.

I.D 속성이 사용되지 않아야 합니다.

수정 사항

백엔드

내 레일 API의 백엔드부터 시작하겠습니다. 내 파괴 방법과 경로가 제대로 설정되지 않았습니다. 모든 양조장을 가져오는 destroy 메소드를 만든 다음 destroy_all 메소드를 사용하여 양조장 API 내부의 모든 데이터를 삭제했습니다. 좋아하는 다른 모델에 대해서도 같은 작업을 수행해야 했습니다.


파괴 방법

    def destroy
        breweries = Brewery.all
        if breweries.destroy_all
            render json: { message: 'Breweries deleted' }
        else
            render json: { errors: 
            breweries.errors.full_messages }
        end
    end

노선

경로에 대해. 각 모델 경로에 delete HTTP 메서드를 추가해야 했습니다.

delete '/breweries' => 'breweries#destroy'
delete '/favorites' => 'favorites#destroy'

프런트 엔드

이제 프론트 엔드의 경우 JavaScript와 관련하여 제 기술이 그다지 좋지 않습니다. 문제가 바로 눈앞에 있음에도 불구하고 문제가 무엇인지 파악하는 데 매우 오랜 시간을 보냈습니다.


이벤트 리스너를 삭제 버튼에 바인딩

원래는 양조장 카드가 생성될 때 내부에 삭제 버튼이 렌더링되어 있었습니다. 이벤트 리스너가 그것을 인식하지 못해서 내가 한 것은 html 파일에 모든 맥주 양조장 지우기 버튼을 추가하고 대신 이벤트 리스너를 해당 버튼에 바인딩하는 것이었습니다. 지금 생각해보면 카드 내부에서 작동하게 만들 수도 있었지만 지금은 그대로 두겠습니다. 이벤트 리스너가 작동하도록 한 후에는 delete 메소드가 작동하도록 해야 했습니다. 이것은 그렇게 어렵지 않았습니다. 내가 해야 할 일은 removeBreweryCard 메서드와 removeBreweryFromApi 메서드를 호출하는 removeBreweries 클래스 메서드를 만드는 것뿐이었습니다(아마도 이것을 추가할 필요는 없었을 것입니다). 이 클래스 메소드는 또한 API에서 즐겨찾기를 삭제하기 위해 removeFavorites 메소드를 호출해야 했습니다.

    removeBreweries() {
        fetch(this.baseURL, {
            method: "DELETE",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json"
            },
        })
        this.removeBreweryCards();
        this.deleteBreweryFromApi();
        this.removeFavorites();
    }

    removeBreweryCards() {
        const allCards = document.querySelector("
                         #brewery-card-container");
        allCards.innerHTML = "";
    }

    deleteBreweryFromApi() {
        return fetch(this.baseURL)
        .then(resp => resp.json())
        .catch(error => console.log("Error: " + error));
    }

    removeFavorites() {
        console.log("Hello")
        fetch(this.favoritesURL, {
            method: "DELETE",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json"
            },
        })
        console.log("removing favorites");
        this.removeFavoritesFromApi();
        console.log("Removing All Favorites Now");
    }

이 모든 것이 계획대로 정확하게 작동했으며, 이러한 항목을 추가한 후 삭제 버튼에 다른 많은 작업을 수행할 필요가 없었습니다.


미사용 속성

그래서 즐겨찾기가 여러 시간 동안 제대로 반복되지 않는 이유를 파악하기 위해 내 코드를 살펴본 후 id 속성이 전혀 사용되지 않는다는 것을 깨달았습니다. 기본적으로 새 양조장을 제출할 때 양조장 이름으로 모든 것을 밀어붙이고 있었는데, 이것이 바로 제가 원했던 것입니다. 잠시 동안 깨닫지 못한 것은 내 POST 메서드가 아닌 생성자의 일부로 ID가 있다는 것입니다. 다음과 같이 양식 데이터를 배열로 푸시했습니다.

this.breweries = []
this.breweries.push(new Brewery(brewery.attributes.id, brewery.attributes.name, brewery.attributes.city, brewery.attributes.state, beers))

const brewery = new Brewery(form[0].value, form[1].value, form[2].value, form[3].value)
// form[0].value was coming back as id but was suppose to be coming back as name
// so it was id: "Brewery Name 1", Name: "City 1", City: "State 1", State: "Favorites"

내가 해야 할 일은 ID를 얻는 모든 곳을 제거하는 것뿐이었고 모든 것이 다른 오류 없이 작동했는데 정말 흥미로웠습니다.

결론

저는 JavaScript에 점점 익숙해지기 시작했습니다. 확실히 제 기본 언어는 아니지만 JavaScript가 더 편해졌습니다. 백엔드와 좀 더 잘 상호 작용하는 방법, 이벤트 리스너 및 객체 지향 JavaScript를 이해하는 방법을 알고 있습니다.