[React + NodeJS] get 통신 / 컨트롤러 함수 사용

React에서 API 통신

React에서는 보통 외부 API와 통신하기 위해 fetch, axios 같은 라이브러리를 사용합니다. 예를 들어, axios.get 같은 함수를 사용하여 서버로부터 데이터를 비동기적으로 요청하고 받아옵니다. 이 경우, await 키워드를 사용해 비동기 요청의 결과를 기다립니다.

 

async function fetchData() {
  const response = await axios.get('https://api.example.com/data');
  console.log(response.data);
}

 

 

여기서 axios.get 메소드는 HTTP GET 요청을 서버에 보내고, 서버로부터의 응답을 기다립니다.

Node.js에서 모델과의 연결

Node.js에서, 특히 Express와 같은 백엔드 프레임워크를 사용할 때, 데이터베이스와의 상호작용을 위해 모델을 정의하고 사용합니다. 이 모델을 통해 데이터베이스 쿼리를 실행할 수 있습니다. 여기서도 비동기 통신이 일어나며, await를 사용해 비동기 작업의 완료를 기다립니다.

 

async function checkEmailDuplication(email) {
  const result = await membersModel.mailDuplicateChk(email);
  console.log(result);
}

 

 

이 예에서 membersModel.mailDuplicateChk 함수는 데이터베이스에 쿼리를 보내 이메일이 중복되는지 확인하고, 그 결과를 기다립니다.

비슷한 패턴

두 상황 모두에서, await 키워드는 JavaScript의 비동기 함수 호출에 대한 결과를 기다리는 데 사용됩니다. 첫 번째 예시에서는 외부 API에 데이터를 요청하고, 두 번째 예시에서는 데이터베이스에 쿼리를 보냅니다. 비동기 패턴을 사용함으로써, 이러한 요청이나 쿼리가 완료될 때까지 코드의 실행을 잠시 멈추고 결과가 준비되면 다음 코드를 실행할 수 있습니다.

이러한 비동기 패턴의 사용은 다양한 비동기 작업(네트워크 요청, 파일 시스템 작업, 데이터베이스 쿼리 등)에 적용될 수 있으며, JavaScript에서는 이러한 패턴을 통해 비동기 로직을 더 쉽게 관리할 수 있습니다.