개발자.. 너란놈..

CSS로만 사용하여 X 버튼을 만드려고 합니다. 아래와 같이 사용하면 됩니다.

HTML

<span className='btn_x'></span>

CSS

.btn_x {
			position: absolute;
			top: 20px;
			right: 40px;

			&:hover {
				&::before,
				&::after {
					background-color: #555;
				}
			}

			&::before,
			&::after {
				content: '';
				display: block;
				position: absolute;
				width: 3px;
				height: 25px;
				background-color: #999;
				cursor: pointer;
			}

			&::before {
				transform: rotate(45deg) translateX(0px);
			}

			&::after {
				transform: rotate(-45deg) translateX(0px);
			}
		}
	}

간편하게 레이어 팝업을 만들기 위해 소스 정리합니다.

html

<div class="layer-popup">
    <div class="layer-content">
    	<!-- contents-->
    </div>
</div>

style

.layer-popup{
        position: absolute;
        top:0;
        width:100%;
        height: 100%;
        background-color: rgba( 0, 0, 0, 0.5 );
        z-index: 9999;

	.layer-content{
            position: fixed;
            left: 0;
            top: 0;
            width: 90%; //Content 영역 조절)
            top : 50%;
            left : 50%;
            transform : translate(-50%, -50%);            
            z-index: 10000;  
            border-radius: 16px;

            /*style*/
            background: white;
            box-shadow: 0 0 6px 1px rgb(0 0 0 / 30%);
     }
}

Tailwind

<div class="layer-popup fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
    <div class="layer-content fixed bg-white shadow-md rounded-lg z-60 p-4 transform -translate-y-1/2">
        <div className="w-[300px]">
            데이터 보여주면 되는 부분?
        </div>
    </div>
</div>

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로 되어있는 부분으로 이미지를 가져와서 사용하면 됩니다.

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