사과는애플
88
2021-03-08 13:23:05
9
226

FrontEnd 에서 API 호출



안녕하세요, 

개발 중 평소에 궁금했던 부분을 이참에 확실히 잡고 가고자 질문 남깁니다.


Front-end에서 외부 API(Naver,공공데이터포탈 등) 호출 시 어떤식으로 처리하시나요?

기존까지는 외부 API일 경우

Front-end --> Back-end --> 외부 서버 API 호출 순으로 처리하였는데 

외부 API들 URL 이나 API-KEY 등을 서버에 저장 및 관리 한다는 장점이 있었던 것 같습니다.


근데 굳이 저렇게 해야되나..? 라는 생각이 들어서요.

Front-end -->  외부 서버 API 로 직접 호출하는게 더 효율적이지 않나..? 라는 생각이 듭니다.


하여 다른 분들은 위와 같은 경우 어떤식으로 작업 하시는지 궁금합니다!

2
  • 답변 9

  • 두꺼비개발자
    785
    2021-03-08 13:44:33

    외부 서버 API 성격에 따라서 다를 것 같은데요.

    만약 외부 서버 API를 거쳐 비즈니스 로직이 타야한다면 백앤드를 거쳐서 진행할 것 같고

    그럴 필요 없이 구현이 가능한 내용이라면 바로 다이랙트로 찍을 것 같아요.

  • 사과는애플
    88
    2021-03-08 13:54:31

    두꺼비개발자

    답글 감사드립니다!

    외부 API의 호출결과에 따라 비즈니스 로직을 태우는 등 의 작업이 있을 경우
    를 기준으로 할 수도 있겠네요!

  • 더미
    15k
    2021-03-08 13:54:47

    api키가 있어야되면 어쩔수없습니다

  • 알렌
    2021-03-08 13:57:07

    요금없는 공공 API인경우에는 그럴필요없이 FrontEnd에서 바로 API구동하면 됩니다. 

    그런데 API회사도 먹고 살아야 하니, 요금을 어떻게 매길까요? IP단위이거나, 건수단위로 매깁니다.

    IP단위이면 서버가 있어야 합니다.

    건수 단위라면, 조금이라고 싸게 가져가기 위해선 중복된 요구는 서버에거 Cache에서 처리하면 싸게 할 수 있습니다.

    또 보안의 문제도 있죠, API의  Key/Password가 있어아햐는데 이걸 FrontEnd에 두면 노출되겠죠. 똑같이 처리하더라도 서버에서 처리하면 노출될 염려가 없습니다.

  • 사과는애플
    88
    2021-03-08 14:07:39

    더미

    알렌


    두 분의 말씀 처럼 

    보안과 요금 적인 측면도 있겠군요.. 


    종합적으로 보면 어떤 API 인지에 따라 달라질 것 같습니다.

    API 키가 없고, 요금이 없는 그저 데이터를 얻어와 뿌려주기만 한다면 FrontEnd 에서 찔러도 되겠지만

    보안이슈 및 요금, 다른 비즈니스 로직과 함께 처리되어야 한다면 BackEnd에서 처리하는 것이 좀 더 효율적일 것 같아요 

    앞으로 어떤 기준으로  API 를 호출할 지 조금은 알 것 같습니다 :) 


  • 장독깨기
    1k
    2021-03-08 14:08:35

    Front-End에서 API 호출한다는게 브라우저-ajax 호출하는 걸 말씀하시나요?

    그럼..

    Cross Domain 문제를 좀 알아보는 게 좋겠습니다.


  • 사과는애플
    88
    2021-03-08 14:14:33

    장독깨기

    맞습니다. CORS 문제도 있었겠군요,,


    잠깐 Front-end에서 API호출을 테스트(React-Native / Axios) 했었을 때 

    이상없이 호출되어서 잠시 놓치고 있었습니다. 

    아마 분명히 해결해야 할 문제였을 텐데요..ㅜ


    하나하나 씩 기준이 새워지는 것 같습니다!!




  • charlatan
    3k
    2021-03-08 15:47:20

    CORS 때문에 프론트엔드에서 직접 호출은 안될 것 같은데요? 로컬 개발에서는 localhost라 되는 것처럼 보여도... API키를 클라이언트에 공개해야 하는 경우는 커스텀 User-Agent를 이용해서(모바일 앱) 특정한 요청만 처리하도록 API 서비스쪽에서 설정하도록 하는 경우도 얼핏 본 것 같습니다.

  • 사과는애플
    88
    2021-03-09 00:50:37

    freestyle

    넵, 맞습니다.

    위에 TEST 했었을 땐

    API KEY 를 header의 Authorization 로 보내줘서 가능 했던 것 같아요..ㅎ


  • 로그인을 하시면 답변을 등록할 수 있습니다.