개발자.. 너란놈..

replace를 사용하여 영문 , 숫자 , 특수문자만 사용할 수 있게 설정한 Javascript 유효성 입니다.

value.replace(/[^a-zA-Z0-9!@#$%^&*(),.?":{}|<>]/g, '')

C#으로 되어있는 것은 만들었었는데 JavaScript로 되어있는 것은 따로 없어서 작성 하게 되었습니다.

strRandomChar에서 문자 혹은 숫자만 걷어낸다면 숫자난수 , 문자난수를 구현 할 수 있습니다.

function _getRandomValue(Length){
    let result = '';
    let counter = 0;

    const strRandomChar = 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM0123456789';
    const strRandomCharLength = strRandomChar.length;    

    while (counter < Length) {
        result += strRandomChar.charAt(Math.floor(Math.random() * strRandomCharLength));    
        counter += 1;
    }
    
    return result;
}

AES256를 이용한 암호화 복호화를 만들어보았습니다.

//암호화
        AESencryption(value){
            //let secretKey = '%^qwe&*()123rty45!@#$67io890up!Q';
            //let secretKey = '%^qwe&*()123rty45!@#!Q';

            let secretKey = process.env.VUE_APP_AES_KEY;
            console.log('secretKey : ',secretKey);

            const cipher = CryptoJS.AES.encrypt(value, CryptoJS.enc.Utf8.parse(secretKey), {
                iv: CryptoJS.enc.Utf8.parse(""),
                padding: CryptoJS.pad.Pkcs7,
                mode: CryptoJS.mode.CBC
            });
            return cipher.toString();
        },
        //복호화
        ASEdecryption(value){
            let secretKey = process.env.VUE_AES256_KEY;

            const cipher = CryptoJS.AES.decrypt(value, CryptoJS.enc.Utf8.parse(secretKey), {
                iv: CryptoJS.enc.Utf8.parse(""),
                padding: CryptoJS.pad.Pkcs7,
                mode: CryptoJS.mode.CBC
            });
            return cipher.toString(CryptoJS.enc.Utf8);
        },

전에 ckeditor에서 base64image를 plugin 추가 하는 방법에 대해서 알아 봤습니다.

https://1061025.tistory.com/200

다만 이대로 그냥 사용한다면, 큰 사이즈의 이미지를 추가했을 때 이미지의 가로 , 세로 크기에 따라서 들어가기 때문에

pc에서 및 모바일에서 완전 깨지게 됩니다.

그래서 아래와 같이 width:100% , height: auto 처리를 해주어야 하는데 이런 경우에는 아래와 같이 플러그인을 변경 해주어야지만 반응형 처리를 할 수 있습니다.

이렇게 했을 경우 반응형 처리를 가능하게끔 수정 할 수 있기 때문에 고정값으로 표기가 되지 않습니다.

반응형을 고려하여 ckeditor base64image를 사용하려는 모든이들에게 도움이 되었으면 좋겠습니다 :D

Ckeditor 4를 사용 시 이미지를 적용하는 방법이 2가지가 있습니다.

가본으로 백단에 이미지를 filebrowserUploadUrl를 통하여 서버 단에서서 업로들 하는 방법

base64image를 사용하여 이미지를 등록 하는 방법입니다.

Ckeditor 5에서는 기본적으로 base64image를 사용 할 수 있는 것으로 알고 있지만 저 같은 경우는 무료 에디터를 상용으로 사용해야 됐기 때문에 plugin을 적용 해야 됐습니다.

ckeditor의 plugin은 아래 링크에서 다운 받을 수 있습니다.

https://ckeditor.com/cke4/addons/plugins/all

base64image의 경우 아래 링크에서 받을 수 있습니다.

https://ckeditor.com/cke4/addon/base64image

plugin 같은 경우는 ckeditor에 plugin 폴더가 따로 있습니다.

방금 다운로드 한 base64image 폴더를 이름 변경하여 적용 하여주세요

적용 후 CkEditor에 확장 플러그인을 아래와 같이 호출하여 적용 할 수 있습니다.

아래와 같이 ckeditor에 그림이 저장 되는 것을 확인 할 수 있습니다.

다음은 base64image를 넣었을 때 PC와 모바일의 반응형 작업은 어떻게 해야되는 지 알아보겠습니다. 

안녕하세요 javascirpt를 사용하면서 페이징을 사용해야 되는 경우가 있는데 이런 경우에 아래와 같이 사용하면 바로 페이지를 적용 할 수 있습니다.

//totalData = 총 데이터 count
//dataPerPage = 한페이지에 나타낼 데이터 수
//pageCount = 한화면에 나타낼 페이지 수
//currentPage = 선택한 페이지
function fnPaging(totalData, dataPerPage, pageCount, currentPage) {
    let totalPage = Math.ceil(totalData / dataPerPage); // 총 페이지 수
    let pageGroup = Math.ceil(currentPage / pageCount); // 페이지 그룹
    if (pageCount > totalPage) pageCount = totalPage;
    let last = pageGroup * pageCount; // 화면에 보여질 마지막 페이지 번호
    if (last > totalPage) last = totalPage;
    let first = last - (pageCount - 1); // 화면에 보여질 첫번째 페이지 번호
    let next = last + 1;
    let prev = first - 1;

    let prevPage;
    let nextPage;
    if (currentPage - 1 < 1) {
        prevPage = 1;
    } else {
        prevPage = currentPage - 1;
    }
    if (last <= totalPage) {
        if((currentPage + 1) > totalPage){
            nextPage = last;
        }else{
            nextPage = currentPage + 1;
        }
    } else {
        nextPage = last;
    }
    
    /**                 페이징을 아래서 만들면 됩니다. (InnerHTML 사용)            **/
}

버튼을 클릭 시 데이터를 가져와서 뿌려주고, 파라미터에 맞춰서 데이터를 보여준다면 페이지를 쉽게 할 수 있습니다.

안녕하세요 오랜만에 적는 블로그 입니다.

프로젝트를 진행하면서 input 파일명에 실제 파일명만 적어두고 실제 파일은 없어도 될 경우가 있는거 같아서 한번 만들어보았습니다.

아래와 같이 적어주시면 input file type에 넣을 수 있습니다.

const myFile = new File(["file"], "파일실제 명", {type: "text", });
const dataTeansfer = new DataTransfer();
dataTeansfer.items.add(myFile);
document.querySelector('#ID').files = dataTeansfer.files;
alert(document.querySelector('#ID').files[0].name);

//ColorCode : #ffffff
function ChangeRGB(ColorCode) {
    const Color = ColorCode.replace('#', '');
    const rgb = Color.length === 3 ? Color.match(/a-f\d/gi) : Color.match(/[a-f\d]{2}/gi);

    return rgb.map((el) => {
        if (el.length === 1) el = el + el;
        return parseInt(el, 16);
    });
}

컬러코드를 넣으면 RGB를 변환하여 컬러코드로 Return 시켜주는 함수 입니다.