서민금융진흥원 금융교육포탈 인트로

# 기여도

🎨 디자인 100%
📝 퍼블리싱 100%
🛠 스크립트구현 100%

# 작업 환경 및 기술스택

DESIGN
⭐️ XD
⭐️ Photoshop
⭐️ Illustrator

VCS
⭐️ Git

IDE
⭐️ IntelliJ 2022

FRONT
⭐️ Swiper 4.5.1
⭐️ Java Script(es5)

# 작업 내용

🗓 작업기간 2022. 02. 23 ~ 2022. 03. 31

📌 디자인 시안 작업

📌 썸네일 이미지 제작 및 최적화 작업

📌 웹/모바일 반응형 작업

📌 자바스크립트를 이용한 화면 랜더링 구현

   var IntroRenderManager = (function () {...})

먼저 인트로 화면 랜더를 위한 구현체를 생성하였다.

   var eduIntroListStr;    //리스트 데이터
   var eduTargetCodeListStr;     //분류할 코드 데이터

서버에서 보내주는 데이터를 저장할 변수를 생성하였다.

   // JSON로 변환
   strToJson = function (str) {
      return (str === "") ? {} : JSON.parse(str);
   };

   groupByKey = function(data, key) {
      return data.reduce(function (carry, el) {
            var group = el[key];

            if (carry[group] === undefined) {
               carry[group] = [];
            }
            carry[group].push(el);

            return carry;
      }, {});
   };

   toMap = function(data) {
      return data.reduce(function (map, code) {
            map.set(code.MT_SUB_NAME, code.MT_SUB_CODE);
            return map;
      }, new Map());
   };

서버에서 보내준 데이터를 화면단에 사용하기 적합한 데이터로 가공한다.

setContent = function (dataArr) {
   var wrapUl = document.querySelector(".swiper-wrapper");
   // 데이터가 없는 경우
   if (dataArr == undefined || dataArr.length == 0) {
         wrapUl.innerHTML = "<li class='none-data'>데이터가 없습니다</li>";
         return;
   }

   // 인트로 데이터 랜더링
   for (var i = 0; i < dataArr.length; i++) {
         var data = dataArr[i];

         var hashTagLi = "";
         if (data.HASHTAG) {
            var hashtags = data.HASHTAG.split(',');
            hashtags.forEach(function (tag) {
               hashTagLi += "<li>" + tag + "</li>";
            });
         }

         // 링크 url 예외처리 처리
         var eduUrl = data.URL;
         if (data.URL.indexOf('http') == -1) {
            eduUrl = 'https://' + data.URL;
         }
         
         var dataSrc = data.IMG_SRC.substring(data.IMG_SRC.indexOf("/edu-data"));

         wrapUl.innerHTML +=
            "<li class='swiper-slide'>" +
               "<div class='swiper-container' style='width:100%;' onclick='moveTo(\""+eduUrl+"\");'>" +
                     "<div class='slide-img'> " +
                        /* "<img src='/getImages.do?type=intro&id=intro&file="+ data.SAVFILE +"' alt='" + data.IMG_ALT + "'>" + */
                        "<img src='" + dataSrc +"' alt='" + data.IMG_ALT + "'>" + 
                     "</div>" +
               "<h3>" + data.TITLE + "</h3> " +
               "<ul class='hashtag'>"+ hashTagLi + "</ul> " +
               "</div> " +
            "</li>";
   }

   setSwiper();
};

가공한 데이터를 화면에 뿌려준다.

document.addEventListener('DOMContentLoaded', function () {
   var introRenderManger = new IntroRenderManager();
   introRenderManger.render();
   introRenderManger.initContent();
});

DOM이 그려진 후 해당 함수를 호출한다. 😀