프로그래밍/Javascript6

• [React] MUI: Warning Failed props type error MUI 컴포넌트에서 Failed props type: The prop xs of Grid can onpy be used together with the item prop 에러 발생 console에는 에러라고 하지만 사실상 경고문. 문장을 읽어보면 item props와 함께 사용 가능하다고 하는데, 간단하게 Grid props에 item을 설정해주면 된다. 프로그래밍/Javascript 2024. 10. 7.

• 

  [ReactJS] highlight.js 커스텀 language 추가 커스텀 language를 추가하기 전에 code highlight 설정부터 해야한다. 2024.08.24 - [프로그래밍/Javascript] - [ReactJS] code highlight editor (feat. highlight.js) [ReactJS] code highlight editor (feat. highlight.js)1. 실행 결과 2. 원리먼저 highlight.js는 텍스트에 style을 입혀주는 기능을 할 뿐이다.  즉 엘리먼트들을 사용한다는 것인데, textarea나 MUI의 TextField에서는 적용이 불가능하다. 예로 들어 C언어에서park-duck.tistory.com  1. 기존의 언어 추가먼저 highlight.js를 보면 기존의 language들이 있다.   예를 들어.. 프로그래밍/Javascript 2024. 8. 24.

• 

  [ReactJS] code highlight editor (feat. highlight.js) 1. 실행 결과 2. 원리먼저 highlight.js는 텍스트에 style을 입혀주는 기능을 할 뿐이다.  즉 엘리먼트들을 사용한다는 것인데, textarea나 MUI의 TextField에서는 적용이 불가능하다. 예로 들어 C언어에서 "int num = 5;"라는 code는 "int num = 5"라는 html코드로 되어있다.  int는 type이니까 hljs-type의 class이름으로 css를 입힌다... 이런 식인데 textarea와 같은 컴포넌트들은 HTML 코드가 아니니 innerHTML도 불가능하고, css도 입히지 못하는 것이다. 그러면 어떻게 TextEditor를 만드냐면  textarea와 pre&code를 겹치는 것이다. (여기서 pre&code는 hightlight.js 적용방법이다).. 프로그래밍/Javascript 2024. 8. 24.

• [Javascript] 2. Toast UI Grid 셀 합치기(+ header 합치기) 이전 글에서 Toast UI Grid의 기초를 확인하였다. 이번 글에도 Data를 임의로 만들기 귀찮으니 무료로 공유되는 api를 사용할 것이다. api 사용법을 모르면 이전글을 확인하자. 2024.03.14 - [프로그래밍/Javascript] - [javascript] 1. Toast UI Grid 기초(+API 사용법) [javascript] 1. Toast UI Grid 기초(+API 사용법) Toast UI를 많이 사용하는데, 기본적인 구현 방법에 대해 설명한다. 해당 포스트는 Grid 방식을 설명한다. 1. 가장 기본이 되는 사용법 먼저 Toast UI Grid를 띄워보자. data는 임의의 배열을 지정하여 Toas park-duck.tistory.com header 합치기 먼저 Header .. 프로그래밍/Javascript 2024. 3. 19.

• 

  [javascript] 1. Toast UI Grid 기초(+API 사용법) Toast UI를 많이 사용하는데, 기본적인 구현 방법에 대해 설명한다. 해당 포스트는 Grid 방식을 설명한다. 1. 가장 기본이 되는 사용법 먼저 Toast UI Grid를 띄워보자. data는 임의의 배열을 지정하여 Toast UI Grid를 띄워본다. 먼저 include 해야 할 것은 Toast UI Grid의 javascript와 css이다. 이후 임의의 Data Array를 초기화하여 Grid Table을 구현해 본다. See the Pen Untitled by Sangyoung Park (@Sangyoung-Park) on CodePen. 2. API를 사용하는 방법 먼저 API는 무료로 공유하는 https://koreanjson.com/users를 사용한다. 그중 몇 개의 데이터만 뽑아서 .. 프로그래밍/Javascript 2024. 3. 14.

• [JS] Drag&Drop 구현 예제(feat. SortableJS) Drag&Drop 라이브러리를 찾아서 사용중인데 구조를 간단히 설명하자면 Sortable([드래그할 아이템들의 컨테이너], [옵션값(Json 형식)]으로 구성되어있다. new Sortable(Element, Option); 첫번째 인자에는 Element를 적으라고 하지만, 왠지 모르겠으나 id값을 넣어줘도 작동을 한다. 옵션값은 상당히 많아 가장 아래의 문서 링크를 참조하면되고 여기서는 자주쓰일법한 예제만 적어둔다. 1. 위치 이동 See the Pen Untitled by Sangyoung Park (@Sangyoung-Park) on CodePen. 2. 그룹 이동 See the Pen sortableExcample2 by Sangyoung Park (@Sangyoung-Park) on CodePen.. 프로그래밍/Javascript 2024. 2. 2.