가져오기의 기초

코딩 및 소프트웨어 엔지니어링 세계의 초보자로서 저는 JavaScript의 기초를 배우는 데 많은 시간을 보냈습니다. 변수, 함수, 범위 등에 대해 배웠습니다. 기본 사항은 구축할 기반을 제공하는 방법을 배우는 데 중요합니다. 첫 번째 프로젝트를 시작하면서 함께 학습한 많은 개념을 가져오기 위해 가져오기를 사용했습니다. Fetch를 사용하면 API 또는 로컬 json 서버에서 데이터를 가져와 애플리케이션에서 해당 데이터를 사용할 수 있습니다. 날씨, 개 또는 암호화와 같은 많은 주제에 대한 API(Application Programming Interface)가 있습니다. 일부는 API 키가 필요할 수 있지만 대부분은 무료로 사용할 수 있습니다. JSON(JavaScript Object Notation) 서버에서 자신의 데이터를 사용할 수도 있습니다. 이는 제가 제 프로젝트에서 수행한 것입니다. 무작정 영화를 추천하고 싶지 않기 때문에 영화 추천 앱을 만들어서 내가 좋아하는 영화를 데이터로 활용하고 싶었다. db.json을 생성한 후 가져오기를 사용하여 데이터를 가져오고 애플리케이션 내에서 사용할 준비가 되었습니다.

fetch("http://localhost:3000/movies")
    .then(response => response.json())
    .then(data => {
       console.log(data)

먼저 가져오기를 호출하고 API 또는 json 서버의 URL을 괄호 안에 전달합니다. URL에 요청하고 약속으로 응답을 반환합니다. 그런 다음 받은 응답을 받고 json에서 데이터를 변환해야 합니다. 지금 가지고 있는 데이터를 가져온 후에는 필요에 따라 사용할 수 있습니다. 소스에서 데이터를 가져오고 있으므로 GET 요청이 됩니다. Fetch를 사용하면 게시할 수도 있습니다. 위의 예에서 방금 console.log(data)를 사용하여 해당 데이터가 어떻게 생겼는지 확인했습니다.



가져오기 요청의 데이터를 사용하여 내 영화 목록을 가져오고 무작위로 하나만 반환하는 임의의 영화 버튼을 만들었습니다. 데이터가 있으면 목록, 테이블 등을 만들 수 있습니다.

fetch("http://localhost:3000/movies")
    .then (response => response.json())
    .then(data => {
        console.log(data);
        let randomMovie = data[Math.floor(Math.random() * data.length)]
    randomMovieTitle.innerHTML = randomMovie.title
    randomMovieRating.innerHTML = `Rating: ${randomMovie.rating}`
    })

데이터 내용을 수정하는 POST, PATCH, DELETE를 만들 수도 있습니다. 내 영화 추천자의 예를 사용하여 POST 요청은 영화 데이터베이스에 새 영화를 추가합니다. PATCH 요청은 영화 중 하나와 해당 데이터를 편집합니다. DELETE 요청은 목록에서 영화를 삭제합니다. 내 목록에 있는 어떤 것도 변경하고 싶지 않았기 때문에 이러한 방법을 사용하지 않았지만 향후 프로젝트에 유용할 수 있습니다. 이러한 요청을 사용하지 않는 것이 중요합니다. 요청에 헤더와 본문을 포함했는지 확인해야 합니다.

fetch("http://localhost:3000/movies")
method: 'POST'
headers:{
'Content-Type' : 'application/json'
},
body.JSON.stringify()
},
.then (response => response.json())
    .then(data => {
        console.log(data);

데이터를 가져와 애플리케이션에서 활용할 수 있게 되면 새로운 가능성의 세계가 열립니다. 지식을 넓히고 배운 가져오기의 기본 사항을 사용하고 다양한 데이터 집합으로 새 프로젝트를 만들게 되어 기쁩니다.