# 에디터

junghoon0112

들어가며: AI의 미래, Cursor IDE (진짜로 이거 써보고 vscode 바로 지워 버렸음) 🔥🔥 어딜가든 ai...ai.... 너무 많이 주변에서 말하는 통에 머리가 다 아프시죠. 하지만 한번만 더 말할게요 이건 정말 소개 하고 싶어서 글을 적어요. Cursor라는 새로운 AI 기반 코드 에디터가 나왔습니다. 해외에서는 이미 트위터와 Github에서 화제가 되고 있어요. Github 스타는 무려 17.1k! 그것도 버그 이슈만 등록 가능한 리포지토리에서요.말그대로 정맛 핫한데 아직 정식적으로 한국에서 소개하는 글이 없어 보여서 빠르게 가져와 봤습니다. 🔥🔥 그럼 VSCode와 비교하면 어떤 점이 다를까요? 일단,Vscode 를 Forking 해서 만든 프로젝트인 만큼 vscode의 모든기능 및 확장프로그램도 사용가능하면서 Cursor는 AI의 힘을 빌려 코딩을 더욱 쉽고 효율적으로 만들어 줍니다.

kang52uk

01-1. 파이썬이란? **파이썬(Python): 1990년 귀도 반 로섬이 개발한 인터프리어 언어 인터프리어 언어: 소스 코드를 한 줄씩 해석한 후 그때그때 실행해 결과를 바로 확인할 수 있는 언어** 구글에서 만든 소프트웨어의 50%이상이 파이썬으로 작성되었다는 이야기도 있을 정도이다. 파이썬 프로그램은 공동 작업과 유지보수가 매우 쉽고 편리하다. 01-2. 파이썬의 특징 파이썬은 인간다운 언어이다. 파이썬은 사람이 생각하는 방식을 그대로 표현할 수 있는 언어이다. 굳이 컴퓨터의 사고 체계에 맞추어 프로그래밍하려고 애쓸 필요가 없다. 이 소스 코드는 다음과 같이 읽을 수 있습니다. "만약 4가 1, 2, 3, 4 중에 있으면 '4가 있습니다.'를 출력한다." 문법이 쉬어 빠르게 배울 수 있다. 파이썬은 문법이 매우 쉽고 간결하며 사람의 사고 체계와 매우 닮아 있다. 무료이지만 강력하다. 파이썬은 오픈

sutrong7

| 단축키 | 내용 | | :- | :- | | Ctrl + G | 입력한 라인으로 이동 | | Ctrl + Enter | 코드 줄 바꿈 | | Ctrl + Tab | 탭 이동 | | Ctrl + B | 왼쪽 탐색기 창 끄기 / 켜기 | Ctrl + 1 or 2 | 좌측 또는 우측 화면으로 포커스 하기 | | Alt + Shift + (↑, ↓) | 코드 한 줄 복사 | | Alt + (↑, ↓) | 코드 한 줄 전체 이동 | | Ctrl + L | 코드 한 라인 블록으로 묶기 | | Ctrl + D | 같은 단어 하나씩 선택 (밑으로 하나씩 선택) | | Ctrl + Shift + L | 같은 단어 전체 선택 | | Ctrl + Shift + k / Ctrl + x | 한줄 삭제 | | Alt + Click | 멀티 커서 | | Ctrl + Alt + (↑, ↓) | 연속되는 멀티 커서 | | Shift + Alt + 마우스 드래그 | 자유 영역 지정 | | Alt + Shif

1g2g

contentEditable이란 어떤 HTML 요소든 내부에 텍스트를 작성할 수 있게 만들어주는 속성입니다. 이 속성을 이용하면 아무 태그나 input이나 textarea처럼 사용할 수 있습니다. 아래는 style 태그를 이용한 예시입니다. style 태그 내에 텍스트를 작성할 수 있도록 contentEditable = true와 block 처리를 해주었습니다. style 태그 안에 css를 입력해주면 스타일들이 즉각적으로 반영되는 것을 볼 수 있습니다. input, textarea와 뭐가 다른데? input과 textarea의 입력 내용 저장 방식 이 경우에는 에디터로 사용하기 위해서는 사용자로부터 입력을 받은 뒤, 해당 value를 가져와 태그

lesacat94

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

cloud_oort

STL list 이용

hhnn0

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

guinness

적용한 에디터와 기능들 🥑 CKEditor5 라이브러리 설치 CKEditor5 공식 문서👆 🥑 Vue3 프로젝트에 CKEditor5 구성하기 1. 라이브러리 import 2. CKEditor5 온라인 빌더로 필요한 기능 가져오기 > ⚠️ 기본 형태의 에디터는 최소한의 기능을 제공하기 때문에 필요에 따라 기능을 추가해줘야합니다. [CKEditor5 온라인 빌더 링크 👆](https://ckeditor.com/cke

persestitan

뷁어 번역기 일본어가 한글로 깨진 글자를 원문으로 돌려줍니다. 코드 출력 HangulSplitItem 한글 1글짜를 저장하는 객체로 해당 클래스로 관리하면 자음, 모음을 분리해서 관리할 수 있습니다. 상수 메소드 프로퍼티 setFirst 초성을 입력을 하는 로직 입니다. 메개변수 (char, int) int일때 의 순서의 값이 세팅됩니다. setSecond 중성을 입력을 하는 로직 입니다. 메개변수 (char, int) int일때 ` 의 순서의 값이 세팅됩니다. setThread 종성을 입력을 하는 로직 입니다. 메개변수 (char, int) int일때 의 순서의 값이 세팅됩니다. 예시 코드 HangulEditor isOnlyHangul(String) 한글만 있다면 true를 반환하고 아니면 false를 반환합니다. isInOnlyHangul(String) 한글이 포함되어 있다면

gimminjae

개요 멋북스 개인 프로젝트를 진행하는 과정에서 toast에디터를 프로젝트에 적용해야 하는 상황이었다. 여러가지 면에서 쉽지 않기도 했다. 다음에 또 적용할 때 쉽게 할 수 있도록 기록을 남겨두고자 한다. 삽입 코드 먼저 토스트 에디터 UI를 적용하기 위해서는 jQuery와 테일윈드css가 필요하다. head 혹은 body에 추가해준다. 토스트 에디터 UI 의존성을 추가해준다. > head에 추가하면 에디터의 툴바가 표시되는 과정에 문제가 생길 수 있다. body의 상단에 추가해주도록 하자. css 추가 토스트 에디터 관련 script 추가 html form 태그를 다음과 같이 추가한다. > 주의 사항 input의 name이 body로 되어 있는데, body가 아닌 content나 다른 이름으로 할 경우에는 script문의 Article__submit()함수의 body도 변경해주어야 한다. 원인은 파악하지 못했으나... script

khy226

들어가며 최근 토이 프로젝트를 작업하며 텍스트 에디터를 적용할 일이 생겼다. 사용성을 위해 에디터를 사용하면 바로 화면에 표시될 수 있는 WYSIWYG(위즈윅) 에디터를 적용하려고 관련 에디터를 찾아보았다. > 위지위그(WYSIWYG: What You See Is What You Get, "보는 대로 얻는다")는 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다. 이는 편집 명령어를 입력하여 글꼴이나 문장 형태를 바꾸는 방식과 구별된다. 출처: 위키백과 TinyMCE, Summernote, React-Quill 등 여러 에디터들이 있었지만 레이아웃이 깔끔하고, 사용성이 좋으며, 한국어 지원이 되

soohyeonb_9

문제 한 줄로 된 간단한 에디터를 구현하려고 한다. 이 편집기는 영어 소문자만을 기록할 수 있는 편집기로, 최대 600,000글자까지 입력할 수 있다. 이 편집기에는 '커서'라는 것이 있는데, 커서는 문장의 맨 앞(첫 번째 문자의 왼쪽), 문장의 맨 뒤(마지막 문자의 오른쪽), 또는 문장 중간 임의의 곳(모든 연속된 두 문자 사이)에 위치할 수 있다. 즉 길이가 L인 문자열이 현재 편집기에 입력되어 있으면, 커서가 위치할 수 있는 곳은 L+1가지 경우가 있다. 이 편집기가 지원하는 명령어는 다음과 같다. L- 커서를 왼쪽으로 한 칸 옮김 (커서가 문장의 맨 앞이면 무시됨) D- 커서를 오른쪽으로 한 칸 옮김 (커서가 문장의 맨 뒤이면 무시됨) B- 커서 왼쪽에 있는 문자를 삭제함 (커서가 문장의 맨 앞이면 무시됨) 삭제로 인해 커서는 한 칸 왼쪽으로 이동한 것처럼 나타나지만, 실제로 커서의 오른쪽에 있던 문자는 그대로임 P$- $라는

wlsh44

이번 포스팅에서는 IntelliJ에서 code style을 적용하는 방법에 대해 알아보려고 합니다. Code Style 적용 Preferences​(command(⌘) + ,) -> Editor -> Code Style 으로 이동하면 여러 언어들에 대해 code style을 설정할 수 있는 것을 알 수 있습니다. 저는 그중에서 Java의 code style을 변경해보려고 합니다. 위의 사진을 보시면 Indents, Spaces, Blank Lines 등 여러 스타일을 적용할 수 있습니다. 오른쪽의 코드는 해당 스타일이 적용된 예시입니다. 각 설정 탭에 대한 내용을 원하시면 [여기](https://www.jetbrains.com/help/idea/settings-code-style.ht

smlee111

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

sp1rit

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

mjhyp88

이번 포스팅은 WebEditor중 하나인 Summernote이다. 해당 Editor를 접할 기회가 생겼고, 다른 WebEditor를 사용해본적이 없기 때문에 다른 Editor에 비해서 장점을 말하기는 힘들겠지만 구현해보면서 느낀 장점/단점과 구현방법에 대해서 작성해볼 예정이다. 1. Summernote 장/단점 > 다른 웹에디터를 사용해보지 않아 다른 에디터에 비해 어떤지는 잘 모르기 때문에 내가 구현해보면서 느낀 장/단점에 대해서 작성해보겠다 1.1. 장점 어느 정도 툴바 커스터마이징이 편리했다. type을 지원해 typescript로 개발이 편리했다. 다양한 callback함수를 지원한다. 1.2. 단점 jQuery 의존성(jQuery 없이 사용 불가) > 요즘 같이 jQuery를 지양하려는 추세에서 이건 큰 단점이라 생각한다. bootstrap 의존성 > bootstrap으로 인해 사용하고 있는 스타일과 충돌이 발

y7y1h13

처음에는 커서의 위치를 숫자로 주면서 계속 변화시켰다. 그랬더니 시간 초과가 나버린... 고민고민하다가 스택 두개로 구현하면 될 것 같아서 해보았다. 스택을 두 개 준비하고 그 사이에 커서가 있다고 생각한다. 왼쪽으로 커서를 옮기면 왼쪽 스택에서 pop을 하고 오른쪽 스택에 append를 해준다... 이런 식으로 하면 풀린다!! 마지막에 합치는 건 오른쪽 스택을 뒤집어 줘야 한다.

moiber

들어가며 Visual Studio Code는 마이크로소프트에서 개발한 오픈소스 에디터입니다. 그냥 줄여서 vscode라고 부르죠. 설문에 따르면, vscode는 전세계의 개발자들 사이에서 가장 인기있는 에디터라고 합니다. 저도 얼마전에 Atom에서 갈아탔어요 😋. 이 글에서는 vscode를 설치하는 방법을 알아보겠습니다. > [2021 Developer Survey - Stackoverflow] (https://insights.stackoverflow.com/survey/2021#most-popular-technologies-new-collab-tools) > 질문: 어떤 개발환경을 선호하시나요? 설치하기 vscode를 설치하려면

hyklux

신규 파일 생성 및 저장 수정한 기존 파일 저장