복사할 내용을 div에 넣고 display:none 으로 설정

버튼을 누르면 숨겨진 글자가 복사된다.



+ 추가 팁)

만약 ajax 로 글자를 받아서 처리해야되는 경우


copy 부분을 setTimeOut 함수로 걸어야된다.


ajax 통신 성공 처리(success) 부분에 copy 기능을 넣어도 복사가 안됐었던 기억이,,





+ 이 방법은 만약 태그에 스타일이 걸려있으면 그것도 같이 복사가 된다.


https://zetawiki.com/wiki/JavaScript_%ED%81%B4%EB%A6%BD%EB%B3%B4%EB%93%9C%EB%A1%9C_%EB%B3%B5%EC%82%AC%ED%95%98%EA%B8%B0


참고..















자바스크립트 코딩 중 FileReader 라는 클래스를 알게 되어 코드 공유.


업로드한 텍스트 파일의 특정 라인을 가지고 옴




단, 한글 변환은 문자열 타입을 추가로 변환해줘야 하는 것으로 보임(깨짐)


IE에서도 적용 가능


소스 참고 : https://www.html5rocks.com/en/tutorials/file/dndfiles/











$.validator.addMethod("pw_pattern1", function(value, element) {
    return this.optional(element) || /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@$%^*]).*$/i.test(value);
}, "비밀번호는 영문+숫자+특수문자 포함 9자리 이상이며, 특수문자는 !@$%^*만 지원됩니다.");


/^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@$%^*]).*$/

영문, 숫자, 특수문자가 반드시 모두 포함해야 true

                
$.validator.addMethod("pw_pattern2", function(value, element) {
    return this.optional(element) || /^(?=[a-zA-Z0-9!@$%^*])(?!.*[^a-zA-Z0-9!@$%^*]).*$/i.test(value);
}, "비밀번호는 영문+숫자+특수문자 포함 9자리 이상이며, 특수문자는 !@$%^*만 지원됩니다.");


/^(?=[a-zA-Z0-9!@$%^*])(?!.*[^a-zA-Z0-9!@$%^*]).*$/

영문이나 숫자, 해당 특수문자 중 한가지만 포함해도 true

정규식 표현 중에 괄호 범위 안에서 전역으로 문자 검색 하는 기능을 이번에 처음 알게되어 정리해봄.




++ 추가 표현 (업데이트 2018/11/20)


function validateName(name) {

    let result = false;

    let re = /^(?=[^\s\x22\x27])(?!.*[\s\x22\x27]).{2,20}$/;

    result = re.test(String(name).toLowerCase());


    return result;

}


공백, 홑따옴표('), 쌍따옴표(") 를 제외한 문자열을 최소 2글자에서 20글자 사이까지 탐지.


위 정규식을 html pattern 속성에 넣으면 따옴표 때문에 깨져서 유니코드로 표현하였다.


한글 정규식 표현도 유니코드로 표현해주면 깨지지않고 표현 가능하다


정규식 표현 공부하는건 재밌는데,, 어려워서 금방금방 까먹게 된다.


-------


의도대로 완전하게 감지되지않아 이번에 수정하여 업데이트하였습니다. 이제 완벽하게 됨.


+ 응용 패턴 추가



해당 특수문자 발견 시 false 리턴


/^[^\s\x22\x27\{\}\[\]()<>?|`~!@#$%^&*_\-+=,;:\/]*$/


쌍, 홑따옴표 발견 시 false 리턴 (위의 정규식 표현과 다른 방법)


/^[^\s\x22\x27]{2,20}$/


알파벳, 숫자, 한글만 가능하게 (유니코드로 변환해야 에러 발생이 안된다)


/^[a-zA-Z0-9\uAC00-\uD7A3]*$/



이미지태그 정규식표현 (PHP 버전)

<img.*?src=['"](.*?)['"]

preg_match_all('/<img.*?src=[\'"](.*?)[\'"]/', $input_lines, $output_array);



한글 탐지 (가-힇)


/(?=.*[\uAC00-\uD7A3]).*/g




정규식 표현 검사 사이트


https://regexr.com/


https://www.phpliveregex.com/









참고 : https://medium.com/@originerd/%EC%A0%95%EA%B7%9C%ED%91%9C%ED%98%84%EC%8B%9D-%EC%A2%80-%EB%8D%94-%EA%B9%8A%EC%9D%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-5bd16027e1e0




게시판 구조



grp, depth, level 을 이용한 계층형 게시판 소스입니다.



방식 1 : 최근 답변을 위로


    public function follow($data)

    {

        $no = $data['no'];

        $grp = $data['grp'];

        $depth = $data['depth'];

        $level = $data['level'];


        $follow = $data['follow'];


        $result = $this->select("select grp, depth, level from board where no={$no}");

        foreach ($result as $row) {

            $grp = $row[0];

            $depth = $row[1];


            $this->query("update board set depth = depth + 1 where grp={$grp} and depth > {$depth}");


            $depth = $row[1] + 1;

            $level = $row[2] + 1;

        }


        $result = $this->query("insert into board (uid, name, title, content, ctim, follow, grp, depth, level)"

            . "values('{$data['uid']}', '{$data['name']}', '{$data['title']}', '{$data['content']}', '{$data['ctim']}', {$no}, {$grp}, {$depth}, {$level})");


        return $result;


    }


참고 : 구글링 링크 중 가장 흔한 방식




방식 2 : 최근 답변을 밑으로



public function follow($data)

{

    $no = $data['no'];

    $grp = $data['grp'];

    $depth = $data['depth'];

    $level = $data['level'];


    $follow = $data['follow'];


    $result = $this->select("select grp, depth, level from board where no={$no}");

    foreach ($result as $row) {

        $grp = $row[0];

        $depth = $row[1];

        $level = $row[2];

    }


    $result = $this->select("select min(depth) from board where grp = {$grp} and depth > {$depth} and level <= {$level}");

    foreach ($result as $row) {

        $depth = $row[0];

    }


    if ($depth == null) {

        $result = $this->select("select max(depth) + 1   from board  where grp = {$grp}");

        foreach($result as $row) {

            $depth = $row[0];

        }

    } else {

        $this->query("update board set depth = depth + 1 where grp = {$grp} and depth >= {$depth}");

    }


    $level = $level + 1;


    $result = $this->query("insert into board (uid, name, title, content, ctim, follow, grp, depth, level)"

        . "values('{$data['uid']}', '{$data['name']}', '{$data['title']}', '{$data['content']}', '{$data['ctim']}', {$no}, {$grp}, {$depth}, {$level})");


    return $result;


}




참고 : https://okky.kr/article/98829 의 내용을 참고하여 재구성



$data로 받는 것은 전부 부모 글의 정보들 입니다.



옛날에나 개인 홈페이지 만들고 그랬는데 요즘은 뭐.. XE엔진, 워드프레스, 블로그 등 다양한 방법으로 자신만의 웹사이트를 만들 수 있기때문에 장인 정신으로 직접 만드는 사람은 거의 없지 않나 싶다.


하지만 웹 사이트의 알고리즘을 익히고 구조를 계획하며 다룰 땐 이런 고전적인 것이 제일 좋은 방법인 듯 하다.




ECMAscript6 관련해서 gulp - 바벨 플러그인을 업데이트 하다가





이런 에러가 우수수 나오기 시작했다.


js 쪽이 잘못되었나,, 변수명이 잘못되었나,, 보다가


uglify 그냥 고유의 문제인 것을 알았다.




구글 검색을 좀 해보다가


깃허브 쪽 글을 보게 되었는데 https://github.com/webpack/webpack/issues/2972


closure compiler 나 babili 로 갈아타야된다는 말을 듣고


별 다른 고민 없이 바로 갈아타버렸다.


npmjs (https://www.npmjs.com/package/gulp-babili) 에서 검색하면 쉽게 찾을 수 있다.


본인은 yarn 패키지 관리자를 사용해서


yarn add gulp-babili 명령어로 설치했다. (--dev 옵션 안주고)


gulp는 사용법이나 적용방법이 무지 쉬워서


해당 파이프를 복사해서 적절한 위치에 복붙하면 자동으로 minify 해준다. (어찌보면 오토메이터랑 비슷한 느낌)


솔직히 난 ECMAscript 를 잘 활용하진 않는다. 왠만하면 CSS로 처리 가능하고.


var을 let으로 바꿔서 쓰는 것 정도..? ajax 기능이라던지.




근데 오늘 ECMAscript6의 특징을 보니



commonJS 없이 모듈을 불러올 수 있게 된다는 내용을 보았다. (http://es6-features.org/#ValueExportImport)


오..


개인 프로젝트에는 JS 플러그인(Jquery, 프레임워크 등)을 안쓰기로 한 내 입장에선


javascript 가 이런 식으로 발전한다는 것은 정말 반가운 소식인 것 같다.



그나저나 두서없이 프로그래밍 분류의 첫 글을 이걸로 하는 건 좀.. 흠..


다음엔 조금 더 보편적이고 재밌는 글을 써보도록 하겠다.