장부장님을 위한 API상호작용 흐름 정리

2022. 3. 17. 18:43BACK END

 

프론트엔드(Front-end)

  프론트엔드 개발자가 하는 일은 디자이너들이 기획자의 의도에 따라 디자인한 화면의 이미지를 웹서비스나 어플을 사용하는 유저들이 시각적으로 눈앞에서 직접 대면하는 표면적인 부분을 담당하게 된다.
  모니터 화면 곳곳에 뿌려지는 이미지와 버튼을 클릭했을 때의 기능적인 부분이 어떻게 작동되는지, 그리고 화면의 비율이나 레이아웃이 모니터 해상도에 따라 능동적으로 변화가 가능하도록 되는지 등 일련의 작업들이 프론트엔드 개발자들의 노력으로 이뤄진다.
  프론트엔드 개발자들은 이러한 기술적인 경험과 지식으로 기획자 혹은 디자이너들과 긴밀한 논의와 협업을 통해 작업을 조율해 가며 하나의 서비스를 만든다.

 

 

 

백엔드(Back-end)

  백엔드 개발자는 서버의 작동과 밀접한 연관이 있다. 웹사이트나 모바일앱을 사용하는 유저들이 브라우저를 통해 입력한 정보나 신호가 결국 최종적으로 도달하는 곳은 서버가 된다. 백엔드 개발자들은 이러한 정보를 수용하기 위해 마련된 서버를 구성, 관리하거나 용도에 맞도록 환경설정 및 최적화를 하는 임무를 맡고 있다. 물론 그러자면 데이터베이스(DB)를 설계 혹은 관리하고 서버를 코딩하기도 한다.

 

 

상호작용 흐름

 

 

 

 

 

1) INPUT

 

 

 

 사용자는 숙소 목록(예시 화면에 나타난 리스트 역시 데이터베이스에서 불러온 내용)에서 원하는 숙소의 세부 정보를 확인하고 예약 절차를 진행하기 위해 원하는 숙소를 터치(클릭)한다. 

 

 

 

 

 

 

 

2) REQUEST

 

 웹에서 숙소에 대한 세부적인 정보를 제공하는 페이지를 띄우기 위해선 해당 숙소의 사진 URL, 이름, 평점, 후기, 답변수, 프로모션, 안내메시지 정보가 필요하며 구성에 필요한 데이터를 서버에 요청한다. 이 때 웹에서는 선택된 숙소를 식별할 수 있는 값을 파라메터로 요청과 함께 보내준다.

 

 

 

3) 데이터베이스 처리

 

 요청을 수신한 서버에서는 파라메터에 담긴 값을 활용하여 데이터베이스에서 해당하는 숙소의 정보를 조회하고 필요한 정보를 추출한다. 아래 예시는 데이터베이스에서 숙소의 정보가 담긴 테이블이며 이번 요청에 대한 응답으로 shop_name, mainimg, promotion, noticement, rate, cnt_review, cnt_reply에 입력된 정보를 추출한다.

 

 

 

4) RESPONSE

 

서버는 DB에서 추출한 자료를 기반으로 웹에서 사용할 수 있도록 형식에 맞게 아래처럼 가공하여 웹으로 응답해준다.

핵심!! 이것을 API 라고 한다. 커넥트 에서는 API 통신규격을 JSON 으로 하고 있다.

아래와 같은 "key" : "value" 의 집합 선형 묶음 형태를 JSON 이라고 한다.

 

5) OUTPUT

 

 

마지막으로 서버에서 응답받은 데이터를

프론트에서 제작한 페이지에서 일정한 규칙으로 담아주면 사용자는완성된 페이지를 확인할 수 있다.

 

'BACK END' 카테고리의 다른 글

API  (0) 2022.03.17