250903 TIL

 

❗어떤 문제가 있었는지

• 진행사항에 대한 README 작성방법에 대해 연습이 필요함
  • 코드의 구성과 설계 방향을 담아 기록하는 과정을 거칠 것 
• Console 창을 통해 입력된 값을 확인하는 과정까지 이해하였으나 특정 값을 추출하는 과정이 어려웠음
• mockapi.io 기능을 통해 임의의 외부 API 호출 과정에서의 전반적인 처리과정 이해가 어려웠음

 

---

📝 내가 시도해본 것들

• 임의의 mock API를 생성하고 값을 입력함에 따라 원하는 값을 추출해 내는 과정을 진행하였음 https://68b7baee73b3ec66cec55e50.mockapi.io/lunch
  
  

---

💡어떻게 해결했는지

• API 를 호출하고 입력된 값을 배열값으로 읽어 가장 최근에 입력되고 찾고자 하는 name 을 찾는 과정을 거침
  • for문을 통해 지속적으로 입력되어있는 API 값 중에 name 값을 찾도록 반복문을 설정하였음
  • try-catch문을 통하여 반복문을 수행하며 진행된 내용을 검증하는 과정을 거쳤음

            async function fetchLatestName() {
                const res = await fetch("https://6863bafe88359a373e960f61.mockapi.io/sparta/web/lunch");
                const list = await res.json();

            // 배열의 마지막 요소를 '가장 최근'이라고 가정
            for (let i = list.length - 1; i >= 0; i--) {
                if (list[i].name) {
                    return list[i].name;
                }
            }

            // 끝까지 없으면
            return "(name 없음)";
            }

              try {
                const latestName = await fetchLatestName();
                alert(`가장 최근 생성된 name: ${latestName}`);
  
            } catch (err) {
                console.error(err);
                alert("API 호출 실패");

---

👍 무엇을 새롭게 알았는지

• select, input 태그를 통한 화면 내 다양한 기능 활용 방법을 이해하였음
  • 이전에 사용했던 CSS 구성이나 js 기능들을 활용해 빠르게 원하는 화면을 보다 구성할 수 있는 스킬들이 생겼음