프론트 엔드 단에서 api에서 연결해야 할때와 백엔드에서 연결해야할 때 구분, api들 (외부, get, post 등)
1. 역할과 책임
프론트엔드: 사용자와 직접 상호작용하는 부분, 주로 웹 브라우저나 모바일 앱에서 실행,
UI를 담당, 데이터를 표시하고 사용자 입력을 받아 서버로 전송백엔드: 서버 측에서 실행, 데이터베이스와의 상호작용, 비즈니스 로직 처리, API 관리 등을 담당,
클라이언트 요청을 처리하고 적절한 응답을 반환
2. 보안
프론트엔드:
브라우저 또는 앱에서 실행되므로 코드가 노출될 수 있다.
민감한 정보는 프론트엔드에서 직접 처리하지 않도록 해야 함
인증 토큰 또는 API 키를 노출하지 않도록 해야 함
백엔드:
서버에서 실행되므로 코드가 노출되지 않는다.
데이터베이스와의 직접 연결, 비즈니스 로직 실행 등 민감한 작업을 안전하게 처리할 수 있다.
사용자 인증 및 권한 부여와 같은 보안 기능을 구현
3. API 호출 위치
프론트엔드:
주로 RESTful API나 GraphQL API를 통해 백엔드와 통신
Whateversong에서는 DRF를 통한 RESTful API 통신을 사용
AJAX 요청, Fetch API, Axios 등 다양한 방법을 사용하여 API를 호출
- Whateversong에서는 바닐라 JS를 사용하고, Axios 라이브러리를 이용해서
API를 호출
- Whateversong에서는 바닐라 JS를 사용하고, Axios 라이브러리를 이용해서
사용자 입력을 받아 서버로 전송, 서버 응답을 받아 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 호출을 최적화하여 서버 자원을 효율적으로 사용해야 함