<스파르타 웹개발> 2주차 개발일지

코딩/스파르타코딩클럽|2022. 6. 23. 13:46

결과물

페이지 로딩 후 현재 서울의 기온을 가져와서 보여준다.

 

1주차 복습

1주차 간단히 복습하고 넘어가자.

 

1. 웹페이지를 이루는 3가지 요소 HTML(뼈대), CSS(꾸미기), JavaScript(반응)

 

2. HTML(tag)의 구조는 <tag>들로 이루어지고, tag의 추가 속성은 attribute로 tag 내에 <tag attribute="어쩌구">로 표시한다. 

 

3. CSS(꾸미기) 뭘 꾸밀 것인가? 지정해줘야 하며, 목표로 하는 tag에 class를 지정하여 <style> 태그 내에 .class { } 로 CSS class selector를 이용하여 꾸며준다. 

 

(강조한 이유는 이전에 혼자 HTML, CSS를 공부할 때 언제 id를 지정하고 언제 class를 지정할지 혼란스러웠기 때문이다. 정해진 것은 없으나, CSS는 class로 지정한다고 기계적으로 생각해두면 코드 읽기에도 편할 것 같다. )

 

4. JavaScript : 기본적인 문법만 알고 가면 크게 복잡할 것 없다. 큰 줄기에서 함수라고 생각하면 편한데, 특히 웹에서는 사용자가 특정 버튼을 클릭하면 특정 기능을 실행해야 하는 경우가 많아 <button onclick=JS에서 정의한 함수> 와 같은 형식으로 사용하는 경우가 많았다. 

 

 

 

2주차에는..

JQuery와 Ajax를 배워보았다. 

 

1. JQuery : JavaScript와 HTML을 쉽게 연결해줍니다.

내가 지금까지 이해하는 범위에서의 동적 웹이라고 하면, 사용자가 특정 행동을 하면 -> 웹이 그에 맞게 변화하는 것이다. 

그런데..

웹이 변화하려면? HTML(뼈대)나 CSS(꾸미기)에 수정이 들어가야 한다!

혹은 HTML에 사용자가 작성한 값을 가져오고 싶다면? 

 

이러한 역할을 하는 것이 JQuery이다. 

물론 JavaScript만으로도 가능하지만 코드가 길고 직관적이지 않기 때문에 JQuery를 사용한다. 

 

(여담으로, 기존 파이썬에서 DB를 조작할 때

파이썬과 DB는 따로이지만,

pymysql과 같은 라이브러리를 사용하면 DB를 조작하는 query문을 파이썬에서 DB로 보내는 방식의 코딩을 한 적이 있는데 그와 유사한 느낌을 받았다. )

 

 

JQuery를 사용하려면, python에서 library를 가져오듯 import를 해야 하며 그 구문은 다음과 같다. 

<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

 

JQuery의 간단한 사용 방법은 다음과 같다. 

CSS가 HTML tag의 class 이름표를 이용하여 목표를 지정했다면,

JQuery는 id 이름표를 사용하여 목표를 지정한다!

<head>
    <script>
    	$('#myid').method();
    </script>

<body>
	<p id="myid"> 어쩌구저쩌구 </p>
</body>

위와 같이..

  • 1. 내가 JS에서 뭔가 상호작용하고 싶은 HTML 요소에 id를 붙이고,
  • 2. $('#id이름') 을 통해 JS에서 JQuery를 통해 해당 요소를 불러다가
  • 3. .method (JQuery에서 제공하는 메서드들) 을 이용하여 기능을 실행하면 되겠다. 

 

2. JQuery의 예시들

이제부터는 간단하다. 

 

1) 특정 input box에 사용자가 입력한 값을 가져오고 싶다면?

input box에 id="id_1"을 붙이고

<script>에서 $('#id_1')을 통해 해당 태그를 호출하고

값을 가져오는 메서드인 .val()을 실행하면

<head>
    <script>
    	let input_content = $('#id_1').val();
    </script>

<body>
	<input id="id_1"> </input>
</body>

JS에서 input_content라는 함수에 id_1 이름표를 가진 input 박스에 들어 있는 값이 배정된다. 

 

여기서 잠깐!!

강의를 들을 때 뭔가 괴리감을 느낀 부분이 바로 여기이다. 

 

다음과 같은 간단한 페이지가 있다고 생각해보자. 

사용자가 입력한 값을 팝업으로 띄워준다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>연습용</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
        function popup() {
            let a = $('#inputbox').val();
            alert(a)
        }
    </script>
</head>
<body>
    <label>값을 입력하세요</label>
    <input id="inputbox">
    <button onclick="popup()">제출하기</button>
</body>
</html>

 

기존 웹페이지를 바라볼 때 나의 생각은 다음과 같았다. 

 

사용자가 3을 입력하고 버튼을 누른다

-> 3이 backend로 넘어가서 특정 함수를 실행한다

-> 이 함수의 실행 결과가 frontend에 반영된다. 

 

하지만 직접 코드를 작성해보니 진실은 다음과 같았다. 

 

사용자가 (JavaScript로 작성된) 함수가 포함된 웹 문서를 다운받는다

-> 3을 입력하고 버튼을 누른다

-> 해당 JavaScript에서 함수를 실행하여 결과를 바로 반영한다

 

즉 backend로 넘어간 정보는 없다.

2) client의 액션으로 웹 페이지에 변화를 주고 싶다면?

위의 예시와는 다르게, 함수가 실행될 때 웹문서의 골격에 변화를 주어야 한다.

즉, JavaScript 함수에서 HTML / CSS의 수정 기능이 필요하다. 

 

이는 다음과 같이 해결한다.

 

가) 특정 요소를 보이게/숨게 하는 경우

$('#id_1').show()
$('#id_1').hide()

나) 특정 요소를 추가하는 경우

temp_html = `<tr class="urgent">
                <td>${stn_nm}</td>
                <td>${totalcount}</td>
                <td>${parkingbike}</td>
            </tr>`

$('#id_1').append(temp_html)

temp_html 변수에 ``(백 틱) 사이에 필요한 HTML 구문을 넣고

JQuery의 append 메서드를 이용하여, '#id_1' id를 갖는 태그에 append로 해당 요소를 추가하면 된다. 

 

이 때 temp_html에 내가 원하는 변수를 넣고 싶을 경우

파이썬의 f-string처럼 ${변수명} 을 html 구문에 넣어주면 된다. 

 

다) 기존 이미지/텍스트를 수정해야 하는 경우

$('#img_1').attr('src', url)
$('#text_1').text(msg)

이미지를 수정해야 하는 경우, attr 메서드를 이용하여

img_1 id를 갖는 태그의 attribute를 수정할 수 있다. 

즉, 첫 코드의 경우 img_1의 id를 갖는 태그의 attribute 중 'src' attribute를 url로 변경하게 된다. 

 

텍스트의 경우 text 메서드로 쉽게 변경할 수 있다. 

 

 

 

3. Ajax : API와의 상호작용

클라이언트는 서버에 정보 조회를 요청하거나(Read)

정보를 만들거나(Create), 변경하거나(Update), 삭제하라고(Delete) 요청할 수 있다.

이를 앞글자를 따서 보통 CRUD라고 지칭한다.

 

이 때 은행 창구와 같은 역할을 하는 것이 API라고 한다. 

정확히 왜 창구가 필요한지 이해는 아직 잘 가지 않지만 일단 그렇게 알고 넘어가자. 

 

이러한 요청들에는 여러 타입이 있는데

Read 의 경우 GET type

Create, Update, Delete 등 원본 정보에 조작이 필요한 경우 POST type이라고 한다. 

 

다음은 강의자료에 있는 한가지 예시이다. 

 

우리가 만드는 웹사이트에

날씨, 시간 등 외부에서 가져올 수 있는 유용한 정보가 필요하다면, 이를 해당 API에 GET 방식으로 가져오면 되고

JavaScript에서 이를 도와주는 것이 바로 Ajax이다. 

 

 

4. JSON : API의 모습

API에 기록된 정보들은 직관적이지 않고 복잡한데, 

이를 JSON이라는 형식으로 바꿔주면 사람이 이해하기 편리하고

어떤 구조로 이뤄져 있는지 확인해야 GET을 통해 가져오기가 편하다. 

 

이러한 보기 쉬운 구조를 JSON이라고 하며 

JavaScript Object Notation의 약자이다. 

 

JSON 문법은 dictionary의 형태이기 때문에 보기가 편하다. 

{
  "employees": [
    {
      "name": "Surim",
      "lastName": "Son"
    },
    {
      "name": "Someone",
      "lastName": "Huh"
    },
    {
      "name": "Someone else",
      "lastName": "Kim"
    } 
  ]
}

 

5. Ajax의 사용 예시

<head>
	<script>
        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
            data: {},
            success: function (response) {
                let tmp = response['temp']
                $('#temp').text(tmp)
            }
        })
    </script>
</head>

위와 같이 $.ajax라는 형태로 시작하는데, 이는 우리가 JQuery를 사용하는 방식과 동일하다. 

즉, .ajax라는 메서드를 사용하는 것이며

메서드에 필요한 parameter들은 아래에 표시되어 있다. 

 

GET type으로

특정 url에 요청을 보내는데

보낼 데이터는 {} 비어있고

success : 성공할 경우 해당 함수를 실행한다.

 

이 때 함수는 response라는 객체를 parameter로 받게 되는데, 이는 서버에서 돌아온 답변이라고 생각하면 되겠다. 

 

해당 url의 JSON 형태는 다음과 같다.

console에 response를 찍어보면, response의 형태는 다음과 같다.

이 때 가져오고 싶은 정보가 temp라고 하면

response data는 dictionary 형태이므로 (JSON)

내가 원하는 변수에 response['temp']를 배정하면 해당 값을 사용할 수 있다.

 

 

** 특이한 함수로, client가 특정한 action을 취하지 않아도 API의 정보를 가져와서 표시하고 싶을 때!

<script>
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
            data: {},
            success: function (response) {
                console.log(response)
                let tmp = response['temp']
                $('#temp').text(tmp)
            }
        })
    });
</script>

위와 같이 $(document).ready(function() {    페이지 로딩 완료일 때 실행하고 싶은 함수들    })

메서드를 사용하면 편하게 할 수 있다. 

 

뜯어보자면 JQuery 문법대로 해당 웹문서가(document) 준비되면(ready) 실행한다고 이해하면 될 것 같다.

 

 

6. 정리

JavaScript와 해당 문서(HTML)를 쉽게 상호작용 시켜주는 JQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

이렇게 import해서 쓰면 되고, 

상호작용하고 싶은 HTML 요소에 id를 붙여서 

$('#id').method

하고 싶은 일을 JQuery method를 검색해서 사용한다.

 

JavaScript와 외부 API를 상호작용 시켜주는 Ajax

JQuery의 ajax 메서드를 다음과 같이 사용해서 API와 상호작용 하면 된다.

<head>
	<script>
        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
            data: {},
            success: function (response) {
                let tmp = response['temp']
                $('#temp').text(tmp)
            }
        })
    </script>
</head>

 

저작자표시 비영리 변경금지 (새창열림)

'코딩 > 스파르타코딩클럽' 카테고리의 다른 글

<스파르타 App개발> 1주차 개발일지  (0) 2022.07.25
<스파르타 웹개발> 5주차 개발일지 (完)  (0) 2022.07.08
<스파르타 웹개발> 4주차 개발일지  (0) 2022.07.02
<스파르타 웹개발> 3주차 개발일지 (헷갈렸던 python 관련 내용들)  (0) 2022.06.30
<스파르타 웹개발> 1주차 개발일지  (0) 2022.06.17

댓글()

티스토리툴바