프론트 엔드 단에서 api에서 연결해야 할때와 백엔드에서 연결해야할 때 구분, api들 (외부, get, post 등)

1. 역할과 책임

• 프론트엔드: 사용자와 직접 상호작용하는 부분, 주로 웹 브라우저나 모바일 앱에서 실행,
  UI를 담당, 데이터를 표시하고 사용자 입력을 받아 서버로 전송
• 백엔드: 서버 측에서 실행, 데이터베이스와의 상호작용, 비즈니스 로직 처리, API 관리 등을 담당,
  클라이언트 요청을 처리하고 적절한 응답을 반환

2. 보안

• 프론트엔드:
  • 브라우저 또는 앱에서 실행되므로 코드가 노출될 수 있다.
  • 민감한 정보는 프론트엔드에서 직접 처리하지 않도록 해야 함
  • 인증 토큰 또는 API 키를 노출하지 않도록 해야 함
• 백엔드:
  • 서버에서 실행되므로 코드가 노출되지 않는다.
  • 데이터베이스와의 직접 연결, 비즈니스 로직 실행 등 민감한 작업을 안전하게 처리할 수 있다.
  • 사용자 인증 및 권한 부여와 같은 보안 기능을 구현

3. API 호출 위치

• 프론트엔드:
  • 주로 RESTful API나 GraphQL API를 통해 백엔드와 통신
    • Whateversong에서는 DRF를 통한 RESTful API 통신을 사용
    • RESTful API 및 API 통신 Method 설명 링크
  • AJAX 요청, Fetch API, Axios 등 다양한 방법을 사용하여 API를 호출
    • Whateversong에서는 바닐라 JS를 사용하고, Axios 라이브러리를 이용해서
      API를 호출
  • 사용자 입력을 받아 서버로 전송, 서버 응답을 받아 UI를 업데이트
• 백엔드:
  • 다른 마이크로서비스 또는 외부 서비스와 통신하기 위해 API를 호출
    • Whateversong에서는 Spotify의 API를 호출하여 Playlist 데이터를 가져옴
  • 서버 간 통신이기 때문에 더 높은 빈도의 호출이나 더 큰 데이터 양을 처리
  • 백엔드 간 API 호출은 프론트엔드에서 직접 접근할 수 없는 데이터나 기능을 사용할 때 유용

4. 데이터 처리

• 프론트엔드:
  • 서버로부터 받은 데이터를 화면에 표시하거나, 사용자 입력 데이터를 서버로 전송
  • 데이터 검증을 할 수 있지만, 최종 검증은 백엔드에서 이루어져야 함

// posts/create.js
function validateImage(file) {
            const validTypes = ['image/jpeg', 'image/png', 'image/gif'];
            return validTypes.includes(file.type);

Whateversong에서는 Post Create 시 image 파일의 형식을 프론트에서 먼저 검증을 함

• 백엔드:
  • 데이터를 받아 비즈니스 로직을 처리하고, 데이터베이스에 저장하거나 다른 서비스로 전송
  • 데이터 검증, 변환, 조작 등을 수행

5. 성능

• 프론트엔드:
  • 사용자 경험을 최적화하기 위해 빠른 응답 시간이 중요
  • API 호출 시 비동기 처리를 통해 UI가 멈추지 않도록 해야 함
    • Whateversong에서는 Axios 라이브러리를 이용하여 비동기 처리, 자세한 설명은링크
• 백엔드:
  • 다수의 클라이언트 요청을 효율적으로 처리하기 위해 고성능 요구
  • API 호출을 최적화하여 서버 자원을 효율적으로 사용해야 함