개발자.. 너란놈..

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

안녕하세요 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