1단계: 포트폴리오 프로젝트

조각을 모으기 전까지는 JavaScript 프로젝트를 구축하는 것이 정말 쉬워 보일 수 있습니다.
나는 실험실 외부의 API에서 html, JavaScript 또는 JSON 데이터에 대해 작업한 적이 없습니다. 나는 주의를 기울일 기회를 얻지 못했을 문제와 세부 사항에 대한 답변을 파악하고 얼마나 섬세하면서도 복잡한 프로그래밍이 있는지 깨닫는 데 많은 시간을 보냈습니다. 할 수 있습니다.
정답을 얻었다고 생각할 때마다 나는 또 다른 문제에 부딪히고 또 다른 버그 의도하지 않은 결과, 그들은 악마가 세부 사항에 있다고 말합니다
그리고 프로그래밍에서 악마/버그는 처리되지 않은 오류/캐치에 있습니다.
그럼 실수에서 우리는 바로 배울 수 있습니까?
내 프로젝트의 아이디어는 포켓몬을 추가, 삭제 또는 좋아할 수 있는 단순하지만 복잡한 포켓몬 카드입니다.
예를 들어 가져오기에 대한 기본 이해를 실현할 때까지 간단한 1분 동안
Fetch API는 요청 및 응답과 같은 HTTP 파이프라인 요소에 액세스하고 조작할 수 있는 JavaScript 인터페이스를 제공한다는 사실만 알고 계십시오. 또한 네트워크를 통해 간단하고 직관적으로 항목을 비동기적으로 가져오는 전역 get() 메서드가 있습니다.



빈 HTML 페이지에서 작업을 시작하기 전까지는 코드가 어떻게 작동할지 확신할 수 없을 때까지 이것은 매우 간단해 보입니다. 내가 한 첫 번째 작업은 내 양식과 제출 버튼(내 html에서)을 만드는 것이었습니다.

JavaScript 파일의 추가 버튼에 이벤트 리스너를 추가한 다음 정상 양식 값(이름, 이미지 URL 및 설명)을 처리하는 함수를 만들었습니다.

나는 또한 각 포켓몬 카드를 생성하고 좋아요와 삭제 버튼을 부착하는 또 다른 기능을 만들었습니다.

삭제 및 좋아요 버튼을 생성한 후에는 Eventlistener('클릭')를 켜고 추가합니다.

card.querySelector('#like').addEventListener('click', ()=>{
     pokemon.likes+=1;
card.querySelector('#delete').addEventListener('click', ()=>{
        card.innerHTML=''

포켓몬 카드를 목록에 추가하면 포켓몬 이름의 좋아요 수와 설명을 볼 수 있습니다. 좋아요 버튼이나 삭제 버튼을 클릭할 수 있습니다.


좋아요 버튼은 클릭할 때마다 포켓몬에게 좋아요 1을 부여하고, 삭제 버튼은 선택한 포켓몬을 목록에서 제거합니다.

이 단계는 프로젝트 전체에서 제가 극복하기 가장 어려웠던 단계 중 하나였습니다. 가져오기를 사용하여 많은 오류가 발생했지만 다행스럽게도 오류를 생성하는 문제를 해결할 수 있었습니다.
데이터를 게시, 가져오기, 제거 및 패치하기 위해 가져오기 방법을 사용했습니다.

예시:

function  UpdateLikes(pokemonObj) {
  fetch(`http://localhost:3000/pokemonData/${pokemonObj.id}`,{
      method:'PATCH',
      headers:{
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(pokemonObj)
  })
  .then(res => res.json())
  .then(pokemon=>console.log(pokemon))

}
function deletePokemon(id) {
    fetch(`http://localhost:3000/pokemonData/${id}`,{
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(res => res.json())
    .then(pokemon=>console.log(pokemon))
}

아주 쉬운 과제를 하고 있었음에도 불구하고 스트레스가 많고 어려웠습니다. 이 프로젝트는 내가 예상했던 것보다 훨씬 더 오래 걸렸고, 나는 좌절했다고 말해야 합니다.

1단계 프로젝트를 완료할 수 있게 되면서 제 자신에 대한 많은 자신감이 생겼고 제가 할 수 있는 일이라고 믿게 되었습니다. 가능한 한 많은 프로젝트를 수행하고 이에 더 적극적으로 참여하게되어 기쁩니다.