개발노예 코드와 일상

코드저장..

검색페이지를 만드는데

이번에는 주로하던 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으로 한번 둘러싸주는 형식

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

오래된 홈페이지 수정이 들어와서 수정중인데

캡차가 며칠사이 안뜬다고 해서 보는데

오류코드야 원래있던것도 억지로 수정해봐도 도통 이미지가 엑박이고

새로운 버전으로 넣어봐도그렇고

해결방법으론 

1. include된 파일들의 앞끝 공백을 없애고 

2. data/session 용량체크 , 기타 하드 용량체크

3. 폴더 권한체크

일주일사이 용량이 얼마나 찻겠냐만은...

일단 용량 비우는중인데 이정도로 대부분 해결됬다고하니

이미지뜨고 끝났으면 좋겠다

오랜만에 코드 글을쓴다

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

숫자를 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 이라고 다시 감싸주고

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

보통 sns 게시물 가져오는 기능을 추가할때

인스타, 네이버블로그 정도를 많이들 가져온다

인스타야 워낙 종류도 많고 해서 적당히 처리되는데

이번에는 유튜브도 가져오고싶다고해서 귀찮았다

확실히 귀찮았음

유튜브api를 찾아보니

어우 너무복잡하더라

이것저것 메뉴얼보고 해봐도 잘안되고 인증받아야되고;

아무튼 이것저것하다보니

앱키와 채널아이디만으로 불러오는 코드가있었다

$api_key = ''; //my API key
$channel_id = ''; //my channel ID
$max_result = 6;

                            $url = 'https://www.googleapis.com/youtube/v3/search?order=date&part=snippet&channelId='.$channel_id.'&maxResults='.$max_result.'&key='.$api_key;
                            $video_list = json_decode(file_get_contents($url),TRUE);

                            //print_r($video_list);

                            foreach ($video_list['items'] as $item) {
                                if (isset($item['id']['videoId'])) {

                                    echo '<div class="swiper-slide"><a href="https://www.youtube.com/watch?v=' .$item['id']['videoId']. '" target="_blank"><img src="'. $item['snippet']['thumbnails']['default']['url'] .'" alt=""></a></div>';
                                } 
                            }

아니 들여쓰기가 왜 안되는겨
아무튼 이런식으로 하면 잘가져오더라
이렇게 간단한방식은 너무 좋지만
한번 패치나 보안업데이트때
오류발생한 경우가많아서 일단 임시방편으로 적용하자

이번에 작업한것은 메일시스템이었다

기본 그누보드에 달려있는 메일 함수는 뭔가 오류가많이 나왔다

스팸으로 들어간다던가 아예 차단을 해버려서 전송이 안된다던가

그래서 새로운 메일시스템을 입히는 과정에서

php로 구성되어있는 코드를

메일 api 리턴받고 그러면서 ajax처럼 써야 되는 상황이나와서

이것저것 써보다가 완료했다

일단 php 에서

curl_setopt 란 기능을 이용하는것이 주요 요소였고

구성은

$_data = array(
'fname' => $fname, // 발신자 이름
'fmail' => $fmail, // 발신자 이메일
'to' => $to, // 수신자 이메일
'subject' => $subject, // 제목
'content' => $content, // 내용
);

    $ch1 = curl_init();
    curl_setopt($ch1, CURLOPT_URL, G5_BBS_URL.'/testetstest.php');
    curl_setopt($ch1, CURLOPT_RETURNTRANSFER, TRUE);
    curl_setopt($ch1, CURLOPT_HEADER, FALSE);
    curl_setopt($ch1, CURLOPT_POST, 1);

    curl_setopt($ch1, CURLOPT_POSTFIELDS, http_build_query($_data));

    curl_setopt($ch1, CURLOPT_POSTFIELDSIZE, 0);
    curl_setopt($ch1, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($ch1, CURLOPT_SSLVERSION,3);
    $response = curl_exec($ch1);

    curl_close($ch1);

    return $_data;

    이런느낌으로 함수를 만들어서 쏜다음
    해당 페이지로가서 $_POST 로 받아서 따따따 넣어주면 되었다
    생각보다 간단하게 끝나고 만족스

홈페이지 제작중

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

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

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

몹시 보기싫은 경우인데

이번에 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 }

}

이렇게 옵션을 추가해준다

키오스크나 대형스크린 프로그램 작업시

키보드를 띄워서 입력받는 경우가 종종있다

기존에 사용하던 키보드를 사용해서 작업을 했지만~?

휴대폰 번호를 입력받아야해서

숫자만 띄워달라고 한다

후움

css로 억지로 조정하면 되기야하겠지만

그게더 귀찮을거같기도하고

혹시몰라 찾아보니 숫자용이 따로있더라

numberKeypad.js

이 플러그인을 사용해서 처리했다

css파일도 있고 두개를 추가한후에

//숫자 키보드 따로생성
$('.number_keyboard').numberKeypad({
wrap: '.number_input'
});

//스타일조정
$('.number_keyboard').on('click',function(){
$(".keypad").addClass('d-block');
});

//숫자키보드 닫기기능추가
$('.keypad .back, .keypad .ok, .back_bg').on('click',function(){
$(".keypad").removeClass('d-block');
});

열고닫고 기능 추가한다음에 끝

사용법은 간단하더라