39일차 - 제이쿼리 + ajax (3) json DB + 비동기통신(ftp)

어제까지는 인터페이스! + ajax로 DB 만들어 자바연결하기!

• 에밋짜는게 제일 어렵다! 무식하게 뿌시고 다시! 다시! 다시 만들어!
  "CJ몰 칠성몰 배껴봐야지~ 슬라이드 무조건 넣어넣어, DB 연결!"

---

(깃허브 올리기) read.me : "json DB 아키텍처 먼저 설계했습니다"

• 각 프로젝트의 ~~.json <- 얘만 따로 깃허브 올려라! (백엔드가 보도록)
  ㄴ> 백엔드가 json을 가져가 php와 연동하니까!
• 소개페이지 json 만들기
• 슬라이드 배너 각 섹션마다 json 만들어보기 -> json 따로 만들어서 깃허브에 올리기

---

비동기통신 : 어제 한 곳 이후부터 시작합니다!

1. DB 정돈

1-1. tab.js

• iconCs : ''
• iconText : ''
• iconLink : ''

DB 복붙복붙

1-2. sjyDB.json 파일 생성 & DB복붙

json 파일로 떼오기

DB 화석화 (text화)

• 쌍따옴표 ""
• _ - 없애고 대문자로
  

---

2. ajax 비동기통신 (sftp.json 리모트패스)

tab.js

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

2-0. f1 Config 서버 연결 or 파일질라

2-1. remotePath : '/www'

• url : 서버 절대 경로로 작성!
• success(function( DB변수명을 받는다 ){
  console.log( DB변수명 )
  })

2-2. remotePath : '/www/jq-1118'

tip) ftp.json

• vscode의 local 보지마!
  local은 현재 작업 중인 영역, 내 편의에 따라 옮겨다님.
  즉, ftp 설정에 따라 아무데나 들어가는 게 local
• 서버를 봐라!

Quiz) /www -> /www/ccc

즉, 프로젝트 별로 sftp.json 세팅

---

아니면, vscode에서 서버업로드 하지 말고, 파일질라에서 하던가

오직 서버에 집중하기 위해 파일질라에서 수동 업로드

---

2-3. success( function( DB변수명 ){

		<!-- 성공시 명령 -->

})

2-3-1) 콘솔 로그 "수능광고전단지"

  success(function( sjyDB ){
      console.log(sjyDB[0].descriptionH2);
  })

주소창 : 내주소/jq-1118/jQuery.html

2-3-2) "수능광고전단지" HTML < h2 > 영역에 노출

  success(function( sjyDB ){
      $('.description h2').html(sjyDB[activeIndex].descriptionH2);
  })

2-4. attr 메서드와 html 메서드로 태그 완성하기

+) 서버 쿠키문제 잠시 꺼두는

<script src="/jq_1118/js/tab.js?ver=<?php echo time(); ?>"></script>

2-4-1) 태그중심 : img h2 p 영역 삽입

2-4-2) DB중심 : 썸네일 & 링크

• 썸네일 : for문 & each문

• 링크 : each문

---

3. setInterval 돌릴거다

Q) 왜 변수, 선언문, 실행식 다 따로따로 정리했을까?
A) 매개인자 3개 받는 함수 돌리려고!

---

+) 절대경로 쓰라고오오

HTML

<script src="/jq_1118/js/tab.js?ver=<?php echo time(); ?>"></script>
<link rel="stylesheet" href="/jq_1118/style.css">

sjyDB.json

<script>
[
    {				 // 절대경로
        "titleImg" : "/jq_1118/img/main/ad/1.jpg",
        "thumbImg" : [
            "/jq_1118/img/thumb/ad/1.jpg",
            // 절대경로
            "/jq_1118/img/thumb/ad/2.jpg"
            // 절대경로
            ],
        "descriptionH2" : "",
        "description" : "",
    }
]
</script>

tap.js

<script>
  $.ajax({
          type : "GET",
          		// 서버 절대 경로!
          url : '/jq_1118/json/sjyDB.json', 
          datatType : 'json',
          // 하략
</script>