40일차 - ajax 네비DB 데이터바인딩

밀레·2022년 11월 21일

코딩공부

목록 보기

105/135

1. ftp 서버 연결 - 내주소/ajaxPage/

이렇게 하면 ~~~.cafe24.com/hi/jQuery.html 로 가능! ( /jq_1118/ 안껴도 됨 )
파일질라 ftp에도 hi 폴더 생김! (바탕화면에서 드래그n드롭 할 필요 없음!)

맨 첨에 서버-내컴 이렇게 연결하고, 그후 uploadOnSave false + 파일질라 업로드 쓰면 되겠다.

1-1. json 화석화 (데이터프로토타입 컨펌받기)

1-2. json파일 서버 업로드 확인 (데이터바인딩 소스 확인)

내주소/ajaxPage/data/db.json

2. naviDB 아키텍처 만들기

11/24 평가에서는

리액트(서버없이 구동하는 인터페이스) 반응형 자소서 ~ 깃페이지 주소 제출
자소서 페이지의 각 섹션별 데이터 바인딩을 위한 소스를 깃허브에 올리고, 깃주소 주기
내주소/pwa/data/navi.json (필수)
내주소/pwa/data/banner.json
내주소/pwa/data/myability.json
내주소/pwa/data/myinfo.json
내주소/pwa/data/portfolio.json (필수)

2-0. 새로 서버 연결

2-1. navi DB 아키텍처 만들기

타이틀
링크
타켓블랭크(새창에서 열기)
클래스명
보일지/말지 t/f

2-3. bannerDB - 스와이퍼 DB 아키텍처 만들기

이미지경로 : "이미지경로는 서버절대경로"
큰글자 : "큰글자 설명 h2"
작은글자 : "작은 설명 p태그"
버튼 : "링크 태그 text로"
a 링크 : "링크값"
새창에서 열릴지 : "_blank 새창에서 열릴지"
클래스명 : "swiperActive 각 스와이퍼의 클래스명"

2-4. 제이쿼리 ajax

제대로 들어갔는지 console.log(naviData) 해보기

2-5. HTML & DB아키텍처 연결/설계

HTML 에밋 짜기

3. 네비게이션 데이터바인딩 하기

오후 실습

자신의 도메인/pwa/
네비게이션 연동 처리하기 (메서드 힌트 : each, html)

백틱 쓰지 말고, 오로지 쌍따옴표로 표현하기 (each)

+) each에서 각 item 이란?

결과물

HTML

<body>
    <header id="hd" class="d-flex">
        <div class="container d-flex justify-content-between align-items-center">

            <h1><img src="./LOGO_2.svg" alt=""></h1>

            <ul id="gnb" class="d-flex">
                <!-- li each -->
            </ul>

            <ul id="utilmenu" class="d-flex">
                <li class="pe-5">깃허브</li>
                <li class="pe-5">노션</li>
                <li>대표기획</li>
            </ul>
        </div>
    </header>
</body>

<script>
	// 제이쿼리 GET방식으로 ajax 부르기 (자바스크립트는 넘 복잡)
	$(function(){
            $.ajax({
                type : "GET",
                url : "/pwa/data/navi.json", // 서버 절대 경로!
                datatType : "json",
                success : function( naviData ){
                    // ul
                    var gnbli = '';
                    $.each(naviData, (index, item)=>{
                        gnbli += "<li class=\""+item.navClass+"\"><a href\""+item.naviLink+"\" target=\""+item.navTarget+"\">"+item.navTitle+"</a></li>";
                        // `<li><a href="${item.navLink}" class="${item.navClass}" target="${item.navTarget}">${item.navTitle}</a></li>`;
                    })
                    $('#gnb').html(gnbli)

                },
                error : function(e){
                
                }
		});
	})
</script>

+) CSS

	<style>
        ul, li{list-style: none;}
        #hd img{height: 20px;}
    </style>

+) 부트스트랩 테마 위에 바로 데이터바인딩 하기

https://getbootstrap.com/docs/4.6/components/navbar/

ex)

4-2. HTML 태그에 넣고, 작성한 each 식에 맞춰넣기

반응형 다된다!

플러그인 cdn

<!-- 부트스트랩 4.6 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<!-- 제이쿼리 2.2.4 -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

    <script>
        $(function(){
            $.ajax({
                type: "GET",
                url : "/pwa/data/navi.json",
                dataType :"json",
                success : function(naviData){
                 var naviTag = ''; 
                 $.each(naviData, (index, item)=>{
                    naviTag +="<li class=\"nav-item active\"><a class=\"nav-link\" href=\""+item.navLink+"\">"+item.navTitle+"<span class=\"sr-only\">(current)</span></a></li>";
                    //naviTag +="<li class="+item.navClass+" ><a href="+item.navLink+" target="+item.navTarget+" >"+item.navTitle+"</a></li>";
                 })
                 $('#gnb').html(naviTag)
          
                },
                error : function(){

                }
            })
        })
    </script>