20231020 TIL 바닐라 자바스크립트 외부api 대입하기

오늘의 목표

• 카드에 api정보 넣기 -> 구글링 하다가 안되면 튜터님 찾아가기
• 페이지 재배치 -> 카드들을 묶어서 하면.. 한 그리드에 모든 카드가 들어감. 

오늘의 개발, 새롭게 알게된 것

드디어 넣었다.. 인터넷의 도움을 너무 많이 받았고 완전히 거의 복붙이지만.. 해냈으.. 

하고 나니까 첫 프로젝트에서 했던 getDocs랑 거의 똑같았다. jQuery가 빠진 차이 정도. 

 

↓↓↓첫 프로젝트에서 DB정보를 카드에 대입↓↓↓

let docs = await getDocs(collection(db, "firstteam"));
        docs.forEach((doc) => {
            let row = doc.data();
            let name = row['name'];
            let comment = row['comment'];
            let pass = row['pass'];
            let docId = doc.id;

            let temp_html = `
                <div class="col">
                    <div class="card h-100">
                        <div class="postData card-body" data-id="${doc.id}">
                        <h5 class="card-title">${name}</h5>
                        <p class="card-text">${comment}</p>
                        <p class="del" id="del">${pass}</p>
                        <p class="del" id="delid">${docId}</p>
                            <div class="dbutton" class="d-grid gap-2 d-md-flex justify-content-md-end">
                            <button class="deleteBtn btn btn-outline-success me-md-2 btn-sm" type="button">삭제</button>
                            </div>
                        </div>
                    </div>
                </div>`;

            $('#card').append(temp_html);
            $(".del").hide();

        });

↓↓↓이번 프로젝트에서 api정보를 카드에 대입↓↓↓

fetch('url', options)
  .then(response => response.json())
  .then(data => {
    let 이름1 = data['가져올 정보가 속한 배열의 이름']
    const 이름2 = document.querySelector('선택할것의 id 도는 class')  //선택
    이름2.innerHTML = '';   //교체

    이름1.forEach((이름5) => {
      let 이름3 = 이름5['가져올 정보찐이름'];  //*가져올 정보 다 선언
      

      let 이름4 = `대입할 카드 html `;
          
      이름2.insertAdjacentHTML('position', 이름4/들어갈 내용); // 선택요소의 위치 설정 및 내용

개념이해가 필요한 부분

1. innerHTML과 insertAdjacentHTML의 차이 
2. insertAdjacentHTML 정확한 특징 => 위에 전프로젝트 때는 카드형식으로 append를 했기에 html에 써둔 카드들이 그대로 있었는데 얜 사라져.. 변경인건 알지만 정확한 흐름을 모르겟따
3. json의 정확한 뜻
4. response의 정확한 뜻

그리고 화살표 함수 공부 더 해야겠다 그냥 단순하게 

function 함수 ( ){}   

여기서 function이 =>가 되고 소괄호 뒤로 간다고 만 생각했는디... 좀더 자세히 알아야할 것 같다.. 코드 읽을 때 function으로 바꿔서 읽느라 효율이 떨어진다.

 

오늘의 목표 도달

카드에 넣기 완료.. 해석은 어느정도 되는데 좀더 자연스럽게 쓸 수 있도록하자 

 

 

오늘의 코드 평가 및 느낀점

하루종일 잡고 있었는데 마지막엔 정말 왜 안되는지 모를 지경이었는데 알고보니 오탈자... 친구한테 말했더니 코드가 잘 안되면 오탈자부터 봐야하는 거 아니냐고 순순하게 물어봤는데 완전 공격당함.. 

 

아직 내 코딩실력을 못 믿어서 뭐가 기능작동이 안되면 구조가 이상한가보다 하고 넘어간다.. 좀더 한 코드를 짤 때 세세하게 보면서 신경써야겠다.

 

다른 분은 엄청난 공식으로 하시던데.. 도당체 나는 해석조차 힘들어서 공부를 더 해야겠다 싶엇다.

 

내일목표

• 코드 실수 나 해봤던 시도들 정리하는 개발일지 쓰기
• 알고리즘 0단계 5~10개 풀기 
• 클릭하면 id뜨게하기
• 검색 기능구현하기
• 클릭 구현하기