82일: #100DaysofCode - 도움을 받고 문제가 해결됨

3426 단어
오늘은 좋은 날이었다. 나는 오늘 아침에 일어나서 내가 어려움을 겪고 있는 문제를 해결하는 데 도움을 준 사람과 회의를 가졌습니다.




나를 도와준 사람은 익명을 유지하도록 요청했고 Unsplash gem을 반복하고 Ruby 대신 Javascript를 사용하여 표시하는 방법을 보여주면서 시간을 보냈습니다.

먼저 Unsplash gem의 응답을 사진 컨트롤러의 변수에 저장했습니다.
@photos = Unsplash::Photo.search("cats")
그런 다음 보기 내에서 응답을 반복하여 필요한 것을 얻었습니다. (리팩토링할 때 뷰의 모든 논리를 도우미로 옮길 계획입니다.)
또한 javascript/jquery에서 eventListener로 참조할 수 있도록 체크박스에 class를, 제출 버튼에 id를 추가했습니다.

 <% @photos.each do |p| %>
            <img src="<%= p["urls"].full %>" alt="random" ><br>
            <div><p> <%= p["alt_description"] %> </p></div><br>
            <%= check_box_tag "data", 1, false, data: {url: p["urls"].full, description: p["alt_description"]}, class: "add-photo"  %>
    <% end %>
  <button id="submit"> Submit </button>
application.js 내에서 로드 시 실행되는 초기 함수를 추가했습니다. add-photo 클래스에 click eventListener를 추가하고 URL과 설명을 배열에 저장했습니다.

$(document).on("turbolinks:load", function() {
    const photos = []
    $( ".add-photo" ).click(function(e) {
        const photo = {url: e.target.dataset.url, quote: e.target.dataset.description }
        photos.push(photo)
    });

그런 다음 사진 개체를 해시에 저장하고 /photos에 게시 요청을 가져오는 제출 버튼에 click eventListener를 추가했습니다.

    $("#submit").click(function(e){
    fetch('/photos', {
        method: 'POST', // or 'PUT'
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({data: photos}),
        })
        .then(response => response.json())
        .then(data => {
        console.log('Success:', data);
        })
        .catch((error) => {
        console.error('Error:', error);
        });
    })
})

내 사진 컨트롤러 내의 생성 방법에 byebug를 넣었고 IT가 작동했습니다. 프로젝트를 진행하는 데 필요한 모든 정보가 있었습니다.

그들의 도움에 너무 감사하고 그들의 도움이 없었다면 제 프로젝트를 단시간에 진행할 수 없었을 것임을 압니다.


진심으로 Brittany / 사진 앱






새로운 것을 배웠다는 사실이 기쁘고 다음 주에 자바스크립트로 넘어가면서 부트캠프를 통해 계속 배울 수 있어서 신이 났습니다.

나는 이번 주말에 이 프로젝트를 일요일까지 끝낼 수 있다는 큰 희망을 가지고 계속할 것입니다.

언제나처럼 읽어주셔서 감사합니다!

진정으로,
브르타뉴

오늘의 노래:

좋은 웹페이지 즐겨찾기