예방이의 개발일기

네이버 스마트 에디터가 생각보다 좋아서 리액트에 적용하고 싶은데...네이버 스마트 에디터는 npm으로 설치가 불가한 것 같다. 그래서 생각해 낸 방법이 public 폴더에 에디터 html 을 만들고 그 html 파일을 컴포넌트 iframe에 넣어서 가져오는 방식이다!!해봤더니 잘돼서 공유한다. https://github.com/naver/smarteditor2/releases Releases · naver/smarteditor2Javascript WYSIWYG HTML editor. Contribute to naver/smarteditor2 development by creating an account on GitHub.github.comsmarteditor2를 받아준다.  나는 표시한 파일을 받아줬다...

React에 CKEditor5을 적용하는데 설명이 너무 없는 것 같다... (내가 문서를 잘 이해 못하는 것일수도...) npm으로 CKEditor를 설치하게 되면 안깔린 플러그인들은 또 별도로 설치해줘야하는데 그렇게 하면 중복? 되었다는 에러가 계속난다... 그래서 찾은 방법이 CKEditor 홈페이지에 내가 필요한 플러그인들을 넣고 파일을 다운로드해서 프로젝트에 적용하는 것이다. 에디터 타입은 클래식으로 선택했다. UI 보고 원하는 것 선택하면 될듯!!! 필요한 플러그인들을 ADD 해준다. PREMIUM 뱃지가 붙은건 넣지말자! 아래 처럼 나중에 돈든다고 나온다... 30일만 사용가능하게된다. 나는 왠만한 플러그인들을 다 넣어줄 것이다!! 내가 추가한 플러그인들이다! 툴바에 보여졌으면 하는 플러그인들..

코드를 작업하다 보면 생각보다 드래그도 많이하게 된다. 그러다 보면 마우스로 드래그 하고, 다시 키보드로 손을 이동하는 동작들이 많아져서 손목에 부담이 가게 된다. 그래서 찾게된 vscode extension과 단축키 설정법! 단축키는 mac 기준으로 작성되었다. 1. Bracket Select 괄호, 따옴표 등을 단축키를 이용해 선택할 수 있다. opt + a 를 클릭하면 "" 사이, '' 사이, [] 사이 등 한 번에 선택해준다. 완전 편함 강추 2. htmltagwrap jsx 작업하다보면 부모 태그로 감싸 줘야하는 경우가 많이 생기는데 이 extension사용하면 내가 지정한 태그로 단축키만 입력하면 감싸준다. opt + w를 클릭하면 드래그 한 부분을 태그로 감싸줌~! 나는 기본 div로 설정해..