본문 바로가기

Web21

tinyMCE 7.0 주요 업데이트 tinyMCE는 휼륭한 문서 에디터로써, 좋은 성능과 기능을 제공해주는데, 최근 7.0이 발표하여 어떠한 주요한 기능이 있는지 확인해보았다.중요한 기능으로는 보다 정교한 마크다운 호환성과 수정 내역의 히스토리 확인 그리고 워드 문서를 입력하거나 변환하고자 할때 깨지는 증상을 크게 완화했다고 한다. 다만 새로 업데이트된 기능들은 대부분 유료 사용자들에게 제공된다는 점은 아쉬움이 남는다.마크다운마크다운 형식의 콘텐츠를 편집기에 붙여넣어 적절한 형식의 리치 텍스트로 즉시 변환할 수 있는 기능으로 기술 스택을 간소화할 수 있습니다. 기본 마크다운 포맷 변환을 사용하여 인라인으로 작성하고, 당사 API를 통해 TinyMCE의 콘텐츠를 마크다운으로 출력합니다.수정 내역이전과는 다른 TinyMCE에서 콘텐츠를 관리할.. 2024. 5. 7.

Svelte 와 SvelteKit 비교 우리는 Svelte를 사용할 때 Svelte와 SvelteKit를 별도로 구분하지 않지만, 실제로는 Svelte와 SvelteKit은 조금은 다르다고 할 수 있다. Svelte는 코어적인 부분을 담당하고, Sveltekit은 코어 위에 올라가는 프레임워크라고 할 수 있다. .Net으로 생각한다면, .Net Framewark 위에 MVC 가 존재하는 그림이라고 할 수 있다. Svelte는 JavaScript를 기본적으로 사용하는 프레임워크이다. 그렇다보니 Svelte 자체만 사용해서는 완성도 높은 웹(다양한 동작을 하는)을 구성하기에는 태생적으로 한계가 있다고 할 수 있다. SvelteKit을 이용하지 않을 때에는 vite를 이용하여 빌드하면 SvelteKit을 제외하고 사용이 가능하다. Svelte 빌드.. 2024. 3. 13.

CSS - pre 자동 줄바꿈 적용하기 웹개발시, 긴 텍스트등을 출력할 때 보기에 pre가 가장 적절하다. 그런데 pre 태그를 사용하면 기본적으로 줄바꿈이 되지 않는다. 줄바꿈이 되지 않은 상태: 인터넷 상에 다양한 코드가 있지만, 가장 확실한건 아래와 같이 pre 를 CSS에 적용하고 해결 되었다 pre { overflow: auto; white-space: pre-wrap; word-wrap: break-word; } 줄바꿈이 적용 상태: 2024. 3. 10.

Java - 비구조화 할당(Unpacking) 이해, 예제 포함 Java에서는 비구조화 할당이라는 기능을 제공하는데, 고급 개발 언어인 이유중 하나가 바로 비구조화 할당이라고 할 수 있다. Python에서도 제공하는 기능이지만 비구조화된 할당을 사용하면 다음과 같은 장점을 가지게 된다. 코드 가독성 향상 당연한 거지만 비구조화 할당은 코드를 더욱 간결하고 읽기 쉽게 만들어 줍니다. 변수명이 길거나 복잡한 객체를 다룰 때 유용하게 사용할 수있다. 코드 중복 제거 비구조화 할당을 사용하면 불필요한 중복 코드를 제거할 수 있는데, 반복적(for 문과 같이)인 객체의 속성을 추출해서 변수에 저장할 때 객체명을 계속해서 입력하는 것을 방지할 수 있다. 속도 향상 비구조화 할당은 작은 메모리 객체에서 더욱 효율적이다. 이유는 객체의 속성을 개별 변수로 바로 할당하기 때문이다. .. 2024. 3. 10.

Svelte 3.5 2023년 하반기 업데이트 주요 기능 하이라이트 2023년 하반기에는 Svelte가 3.5로 업데이트하면서, 동시에 SvelteKit를 1.0을 발표하였다. 아래와 같은 주요한 업데이트가 있다고 하니 3.5버전을 적극적으로 사용해보고 싶다. SvelteKit 1.0 출시: 완전히 새롭게 디자인된 라우팅 시스템: 더 빠르고 유연하며 강력한 기능으로 새로운 라우팅 API 및 파일 기반 라우팅 제공 새로운 엔드포인트 API: 서버 측 렌더링 및 정적 사이트 생성 지원 향상된 Vite 통합: Vite 기반 빌드 시스템으로 빠른 빌드 속도 및 향상된 개발 경험 제공 새로운 adapter API: 다양한 플랫폼에 SvelteKit 애플리케이션을 배포 가능 Svelte 3.5 출시: 새로운 svelte.config.js 파일: Svelte 컴파일러 및 Vite 설.. 2024. 3. 10.

Svelte - 3.x 2023 상반기 업데이트 new feature 하이라이트 필자가 좋아하는 Svelte 가 2023년 상반기에 주요한 업데이트 내용을 정리해 보았다. 현재 5월 기준 아래와 같은 기능 개선이 있었다. Improve detection of promises that are also functions (Svelte 3.55.1, #8162) Add missing types and properties for the global part attribute and on:submit, respectively (Svelte 3.55.1, #8181) Lots of performance and bug fixes (Svelte 3.55.1* and extensions-107.0.x) 2023년 4월에는 대부분 기능 개선의 업데이트만 존재한다. svelte/elements has .. 2024. 3. 10.

MarkDown - 가장 많이 사용하는 마크다운 정리 제목: #을 사용하여 제목을 만들 수 있다. # Hello World는 "Hello World"라는 제목을 만든다. 굵게: ** 또는 __를 사용하여 텍스트를 굵게 표시할 수 있습니다. **bold text**는 bold text로 표시 기울임: * 또는 _를 사용하여 텍스트를 기울임꼴로 표시할 수 있습니다. *italicized text*는 italicized text로 표시 취소선: ~~를 사용하여 텍스트에 취소선을 추가할 수 있다. ~~strikethrough text~~ 는 strikethrough text로 표시 목록: 순서 있는 목록은 1., 2., 3. 등으로 시작하며, 순서 없는 목록은 - 또는 *로 시작한다. - Item 1과 * Item 2는 모두 순서 없는 목록의 항목을 만든다. 인용.. 2024. 3. 10.

Svelte - TinyMCE 사용하기, 주요 옵션들 TinyMCE는 Svelte에서 활용할 수 있는 가장 유용한 Editor중 하나이다. 실제 필자가 Svelte에서 사용할 만한 Editor를 비교한 글을 작성한 적이 있는데, 그중 당연히 제일 좋았던 기억이 난다. 기본 사용 먼저 가장 기본적으로 사용할 수 있는 코드는 아래와 같다. 먼저 npm을 이용해서 개발 의존성 모드로 tinymce-svelte 를 설치한다. npm i -D tinymce-svelte 설치가 완료되면, App.svelte와 같이 tinymce-svelte를 사용하고자 하는 svelte 파일에 아래내용을 기입하면 기본적으로 동작할 준비가 완료된다. Hello Tiny 위 코드를 저장하고, 콘솔에 npm run dev를 실행해서 정상적으로 나오는지 확인해보자. npm run dev 위.. 2024. 3. 2.

Svelte - ko, en 사용 브라우저 별로 문자열 표시하기 아무래도 사이트를 개발하다보면, 다중언어를 지원해야 하는 상황이 종종 발생한다. 여기에서는 Svelte를 이용해서 다중 언어을 지원하는 가장 효율적인 방법에 대해서 고민한 내용을 정리해 보도록 하겠다. 다중언어는 필자는 다음과 같은 방식으로 개발할 예정이다. 언어 파일 생성 언어 파일 불러오기 브라우저의 언어를 확인하여 텍스트 출력하기 언어 파일을 생성하는 이유는 추후 관리의 편의성을 위해서 각 언어별로 파일로 생성하여 관리하는 것을 추천한다. 다음은 en.json과 ko.json 파일 생성한 예이다. 1. 언어 파일 생성 en.json { "title": "Hello!", "text": "English Support" } ko.json { "title": "안녕하세요!", "text": "한글 지원" .. 2024. 2. 28.

이전 1 2 3 다음

티스토리툴바