Flatiron 네 번째 항목: Vanilla JS 및 Ruby on Rails API

오늘 저는 Ruby on Rails를 백엔드의 API로 사용하고 일반적인 자바스크립트 전단을 사용하여flatiron의 네 번째 프로젝트를 완성했습니다.Witchy 옷장은 옷과 슈트를 만들 수 있는 벽장식 워터 클리닉이다.그 목적은 사람들이 옷에 얼마를 썼는지, 옷을 얼마나 자주 사용했는지, 그리고 옷을 창조했는지 깨닫게 하는 것이다.이것은 333, 4x4 캡슐, 또는 기타 미니멀리즘 벽장을 시도하는 위대한 보충 도구가 될 것이다.
이 프로젝트는 가독성과 중용성을 위한 조직 코드의 가장 기본적인 요구부터 물품과 장비를 편집하는 기능 패치를 만드는 데 대한 더욱 격렬한 요구까지 많은 도전이 있다.그러나 나에게 있어서 지금까지 가장 큰 도전은 이 어려운 패치 중에서 이미 이 장비에 속하는 물품의 복선상자를 만들고 예선하며 데이터를 백엔드에 전달하는 것이다.이 과정은 자바스크립트를 이해하는 데 있어 Flatiron이 말한 3대 기둥인 이벤트 식별, Dom 조작과 서버와의 통신을 포함한다.
의상 편집의 첫 번째 단계는 의상 클래스에 편집 단추를 추가하는 것입니다. 이 단추는 의상 카드에 있습니다.그리고 나는 이 버튼을 의상 모양과 속성과 함께 의상 관리자에게 전달했다.
소서러 옷장 앞부분/src/세트.js
의상 한 벌을 위한 카드 제작:

  const editOutfitForm = document.createElement('form')
    OutfitForm.outfitEditHandler(editBtn, editOutfitForm, name, likes, this.outfit.items)

나는 새 옷을 만들고 표를 편집하는 일을 맡는 수업을 또 했다.여기에 편집 Btn에 이벤트 탐지기가 추가되었습니다. 블록을 표시하고 다른 함수를 호출해서 폼의 내용을 보여 줍니다.
src/form.js

static outfitEditHandler(editBtn, editOutfitForm, name, likes, items){
    editBtn.addEventListener("click", () => {
      modal.style.display = "block"
      modalContent.append(editOutfitForm)
      OutfitForm.renderFormContent(editOutfitForm, name, likes, items)
    })
  } . . .}


static renderFormContent(editOutfitForm, name, likes, selectedItems, outfitForm){

...

 const itemsCheckContainer = document.createElement('div')
    const itemsCheck = document.createElement('div')
    itemsCheck.className = "form-check-container"
    const checkboxLabel = document.createElement('label')
    checkboxLabel.innerText = "Pick your clothes for your Outfit:"

    ApiService.getAllItems(selectedItems)
      .then(items => {
        items.forEach(item => {
          let inputLabelDiv = document.createElement('div')
          inputLabelDiv.className = 'form-check'
          let checkbox = document.createElement('input')
          checkbox.className = "checks form-check-input"
          checkbox.type = "checkbox"
          checkbox.id = item.id
          checkbox.name = item.name
          let checkLabel = document.createElement('label')
          checkLabel.className = 'form-check-label'
          checkLabel.innerText = item.name
          if(selectedItems){
            selectedItems.forEach( item => {
              if(item.name === checkbox.name){
                checkbox.checked = true
              }
            })
          }
          inputLabelDiv.append(checkbox, checkLabel)
          itemsCheck.appendChild(inputLabelDiv)
        })
      })

      itemsCheckContainer.append(checkboxLabel, itemsCheck)

    const submitBtn = document.createElement('button')
    submitBtn.className = 'btn'
    submitBtn.innerText = "Submit"

    if(editOutfitForm){
      editOutfitForm.append(outfitNameDiv, outfitLikesDiv, itemsCheckContainer, submitBtn)
    } else if (outfitForm) {
      outfitForm.append(outfitNameDiv, outfitLikesDiv, itemsCheckContainer, submitBtn)
    }
  }

render form content 방법에서 모든 항목과 체크 상자와 탭을 저장하기 위해div를 만들었습니다.동적으로 만들기 위해 ApiService라는 어댑터 클래스에 요청을 보냈습니다.js는 데이터베이스에 있는 모든 항목을 가져옵니다.모든 항목을 가져오려면 가져오기 요청을 통해 백엔드에 도착합니다.덧붙여 말하자면, 이것은 나에게 비동기성을 얻는 데 있어서 귀중한 경험이다. 나는 처음에 Api 서비스에 모든 항목을 가져오는 요청을 보냈고, 모든 항목을 하나의 그룹으로 미루어 요청 외에 접근하려고 했다. 결과는 항상 비어 있었다. 함수의 나머지 부분은 먼저 실행되기 때문이다. methodo에 복선상자를 만들고 추가하는 모든 요소를 통해 이 문제를 해결했다.추출 요청을 호출합니다.)그리고 나는 forEach로 모든 항목을 교체하고 모든 항목에 탭과 체크 상자를 만든다.그 교체에서 나는 값을 미리 선택하기 위해 두 번째 교체를 진행했다.

if(selectedItems){
            selectedItems.forEach( item => {
              if(item.name === checkbox.name){
                checkbox.checked = true
              }
            })

선택한 항목이 카드에서 전달됩니다. 아래와 같습니다.장비.항목 ID 및 이름 액세스 권한이 부여된 항목입니다.그래서 나는 한 가지 물건을 평가할 수 있다.이름이 확인란과 일치합니다.생성된 이름을 선택으로 표시합니다.
그 다음에 Dom 요소를 폼에 추가합니다. 이 점을 하려면 편집 폼이나 OutfightForm에 전송되었는지 확인해야 합니다. 왜냐하면 폼 내용을 반복해서 사용해서 장비를 만들고 편집했기 때문입니다.
모든 것이 창조되고 모태와 형식에 부가되면 의상에 나타난다.js I는 제출할 때 이벤트 탐지기를 폼에 추가하고 기본 동작을 막습니다. GET로 페이지 리셋을 요청하지 않습니다.여기서 가장 까다로운 부분은 모든 검사를 받는 항목이다.이것은 우리 팀을 이끄는 데 몇 시간의 디버깅과 도움을 썼다.모든 항목의 복선 상자에 'checks' 클래스가 있기 때문에, 모든 선택한 항목의 그룹을 검사할 수 있습니다.그리고 검사가 되었는지 여부에 따라 필터를 통해 새 checked Items 그룹을 만들었습니다.다음에 checkedItems를 서버에 데이터를 전달하기 위해 새 항목 ID 그룹에 비추겠습니다.
소서러 옷장 앞부분/src/세트.js
CardContent 함수

    editOutfitForm.addEventListener("submit", (e) => {
      e.preventDefault();
      const checks = Array.from(e.target.querySelectorAll(".checks"))
      const checkedItems = checks.filter( item => item.checked )
      let itemIdsArray = checkedItems.map( item => parseInt(item.id))
      const editedOutfit = {
        name: e.target.name.value,
        likes: e.target.likes.value,
        item_ids: itemIdsArray
      }
      this.updateOutfitHandler(editedOutfit, card)

그리고 편집된 장비 값이 있는 대상을 Update OutfithHandler에 전달하고 후자는 장비 id와 장비 대상을 받아서 Api 서비스 클래스의 업데이트 Outfit 함수에 전달합니다.
소서러 옷장 앞부분/src/세트.js

  updateOutfitHandler(editedOutfit, card){
    ApiService.updateOutfit(this.outfit.id, editedOutfit)
    .then(. . . )}

소서러 옷장 앞면/src/APi 서비스.js

  static updateOutfit(outfitId, outfit){
    return fetch(`${OUTFITS_URL}/${outfitId}`, {
      method: 'PATCH',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(outfit)
    })
    .then(res => res.json())
  }

fetch는 데이터를 업데이트 작업에 문자열로 보낼 것을 요청합니다. 이것은 필수적입니다. JSON은 텍스트 기반 데이터 형식이기 때문에 HTTP를 통해 요청한 데이터는 텍스트 기반 통신 프로토콜이 필요합니다.
witchy 옷장 뒷면/응용 프로그램/컨트롤러/세트/컨트롤러.rb

  def update
      outfit = Outfit.find_by(id: params[:id])
      if outfit.update(outfit_params)
        render json: OutfitSerializer.new(outfit).to_serialized_json
      else
        render json: {errors: outfit.errors.full_messages.to_sentence}, status: :unprocessable_entity
      end
  end

private

  def outfit_params
    params.permit(:name, :likes, :item_ids => [])
  end 

여기서 나는 내 마음 깊은 곳에 깊이 들어가야만 장비 파라미터가 하나의 빈 그룹을 가리키며 여러 개의 물품을 받아들여야 한다는 것을 기억할 수 있다.
소서러 옷장 앞부분/src/세트.js

  updateOutfitHandler(editedOutfit, card){
    ApiService.updateOutfit(this.outfit.id, editedOutfit)
    .then(updatedOutfit => {
      if (updatedOutfit.errors){
        alert(updatedOutfit.errors)
      } else {
        this.outfit = updatedOutfit
        card.innerHTML = ""
        this.cardContent(card)
        modal.style.display = "none"
        modal.querySelector("form").remove()
      }
    })
    .catch(error => alert(error))
}

서버에서 모든 내용이 성공적으로 업데이트되면 페이지를 새로 고치지 않고 Dom을 처리하여 이러한 변경 사항을 반영해야 합니다.우선, 나는 검증 오류를 검사했고, 어떤 원인으로 고장이 났을 때 사용자에게 알렸다.만약 성공한다면, 그것은 이것을 설정할 것이다.업데이트된 데이터에 장착하면 구조 함수 중 특정 장비의 데이터를 변경합니다.그리고 두 번 렌더링되지 않도록 카드의 inner HTML을 지워야 합니다.그리고 나는 편집된 특정 카드의 카드 내용을 만드는 방법을 사용했다.모드를 닫고 창을 삭제합니다.
전체 과정에서 나는 코드 조직에 관한 많은 지식을 배웠다.프로젝트를 구축하여 고장을 성공적으로 제거할 때에도 이 점은 매우 중요하다. 특히 대량의 데이터를 전달하고 대량의 함수를 호출할 때이다.
나는 또한 이 응용 프로그램에 의류 랜덤화기를 포함하여 그 환경과 사회적 영향, 그리고 사용자 신분 검증에 따라 의류를 평가하는 시스템을 만들고 싶다.하지만 그건 다른 날이야!
사용자의 각도에서 제video demo 프로젝트를 마음대로 보고 방문backend 또는frontendgithub에서 코드를 확인하여 호기심을 충족시키거나 도움을 원하신다면.