웹의 동작방식

_Opacity·2021년 12월 18일

서버 클라이언트

프로그래밍

목록 보기

8/9

웹의 동작방식

개발을 하기 전, 가장 중요한 부분이 바로 이 부분이라고 생각한다. 가장 기본적이지만 중요한 이 파트에 대해 다뤄보자.

서버와 클라이언트

우리가 친구집을 갈 때의 상황이라고 가정하자. 우리는 자전거, 지하철, 자동차 등 다양한 탈 것들을 타고 친구집으로 향할 것이다. 웹의 상황에서도 똑같다.

클라이언트는 서버에 접속할 때 크롬, 익스플로러 등의 매체를 사용하여 가능할 수 있게 된다.

여기서 친구네 집의 주소는 우리가 아는 IP주소 라고 생각하면 된다.

이미지는 클라이언트에게

이게 무슨소리인가? 싶을 것이다. 제목의 내용은 이 설명을 읽어 나가다보면 이해할 수 있을 것이라고 본다. 예시를 들어보겠다.

서버에 접속한 클라이언트는 이제 자신이 필요한 것을 요청할 것이다. 이 때, 만약 서버가 제공할 정보가 서버 측에만 있다면 어떻게 될까? 한 두명의 클라이언트도 아닌 여러 명의 클라이언트를 상대하는 것은 어려울 것이다.

이래서 고안한 방법이 다음과 같다.

이렇게 유튜브를 보면 계속 데이터가 바뀌는 부분이 있다.

그리고 바뀌지 않는 부분이 있다. 이런 유튜브의 틀이나 기본적으로 있는 아이콘들이다.

계속 데이터가 바뀌는 부분은 서버에서 관리하기 때문에 서버에 저장한다. 하지만 이런 기본적으로 바뀌지 않는 이 틀과 같은 것은 어디에 저장할까? 바로 클라이언트에게 저장하는 것이다.

어? 나는 딱히 저장하라고 한 적이 없는데?
하지만 내가 유튜브를 시청하기 위해 유튜브 어플리케이션을 설치했는데 이게 바로 클라이언트에게 저장하는 것이다.

나는 바꾸라 한 적 없는데 바뀐 적 있는데?

그 경우는 서버 측에서 업데이트를 진행한 것이다.

API

이 부분을 다시보자. 이제 클라이언트는 서버에 무언가 요청할 것이다. 그 예시를 들어보겠다.

이럴 때마다 한 번에 많은 동작을 수행해줘야 되므로 성능의 저하가 발생하게 된다.

따라서 이런 식으로 일종의 규칙을 정해서 요청할 수 있도록 한다. 서버도 이렇게 되면 서버 내의 각자 역할인 부분에 클라이언트의 요청을 보내게 되며 병렬 수행이 가능해질 수 있게 되는 것이다.

이런 대화의 규칙을 API라고 한다.

하지만 여기서 알아야 할 것은 규칙은 어디까지나 개발자의 마음대로 정할 수 있다. 하지만 서로 다른 서비스에서는 문제가 발생할 수 있게 된다. 이 때문에 모든 개발자들은 API 규칙을 만드는 것을 통일했다.

요청받을 때는 POST(올리기), GET(불러오기), PUT / PATCH(수정하기), DELETE(삭제하기)

응답할 때는 200, 400, 500

이런식으로 되는 것이다. 이런 통일된 대화 규칙을 REST API라고 한다.

참고한 블로그 주소

JSON

JSON은 데이터를 'key' : 'value' 의 값으로 정리해 저장한 하나의 덩어리라고 생각하면 된다. 가장 좋은 것은 OpenAPI를 통해 JSON을 받아보면 쉽게 알 수 있다.

Ajax

Ajax는 비동기식 자바스크립트와 XML의 약자이다. 이게 뭔가? 싶지만 서버와 브라우저가 비동기방식으로 데이터를 교환할 수 있는 통신 기능을 말한다. 기본적인 코드를 보자.

$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "요청할 url",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

예시로 날씨의 정보를 알려주는 API를 실행시켜보자.
서울 날씨 API 접속

이런 식으로 JSON 형태로 받아볼 수 있다. 여기서 '구' 에 해당하는 부분과 미세먼지 수준을 알 수있도록 구현해보자. 먼저 Ajax의 부분이다.

function q1() {
            $('#names-q1').empty()
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulair",
                data: {},
                success: function (response) {
                    console.log(response)
                }
            })
        }

url은 현재 서울 날씨 상태를 제공해주는 API에서 JSON형태로 정보를 받는다. console.log를 통해 확인해보자.

오 우리가 봤던 단어가 보인다. 아주 잘 정보를 받고 있다는 뜻이다. 이제 이것을 콘솔 창이 아닌 HTMl 페이지에서 보이게 해야 되는 것이다. 다시 JSON 파일을 보자.

빨간 색으로 표시해둔 부분이 미세먼지 수준과 해당하는 구 임을 알 수 있다. 이를 가져와보자.

let list = response['RealtimeCityAir']['row']
for (i = 0; i < list.length; i++) {
    let gu_name = list[i]['MSRSTE_NM']
    let gu_mise = list[i]['IDEX_MVL']
    console.log(gu_name, gu_mise)
}

위와 같은 코드를 입력하고 HTML 페이지에서 버튼을 눌러보자.

오! 정보를 가져왔다. 만약, 이 정보를 HTML에 붙이고 싶다고 생각하면 jQuery에서 했던 것처럼 자바스크립트 안에 붙이면 된다.

<ul id="names-q1">
    <li>중구 : 82</li>
    <li>종로구 : 87</li>
    <li>용산구 : 84</li>
    <li>은평구 : 82</li>
</ul>

HTML에 이 코드를 추가해서 한 번 해보자.

let list = response['RealtimeCityAir']['row']
for (i = 0; i < list.length; i++) {
    let gu_name = list[i]['MSRSTE_NM']
    let gu_mise = list[i]['IDEX_MVL']
    let temp_html = `<ul id="names-q1">
                        <li>${gu_name} : ${gu_mise}</li>
                    </ul>`
    $('#names-q1').append(temp_html)
}