javascript | api, app, server 관계

api.js

api 요청 및 응답을 처리하는 로직. 여기서는 서버와 통신하기 위해 필요한 비동기 함수들, ex) 데이터 감지 및 번역 요청 등을 작성한다. 보통 이 파일에는 ‘fetch’나 XMLHttpRequest’를 사용하여 서버와의 통신을 수행하는 함수들이 정의되어 있다.

app.js

클라이언트 사이드 로직을 포함한다. 여기서는 사용자 인터페이스와의 상호작용을 처리하며, 주로 이벤트 리스너, DOM조작, 그리고 api.js에 정의된 함수 호출을 포함한다. 사용자 입력에 따라 적절한 api호출을 수행하고, 결과를 ui에 반영한다.

server.js

이 파일은 서버 사이드 로직을 포함하며, 서버를 설정하고 클라이언트로부터의 요청을 처리하는 역할을 합니다. 보통 Express.js와 같은 프레임워크를 사용하여 서버를 구성하며, 클라이언트로부터의 API 요청을 받아서 적절한 응답을 반환합니다.

ex) /detect 엔드포인트를 처리하는 로직
     /translate 엔드포인트를 처리하는 로직

 

요약

이 세 파일은 함께 작동하여 웹 애플리케이션의 전체 기능을 구현합니다. 클라이언트는 app.js를 통해 사용자와 상호작용하고, 필요한 데이터를 api.js를 통해 서버(server.js)에 요청하며, 서버는 요청에 대해 적절한 응답을 반환합니다.