38일차 - 제이쿼리 + ajax (2) 부트스트랩5까지

밀레·2022년 11월 17일

코딩공부

목록 보기

102/135

tip) 가고 싶은 회사의 자격조건/우대요건 보고, 단어 따라서 써라!

ex) EC솔루션 프론트엔드 우대요건

"성능 개선을 위한 다양한 시도 및 적용 경험"
형상 관리 도구(git) 및 CI 도구 활용 경험(피그마)
SPA 개발 경험 (=리액트 페이지 만들었나)

37일차 작업 처음부터 다시 해보기

1. 어제보다 DB를 추가!

2. active 들어간 애 번호 받기

<ul class="d-flex p_tabNm fs-3">
	<li><a href="#none">React</a></li>
	<li class="active"><a href="#none">Web</a></li> <!-- .active -->
	<li><a href="#none">EC</a></li>
</ul>

2-1. '.active' 가진 li의 번호(0, 1, 2) 잡아내서 = startNum에 저장

<script>

    $(function(){
        var startNum = $('.p_tabNm .active').index();
        // .active를 갖는 li의 index를 변수에 저장
    })
    
</script>

2-2. portfolioDB[ startNum ]

2-2-1) 제목란

portfolioDB [ startNum(=.active 가진 li 번호) ]

<script>

  // Web 클릭 시, Web에 관한 DB 내용을 HTML h2태그에 집어넣기
  $('#portfolio .description h2').html(portfolioDB[startNum].descriptionH2)

</script>

'리액트 소개 페이지'가 삽입됨

2-2-2) 설명란

2-3. 태그 중심 개발 & DB 중심 개발

태그 중심 개발 : 대표 이미지 & 썸네일 이미지
HTML 태그가 주인공! 태그에 맞춰 JQ 작성!
이미 HTML에 img 태그 있는 상태

<script>
  // 대표이미지
  $('.titleImg img').attr('src', portfolioDB[startNum].titleImg)

  // 썸네일
  // HTML에 이미 존재하는 .thumbImg <img> 영역을 호출해 item 값으로 지정 
  $('.thumbImg img').each((index, item)=>{
      $(item).attr('src', portfolioDB[startNum].thumbImg[index])
      // └>'.thumbImg img' 속성에 접근, 'src'를 DB배열[index]번으로 교체
  })
</script>

DB 중심 개발 : 링크란
데이터베이스가 주인공!
HTML에 li, a태그 없음. JQ에서 < li >,< a > 다 넣어줄 것임.
└> 그래서 .each 앞에 잡을 것 없음! (잡을 영역이 없으니까!)
└> 아니면 항상 img 태그 개수만큼만 DB가 똑같이 존재해야 하니까!

HTML

  <ul class="d-flex p_linkinfo justify-content-evenly">
		<!-- li와 a태그 없는 상태! DB에서 삽입함 -->
  </ul>

JQ
① 제이쿼리에 귀속된 .each 호출 (=자바스크립트는 forEach)
→ 인자로 배열과 화살표 함수를 받음

	$.each( ['사이트주소', '피그마주소'] ), ( index,item )=>{
    		  <!-- 인자로 배열 받음 -->
    })

② 빈배열 linkInfo 생성

<script>

    var linkInfo = ''; // 빈 배열 생성 (each 돌린 것 한꺼번에 담아 html에 던질것)
    
    $.each( portfolioDB[startNum].pLinkinfo, (index, item)=>{
          linkInfo += ``
    })
    $('#portfolio .p_linkinfo').html(linkInfo); // html에 던짐
  
</script>

③ .each에 넣고 돌린 DB을 < li >,< a >에 담아 linkInfo에 저장!

결과물

+) .each ( 배열, ( index, item )=>{ } )

item[ index ]
: index 때문에 글자가 하나씩 잡혀서 노출됨 (△)
linkInfo += <li><a href="${item[index]}"></a></li>;

<script>

  var linkInfo = '';
  
  $.each( portfolioDB[startNum].pLinkinfo, (index, item)=>{
	linkInfo += `<li><a href="${item[index]}"></a></li>`;
  })  
  $('#portfolio .p_linkinfo').html(linkInfo);
  
</script>

item
: 글자가 온전히 노출됨 (◯)
: [ '깃주소', '피그마주소' ] 배열이 한개씩 item에 들어감. (string 자체가 저장!)
linkInfo += <li><a href="${item}"></a></li>;

<script>

    var linkInfo = '';

    $.each( portfolioDB[startNum].pLinkinfo, (index, item)=>{
      linkInfo += `<li><a href="${item}"></a></li>`;
    })

    $('#portfolio .p_linkinfo').html(linkInfo);
  
</script>

2. 부트스트랩

2-1. img-fluid (반응형 이미지)

"엄마 사이즈 맞출게"
상위 너비로 크기가 조정되도록 이미지에 max-width: 100%; 적용 (+height: auto)

ul{ 마진=0; 패딩=0;}
.container에 border 줘서 체크하기 쉽게

text-decoration-none

d-flex justify-content-center

패딩값

2-2. 반응형처리

justify-content-center + justify-content-md-end
모바일에서 네비 가운데 정렬 + 768px 이상부터 오른쪽 정렬
pe-md-0
(768px이상부터) 왼쪽 정렬일 때, 패딩-우측-0 / 오른쪽 정렬일 때, 패딩-좌측-0 (end)
col-md-6
p-md-0
d-md-flex
mt-md-5

반응형 처리하여, 데스크탑과 모바일에서 각각 아래처럼 보임

2-3. 모바일은 썸네일 이미지 안 보이도록!

d-none
d-md-flex

3. 버튼 누를 때마다 다른 화면 나오도록, 콜백함수

3-1. startnum을 매개인자로 받는 콜백함수 만들기

3-2. 함수 안에 2에서 만든 식들 옮겨넣기

원래 startNum이었던 변수명도 loadnum 바꾼다
'.active' 가지는 li의 번호를 변수 loadnum에 저장

3-3. 화면 열리자마자 실행되도록 portLoad 함수 호출

portLoad( loadnum ); 자동 실행!

3-4. 클릭된 객체의 순번을 startNum의 매개인자로 삽입하는 함수

<a href="#none">REACT</a>
<a href="#none">Web</a>
<a href="#none">EC</a>

<script>
	// 클릭 이벤트 발생한 li에 아래 명령 실행
    $('.p_tabNm li').click(function(){
        portLoad( $(this).index() ); // portLoad 인자로 (클릭 이벤트 발생한 li의 번호) 삽입!
    })
    
    function portLoad(startNum){ // 클릭 이벤트 발생한 li의 번호가 매개인자로 전달
    
    	// startNum을 인자로 갖는 식들에 줄줄이 들어가 실행
    }
</script>

3-5. 클릭 시, 글자색 red !important

3-6. 클릭된 객체만 글자색 바뀌도록 '.active'

<script>
	// 클릭 이벤트 발생한 li에 아래 명령 실행
    $('.p_tabNm li').click(function(){
        $(this).addClass('active').siblings().removeClass('active');
         // 클릭 이벤트 발생한 li에 '.active' 추가 + 그외 li들 '.actve' 제거
        portLoad( $(this).index() );
    })
</script>

4. DB 배열 -> 객체로 바꿔 정리

대충 알아보기만 하도록 옮겨적은 거임. 이거 복붙하면 안됨

<script>
// 수능광고전단지 DB --------------
pLinkinfo : [
            {
                infoIcon : 'fa-solid fa-medal',
                infoLink: 'https://www.naver.com/',
            },
            {
                infoIcon : 'fa-solid fa-shield-cat',
                infoLink: 'https://github.com/',
            },
            {
                infoIcon : 'fa-solid fa-f',
                infoLink : 'https://www.figma.com/',
            },
        ]
        
// 리액트 소개페이지 --------------
pLinkinfo : [
            {
                infoIcon : 'fa-solid fa-shield-cat',
                infoLink: 'https://github.com/',
            },
            {
                infoIcon : 'fa-solid fa-f',
                infoLink : 'https://www.figma.com/',
            },
            {
                infoIcon : 'fa-solid fa-g',
                infoLink : 'https://www.google.co.kr/',
            },
            {
                infoIcon : 'fa-solid fa-g',
                infoLink: 'https://www.google.co.kr/',
            },
            {
                infoIcon : 'fa-solid fa-n',
                infoLink: 'https://www.notion.so/ko-kr/product',
            },
        ]
        
// EC솔루션 프론트엔드 개발 --------------
pLinkinfo : [
            {
                infoIcon : 'fa-solid fa-medal',
                infoLink: 'https://www.naver.com/',
            },
            {
                infoIcon : 'fa-solid fa-f',
                infoLink: 'https://www.figma.com/',
            },
        ]
</script>

<script>

var linkInfo = '';

$.each( portfolioDB[startNum].pLinkinfo, (index, item)=>{
	linkInfo += `<li><a href="${item.infoLink }"><i class="${ item.infoIcon }"></i></a></li>`;
})

$('#portfolio .p_linkinfo').html(linkInfo);
        
</script>