개발노예 코드와 일상

하 월급만으론 살지못해

코인과 주식은 너무 무섭고 - 한번씩 실패했음

그래도 배운게 코딩이니 이것저것 할거없나 봤더니

크몽에서 외주를 많이를 한다더라

그래서 가입하고 간단한 php나 javascript 수정 한다고 등록했다

무난하게 등록은 승인됐는데 상세 정보가 좀 부족했는지

주문은 들어오지않았다 

솔직히 너무 늦게시작했고 이미 리뷰와 별점이 어마어마하게 누적된 판매자들이많아서

신규 판매는 힘들듯?

그래서 따로 프로젝트 의뢰에 도전해보는데

큰 프로젝트는 디자이너가 필요해서 애매해서 패스

간단 수정의뢰가 하나있어서 신청해두니 !

채팅이왔다!

이런저런 채팅결과는 상당히 간단한 내용이었다

그래서 후다닥 처리해주고 4만원 겟

정산을 하려고하니 견적서를 보내달라고하신다

내 상품을 판매한게 아니고 채팅을 통해 한거라 그런지 견적서를 따로 보내야했다

생각해보니 견적서 그런것도없이 바로 ftp로 접속해서 수정해줘버림 ㅋ 

불안감이 들긴했는데 다행히 바로 입금후 확정도 해주셔셔 깔끔하게 처리됐다

수수료 20% 좀 뼈아프긴하지만

나름 쏠쏠히 의뢰마무리!

* 그후 2주가 지난 현재까지 의뢰는 성공하지못했다..

자 이번에는 php 를 쓰지못하는 경우였다

java 로 만든 홈페이지인데

왜 개발을 다안해놓냐고오 나는 java 안하는데에

하여튼 이것저것 기능을 javacsript 로 추가해서 처리해가는데

임시로 날짜체크해서 처리하는 페이지가 생겻다

날짜 비교해서 숨기거나 이동시켜보자

var now_date = new Date(),
            now_time = now_date.getTime();

일단 기본은 new Date() 와 .getTime() 만 있으면 크게 어려운건 없다

현재시간을 구해서 비교하기위해 time으로 바꿔주고

마찬가지로 비교할 날짜도

var end_date = new Date("2022-05-29 23:59:59"),
            end_time = end_date.getTime();

이런식으로 바꿔주고 

if(now_time > end_time){

}

if문으로 비교해줘서 처리 !

php 가 아니라 java로 작업된 홈페이지에서

주소창에찍힌 파라미터를 가져와야햇다

php면 그냥 GET으로 가져오고 말겠는데

javascript를 사용해야해서 찾아봤다.

보통 물음표와 & 표시로 구분되어있어서

이걸 기준으로 짤라서 가져오는 형식이었다

var getParameters = function (paramName) { // 리턴값을 위한 변수 선언
var returnValue;

// 현재 URL 가져오기 
var url = location.href; 

// get 파라미터 값을 가져올 수 있는 ? 를 기점으로 slice 한 후 split 으로 나눔 
var parameters = (url.slice(url.indexOf('?') + 1, url.length)).split('&'); 

// 나누어진 값의 비교를 통해 paramName 으로 요청된 데이터의 값만 return 
for (var i = 0; i < parameters.length; i++) { 
    var varName=parameters[i].split('=')[0]; 
    if (varName.toUpperCase() == paramName.toUpperCase()) { 
        returnValue = parameters[i].split('=')[1]; 
        return decodeURIComponent(returnValue); 
    } 
} 

};

코드저장..

검색페이지를 만드는데

이번에는 주로하던 php 페이지가 아니라 java로 제작페이지여서

javascript로 검색결과에 검색어 표시를 해줘야했다

결과적으로는 크게 복잡하지않았다

search_filter();
function search_filter(){
var search = $('#searchKeyWord').val();
var sf_cnt = 0;
$(".sc_td").each(function () {
var regex = new RegExp(search,'gi');

    $(this).html( $(this).text().replace(regex, "<span class='text-danger bold'>"+search+"</span>") );

    sf_cnt = sf_cnt+1;
});

};

replace 함수를 사용하고있고
해당 구역에서 키워드 텍스트를 찾아서 span으로 한번 둘러싸주는 형식

순조롭게 적용되서 굳이었다

오랜만에 코드 글을쓴다

작업중에 애니메이션 요청이들어왔는데

숫자를 0~ ** 까지 올라가는 내용이었다

한두개면 그냥 수동으로 할텐데

수가 꽤 많아서 함수로 해두고 클래스명 통일해서 한번에 넣어버렸다

//스크롤 했을때 숫자 애니메이션이 동작하도록, 1회만 동작
//함수화 , 기능수정
var _once = 1;

    $(window).scroll( function(){
        var na_div = $(".now_wrap ").offset().top + 500;
        var _window = $(window).scrollTop() + $(window).height();


        if(na_div < _window && _once == 1){
            number_animation();

            _once = 2;
        }

    })

    function number_animation(){
        //숫자애니메이션
        $(".number_animation").each(function(index, element){
            var $this = $(this),
                goal_cnt = $this.text();

            $({ val : 0 }).animate({ val : goal_cnt }, {
                duration: 1000,
                step: function() {
                    var num = numberWithCommas(Math.floor(this.val));
                    $this.text(num);

                },
                complete: function() {
                    var num = numberWithCommas(Math.floor(this.val));
                    $this.text(num);
                }
            });
        })
    }
    function numberWithCommas(x) { //숫자콤마로 출력
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }  

    어우 줄바꿈 하기는 귀찮네
    일단 코드는 이렇게 되어있다

    목표 숫자를 일단 초기로 적어둔다

    .number_animation 으로 클래스를 통일해서 해당 div의 text값으로다가 목표로 해서 애니메이션을주었고


    이게 하다보니까 로드 하고 화면위치에 상관없이 애니메이션이 시작되서

    스크롤 내리면 밑에꺼는 끝나있더라
    그래서 .now_wrap 이라고 다시 감싸주고

    화면위치랑 해당 클래스 위치랑 비교해서 함수 실행하도록 설정했다

홈페이지 제작중

서브메뉴나 레이어를 화면 꽉차게 띄웠는데

안에 내용이 넘어가서 스크롤이되는경우

본 페이지와 중복되어 브라우저 스크롤이 두개이상으로 나오는 경우가있다

몹시 보기싫은 경우인데

이번에 css로 간단하게 수정해서 적어본다

일단 본페이지 스크롤은 html,body 로 적용되고있다

그래서 html,body에 height:100%와 overflow hidden을 주어서 본 스크롤을 없애고

위에 띄우는 레이어의 스크롤만 남기는 방식이다

자바스크립트나 제이쿼리로는

오픈할때 스타일 주고

닫을때 스타일 빼는 작업을 해주면 완성.

코딩할때 javascript나 jquery 에서 여러가지 슬라이더를 사용한다

자주 사용하는 스위퍼 슬라이더는 

옵션 자체에 반응형을 지원해서

간편하게 사용하고는한다

일단 js 파일들을 추가한다 css도 추가하던가

swiper.min.css

swiper.min.js

공홈이나 여러군데 돌아다니는걸로 다운받아서 선언해주고 

var swiper1 = new Swiper('#main-visual', {    
            //pagination: {
            //el: '.swiper-pagination',
            //    clickable: true,
            //    renderBullet: function (index, className) {
            //    return '<span class="' + className + '">' + (menu[index]) + '</span>';
            //    }
            //},
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            spaceBetween: 0, //30
            loop: true,
            autoHeight : true,
            autoplay: {
                delay:5000,
                disableOnInteraction: true
            },
        });

이렇게 기본형태로 사용하고있다

반응형 옵션이 필요할때는

breakpoints: { 

  320: { slidesPerView: 2, spaceBetween: 20 },

  640: { slidesPerView: 4, spaceBetween: 40 }

}

이렇게 옵션을 추가해준다

input 의 합계를 구해달라고해서 작업하는데

name 값을 name = "sum[]" 이런식으로 배열화해서 넘겼었는데

스크립트로도 합이 필요해서 구했다

$(document).ready(function() {
var list = new Array();
$("input[name=sum]").each(function(index, item){
list.push($(item).val());
});
alert(list);
});

반복문 돌려서 네임 인덱스로 합산하는 구조