36일차 - 비동기통신 (2) ajax DB연동

밀레·2022년 11월 15일

목록 보기

97/135

DB (xml / json / csv) <- 얘를 끌어다 화면에 출력시킴!
x
React : 인터페이스
＝
시너지!

0. 파일질라 서버 연결 + f1 config

1. 카테고리 끌고 들어오는 ajax (이론)

제이쿼리 ajax 틀 있으니까 항상 그거 복붙해서 써라

$(function(){
    $.ajax({
        type : "GET",
        url : "/jq_1118/json/sjyDB.json", // 서버 절대 경로!
        datatType : "json",
        success : function( dataDB ){
            // 성공 시
        },
        error : function(e){
            // 실패 시
        }
    });
})

1-1. type : GET 혹은 POST

type : 'GET' (get 방식)
"가져옴" (가볍게 가서 무겁게 돌아온다) post보다 덩어리 큼
(ex. 게시판 목록 페이지 방식_get으로 밖에 있던 목록/글작성자 끌고들어와 화면에 뿌림!)
type : 'POST' (post 방식)
"담아옴" (무겁게 가서 가볍게 돌아온다)
폼 태그로 데이터 정리한 다음, post (보냄)
잘 갔는지 못갔는지 return 값(성공/실패)만 받고 끝

1-2. url : "데이터베이스를 끌고 올 곳"

어디로(.xml / .json / .csv) 가서 끌고오는지

.xml / .json / .csv

가벼운 데이터 모음집 [ { : }, { : }, { : }, .... ] 메모장으로 돌아다닐 수 있음!
단, 가벼우니 싱글페이지나 만들지, 거대 쇼핑몰은 만들 수 없음.
(Q) 왜 리액트 안에 DB 내장+하드코딩 안 하고, .xml .json .csv 사용하느냐?
(A) 유지보수 비용 절감! (메모장에서 숫자만 바꾸면 됨)

SQL & php

SQL(ex.그누보드 어드민) 쓸거면 php(ex.그누보드) 필요!
이놈은 아주 무거움! (쇼핑몰처럼 큰 놈 만들 땐 SQL + php)

1-3. type : 어떤 방식?

1-4. dataType : 문자야? 숫자야?

'text'
"갖고 올 데이터를 text로 인식할게"
-> 이벨 과정으로 필터링해 자바스크립트가 태그로 먹을 수 있도록 컴파일 해야함
'HTML'
"갖고 올 데이터를 태그로 인식할게"
'json'
'csv'
'xml' (데이터를 감고 있는 노드)
태그처럼 생겼고 svg처럼 작동하지만, 태그는 아님!
React 안쪽에 들어가는 것들과 비슷하게 행동함

1-5. success & error

error 실패 시, 숫자...?

2. 이제부터 DB를 만들어야 함 (실습)

어제 만든 '객체를 담은 배열' 데이터 -> .json 파일로 생성!

.json 형식으로 생성

큰따옴표 "소문자" : ""
절대경로로 "link" : "/product/24_pro_4.jpg"

ex) 성공샘플

3. DB 중 "name" 화면 노출

3-1. 제이쿼리 cdn 연결

HTML과 js 셋팅

	<h1 id="head">
		<ul id="product">
        
		</ul>
	</h1>

3-2. ajax (=비동기통신) 호출

".json 갖고 들어와!"

3-3. 제이쿼리 ajax 틀

$.ajax({

		<!-- json 갖고 와!! -->
    
}).success(function(data){
	<!-- 성공 시 -->
}).error(function(e){
	<!-- 실패 시 -->
});

type : 'GET',
url : '/phpTwo/db/common.json', (common.json 위치 절대경로)
dataType : 'json'
성공 or 실패( ){ }

3-4. 콘솔에 data & 데이터타입 찍어보자

dataType : 'text' 경우

text 형식으로 데이터를 가져옴!

dataType : 'json' 경우
json 형식으로 데이터를 가져옴!

3-5. DB 중 "name" 화면 노출

  <h1 id="hd">
      <ul id="#product">

      </ul>
  </h1>

성공 시, success : function( data ){

	$("#head").html(data[0].about)

}

4. DB 전체 화면 노출 (for-in, forEach 등)

성공 시,

<script>

	let list ='';

	for(let i in data){
		list += `<li><img src="${data[i].link}" /> ${data[i].name} <p>${data[i].price}</p></li>`;
	}
    
	$("#product").html(list)
    
</script>