📝 학습 목표
- API의 개념에 대해 알고, API를 사용할 수 있다.
🌸 API란 무엇이고, 왜 사용하나요?
API는 ‘Application Programing Interface’의 준말로, 여러 프로그램들과 데이터베이스, 그리고 기능들의 상호 통신 방법을 규정하고 도와주는 매개체라는 뜻입니다.
API는 데이터베이스가 아니지만, 엑세스 권한이 있는 앱의 권한 규정과 서비스 요청에 따라 데이터나 서비스 기능을 제공하는 메신저 역할을 합니다.
좀 더 쉽게 한 마디로 설명하자면, 일반적으로 클라이언트와 서버가 주고받는 통신이라고 설명할 수 있습니다.
개발자가 프로그램을 만드는 데 필요한 어떤 기능을 직접 구현하지 않고 API 제공자들이 제공하는 데이터와 모듈 등을 갖다 쓸 수 있게 해주는 것이 바로 API와 API 문서입니다.
API 유형에는 세 가지가 있습니다.
- private API
내부 API로, 회사 개발자가 자체 제품과 서비스를 개선하기 위해 내부적으로 발행합니다.
따라서 제 3자에게 노출되지 않습니다.
- public API
개방형 API로, 모두에게 공개되고 누구나 제한없이 API를 사용할 수 있습니다.
- partner API
기업이 데이터 공유에 동의하는 특정인들만 사용할 수 있습니다.
비즈니스 관계에서 사용되는 편이며, 종종 파트너 회사 간에 소프트웨어를 통합하기 위해 사용됩니다.
🌸 API를 사용할 때의 장단점은 무엇인가요?
장점은 다음과 같습니다.
데이터 접속의 표준화와 편의성
API는 모든 접속을 표준화합니다. 따라서 디바이스, 운영체제 등과 상관없이 조건만 맞다면, 누구에게나 동일한 엑세스를 약속합니다.
또 조직에서 애플리케이션을 개발할 때 기능적 API를 사용하면, 필요한 기본 기능들을 매번 자가 개발할 필요없이 손쉽게 이용할 수 있다는 장점이 있습니다.
자동화와 확장성
API를 이용한 CRUD 처리에 따라 관련 데이터와 콘텐츠가 자동으로 생성되고 사용자의 환경에 맞춰서 정보가 전달 되어 개발 워크플로우가 간소화되고 애플리케이션 확장이 용이해 집니다.
예를 들면, API를 활용한 웹 사이트 분석, 프로젝트 및 팀 관리 도구, 온라인 결제 시스템, 기타 여러 운영 솔루션에 필요한 애플리케이션을 쉽게 작성할 수 있습니다.
적용력
API는 변화 예측에도 큰 도움이 되기 때문에 API를 통해 데이터를 수집하고 전달하는 데 있어 유연한 서비스 환경을 구축하고 소프트웨어를 통합하고자 할 때, 그리고 개발자들 간의 협업이 필요할 때 더욱 용이합니다.
API의 단점은 다음과 같습니다.
보안성과 HTTP 방식의 제한
가장 주목할 점은 API의 단일 진입점인 API 게이트웨이는 해커의 타겟 대상이 될 수 있다는 점입니다.
한 마디로, API의 장점인 ‘평범한 HTTP 메서드를 사용하여 엑세스할 수 있다’는 점이 보안성에 관해서는 큰 단점이 됩니다. 또한, HTTP method는 메서드 형태가 다소 제한적이라는 문제점 또한 존재합니다.
표준의 부재와 개발 비용
REST API의 설계에 있어 가장 큰 단점이라고 할 수 있는 점이 공식화된 표준이 존재하지 않는다는 점입니다.
그렇기 때문에 관리가 어렵고 실제로 API 기능을 구현하고 제공하려면 개발 시간, 지속적인 유지 관리 요구 사항 및 지원 제공 측면에서 비용이 많이 들 수 있습니다.
또한 기존 API의 기능을 확장하려고 할 때 광범위한 프로그래밍 지식이 필요합니다.
A P I 사 용 하 기
🌸 JSON이란 무엇이며, 어떻게 사용하나요?
JSON은 ‘JavaScript Object Notation’의 약자로, ‘자바 스크립트 객체 표기법’이라는 뜻입니다.
쉽게 말하면 데이터를 쉽게 교환하고 저장하기 위한 텍스트 기반의 데이터 교환 표준입니다.
JSON의 기본적인 형태는 아래와 같습니다.
{
key : value,
key2: value2
}
JSON의 형태는 키(key)와 값(value)의 쌍으로 이루어져 있습니다.
그리고 key와 value 사이엔 콜론(:)이 들어갑니다. 여러 데이터를 나열할 경우에는 쉼표를 사용합니다.
💡 그동안 우리가 앞에서 사용했던 JSON 파일들이 바로 API를 통해 받아온 내용입니다!
- Movie.json
export const movies = {
"dates": {
"maximum": "2023-09-17",
"minimum": "2023-07-31"
},
"page": 1,
"results": [
{
"adult": false,
"backdrop_path": "/8pjWz2lt29KyVGoq1mXYu6Br7dE.jpg",
"genre_ids": [
28,
878,
27
],
"id": 615656,
"original_language": "en",
"original_title": "Meg 2: The Trench",
"overview": "전 세계에서 가장 깊은 마리아나 해구, 역사상 가장 거대하고 무자비한 포식자가 도사리는 그곳에서 강철 다이버 ‘조나스’(제이슨 스타뎀)가 더 맹렬하게 돌아온 ‘메가로돈’과 짜릿한 대결을 펼치는 액션 어드벤처",
"popularity": 2429.447,
"poster_path": "/cbAHK6Vrt0GClMRUxH8TsgC2JqL.jpg",
"release_date": "2023-08-15",
"title": "메가로돈 2",
"video": false,
"vote_average": 7,
"vote_count": 1790
},
{
"adult": false,
"backdrop_path": "/w2nFc2Rsm93PDkvjY4LTn17ePO0.jpg",
"genre_ids": [
16,
35,
28
],
"id": 614930,
"original_language": "en",
"original_title": "Teenage Mutant Ninja Turtles: Mutant Mayhem",
"overview": "뉴욕의 하수구로 스며든 미스터리한 녹색 액체, ‘우즈’로 인해 아기 거북이 네 마리와 청년 쥐 스플린터는 사람과 비슷한 모습의 돌연변이가 된다. 15년 후, 10대 청소년이 된 레오나르도, 미켈란젤로, 라파엘, 도나텔로는 하수구에 숨어 사는 생활에서 벗어나 인간 세상에서 평범한 삶을 살고 싶어하고 우연히 만난 학생 기자 에이프릴과 함께 도시를 위협하는 '슈퍼플라이'와 그 일당을 물리치면 뉴욕의 히어로가 되어 당당히 세상에 나갈 수 있을 거라는 꿈을 꾸는데… 인간들을 모두 돌연변이로 만들겠다는 ‘슈퍼플라이’의 음모로 위험에 빠진 뉴욕! 틴에이저 히어로로 다시 태어난 ‘닌자터틀’ 형제들의 스트릿 액션 어드벤처가 펼쳐진다!",
"popularity": 800.947,
"poster_path": "/6xORIhe6cP3iM5RYTHs7MTOH1qa.jpg",
"release_date": "2023-09-14",
"title": "닌자터틀: 뮤턴트 대소동",
"video": false,
"vote_average": 7.3,
"vote_count": 512
},
{
"adult": false,
"backdrop_path": "/fm6KqXpk3M2HVveHwCrBSSBaO0V.jpg",
"genre_ids": [
18,
36
],
"id": 872585,
"original_language": "en",
"original_title": "Oppenheimer",
"overview": "세상을 구하기 위해 세상을 파괴할 지도 모르는 선택을 해야 하는 천재 과학자의 핵개발 프로젝트.",
"popularity": 530.049,
"poster_path": "/4ZLnVUfiCe3wX8Ut9eyujndpyvA.jpg",
"release_date": "2023-08-15",
"title": "오펜하이머",
"video": false,
"vote_average": 8.3,
"vote_count": 3566
},
{
"adult": false,
"backdrop_path": "/2zzaJ9jzyK1Am8XoS0dFjmP8V0L.jpg",
"genre_ids": [
28,
53,
27
],
"id": 1135229,
"original_language": "en",
"original_title": "I Am Rage",
"overview": "에린은 새로운 남자친구의 고향인 어느 한적한 시골마을을 방문한다. 그곳에서 비슷하게 여행을 온 커플들을 만나게 되고 그들은 실종이 되어도 누구도 찾지 않은 외로운 사람들이라는 공통점이 있다는 것을 알게 된다. 그들은 인간의 피를 거래하고 마시며 초자연적인 힘을 얻는 사이비 살인마 집단에 납치된 것. 하지만 에린은 위기에 몰리거나 분노하게 되면 극한의 잔인함과 폭력성이 초인적으로 발현되는 특이한 혈통을 가진 체질이다. 에린의 분노가 폭발하고 그녀를 사냥한 악인들에 대한 더욱 잔혹한 사냥이 시작된다.",
"popularity": 425.756,
"poster_path": "/z1nFd03qoiCrHlGSxBlumkF9uZh.jpg",
"release_date": "2023-09-14",
"title": "론 서바이버 : 아이 엠 리벤지",
"video": false,
"vote_average": 6.5,
"vote_count": 11
},
{
"adult": false,
"backdrop_path": "/kHlX3oqdD4VGaLpB8O78M25KfdS.jpg",
"genre_ids": [
9648,
18,
80
],
"id": 945729,
"original_language": "en",
"original_title": "A Haunting in Venice",
"overview": "세계적 명탐정 '에르큘 포와로'는 오랜 탐정 생활에서 은퇴하여 아름다운 도시 베니스에서 평범한 삶을 살아가고 있다. 그런 그에게 오랜 친구이자 베스트셀러 작가인 '아리아드네 올리버'가 찾아와 죽은 영혼을 부를 수 있다고 알려진 영험한 심령술사의 실체를 밝혀달라고 부탁하게 된다.핼러윈 밤, 베니스 운하 위 위치한 고풍스러운 저택의 주인이자 1년 전 사랑하는 딸을 잃고 깊은 상실에 빠진 '로웨나 드레이크'의 초대로 교령회에 참석한 이들은 미스터리한 심령술사 '조이스 레이놀즈'가 죽은 영혼의 목소리를 전하는 광경을 보며 혼란에 빠지게 된다. 갑자기 발생한 끔찍한 살인 사건에 실체 없는 용의자를 쫓던 '에르큘 포와로'는 자신의 모든 믿음이 흔들리는 경험을 하며 충격에 빠지게 되는데....",
"popularity": 348.761,
"poster_path": "/dUQdookYulZV9sTIEvAuAu1Ptxv.jpg",
"release_date": "2023-09-13",
"title": "베니스 유령 살인사건",
"video": false,
"vote_average": 6.8,
"vote_count": 203
},
{
"adult": false,
"backdrop_path": "/5Jfk2p3iGrChUKkl0cBD5krr2u8.jpg",
"genre_ids": [
16,
10749
],
"id": 998731,
"original_language": "ja",
"original_title": "映画 佐々木と宮野ー卒業編ー",
"overview": "여성스러운 얼굴이 콤플렉스인 고등학교 2학년 ‘미야노’와 불량해 보이는 3학년 선배 ‘사사키’. BL 만화를 빌려 주면서 시작된 두 사람은 마침내 사랑에 빠진다. 어느덧 계절은 겨울로 바뀌고 ‘사사키’의 졸업이 코 앞으로 다가온다 두 사람은 함께하는 고교 생활을 소중하게 보내지만, 졸업이 다가올수록 애틋한 마음은 커져만 가는데… 고민도 불안도 날려 버리고, 언제나 아껴 주고 싶은 마음을 전하고 싶어!",
"popularity": 204.668,
"poster_path": "/4XeVvKoPKl5Mbiu6ZN3esMt51e7.jpg",
"release_date": "2023-09-06",
"title": "극장판 사사키와 미야노 - 졸업편",
"video": false,
"vote_average": 6.3,
"vote_count": 15
},
{
"adult": false,
"backdrop_path": "/urDWNffjwmNi5IQaezw9GwqkUXa.jpg",
"genre_ids": [
12,
14
],
"id": 767,
"original_language": "en",
"original_title": "Harry Potter and the Half-Blood Prince",
"overview": "어둠의 세력이 더욱 강력해져 머글 세계와 호그와트까지 위협해온다. 위험한 기운을 감지한 덤블도어 교수는 다가올 전투에 대비하기 위해 해리 포터와 함께 대장정의 길을 나선다. 볼드모트를 물리칠 수 있는 유일한 단서이자 그의 영혼을 나누어 놓은 7개의 호크룩스를 파괴하는 미션을 수행해야만 하는 것! 또한 덤블도어 교수는 호크룩스를 찾는 기억여행에 결정적 도움을 줄 슬러그혼 교수를 호그와트로 초청한다. 한편 학교에서는 계속된 수업과 함께 로맨스의 기운도 무르익는다. 해리는 자신도 모르게 지니에게 점점 끌리게 되고, 새로운 여자 친구가 생긴 론에게 헤르미온느는 묘한 질투심을 느끼는데...",
"popularity": 143.657,
"poster_path": "/yrGlb3HLtjGp39mv4MJ5UuIHcj4.jpg",
"release_date": "2023-09-06",
"title": "해리 포터와 혼혈왕자",
"video": false,
"vote_average": 7.7,
"vote_count": 18104
},
{
"adult": false,
"backdrop_path": "/lUPz9zW0uf0bHfYsRRID8RtBHEU.jpg",
"genre_ids": [
18,
36
],
"id": 457232,
"original_language": "en",
"original_title": "Lamborghini: The Man Behind the Legend",
"overview": "2차 세계대전이 종식된 후 고향으로 돌아온 ‘페루치오 람보르기니’ 그는 트랙터 회사를 세워 자신의 이름을 널리 알리겠다는 야망을 품고있다. 타협 없는 노력 끝에 결국 트랙터 개발에 성공하였지만, 그의 꿈은 여기서 멈추지 않는다. 페루치오는 동경하는 자동차 제조사 회장 ‘엔초 페라리’를 찾아가 동업을 제안하지만, 시골 촌놈 취급을 받으며 거절당하는 굴욕을 당한다. 이에 격분한 페루치오는 업계에서 유능하다고 알려진 자동차 엔지니어를 스카우트하며, 황소같이 강력한 차를 만들기위해 의기투합한다. 제네바 모터쇼까지 6개월밖에 남지 않은 상황에서 페루치오는 정말 세상에 선보인 적 없던 최고의 차를 만들어 낼 수 있을까?",
"popularity": 112.035,
"poster_path": "/1z6EUqJn07mtfmYGzu8LmHfiOJW.jpg",
"release_date": "2023-08-23",
"title": "람보르기니: 전설이 된 남자",
"video": false,
"vote_average": 6.3,
"vote_count": 300
},
{
"adult": false,
"backdrop_path": "/fIQfdZ6fqf9mIbqBaexbgIEIk5K.jpg",
"genre_ids": [
35
],
"id": 864168,
"original_language": "en",
"original_title": "Joy Ride",
"overview": "성공 가도를 달리던 알파걸 변호사 '오드리'(애슐리 박)는 초고속 승진을 위해 어릴 적 헤어진 생모를 찾아오라는 황당한 미션을 받는다. 꽃미남 전문가인 음란마귀 아티스트 '롤로'(셰리 콜라), 흑역사 숨기고 할리우드 진출 앞둔 톱배우 '캣'(스테파니 수), 흐린 눈의 케이팝 광인 '데드아이'(사브리나 우)가 합류하면서 네 친구들의 크레이지한 월드투어가 시작된다! 지구 반 바퀴를 돌고 도는 고생길 끝에 밝혀진 오드리의 출생의 비밀은…",
"popularity": 102.202,
"poster_path": "/dY2HZ0yAMhYqwHkuKM5HU7zxoJ9.jpg",
"release_date": "2023-08-30",
"title": "조이 라이드",
"video": false,
"vote_average": 6.6,
"vote_count": 160
},
{
"adult": false,
"backdrop_path": "/dvHKdXijoN1OEzGcPhd0eRvkfMd.jpg",
"genre_ids": [
27,
53,
28,
12
],
"id": 960258,
"original_language": "en",
"original_title": "Shark Bait",
"overview": "마지막 봄 방학을 기념하러 해변에서 파티를 벌이던 젊은이들은 우연히 주인 없이 방치된 제트스키 두 대를 발견하고 키를 훔친다. 그들은 제트스키가 처참한 결과를 몰고 올 재앙의 원인이 될지 모른 채 승선한다. 철없는 치킨게임을 하다 고장 난 제트스키는 바다 한 가운데 고립되고 거대한 백상어의 그림자가 서서히 그들 주위를 맴돈다. 상어의 희생자가 한 명씩 늘어가는 가운데 남은 사람들은 해변으로 돌아가기 위해 고군분투한다.",
"popularity": 69.423,
"poster_path": "/pxsn8GtNHbN01iWkD2cV8CMuGzm.jpg",
"release_date": "2023-08-03",
"title": "47시간: 샤크베이트",
"video": false,
"vote_average": 5.8,
"vote_count": 261
},
{
"adult": false,
"backdrop_path": "/7TdVWAO7vV9j1OLDq1hQJS3pb4U.jpg",
"genre_ids": [
28,
35,
12,
53
],
"id": 739405,
"original_language": "en",
"original_title": "Operation Fortune: Ruse de Guerre",
"overview": "전 세계 검은 무기 거래 왕, 슈퍼 빌런 ‘그렉’ 그가 정체를 파악조차 불가능한 ‘핸들’을 거래한다는 첩보 내용이 입수된다. 국가 정보국은 전세계를 붕괴시킬 수도 있는 이것이 무엇인지 대혼돈에 빠지게 되고… 이 혼돈을 해결할 자는 오직 하나! 액션 만랩, 수트 핏과 꿀성대까지! 모든 것이 완벽한 업계 최고의 스파이 ‘포춘’ 무비 스타, 테크 전문가와 샷건 마스터까지 팀 ‘포춘’을 조합한 후 일생일대의 위험한 임무에 나서게 되는데…",
"popularity": 58.973,
"poster_path": "/5QXoAgO905YGucMJmeDb4CmjEUT.jpg",
"release_date": "2023-08-30",
"title": "스파이 코드명 포춘",
"video": false,
"vote_average": 6.6,
"vote_count": 1031
},
{
"adult": false,
"backdrop_path": "/63CDysgJZb38ZXdw2yF1UuDJgDN.jpg",
"genre_ids": [
53
],
"id": 979924,
"original_language": "en",
"original_title": "On the Line",
"overview": "심야 라디오 '온 더 라인'의 진행자 엘리스가 생방송 중 의문의 전화를 받게 되고, 쇼맨은 그의 온 가족을 죽이겠다고 협박을 한다. 모든 것이 실시간으로 진행되는 라디오에서 사랑하는 사람을 구하기 위한 엘리스의 고군분투 생존게임이 시작되는데...",
"popularity": 50.437,
"poster_path": "/o04KUuO9Zoi1L8KxH5Z4jJF7iXb.jpg",
"release_date": "2023-08-02",
"title": "온 더 라인",
"video": false,
"vote_average": 6.1,
"vote_count": 382
},
{
"adult": false,
"backdrop_path": "/qAvou7F5P4VcIR72JzzrnKEQSN3.jpg",
"genre_ids": [
12,
14,
10751
],
"id": 630,
"original_language": "en",
"original_title": "The Wizard of Oz",
"overview": "회오리 바람에 휩쓸려 오즈의 나라로 내던져진 도로시는 집으로 되돌아갈 수 있는 유일한 길이 위대한 오즈의 마법사를 만나는 것임을 알고 그를 찾아 긴 여정이 시작된다. 도로시는 애견 토토와 함께 노란 길을 따라 오즈의 마법사가 사는 에메랄드 시티로 향한다. 도중에 만난 세 명의 친구들, 지능을 얻고자 하는 허수아비와 심장을 원하는 양철 나뭇꾼, 용기를 가지고 싶어하는 겁장이 사자와 함께 오즈의 마법사에게 자신의 소원이 이루어지도록 부탁하기 위해 도로시와 함께 경쾌한 발걸음을 옮긴다. 그러나 도로시 일행을 방해하기 위해 뒤쫓아오는 서쪽 나라 마녀의 검은 그림자.",
"popularity": 53.375,
"poster_path": "/9FzHxca1OybjwOdTmWLfhdD4u0g.jpg",
"release_date": "2012-05-03",
"title": "오즈의 마법사",
"video": false,
"vote_average": 7.6,
"vote_count": 5105
},
{
"adult": false,
"backdrop_path": "/rHnANzYUmV3WZw3n0yWOLiR3pen.jpg",
"genre_ids": [
53
],
"id": 976912,
"original_language": "en",
"original_title": "Graphic Desires",
"overview": "친구의 소개로 데이팅 앱에 가입한 '프랭크' 연인 몰래 앱을 통해 만난 여성에게 강한 성적 끌림을 느낀 그는 다시 그녀를 찾지만 여자는 사라지고 계정도 비활성화된다. 현실과 가상을 넘나들며 그녀를 찾아 헤매는 동안 그는 점점 데이팅 앱에 중독되고 결국 예기치 못한 사건에 휘말리고 마는데∙∙∙",
"popularity": 46.565,
"poster_path": "/8EHehEMsJVIPp2n2ROhZU8dbpJC.jpg",
"release_date": "2023-08-31",
"title": "그래픽 디자이어",
"video": false,
"vote_average": 1,
"vote_count": 1
},
{
"adult": false,
"backdrop_path": "/wNYUv8u5Z0AI4dkyxGyet7eLEWm.jpg",
"genre_ids": [
18
],
"id": 945675,
"original_language": "zh",
"original_title": "一周的朋友",
"overview": "일주일마다 친구에 대한 기억을 잃는 전학생 ‘린샹즈’ 병 때문에 자발적 아싸가 돼버린 그녀에게 성화 재수학원 최고 인싸 3인방 ‘쉬유수’, ‘송샤오난’, ‘장우'가 다가온다. “일주일만 기억해도 상관없어. 일주일간 친구 하면 되잖아!” 머리가 좋아지는 호박죽, 기억력 증진 댄스, 깜찍한 유수표 엄지 인형까지! 세 사람은 샹즈의 단 하나뿐인 ‘일주일간 친구’가 되기 위해 고군분투하고, 샹즈는 그들과의 추억을 일기장에 채워 나가기 시작한다.",
"popularity": 51.949,
"poster_path": "/bCp45FrpSWD0mEx2EGHkvxOs2OK.jpg",
"release_date": "2023-09-06",
"title": "일주일간 친구",
"video": false,
"vote_average": 5.7,
"vote_count": 110
},
{
"adult": false,
"backdrop_path": "/z6GxNP2Z5AyoFfrYKxZWJypfZXJ.jpg",
"genre_ids": [
16,
10751
],
"id": 823609,
"original_language": "en",
"original_title": "Monster Family 2",
"overview": "몬스터에서 인간으로 겨우 돌아온 ‘위시본’ 패밀리! 새 가족이 된 전설 속 몬스터 ‘바바 야가’와 ‘렌필드’의 결혼식 날, 그들은 슈퍼 소녀 ‘밀라’에게 납치당한다. 이들뿐 아니라 드라큘라, 예티, 네시, 그리고 킹 콩가까지!! ‘위시본’ 패밀리는 ‘밀라’에 의해 전 세계 몬스터들이 납치된 것을 알게 되는데… 몬스터들을 구하기 위해 다시 몬스터로 변한 ‘위시본’ 패밀리! 과연 ‘위시본’ 가족은 몬스터들을 구하고 다시 인간으로 돌아갈 수 있을까?",
"popularity": 21.008,
"poster_path": "/9kPiLqqWlwCVL0KGJeM4kcZA9q9.jpg",
"release_date": "2023-08-02",
"title": "몬스터 패밀리 2",
"video": false,
"vote_average": 6.6,
"vote_count": 63
},
{
"adult": false,
"backdrop_path": "/6Lqs0Bw2L2ZoVgx9XpmeN7vBcr0.jpg",
"genre_ids": [
18
],
"id": 960275,
"original_language": "fr",
"original_title": "Maestro(s)",
"overview": "권위 있는 빅투아르 음악상을 수상하며 차세대 거장으로 자리매김한 지휘자 ‘드니 뒤마르’. 그가 넘어야 할 가장 큰 산은 다름 아닌 같은 지휘자이자 음악계의 거장인 아버지 ‘프랑수아 뒤마르’이다. 한편, 아버지 ‘프랑수아’는 존경받는 최고의 지휘자지만 곧 정상의 위치에서 밀려날지도 모른다는 위기감과 함께, 같은 분야에서 승승장구하는 아들 ‘드니’에게 묘한 경쟁심을 느끼고 있다. 그러던 중 ‘프랑수아’는 평생을 소망하던, 이탈리아 ‘라 스칼라’ 극장의 지휘자 자리를 제안하는 전화를 받고 뛸 듯이 기뻐한다. 하지만 아들 ‘드니’는 자신에게 가야 할 제안이 아버지에게 잘못 전달되었음을 알게 되고, 인생 최대의 고민과 마주한다. 꿈의 무대를 두고 마주한 아버지와 아들! ‘라 스칼라’ 무대에 서게 될 주인공은 과연 누구일까?",
"popularity": 36.246,
"poster_path": "/8CNn2HuBMQYOA425MbAoc3oeTNO.jpg",
"release_date": "2023-08-09",
"title": "마에스트로",
"video": false,
"vote_average": 5.7,
"vote_count": 36
},
{
"adult": false,
"backdrop_path": "/8nLiWpgxOfH15FjBgTvvcah3ZUb.jpg",
"genre_ids": [
28,
53,
80,
35
],
"id": 1015963,
"original_language": "en",
"original_title": "High Heat",
"overview": "전직 특수요원 출신 스타 셰프 '아나'(올가 쿠릴렌코)가 마피아의 타겟이 된 레스토랑을 구하기 위해 킬러 본능을 다시 일깨운다.",
"popularity": 24.199,
"poster_path": "/wIFYnvvdwsjD0Wjeg8MjIIp58rR.jpg",
"release_date": "2023-08-17",
"title": "킬러의 레스토랑",
"video": false,
"vote_average": 5.6,
"vote_count": 98
},
{
"adult": false,
"backdrop_path": "/4hAhZ66n5iasGtSYHTFg6oGdJk0.jpg",
"genre_ids": [
53,
27,
878
],
"id": 660942,
"original_language": "no",
"original_title": "De uskyldige",
"overview": "이다와 안나는 새로운 아파트로 이사한 직후, 또래인 벤자민, 아이샤와 친구가 된다. 네 명의 아이들은 어른이 개입하지 않는 순간, 특별한 잠재력을 깨워나가기 시작하고 벤자민은 능력을 이용해 사람들을 조정할 수 있게 된다. 단순한 호기심과 장난으로 행해지던 어떤 일들이, 급기야 분노라는 감정과 이어지고 결국 친구들을 비롯해 주변에 위협을 가하기 시작하는 벤자민. 가장 순수하고, 본능적이었던, 그래서 더욱 파괴적이고 잔인할 수 있었던 잔혹한 동심의 세계가 펼쳐진다!",
"popularity": 22.179,
"poster_path": "/tNJ2oOuTPHny3x633DwwKDnc5mQ.jpg",
"release_date": "2023-09-06",
"title": "이노센트",
"video": false,
"vote_average": 7,
"vote_count": 439
},
{
"adult": false,
"backdrop_path": "/g8kCHQzfogy1t1dE9nPBtiFkz64.jpg",
"genre_ids": [
53,
878,
18
],
"id": 729854,
"original_language": "ko",
"original_title": "콘크리트 유토피아",
"overview": "대지진으로 하루아침에 폐허가 된 서울. 모든 것이 무너졌지만 단 한 곳, 황궁 아파트만은 그대로다. 소문을 들은 외부 생존자들이 황궁 아파트로 몰려들자 위협을 느끼기 시작하는 입주민들. 생존을 위해 하나가 된 그들은 새로운 주민 대표 영탁을 중심으로 외부인의 출입을 철저히 막아선 채 아파트 주민만을 위한 새로운 규칙을 만든다. 덕분에 지옥 같은 바깥 세상과 달리 주민들에겐 더 없이 안전하고 평화로운 유토피아 황궁 아파트. 하지만 끝이 없는 생존의 위기 속 그들 사이에서도 예상치 못한 갈등이 시작되는데...",
"popularity": 22.278,
"poster_path": "/9dENCKupUckoT1WgOohHMZfVl61.jpg",
"release_date": "2023-08-09",
"title": "콘크리트 유토피아",
"video": false,
"vote_average": 8,
"vote_count": 3
}
],
"total_pages": 5,
"total_results": 83
}
🌸 사용법
API를 통해 정보를 받아오면 JSON 형태로 받아오게 됩니다.
이는 겉보기엔 객체의 형태로 보이더라도, 실제 타입을 확인해보면 문자열 형태라는 것을 알 수 있습니다.
따라서 받아온 JSON 데이터를 객체로 변환해주는 작업이 필요합니다.
JSON을 문자열에서 객체로 바꾸는 방법은 다음과 같습니다.
var str = '{"test": "value"}';
var parsingData = JSON.parse(str)
반대로, 객체를 문자열로 바꾸는 방법은 다음과 같습니다.
var json = {"test": "value"}
var incodingData = JSON.stringfy(json);
🌸 API를 요청하는 메소드 종류에는 무엇이 있나요?
API 요청 메소드 중에서, 가장 많이 사용하는 메소드는 다음과 같습니다.
- GET: 데이터 조회
- POST: 데이터 등록
- PUT: 데이터 수정
- DELETE: 데이터 제거
🌸 fetch 함수에 대해 조사하고, 설명해주세요.
fetch() 함수는 브라우저에 내장된 함수로, API를 요청하는 가장 기본적인 방법입니다.
사용법
fetch() 함수는 첫 번째 인자로 URL, 두 번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환합니다.
반환된 객체는 API 호출이 성공했을 경우에는 응답(response) 객체를 resolve 하고, 실패했을 경우에는 예외(error) 객체를 reject 합니다.
옵션 객체에는 HTTP 방식(method), HTTP 요청 헤더(headers), HTTP 요청 전문(body) 등을 설정해줄 수 있습니다.
응답(response) 객체로 부터는
HTTP 응답 상태(status),
HTTP 응답 헤더(headers),
HTTP 응답 전문(body) 등을 읽어올 수 있습니다.
A P I 데이터 화면에 로딩하기
🌸 React에서 API를 통해 받아온 데이터를 화면에 나타나게 하기 위해선 어떻게 해야할까요?
💡 useState, useEffect를 사용하여 실제로 API를 받아오고 화면에 렌더링하는 코드 예시를 찾아봅시다.
리액트에서 API를 사용할 땐 useState, useEffect와 함께 사용하는 것이 일반적입니다.
useEffect를 사용하면 컴포넌트가 최초로 렌더링된 후 mount 될 때 한 번만 데이터를 동적으로 받아올 수 있기 때문입니다.
아래는 API를 연동한 다음, useState와 useEffect를 사용하여 화면에 API를 렌더링하는 코드입니다.
import React, { useState, useEffect } from 'react';
function Users() {
const [users, setUsers] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const getData = async () => {
try {
// 요청 시작할 때 error와 users 초기화
setError(null);
setUsers(null);
// loading 상태를 true로 변경하여, 현재 loading 중임을 표시
setLoading(true);
const response = await fetch(
'https://jsonplaceholder.typicode.com/users'
);
const body = await response.parse()
const result = await body.data;
return result
} catch (error) {
setError(error);
} finally {
// 성공, 실패에 상관없이 요청이 종료됐으므로 loading 상태를 다시 false로 변경
setLoading(false);
}
}
useEffect(() => {
getData();
}, []);
if (loading) return <div>로딩중..</div>;
if (error) return <div>에러가 발생했습니다</div>;
if (!users) return null;
return (
<ul>
{users.map(user => (
<li key={user.id}>
{user.username} ({user.name})
</li>
))}
</ul>
);
}
export default Users;'WEB 개발 공부' 카테고리의 다른 글
| Chapter 7. 데이터처리 (List and Keys, Forms) (0) | 2024.04.09 |
|---|---|
| Chapter 6. LifeCycle & Hook (0) | 2024.04.09 |
| Chapter 5. Handling Event & Conditional Rendering (0) | 2024.04.09 |
| Chapter 4. CSS 라이브러리 (0) | 2024.04.01 |
| Chapter 3. 리액트 기초 및 기본 요소 (0) | 2024.03.31 |