[개발일지 45일차] toco 프로젝트 1 - 클론 코딩(4)

2022-07-07

어제 정리한 금주 작업분

1. 자바스크립트 분리를 어떻게 진행할 건지 멘토링 받고 수정
2. 미디어 쿼리 작성 덜 된 부분 마무리
3. 앞으로 뭘 할 건지?

---

1) 자바스크립트 분리를 어떻게 진행할 건지 멘토링 받고 수정

멘토님 왈 js가 파일로 분리되었을 때 적용이 안 되는 일은 딱히 없고

1. 함수를 사용하기 전에 정의를 해줘야하는데 안되어있을 가능성이 있다
2. HTML을 수정하는 함수가 있는데 이것이 꼬이는 경우도 있음
3. 구문에 따라 먼저 호출된 스크립트가 오류가 나면 진행이 안되는 등의 문제가 있을 수 있다고 함.

그런건 이제 직접찾아봐야한다고...

다행히 진행한 프로젝트 코드에는 함수 자체가 꼬일 일은 없어서 잘 진행됨.

// slcik slider
$( 'document' ).ready( function() {
    $( '.proj-box-wrapper' ).slick( {
    slidesToShow: 4,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 3000,
    arrows: false,
    responsive: [
                { breakpoint: 940,
                    settings:{
                        slidesToShow:3
                    }
                },
                { breakpoint: 680,
                    settings:{
                        slidesToShow:2
                    }
                },
                { breakpoint: 430,
                    settings:{
                        slidesToShow:1
                    }
                }
              ]
    } );
} );

//  window.matchMedia()를 이용해서 접속하는 웹브라우저의 가로 크기에 따라 다른 작업을 할 수 있습니다. 반응형 웹디자인을 할 때 유용한 메소드
// 가로가 1217px라면 customer_list를 숨깁니다. hide()
// customer_list의 요소를 list에 보냅니다.
if (window.matchMedia("screen and (max-width: 1217px)").matches) {
    $(function () {
        $(".customer_list").hide();
        var array = [];
var list = document.getElementsByClassName('customer_list');
//array에 list의 길이만큼 반복하여 push()로 배열의 맨 끝에 list[i]번째의 요소를 입력합니다.
for (var i = 0; i < list.length; i++) {
    array.push(list[i]);
}

var visiArray = [];
//slice()는 배열의 일부분을 선택하여 새로운 배열을 만듭니다.
//visiArray에 array요소의 0~8까지 입력합니다.
visiArray = array.slice(0, 8);
//CONCAT은 문자열을 이어주는 함수입니다. 예를 들어 CONCAT( first_name, last_name )는 first_name의 값과 last_name의 값을 이어서 출력합니다.
//reverse()는 배열의 원소의 순서를 반대로 만드는 메서드
//즉 array의 8~16 원소를 거꾸로 저장 후 24번째까지 보내기
// array = [0 1 2 3 4 5 6 7 15 14 13 12 11 10 9 8 16 17 18 19 20 21 22 23 24] 이런 순서로 되어있을 것
        visiArray = visiArray.concat(array.slice(8, 16).reverse());
        visiArray = visiArray.concat(array.slice(16, 24));
        
        var second = 0;
        //visiArray의 길이 만큼 i를 증가 반복하여 visiArray의 i번째 있는 요소에 setAttribute를 통해 data-wow-delay의 delay 시간을 0.1초씩 늘려 나오는 시간을 재지정 
        for (var i = 0; i < visiArray.length; i++) {
            second = second + 0.1;
            visiArray[i].setAttribute('data-wow-delay', second + 's')
            visiArray[i].style.display = 'block';
        }
        
        //load버튼의 0번째 인덱스 가져옴
        var load = document.getElementsByClassName('load')[0];
        //숨겨진 아이콘
        //preventDefault는 a 태그나 submit 태그, button등은 누르게 되면 href 를 통해 이동하거나 , 창이 새로고침하여 실행되는데 이러한 동작을 막아줄 수 있습니다.
        //hiddenArray에 남은 array의 남은 원소들 보내기
        load.addEventListener('click', function (e) {
            e.preventDefault();
            var hiddenArray = [];
            hiddenArray = array.slice(24, 27);
            
            var hSecond = 0;
            //남은 원소의 길이 만큼 i를 증가 반복하여 남은 원소의 i번째 있는 요소에 setAttribute를 통해 data-wow-delay의 delay 시간을 0.1초씩 늘려 나오는 시간을 재지정 
            for (var i = 0; i < hiddenArray.length; i++) {
                hSecond = hSecond + 0.1;
                hiddenArray[i].setAttribute('data-wow-delay', hSecond + 's');
                hiddenArray[i].style.display = 'block';
            }
            //이벤트가 일어난 후 버튼 안보이게 하기
            load.style.display="none";
            //Window.scrollTo() 문서의 지정된 위치로 스크롤한다
            //window.pageYOffset 화면의 Y축의 상단값
            window.scrollTo(0, window.pageYOffset + 1);
            window.scrollTo(0, window.pageYOffset - 1);

            // if (document.querySelectorAll('.customer_list[style="display:none;"]').length == 0) {
            // 	load.style.display = "none";
            // }
        });
    });
}

//4개 아이콘, 8개와 방식이 같음 
if (window.matchMedia("screen and (max-width: 940px)").matches) {
    $(function () {
        $(".customer_list").hide();
        var list = document.getElementsByClassName('customer_list');
        var hiddenArray = [];
        var openArray = [];
        $(".customer_list").slice(0, 12).show();
        for (var i = 0; i < list.length; i++) {
            if (list[i].style.display == "none") {
                hiddenArray.push(list[i]);
            } else {
                openArray.push(list[i]);
            }
        }
        // 보여진 아이콘
        var second = 0
        for (var i = 0; i < openArray.length; i++) {
            second = second + 0.1
            openArray[i].setAttribute('data-wow-delay', second + 's');
        }
        //숨겨진 아이콘
        var hSecond = 0;
        $(".load").click(function (e) {
            e.preventDefault();
            for (var i = 0; i < hiddenArray.length; i++) {
                hSecond = hSecond + 0.1;
                hiddenArray[i].setAttribute('data-wow-delay', hSecond + 's');
                hiddenArray[i].style.display = 'block';
                if ($(".customer_list:hidden").length == 0) {
                    $(".load").hide();
                }
            };
        });
        window.scrollTo(0, window.pageYOffset + 1);
        window.scrollTo(0, window.pageYOffset - 1);
    })
}
function preventClick(e){
    e.preventDefault()
}

var bannerTextWrap = document.getElementsByClassName('bannerText-wrap')[0]
var width = bannerTextWrap.clientWidth;
var halfWidth = width / 2;
  if (window.matchMedia("screen and (max-width: 940px)").matches) {
    $(bannerTextWrap).css({ 'left': 'calc(50% - ' + halfWidth + 'px)' });
  }

window.addEventListener('resize', function() {
  if (window.matchMedia("screen and (max-width: 940px)").matches) {
      $(bannerTextWrap).css({ 'left': 'calc(50% - ' + halfWidth + 'px)' });
    } else {
        bannerTextWrap.style.left = "0";
      }
    }
  );

var moveBtn = document.getElementsByClassName('move')[0];
moveBtn.addEventListener('click', function() {
  var offsetY = window.pageYOffset;
  if(offsetY !== 0) {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
  })
}
})

// 카카오 지도 api
var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
    var options = { //지도를 생성할 때 필요한 기본 옵션
        center: new kakao.maps.LatLng(35.871691843254716, 128.62496478375644), //지도의 중심좌표.
        level: 3 //지도의 레벨(확대, 축소 정도)
    };

    var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴			

    // 마커가 표시될 위치입니다 
    var markerPosition = new kakao.maps.LatLng(35.871691843254716, 128.62496478375644);

    var imageSrc = './resoft_image/지도마커.png', // 마커이미지의 주소입니다    
        imageSize = new kakao.maps.Size(220, 45), // 마커이미지의 크기입니다
        imageOption = {
            offset: new kakao.maps.Point(27, 69)
        }; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.

    // 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
    var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption),
        markerPosition = new kakao.maps.LatLng(35.871691843254716, 128.62496478375644); // 마커가 표시될 위치입니다
            
    // 마커를 생성합니다
    var marker = new kakao.maps.Marker({
        position: markerPosition,
        image: markerImage
    });			
    // 마커가 지도 위에 표시되도록 설정합니다
    marker.setMap(map);
    //애니메이션 -> wow로 대체

2) 미디어쿼리 작성 덜 된 부분 마무리

그리고 이미지나 글자 간격 조정까지.

@media screen and (max-width: 940px){
	/* 헤더 */
	.header{height: 1000px; background: url(./resoft_image/헤더배경940.png) no-repeat; background-position-x: right;}
	.header .bannerText{padding-bottom: 50px;}
	.header .bannerText p:first-child{font-size: 36px; line-height: 45px; padding-top: 60px;}
	.header .bannerText-wrap{top: 45%;}
	.header .banner-wrap .img-wrap{left: 50%; right: 0; top: 0; transform: translateX(-50%); width: 500px;}
	.header .banner-wrap .img-wrap img{width: 100%;}
	.wrapper .top_wrap{display: inline;}
	.wrapper .top_wrap>a img{ position: unset;}
	.wrapper .top_wrap .img-wrap img {height: 30px; width: 150px;}
	/* 헤더 아래 카드 */
	.b_wrap .business_list .flip{height: 300px;}
	.b_wrap{padding: 100px 0;}
	.b_wrap .business_list{flex-wrap: wrap;}
	.b_wrap .business_list .flip{width: calc(100% / 2 - 4%); margin: 2%;}
}

@media screen and (max-width: 767px){
	/* 헤더 아래 카드 */
	.main{width: 100%; margin: 0px auto 0;}
	.b_wrap{max-width: 100%; margin: 0 auto; height: auto; padding: 40px 0;}
	.b_wrap .busi_content_wrap {padding: 60px 20px;}
	.news_wrap {padding: 100px 20px 40px 20px; box-sizing: border-box; height: auto;}
	.new_body .cate {font-size: 14px;}
	.new_body .news_tit {font-size: 16px;}
}

@media screen and (max-width: 640px){
	/* 헤더 */
	.header .banner-wrap .img-wrap{width: 400px;}
	.header{height: 800px;}
	.header .bannerText{padding-left: 50px;}
   
	/* 헤더 아래 카드 */
	.b_wrap .business_list .flip{height: 250px;}
	.b_wrap .business_list li a .img_wrap{height: 125px;}
	.b_wrap .business_list li a .img_wrap img{width: 80px;}
	.b_wrap .busi_content_wrap .business_list .flip:first-child img{width: 135px;}
	.b_wrap .business_list li a .title{font-size: 20px; }
}

@media screen and (max-width: 430px){
	/* 헤더 */
	.header{height: 640px;}
	.header .bannerText p:first-child{font-size: 24px; line-height: 30px; padding-bottom: 22px;}
	.header .bannerText p:last-child{line-height: 17px; font-size: 15px;}
	.header .bannerText{padding-bottom: 25px;}
	.header .bannerText-wrap button{padding: 8px 20px; font-size: 15px;}
	.header .banner-wrap .img-wrap{width: 300px;}
	
	.b_wrap .business_list li a .title{font-size: 20px;}
	.b_wrap .business_list .flip{width: 100%; height: 250px;}
	.b_wrap .busi_content_wrap .flip:first-child li img{width: 130px !important;}
}

3) 최종 모습

https://jang-gwang.github.io/toco/ 에서 확인

4) 내일 뭘 할 건지

새 기능 추가에 앞서 가이드라인을 만들어보자. 로 결정

---

앞으로 할 것

1) 글꼴 포함 디테일함을 올려주는 세부 조정은 계속 진행하는 중
ex) 글자/이미지/카드 등의 배치/위치/간격 조정...
2) 가이드 라인 만들기

---

어려운 점

1. 카카오 맵이 안 불러와지면 늘 slick 과 로고배열 구간 적용도 오류가 남. http에서 https로 주소를 바꾸어도 오류가 계속 남. 카카오 맵이 정상작동 되면 다른 것도 다 잘 됨. 이유를 모르겠음.

해결 방법

1. js 파일에서 카카오맵의 스크립트가 최상단에 있고 나머지 로고배열과 slick 스크립트의 순서가 가장 아래 있었다. 이러니 카카오맵이 안불러질 때 로고 js와 슬라이더 js 전부 오류가 나지. js의 함수들을 웹페이지 로딩 순으로 다시 정렬했다.
   slick - rogo - kakao map

소감

html이든, css든, javaScript든 가독성의 문제 뿐만이 아니다. 작업 영역의 흐름과 순서에 맞게 문서를 잘 정리하는 것도 중요하다는 것을 알았다. 흐름이 섞이는 것 만으로도 오류 발생의 원인이 될 수 있다.

그리고 모든 팀원들이 적극적으로 참여해주셔서 진행이 잘 되고 있는 것 같다. 한 명의 팀원만 뒤떨어져도 팀의 분위기가 갑자기 이상해졌다가, 다음 날 다른 팀원들이 한 팀원이 어려워하는 부분을 다같이(중요) 이끌어가니 분위기가 다시 괜찮아졌다.