UI 화면과 프로젝트 연결

안녕하세요, 지현님! 좋은 질문 감사드립니다! 😊

프론트엔드에서 버튼을 클릭했을 때 우리가 만든 서버 API와 어떻게 연결되는지 간단히 설명드려 보겠습니다!

연결 원리는, 우리가 API를 개발하며 테스트 했던 것과 동일합니다.

POST MAN에서 "send" 버튼을 누르면, 서버가 API를 받고, 덧셈이나 곱셈 혹은 로직을 처리하고, 응답을 주면, 그 응답을 POST MAN 이 다시 받았죠! 이를 4단계로 나누면 다음과 같습니다.

밖에서 (클라이언트에서) API 요청을 쏜다
서버가 API 요청을 받는다
서버가 API 응답을 쏜다
클라이언트가 API 응답을 받는다

캐치볼로 생각하시면 이해가 쉬우실 겁니다! 🙂

자 그렇다면, 왔다 갔다 하는 것은 알겠어요~ 하지만 정확히 어떤 방식으로 동작하는걸까요?

정답은 "클라이언트 코드"에 있습니다. 웹 화면을 구성하는 클라이언트 코드는 3가지 언어로 구성됩니다.

HTML : 전체적인 뼈대 (버튼이 있다)
CSS : 디자인 (버튼을 빨갛게 혹은 크게 만들자)
JavaScript : 동작 (이 버튼이 눌렸을 때 어떠한 행동을 하게 하자)

여기서 JavaScript를 이용하면 특정 버튼이 눌렸을 때 일어날 동작을 코드로 작성할 수 있습니다. 느낌을 보여드리기 위해 슈도 코드를 써보면 다음과 같습니다. 아래는 JavaScript 코드가 일부 포함되어 있습니다.

const button = document.getElementById("#save-button") // 저장 버튼을 가져온다
button.addEventListener('click', (e) => {
  const data = ... // 필요한 데이터를 정리한다

  // 정리한 데이터를 API에 쏘고 (1번 과정) 그 응답을 받는다 (4번 과정) 
  // 이때 우리가 배운 도메인이름 (혹은 ip), 포트 번호, HTTP path 등이 사용된다.
  const response = api.request("http://localhost:3000/user", data) 
  
  // 이제 response를 이용해 화면에 데이터를 보여줄 수도 있고, alert으로 저장 성공 메시지를 보내줄 수도 있다.
})

대략 어떤 느낌인지 아시겠나요? 🙂 클라이언트 코드로 API 요청을 쏘고, 응답을 받아 처리하는 부분이 작성된 덕분에 화면에서 유저가 버튼을 누르면 API와 연결되어 동작하는 겁니다.

이런 클라이언트 코드는 "웹"인 경우, JavaScript (혹은 TypeScript)로 작성되어 있고, 어떤 라이브러리를 사용하느냐에 따라 코드가 천차 만별의 모습일 수 있습니다.

또 궁금한 점 있으시다면 편하게 질문 남겨주세요! 👍

답변이 도움이 되었으면 좋겠습니다. 감사합니다 🙇

인프런 커뮤니티 질문&답변