개발노예 코드와 일상

여태 $ajax, $post를 통해 다양한 작업들을 해왔지만

근자에 몇몇 코드를 새로 보고 새로운 방식을 배웠다

뭐랄까 뭔가 체계적? 합리적이랄까

여태까지 나는 뭐 버튼을 누르면 업로드하시겠습니까? 수정하시겠습니까? 이런 메세지와 함께

확인시 쿼리 실행 이런느낌이었는데

이번에 본 코드는 과정을 한단계 추가해서 갖춰저있는 느낌? 을 주는 방식이었다

임시테이블을 하나 추가해서 쿼리 한줄당 결과를 보여주는 페이지를 추가하는 느낌인데

예로 10개의 쿼리가 실행되는 파일이나, 버튼을 누르면

일단 임시테이블에 등록한다

그리고 리스트를 쫙 보여주고 이제 실제 등록하는 버튼을 두어 쿼리를 진짜실행한다.

그리고 줄마다 쿼리실행결과를 보여준다 

성공, 실패, 오류 등등

그리고 오류가나면 쿼리를 롤백시킨다

어떻게보면 한단계 과정이 추가되는만큼 작업이 번거롭다고 생각될수는있지만

개발 특성상 개발자가 사용안하는 경우가 많기때문에

개발자가아닌 다른 직원이나 관리자가 사용했을때는 훨씬 직관적이고 문제해결에 도움이되는 방식이라 느꼈다..

흠 앞으로는 요런식으로 작업해야겠다.

정리

1. 기존 db 구성에 임시테이블 추가

2. 임시테이블에 먼저업로드 후 실제 등록 버튼 추가

3. 실제 등록 처리시 1줄씩 쿼리 결과 출력 - $().load, settimeout으로 다음쿼리실행 등의 방식사용 

4. 쿼리결과에 오류가 발생시 원인 메세지 출력해주고 전체 쿼리 롤백처리

할때마다 까먹는것들

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

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

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

2. 동적 구조 이벤트주기

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

});

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

자 이번에는 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로 수정적용했다

그누보드 기반 게시판을 활용해서 페이지를 만드는데

wr_id를 물고 데이터를 대량으로 업로드하는 요청이 있었다

천단위가 넘어가서 엑셀로 업로드를 시켜야했고

게시글 아이디인 wr_id를 물고 다른 db에 일괄 업로드시키는 방식으로 진행

문제는 게시판 write 페이지에서 submit 시킬때 write_update에서 동시에 처리하려니

엑셀업로드가 안되는것

또 업로드를 나누자니 좀 직관적이지 않아보였다 뭔가 말로 설명하기어렵군

하여튼 ajax로 파일을 보내서 따로 엑셀업로드시키고 나머지는 submit 시키기로했다

var form = $('#fcowork')[0];
var formData = new FormData(form);
var xls_wr_id = '';

        formData.append("files", $("#upload")[0].files[0]);
        formData.append("xls_wr_id", xls_wr_id);

        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            processData: false,
            contentType: false,
            data:formData,
            url:'testset.php',
            success: function(data) {
                console.log(data);

            }
        })

이런 코드가 되었고 기존 ajax할때와 다른점은~
entype을 작성해주고 data를 append 해서 따로 보냈다
잘 작동해서 다행이다 일단은?

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

};