# editor

ahyes

현재 나는 무엇을 하고있는가? > 저는 현재 프로젝트로 개발자 커뮤니티를 제작중입니다. 여기서 특징은 게시글과 댓글 모두 마크다운 문법을 사용할 수 있는 에디터를 이용한다는 것인데 직접 만들어 사용하기로 결정했습니다. 왜 에디터를 직접 만드려고 하는가? 기존에 존재하는 에디터를 가져와도 되지 않나?라는 의문이 충분히 드실 수 있는데, 일단 기존에 존재하는 WYSIWYG(위즈윅: What you see is what you get) 에디터를 사용하기 위해 여러가지 패키지들을 다운받아봤지만 원하는 기능(코드 블럭을 사용할 수 있는가?)을 충족시키는 에디터가 별로 없었고 찾았더라도 업데이트가 되어있지 않아 사용하고있는 리액트 버전에선 동작하지 않는 경우가 많았습니다. 그나마 CKEditor를 끝까지 사용해보려했지만 제가 무언가 잘못했는지 코드 블럭을 추가할 수 없는 문제가 발생했습니다.(다크 모드도 지원하지 않아 CSS 조작을 따로 해야하는 점도 불편합니다.) 사용하려던 에디

zer0vin

OnSceneGUI() 커스텀 타일맵을 만들면서 Grid를 SceneView 위에 그리기 위해 방법을 찾아야 했다. 찾아보니, > Scene view 상에 UI를 그리기 위해서는 update 콜백이 필요하다. 그래서 유니티에서는 Scene에서 오브젝트 정보 표시 및 이벤트 취합을 위해 콜백을 제공하는데, 이를 사용하기 위해서는 SceneView 클래스 onSceneGUIDelegate에 에디터 윈도우에서 사용할 콜백 함수를 추가하면된다. 그러면 Scene을 위한 update tick을 받을 수 있다. // 출처 🐸 라는 방법이 있었다. 그러나, 라는 메세지가 떠서 대신 duringSceneGui 를 사용했는데 잘 동작했다. FocusWindowIfItsOpen()

hskwon517

1. 설치 사용하고 있는 패키지 매니저로 설치하면 된다. yarn add react-quill 또는 npm i react-quill 2. 기본 사용방법 (toolbar 커스텀 X) 다음과 같이 기본적인 React Quill 에디터가 나타난 것을 확인할 수 있다. 3. toolbar 커스텀하기 toolbar를 커스텀할 경우, CustomToolbar 컴포넌트를 만들고 import 해서 사용하면 된다. 최상단의 태그에는 toolbar를 id로 선언해준다. 커스텀한 toolbar를 사용하

dbwjd5864

JavaScript 개발을 할 때 많이 사용되는 IDE(Integrated Development Environment, IDE)나 경량 에디터(lightweight editor)로 많이 언급되는 것에는 Visual Studio Code, WebStorm, Sublime Text, Atom등이 있다. 그 중에서도 유료로는 WebStorm이 무료로는 VScode가 가장 많이 고려되고 있는 옵션인데, 오늘은 팀내에도 틈틈이 공유 했던 VSCode를 좀 더 활용할 수 있는 방법들을 글로 적어보려고 한다. VSCode에서 추론되는 Type 확인하기 요즘 Front 개발을 하다보면 TypeScript의 Type을 떼어 놓을 수 없는데 Type을 정의할 때 도움을 받을

hjlee0806

| vi 명령어 | 동작 | | :- | :- | | i | - 현재 커서 위치에 삽입 (입력모드로 넘어감) | | dd | - 커서가 위치한 곳의 한 줄 삭제 (삭제이지만, p로 복구가능) | | yy | - 현재 줄을 버퍼로 복사 (한 줄을 ctrl + c 한다고 생각하면 됩니다.) - 5줄 복사 : 5yy | | p | - 현재 커서가 있는 줄 바로 아래에 버퍼 내용 붙여넣기 - 5dd를 이용해서 다섯줄을 지운 것도 p 한번으로 붙여넣기 가능합니다. | | ( | - 현재 문장의 처음 | | ) | - 현재 문장의 끝 | | { | - 현재 문단의 처음 | | }</cen

h_jinny

코드를 쓴 사용자를 식별할 수 있는 기능 웹스톰에서는 다음과 같이 누가 작성한 코드인지, 그리고 코드가 사용된 횟수를 알 수 있다. 기능 삭제 좋은 기능이긴 하나, 개인적으로 코드를 보는데 있어 좀 많이 불편했다😂 해당 기능을 끄거나 켜는 기능을 구글링하여 찾았고, 방법은 다음과 같다. settings > Editor > inlay Hints > Code vision > Usage 와 Code author 체크 해제

aimzero9303

문제 서버에서 불러온 데이터를 state에 담고 에디터의 옵션인 initialValue에 다음과 같이 처리했는데 불러온 데이터가 뜨지를 않는다. 해결 본인의 상황에 맞는 언어로 contentRef.current?.getInstance().setHTML(doc.data().content 또는 contentRef.current?.getInstance().setMarkDown(doc.data().content 를 골라서 사용하자

aimzero9303

문제 우선 toast-ui editor는 ssr을 지원하지 않는다. 따라서 Next.js에서 toast-ui를 설치하고, import해서 사용하면 에러가 날 것이다. 해결 Next.js에서는 ssr을 하지 않게 하는 좋은 기능을 제공하는데 바로 Dynamic이다. 따라서 나는 Editor를 import하고 사용하는 부분을 컴포넌트로 따로 빼고, 그 컴포넌트에 Dynamic을 걸어주어서 에러를 해결했다. 에디터 컴포넌트를 불러오는 부모 컴포넌트 에디터를 import한 에디터 컴포넌트 또는 라이브러리 자체를 Dynamic을 걸어줘 import를 하는 방식도 있는데, 그때는 ref를 사용할 수 없어서 forwardRef를 이용해야 한다. <= 안써본거라 걍 이 방법은 사용하지 않았음

yunsser

Dakest Dark Theme를 적용하고 Ediror theme을 Eclips standard를 하니 @Annotations이 기울어져 있는게 굉장히 거슬렸다.. 그래서 바꾸는법을 찾아봤다 window > preferences > java > Editor > syntax Coloring > java > Annotations > italic 를 해제해주면 끝!

lesacat94

부트캠프 팀 프로젝트 진행 중 에디터를 이용하여 게시물 작성 페이지를 개발했다.그에 관한 기록을 남겨보려한다. React-Quill 을 사용한 이유 게시물의 내용을 작성하려면 form, input, button의 구조로 개발을 진행할 것이다.하지만 이번 팀 프로젝트에서는 고도화를 하고싶었고, 실제로 운영되는 사이트들의 대부분은 에디터를 사용하여 게시물 작성을한다.에디터를 사용해본적이 없는 나는 적용이 간편하고 사용횟수를 참고하여 React-Quill을 선택했다. (Q) React-Quill 을 사용하여 DB에 과부화를 주지않고 이미지 업로드 하는 문제 Quill에서 이미지를 표현하는 방식은 base64 형태로 DB에 넣을 수 없는 형태이다.아래와 같은 값을 DB에 저장할 수

hhnn0

🧾 개요 에디터 개발 프로젝트를 진행하면서, 어떤 방법으로 Input을 구현해야 할 지 정해야 했습니다. 그에 따라, 정리한 내용을 공유해보고자 합니다. https://github.com/boostcampwm-2022/web32-bmNotion 🧐 고려사항 고려했던 상황들은 다음과 같습니다. 1. 여러 줄의 입력이 가능한가 블록 단위의 에디터로 프로젝트를 기획했기 때문에, 한 블록에 여러줄의 입력이 필수적이라고 생각했습니다. 2. HTML 요소 수정이 가능한가 불필요한 리렌더링을 줄이기 위해 비제어 컴포넌트로 에디터를 구현하기로 했습니다. 그렇기 때문에 직접적으로 HTML을 수정할 수 있다면 효율적일 것이라고 판단하였습니다. 3. 클립보드를 지원하는가 각 블록의

inwoo920

본 글은 다음과 같은 순서로 진행됩니다. 다양한 문제점 총평 이전에 Froala를 선택하게 된 계기와 장점으로 꼽은 것들은 해당 링크에서 확인하실 수 있습니다. 이번 글에서는 Froala를 사용하면서 겪은 문제점들에 대해서 이야기드리고자 합니다. 다양한 문제점 진행중인 프로젝트에 Froala의 유료 버전을 사용하였고 다양한 문제점들을 발견하였습니다. React.Strict Mode double component [Froala rendering twice when using React.StrictMode](https://github.com/froala

inwoo920

본 글은 다음과 같은 순서로 이루어집니다. 위지윅 에디터란 무엇인가? 대표적 위지윅 에디터 위지윅 에디터, 한글 문제 위지윅 에디터 최종 선택 및 이유 위지윅 에디터란 무엇인가? 'WIZ-zee-wig(위지윅)'으로 발음하며 'what you see is what you get'을 줄여 부른 말입니다. WISIWYG는 사용자가 보는 것이 그대로 최종 산물에 나타나도록 하는 유저 인터페이스를 말합니다. WISIWYG 어플리케이션에서는 사용자가 화면에서 본 것과 출력했을 때의 프린트물이 동일하게 생성됩니다. 프로젝트를 하다보면 단순 input이나 textarea로는 부족한 경우가 많습니다. 예를 들면 필기를 작성하거나 또는 소개글을 작성할 때 input 창을 통해서 진행한다면 어떨지 생각해봅시다. 잘 구현을 한다면 충분할 수도 있지만 위지윅 방식이 아니라면 사용자 입장에서 내가 쓴 글이 어떻게 출력이 되는지 확인 후에 다시 수정을 하는 번거로운 과정

hwnim5324

Toast UI Editor 커뮤니티를 만들다보니 Text Editor가 필요해 몇 에디터를 비교해봤다. 무엇보다 사용성에 초점을 두어 내가 사용하기 편한 에디터를 찾게 되었는데, 다름아닌 Toast UI Editor를 선택하게 되었다. Toast UI Editor는 리액트, 뷰, Vanilla JS를 지원하는 에디터로 Markdown 에디터임에도, WYSIWYG 에디터를 동시에 지원한다는 장점이 있다. 또, 마크다운의 프리뷰와 기본 뷰어도 제공해 개발에도, 사용에도 용이하다고 판단했다. Toast UI Editor 적용 에디터를 typescirpt와 yarn berry를 이용한 리액트에 적용하는 방법은 아래를 통해 알아보자. 먼저 아래의 명령어를 통해 설치를 진행한다. react-editor만 설치할 경우 yarn에서 css파일을 찾지 못한다는 에러가 발생하기에 반드시 @toast-ui/editor도 같이 설치해줘야 한다. 이어서 .yarnrc

korkhg15

Install vim >sudo apt install -y vim Edit vim settings >gedit ~/.vimrc

dudgus1670

결론 "eslint는 코드 퀄리티를 보장하도록 도와주고, prettier는 코드 스타일을 깔끔하게 혹은 통일되도록 도와줌." ESLint 문법 수정. Code Error를 잡아내고 Code 문법을 강제하는 등 코드 품질 개선에 중점. 사용 되지 않은 변수를 오류로 분류하는 no-unused-vars 같은 코드 퀄리티 룰은 prettier 같은 포맷터가 잡아낼 수 없음. (문법 오류) ESLint Setting ESLint 설치 ![](https://velog.velcdn.com/images/dudgus1

moonelysian

Toast UI에서 제공해주는 Editor을 활용해보자! 내 project 환경은 typescript, Nextjs 그리고 react이다. Install npm install --save @toast-ui/react-editor Useage 자! 이러면 이제 nextjs가 에러를 퉤퉤퉤한다. error receive ReferenceError: self is not defined toast-ui editor은 ssr을 지원하지않는다. nextjs를 사용한다는건 기본적으로 ssr을 사용하겠다는 의미이기 때문에 여기서 문제가 생기는 것이다. dynamic import를 사용하면된다. Editor 컴포넌트를 하나 만들고 이런식으로 가져와준다. > dynamic import란? dynamic import는 모듈을 빌드 타임이 아닌 런타임에 불러오도록 한다. 이를 통해 번들 파일을 분리하고 퍼포먼스 향상을 기대할 수 있다. 이러면 일단 1차 난관은

poi7560

샘플용 이미지 : https://dribbble.com/ Image resizer: https://resizeimage.net/ Image compressor: https://tinypng.com/

smlee111

컴퓨터와 소통을 위한 도구 🔹가볍다 🔹extention(확장)을 설치해 내가 자주 쓰는 환경으로 세팅 가능하다

sp1rit

얼마전에 vscode를 재설정하면서 keybinding 했던 것들도 전부 날아가면서 편하게 이용하던 터미널, 에디터 이동 단축키를 까먹었다. 그래서 다음에도 귀찮게 검색 안하고 바로 할 수 있게 글을 작성한다. horiz.d님의 velog를 참조했습니다. > 이 글은 윈도우를 기준으로 작성했습니다. (다만 맥의 경우도 ctrl과 cmd가 다른 차이만 있고 별 차이는 없는 것 같음) Ctrl + Shift + P 클릭 preferences : Open Keyboard Shortcuts (JSO