개발자.. 너란놈..

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

node -v 				// 내가 사용하고 있는 Node 버전 확인하기
nvm list available 		// 사용 가능한 버전 조회하기
nvm install 14.15.4 	// 14.15.4(LTS) 버전 다운로드하기
nvm list				// 설치 되어있는 버전확인하기
nvm use 14.15.4			// 14.15.4 버전 사용하기
node -v

node 버전이 맞지 않아서 아래 버전으로 설치해야되는 상황이 발생 하였다.

NVM을 설치하면 node 버전을 상위 하위 버전 다 변경할 수 있음

1. https://github.com/coreybutler/nvm-windows/releases

하단에 내려가면 아래와 같이 있다.

※ 설치 후 꼭 재부팅 하여야 한다.

명령어를 사용하여 아래와 같이 변경 할 수 있다.

node -v 				// 내가 사용하고 있는 Node 버전 확인하기
nvm list available 		// 사용 가능한 버전 조회하기
nvm install 14.15.4 	// 14.15.4(LTS) 버전 다운로드하기
nvm list				// 설치 되어있는 버전확인하기
nvm use 14.15.4			// 14.15.4 버전 사용하기
node -v

Node 버전은 아래 링크에서 확인하면 된다.

https://nodejs.org/en/download/releases

GIthub에 소스를 올리면서 올리지 말아야 할 정보들이 올라가는 경우가 있습니다.

그런 경우 특정 History에 파일들을 삭제해야되는 경우 아래와 같이 쓰면 됩니다.

※ 모든 history에 특정 파일을 삭제하는 로직입니다. 

git filter-branch --force --index-filter "git rm --cached --ignore-unmatch '파일경로'" --prune-empty --tag-name-filter cat -- --all

파일 경로는 './파일경로'로 시작하여야 합니다.

설정이 완료되고 나면 아래와 같이 git을 push 해주면 history 삭제가 완료 됩니다.

git push --force --all

※ Generic

    - Generic : 타입의 선언을 정의단에서 하는 것이 아닌 호출할때 적용
    - Generic은 들어오게 되는 타입이 다양할 때 활용

const getLength = <type>(arr: type[]) => {
    return arr.length;
};

const arr1 = [1, 2, 3];
const arr2 = ['red', 'green', 'blue'];
const arr3 = [1, '2', 3];

console.log(getLength<number>(arr1));
console.log(getLength<string>(arr2));
console.log(getLength<number | string>(arr3));

//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 시켜주는 함수 입니다.

※ 기본 타입

let test: string = 'hello';
let num: number = 0;
let isFemale: boolean = true;

※ 참조형 타입

let like: string[] = ['game', 'music', 'youtube'];
let dislike: Array<string> = ['study', 'homework'];
let odd: number[] = [1, 3, 5];
let even: Array<number> = [2, 4, 6];
let abc: boolean[] = [true, false, true];
let bbc: Array<boolean> = [true, false, true];

※ Tuple : 배열에 들어가는 자료형이 다를 때 배열의 순서마다 타입지정

let arr1: [number, string] = [3, '3'];

※ 객체 타입지정

    - interface : 객체처럼 자료의 구조가 복잡한 경우 직접 커스터마이징된 타입을 생성

type Score = 'A' | 'B' | 'C' | 'D' | 'F'; //정해져있는 특정값을 그룹으로 묶어서 커스텀 타입 지정 가능

interface Student {
	name: string;
	age: number;
	readonly isFemale: boolean; //readonly : 해당 property는 읽기전용으로 변경 불가
	address?: string; //? : 해당 property는 optional하게 적용 (있을 수도 있고 없을 수도 있고)
	// [grade: number]: string; //property명을 산정할 수 없을 때 대괄호로 묶어서 타입지정 가능
	[grade: number]: Score; //특정 그룹의 값을 묶어서 커스텀 타입 지정 가능
}

//Student라는 커스텀 인터페이스 타입이 지정된 객체
let student1: Student = {
	name: 'David',
	age: 20,
	isFemale: false,
	1: 'C',
	//address: 'Seoul',
};

let student2: Student = {
	name: 'Emily',
	age: 30,
	isFemale: true,
	2: 'B',
};

//student2[2] = 'Z';는 할 수가 없음 (Score에 없음)