Javascript 공부 #5

서버란?

---

유저가 데이터를 요청하면 데이터를 보내주는 간단한 프로그램일 뿐이다.

 

네이버 웹툰 서버 : 유저가 웹툰 요청하면 웹툰 보내주는 프로그램

유튜브 서버 : 유저가 영상 요청하면 영상 보내주는 프로그램

 

서버에 데이터를 요청할 때

1. 어떤 데이터인지 url 로 잘 기재해야하고
2. 어떤 방법으로 요청할 것인지 결정해야함 (GET / POST 등..)

 

 

 

GET / POST 요청하는 법

---

GET 요청은 서버에 있던 데이터를 가져오고 싶을 때 주로 사용하고, POST 요청은 서버로 데이터를 보내고 싶을 때 주로 사용한다. ( PUT, DELETE 요청도 있음 )

 

GET 요청 보낼 때 가장 쉬운 방법은 브라우저 주소창이다. 브라우저 주소창에 url 적으면 그 주소로 GET 요청을 보내준다.

 

POST 요청 하고싶으면

<form action = “url” method = “post”></form>태그 사용하면 된다. 폼이 전송되었을 때 POST 요청을 보내줌

 

그런데 GET, POST 요청을 보내면 브라우저가 새로고침 되는 단점이 존재한다.

 

 

 

AJAX란?

---

서버에 GET, POST 요청을 할 때, 새로고침 없이 데이터를 주고받을 수 있도록 도와주는 브라우저 기능을 AJAX라 한다.

 

AJAX 사용하면 새로고침 없이도 쇼핑몰 상품을 더 가져올 수 있고,

새로고침 없이도 댓글을 서버로 전송하는 등 여러 기능들을 만들 수 있다.

 

 

 

 

 

jQuery로 AJAX 요청하기

---

$.get() 함수를 사용하여 안에 url 만 잘 입력해주면 된다.

$.get('<https://codingapple1.github.io/hello.txt>');

 

VScode 에서 live server 익스텐션 설치하여 사용해야함.

 

$.get('<https://codingapple1.github.io/hello.txt>').done(function(data){
  console.log(data)
});

서버로부터 받아온 데이터 사용하고 싶으면 위와같이 done (then) 안에 콜백함수에서 사용하면 된다.

 

 

$.post('url~~', {name : 'kim'})

서버에 POST 요청을 보낼 땐 위와같이 데이터를 보낼 url 적고 서버에 보낼 데이터를 적으면 된다. 물론 done이런거 붙여도 됨.

 

 

$.get('<https://codingapple1.github.io/hello.txt>')
  .done(function(data){
    console.log(data)
  })
  .fail(function(error){
    console.log('실패함')
  });

해당 url 에서 데이터 가져오기를 성공하면 done 안의 코드가 실행되고, 데이터 받오는 것을 실패하면 fail 안의 코드가 실행됨. error 를 출력해보면 에려관련 정보를 출력해준다. 보고 디버깅 하면 된다.

 

done / fail 말고 then / catch 사용해도 된다.

fetch('<https://codingapple1.github.io/price.json>')
  .then(res => res.json())
  .then(function(data){
    console.log(data)
  })
  .catch(function(error){
    console.log('실패함')
  });

jQuery 말고 쌩 자바스크립트를 사용하면 위와같이 코드를 짤 수 있다.

 

코드 한 줄이 더 필요한데, 서버와 데이터를 주고 받을 땐 문자만 주고 받을 수 있다.

array 나 object 자료형은 전송 불가능하다.   { price : 5000 } 이런거 받아올 때 object 를 JSON 으로 바꿔서 전송해주기 때문에 가능한 것.

array / object 자료형에 따옴표를 쳐서 ‘{”price”:5000}’ 이런식으로 JSON이라는 자료가 됨

JSON 은 문자로 인식하기 때문에 서버와 데이터 주고받기가 가능함.

 

하지만, jQuery $.get() 이런건 JSON으로 자료가 도착하면 알아서 array나 object 로 바꾸어준다. 기본함수인 fetch() 는 JSON으로 알아서 바꾸어주지 않기 때문에 res.json() 코드 한 줄 추가해주어야 한다.

 

 

 

 

 

위와같은 UI 가진 사이트를 구현해보자

 

더보기 버튼을 누르면 서버에서 상품들의 정보를 가져와 뿌려주는 UI 구현해볼것이다.

 

var products = [
        { id: 0, price: 70000, title: "Blossom Dress" },
        { id: 1, price: 50000, title: "Springfield Shirt" },
        { id: 2, price: 60000, title: "Black Monastery" },
      ];
      var row = $(".row");

      products.forEach((data, i) => {
        var box = `<div class="col-sm-4">
          <img src="https://via.placeholder.com/600" class="w-100" />
          <h5>${products[i].title}</h5>
          <p>가격 : ${products[i].price}</p>
        </div>`;
        row.append(box);
      });

우선 기본 더보기 버튼을 누르지 않았을 때의 기본 상품 정보들을 화면에 띄워주는 코드이다.

 

$("#more").on("click", function () {
        $.get("https://codingapple1.github.io/js/more1.json").done((data) => {
          data.forEach((a, i) => {
            var moreBox = `<div class="col-sm-4">
              <img src="https://via.placeholder.com/600" class="w-100" />
              <h5>${data[i].title}</h5>
              <p>가격 : ${data[i].price}</p>
            </div>`;
            $(".row").append(moreBox);
          });
        });
      });

더보기 버튼을 눌렀을 때, 서버로부터 get요청을 받아와 해당 데이터들을 똑같이 화면에 뿌려주면 된다.

 

	  var clickNum = 0;
      var products = [
        { id: 0, price: 70000, title: "Blossom Dress" },
        { id: 1, price: 50000, title: "Springfield Shirt" },
        { id: 2, price: 60000, title: "Black Monastery" },
      ];
      var row = $(".row");

      makeDiv(products);

      $("#more").on("click", function () {
        clickNum += 1;

        if (clickNum == 1) {
          $.get("https://codingapple1.github.io/js/more1.json").done((data) => {
            makeDiv(data);
          });
        } else if (clickNum == 2) {
          $.get("https://codingapple1.github.io/js/more2.json").done((data) => {
            makeDiv(data);
            $("#more").css("display", "none");
            $("#close").css("display", "block");
          });
        }
      });
      $("#close").click(() => {
        row.html("");
        makeDiv(products);
        $("#close").css("display", "none");
        $("#more").css("display", "block");
        clickNum = 0;
      });

      function makeDiv(data) {
        data.forEach((a, i) => {
          var moreBox = `<div class="col-sm-4">
            <img src="https://via.placeholder.com/600" class="w-100" />
            <h5>${data[i].title}</h5>
            <p>가격 : ${data[i].price}</p>
          </div>`;
          row.append(moreBox);
        });
      }

 

 

더보기 버튼을 누르면 서버에서 상품 정보를 더 가져온 후 세개 씩 뿌려준다.
그리고 상품이 다 보이게 되면 더보기 버튼을 없앤 후, 접기 버튼을 보여주어 누르게 되면 더보기 버튼을 누르기 전, 맨 처음 상태로 돌려준다.

makeDiv 함수로 반복되는 부분을 묶어 재사용성 증가

 

 

 

array 정렬하기

---

array 는 순서 개념이 존재하기 때문에 정렬도 가능하다. 문자 가나다 순으로 정렬하려면 그냥 .sort() 붙여주면 되는데

숫자로 정렬할 때는 추가로 코드를 더 작성해주어야한다.

var array = [7, 3, 5, 2, 40];
array.sort(function(a, b){
	return a - b;
});

console.log(array);

위와 같이 작성해주면 배열을 오름차순으로 정렬할 수 있다.

 

동작 원리를 살펴보면 변수 a와 b 에 순차적으로 배열의 값이 들어가는데, return 값이 양수이면 a를 오른쪽으로 , 음수이면 b를 오른쪽으로 배열을 정렬해주는 방식으로 작동한다.

 

배열안의 숫자를 내림차순 정렬하고 싶다면 return 값을 b - a 로 바꾸어 주면 된다.

 

sort() 함수를 바탕으로 UI를 가격순으로 정렬하고 싶다면 다음과 같이 코드 짜주면 된다.

$("#price").on("click", function () {
        products.sort(function (a, b) {
          return a.price - b.price;
        });
        row.html("");
        makeDiv(products);
      });

위와 같이 작성하면 a와 b 에는 object 자료형이 들어가게 된다. 따라서 가격 비교를 하여 오름차순 정리 하려면 a.price 와 같이 작성해주어야 한다.

 

 

array filter 함수

---

배열에서 원하는 값만 뽑아오고 싶을 땐 filter 함수를 사용해주면 된다.

var array = [7, 3, 5, 2, 40];

var new_array = array.filter(function(a) {
	return a < 4;
});

위와 같이 작성해주면 new_array 변수에 a가 4보다 작은 값만 담기게 된다.

• a 변수는 array에 있던 데이터를 뜻하고
• return 값에 조건식을 넣어주면 조건식에 맞는 a만 남겨준다.
• filter는 배열 원본을 변형시키지 않기 때문에 새로운 배열을 만들어서 저장해주어야 한다.

 

 

array map 함수

---

배열안의 모든 자료들을 변형할 때는 map 함수를 사용한다.

var array = [7, 3, 5, 2, 40];

var new_array = array.map(function(a) {
	return a * 4;
});

위와 같이 작성해주면 new_array 변수에 array 데이터를 모두 네 배 해준 데이터들이 담기게 된다.

map 함수도 filter 와 마찬가지로, 배열 원본을 변형시키지 않기 때문에 새로운 배열을 만들어서 저장해 주어야한다.

(참고)

sort 함수는 원본을 변형시켜버린다.

코드짤 때 원본을 변형시키는건 나중에 힘들어질 수 있어서 array/object 자료 조작시엔 원본을 따로 복사해두고 조작하는 경우가 많다.

 

 

sort 함수 이용하여 다나가 순 문자 정렬하기

---

상품명 다나가 순으로 정렬 버튼을 눌렀을 때 정렬해주려면 sort 함수를 사용하면 된다.

		$("#name").on("click", function () {
        products.sort(function (a, b) {
          return a.title.toLowerCase() < b.title.toLowerCase() ? 1 : -1;
        });
        row.html("");
        makeDiv(products);
      });

sort 함수는 return 값이 음수냐 양수이냐에 따라 정렬이 다르게 되기 때문에 조건식을 이용하여 1 또는 -1 를 리턴해주면 된다.

 

 

DOM 용어 개념정리 & load 이벤트

---

• DOM 이란?

Document Object Model 의 줄임말이다.

자바스크립트는 HTML 조작에 특화된 언어이다. 그런데 자바스크립트가 어떻게 HTML 을 조작할 수 있는 지에 대해 생각해본적이 있나?

생각해보면 HTML과 자바스크립트는 다른 언어이다. 그래서 자바스크립트에선 <div></div> 와 같은 이런 HTML 을 직접 해석하고 조작할 수 없다.

 

자바스크립트가 HTML 을 조작하기 위해선 HTML 을 자바스크립트가 해석할 수 있는 문법으로 변환해 놓으면 된다. 실제로 브라우저는 HTML 페이지를 열 때, HTML을 자바스크립트로 쉽게 찾고 바꾸기 위해 object와 비슷한 자료형에 담아준다.

<div style="color : red">안녕하세요</div>

브라우저는 이런 HTML 을 발견하면 object 자료형으로 바꿔서 보관해둔다.

구체적으로는 var  document = {} 이런 변수를 하나 만들어 거기에 저장해둔다.

var document = {
  div1 : {
    style : {color : 'red'}
    innerHTML : '안녕하세요'
  }
}

▲ 대충 이렇게 object 자료에 정리를 해놓음

 

이런식으로 저장해야 점 찍어서 원하는 자료에 접근할 수 있기 때문에

document.div1.innerHTML = ‘안녕’ 과 같이 HTML 조작이 가능해진다. 그래서 object에 담아두는 것

위 변수를 document object 라고 한다. model 붙여서 DOM

 

⇒ 자바스크립트가 HTML에 대한 정보들 ( id, class, name, style, innerHTML 등등) 을 object 자료로 정리한 것을 DOM 이라고 한다.

 

 

 

 

브라우저는 HTML 문서를 위에서부터 읽으며 DOM을 생성한다.

---

브라우저는 HTML 문서를 위에서부터 차례로 읽어내려간다. 읽을 때마다 HTML 을 발견하면 DOM 에 추가해준다.

따라서 <script></script> 를 다른 태그보다 아래에 쓰면 코드 에러가 나는 지 알 수 있다.

자바스크립트는 DOM이 생성된 경우에만 HTML을 조작할 수 있다.

 

 

 

자바스크립트 실행을 나중으로 미루는 방법도 있다.

---

이 자바스크립트 코드는 HTML을 전부 읽고 실행해 달라고 코드를 짤 수도 있다.

$(document).ready(function(){ 실행할 코드 })

document.addEventListener('DOMContentLoaded', function() { 실행할 코드 })

둘 중 아무거나 사용하면 된다.

위의 이벤트리스너들은 HTML을 다 읽었는지 알려주는 이벤트리스너 이다.

 

 

 

load 이벤트리스너

---

load 라는 이벤트리스너를 사용하면 DOM 생성뿐만 아니라 이미지, css, js 파일이 전부 로드가 되었는지도 확인 가능하다.

 

이미지 등이 로드되면 load 라는 이벤트가 발생하기 때문

셀렉터로찾은이미지.addEventListener('load', function(){
  //이미지 로드되면 실행할 코드 
})

위와 같이 사용

 

그런데 외부 자바스크립트 파일에 작성해놓으면, 그 js 파일보다 이미지가 더 먼저 로드되는 경우가 있어, 이벤트 발생 확인을 하지 못하는 경우도 생기기 때문에 주의해야한다.

$(window).on('load', function(){
  //document 안의 이미지, js 파일 포함 전부 로드가 되었을 경우 실행할 코드 
});

window.addEventListener('load', function(){
  //document 안의 이미지, js 파일 포함 전부 로드가 되었을 경우 실행할 코드
})

window에 붙여 사용하게 되면, document에 포함된 이미지, css파일 등 모든 것이 로드가 되었는지 확인해준다.

ready 이런 것과의 차이는 앞선 .ready() 는 DOM 생성만 체크하는 함수인데, 이것보다 더 나아가 모든 파일과 이미지의 로드 상태를 체크한다고 보면 된다.