개발자.. 너란놈..

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

framer-motion이라는 라이브러리를 이용하여 간단한 애니메이션을 구현 할 수 있다.

아래는 framer-motion을 설치하는 방법의 관련된 URL 입니다.

https://www.npmjs.com/package/framer-motion

framer-motion을 사용하면 초기시점 , 애니메이션 , 끝났을 때(사라질 때)를 선택하여 애니메이션을 만들 수 있습니다.

아래와 같이 지정하면 아코디언을 만들 수 있습니다.

주의 사항

꼭 변동이 되는 부분의 <AnimatePresence>로 감싸주어야지만 사라질 때 (exit) 동작 기능이 됩니다.

WebPack에서 그냥 실행 했을 경우에는 개발자 도구 시 소스가 깨져서 보이는 경우가 있다.

개발 시에는 개발자 도구를 통하여 디버깅을 할 수도 있기 때문에 webpack 세팅을 2개로 나눠서 하는 경우가 좋다.

2개로 나눠서 아래와 같이 개발 실행 시에는 개발자 도구에서 볼 수 있게 세팅을 해주면 된다.

devtool : 'inline-source-map',

Webpack에서 scss를 사용하기 위해서는 아래와 같이 세팅이 필요하다.

module: {
    rules: [
      {
        test: /\.s[ac]ss/i,
        use: [
          'style-loader',
          // css-loader 소스맵 옵션 활성화
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            }
          },
          // sass-loader 소스맵 옵션 활성화
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ],
        exclude: /nodeModules/,
      },    
    ],
  },

Webpack을 사용하여 이미지를 경로에 넣으려면 webpack.config.js를 수정하지 않으면 넣기가 어렵습니다.

아래와 같이 2가지를 추가해주고 소스 상에서는 alias로 되어있는 부분으로 이미지를 가져와서 사용하면 됩니다.

아래는 사용 하는 방법 입니다.

전에 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와 모바일의 반응형 작업은 어떻게 해야되는 지 알아보겠습니다.