개발노예 코드와 일상

관리중인 사이트에 결제모듈을 달아야한다

쇼핑몰은 아니라서 결제 건수는 많지않을거라 살짝 걱정이 덜되지만?

그 전에는 영카트에 기본 코드를 응용해서 많이했었따

뭐 메인페이도 따로 달아본적있지만

이번에는 Nicepay!

여기저기 살펴보니 결제모듈 작업방식이 많이 바뀌었떠라

아니면 내가 영카트 위주로 달아서 진작 바뀌었었나..

아무튼 작업을 하려고 기본적인 가입이나 신청을하고~

샌드박스라는 test 상점을 개설할수있었다

기본적으로 결제창을 띄우는 것은 상당히 쉬워졌다

그냥 api 통신 코드만 20여줄짜리 복사해넣고 키값,아이디값만 넣으면 끝

AUTHNICE.requestPay({
    clientId: '',
    method: 'card',
    orderId: ,
    amount: ,
    goodsName: ,
    buyerName:,
    buyerTel:,
    buyerEmail:,
    returnUrl: '',
    mallReserved : ,
    fnError: function (result) {
        alert(result.errorMsg);
    }
  });

엄청나게 편해졋군

결국에는 뭐 검증처리, 취소처리, 등등등등 해야하겠지만서도

아무튼 

이래저래 작업을하려는데~

전에는 결제 페이지에서 결제창띄우고 결제후 return 했을때 함수를 실행해서 해당 페이지의

주문 form을 submit 시켰는데

현재 방식은 returnUrl을 입력해서 거기로 post 로 값을 쏴버린다

허허

주문서폼 submit 시켜야한다고오

옛날방식을 돌려줘

혹시나 영카트에 있는 script src를 넣어서 수정하려해봣지만

지원하지않은 방식이란다

영카트만 따로 지원해주는건가보다

절레절레

쩝 어쩔수없이 ajax로 주문서 정보 저장하고

결제한다음 결과페이지로 return받아서

결과페이지에서 검증과 취소 등등등 처리했다

흐으으음 이게맞나 싶기도

그리고 클라이언트방식, 서버방식 두가지가있는데

일단 간단하게 바로 승인되는 방식으로했는데

겁을 많이준다 무슨 위변조 위험이있다느니 꼭 검증을 추가하라느니

이럴거면 그냥 이방식은 없애버리지;

검증작업은 차차 추가해나가야하고 테스트테스트다

카드사 심사 받는동안 열심히 테스트하고~

관리자페이지 만들어야겠다

할때마다 까먹는것들

1. 체크박스 체크하기, 체크여부

    - $('#id').prop('checked',true);

    - $('#id').is(':checked');

2. 동적 구조 이벤트주기

$(document).on('click','#id',function(){

});

이거 동적구조 이벤트 주는거몰라서 얼마나 머리아팟는지 참

하 월급만으론 살지못해

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

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

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

그래서 가입하고 간단한 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문으로 비교해줘서 처리 !

이번에는 메인에 애니메이션 효과를 주라는요청이있었다

보통 css로 대부분 처리해버렷는데

이번에는 css 만으로는 안될거같아서 javascript로 처리했다

안되는이유는 애니메이션 구성? 떄문이었는데

이미지가 계속줄어들고, 글자가 날라가고, 이게 계속 반복되고

하여튼 쪼금 귀찮았다 사실 많이

그렇게 복잡하진않았고 타이밍이나 순서 맞추는게 일이었다

기본은 

$(".test").delay(100).animate({ }); 이런느낌인데

딜레이와 순서를 위해서 

일단 순서 구성을짜고

$(".test").delay(100).animate({
        
        opacity:'1'

    },1000,function(){

            다음 애니메이션들 -

    };

});

이렇게 처음 animate 안에 코드를 넣고 그안에 또 넣고 이런식으로 했다

그리고 반복해야되니까

function _start(){} 으로 함수로만들어줬고

화면크기나 셋인터벌이나 이런 조건에따라 함수를 호출하도록 마지막 마무리

검색 서치결과페이지에서

검색어에 하이라이트를 줘야겠다

php로 하면 편하지만 php를 사용하는 홈페이지가 아니어서

javascript로 따로 결과에 추가해줬다

//직원 검색어 하이라이트 추가
search_filter();    
function search_filter(){
    var search = $('#searchKeyWord').val();
    var sf_cnt = 0;
    $(".sc_td, .sch_li p, .table_view td a").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;
    });
};  

text-danger 클래스에 css로 컬러를 넣어놨다

chart js 를 사용해서 통계 그래프를 만들었다

형태는 pie 형태였는데

문제는 그래프의 갯수가 10여개가 넘어간다는것

그래프마다 분류 갯수나 타이틀 배경색을 다 다르게해달라는 요청이었다

타이틀이나 배경색은 뭐 그런다 치더라도

pie그래프가 legend 갯수에 따라 그래프 크기가 아예 줄어들어버려서

html로 따로빼야하나.. 또 색상은 어케맞추나 하고있었는데

legend custom 하는 코드가 있어서 적용시켜서 다행이었다

options: {
            responsive: true,
            title: {
                    display: true,
                    text: '전체',
                    fontSize:20
                },
            plugins: {
                labels: [
                  {
                    render: 'value',
                    fontColor: 'white',
                    overlap: false,
                    precision: 2,
                    fontSize: 15
                  }
                ]
            },
            legend: false,
            legendCallback: function(chart) {
              var text = [];
              text.push('<ul class="' + chart.id + '-legend">');
              for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
                text.push('<li><span style="background-color:' + 
                chart.data.datasets[0].backgroundColor[i] + '">');
                text.push('</span>');  

                if (chart.data.labels[i]) {
                  text.push(chart.data.labels[i]);
                }
                text.push('</li>');   

              }
              text.push('</ul>');
              return text.join("");
            }
        }

옵션 부분에 이렇게 legendCallback 을 추가해서 css로 수정적용했다

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); 
    } 
} 

};