개발자.. 너란놈..

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

안녕하세요 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 시켜주는 함수 입니다.

※ forwardRef

- 자식 컴포넌트 요소를 호출하는 부모 컴포넌트에 역으로 참조해서 전달
   사용법)
     const Modal = forwradRef((props, ref) => {
        return (
          <aside className='modal' ref={ref}>
            <div className='con'></div>
            <span className='close'>close</span>
          </aside>
        );
     });

※ useImperativeHandle

- 자식 컴포넌트가 아닌 특정 커스텀 객체를 부모로 전달
- forwardRef 안쪽에서만 활용 가능
     사용법) ref는 부모쪽에 보내는 것
         useImperativeHandle(ref, () => {
             return { Open: () => setOpen(true) };
         });

※ optional chaining - 옵셔널체이닝 (객체에서만 사용 가능)

- 첫 렌더링 싸이클에서는 Vids[0]의 객체 값 자체가 없음으로 없는 요소의 id값 호출 시 오류가 되니 객체 값 자체가 없으면 skip 되게 함
     사용법) '?'를 쓰면 됨
         <iframe title={Vids[0]?.id} src={` https://www.youtube.com/embed/$ {Vids[0]?.snippet.resourceId.videoId}`}></iframe>
     - 객체에서만 사용 할 수 있다.

※ component children

- component 참조를 한 사이에 HTML 데이터들은 그대로 사용 할 수 없다.
- 참조 당한 component에는 children이라는 예약어가 생기고 그걸 component에 위치시켜야지만 사용 가능 하다. 
EX)        

function Department() {
     return (
         <Layout name={'Department'}>
         ★★★<p>회사 조직소개 페이지 입니다.</p>★★★ 여기가 바로 children 부분
         </Layout>
     );
}

function Layout({ name, ★★★children★★★ }) {
    return (
        <section className={`content ${name}`}>
            <figure></figure>

            <div className='inner'>
            <h1>{name}</h1>
            ★★★{children}★★★
            </div>
        </section>
    );
}

☆주의사항 : Children과 children은 다름 (children으로 사용하여야 함)