TIL#4 __ <SCC/> 개인프로젝트 Tabs + modularization

탭메뉴

1. 탭메뉴를 구성하는데 구글에서 부트스트랩 관련 암만 검색해봐도 좀처럼 괜찮고 내 생각에 비슷한 예제를 찾지 못했다.

2. 그래서 그냥 내 식대로 구성

   <div class="tabs">
          <div class="tab-indicator"></div>
          <div class="tab-header">
            <div class="active" data-tab="tab-1">
              <i class="fas fa-chart-line"></i> 순위표
            </div>
            <div data-tab="tab-2">
              <i class="fa fa-pencil-square-o"></i> 경기일정
            </div>
            <div data-tab="tab-3">
              <i class="far fa-newspaper"></i> 주요 뉴스
            </div>
            <div data-tab="tab-4">
              <i class="fa fa-envelope-o"></i> 그외
            </div>
   	        </div>  

3. 탭을 감싸주는 큰 틀을 하나 만들고 그안에 탭의 인덱스인 Header와 Indicator를 넣고 탭 메뉴 별 태그를 달아줌으로써 탭에 대한 마크업을 수행.

4. 이후 class에 active가 있는 탭해더를 인디케이터로 지정해주고 마찬가지로 해당하는 탭메뉴만 보여지도록 JS, css구성

   function active_tab() {
     $("div.tab-header div").click(function () {
         const tab_id = $(this).attr("data-tab");
   
         $("div.tab-header div").removeClass('active')
         $(".tab-content").removeClass('active')
   
         $(this).addClass('active')
         $("#" + tab_id).addClass('active')
     })
     const tabHeader = document.getElementsByClassName("tab-header")[0];
     const tabIndicator = document.getElementsByClassName("tab-indicator")[0];
     const tabsPane = tabHeader.getElementsByTagName("div");
   
     for (let i = 0; i < tabsPane.length; i++) {
         tabsPane[i].addEventListener("click", function () {
             tabIndicator.style.left = `calc(calc(100%/4)*${i})`
         });
     }
   } 

모듈화

1. 모듈화는 프로그램의 재사용성과 기능의 향상을 위해 작업단위별로 분리해놓은것을 말하는데 사실 내가 한게 모듈화가 맞는지는 모르겠다.

2. 한개의 .py 파일안에서 주로 한가지 목적의 동작들만 수행 하도록 하기 위해 flask를 처리해주는 app.py 파일 안에서 데이터를 긁어오는 함수를 밖에 별도의 파이썬 파일로 빼주기로 했다.

3. 그리고 이를 다시 app.py 파일안에서 선언 해주기위해
   from 파일명 import 함수명 이런식으로 작성해 import

해야할 일들

1. 이제 부턴 각 탭안에 구성하는 메뉴 콘텐츠의 완성이 주목표이다.
2. 콘텐츠 작업이 완료 되면 최종 css를 손보고 퍼블리싱 준비