본문 바로가기
반응형

Svelte16

Svelte - TinyMce images_upload_handler Error - tinymce cannot read properties of undefined (reading 'then') 아마 Svelte에서만 발생하는 문제로 보인다. images_upload_handler 를 등록하면 아래와 같은 오류와 함께 진행이 되지 않는다. tinymce cannot read properties of undefined (reading 'then') TinyMCE를 통해 이미지관련된 이벤트를 효과적으로 처리하기 위해서는 별도의 평션을 만들어 이용해야하는데, 이부분에서 분명 백엔드에서 값을 가져왔지만 정상적으로 보이지 않는 에러가 발생한다. 하지만 표시가 되어야 할 source 경로에서는 아래 처럼 read 오류가 발생한다. 처음에는 브라우저의 CORS 문제로 생각하여 브라우저를 고쳐보았다. Mac - Chrome CORS Disable 실행 (asecurity.dev) Mac - Chrome COR.. 2022. 5. 10.
npm update/upgrade 방법 npm 버전이 낮아서 업데이트를 하는데 추후 사용을 위해 기록해 둔다. 먼저 현재 npm 버전을 확인하도록 하자. npm -v -g 옵션을 이용하여 npm 을 최신 버전으로 올릴 수 있다. npm install -g npm 2022. 5. 9.
CSS - Select 비활성화, 기본값 설정 Select는 CSS에서 특정 요소를 지정하거나 선택하는데 사용하기 유용한 컴포넌트이다. 이를 보다 효과적으로 사용할 수 있는 옵션 2가지에 대해서 정리해 보도록 하겠다. 1. 비활성화 특정 옵션의 경우 화면 표시에 표시만하거나, 조건에 따라서 비활성화하는 방ㄱ으로 사용할 수 있다. 사용은 옵션에 disabled를 선언해 주는 것으로 간단히 사용할 수 있다. Category {#each types as t (t)} {t} {/each} 위 코드를 적용해 보면, 아래와 같이 기본적으로 Category를 보여줄 수 있다. 그리고 해당값은 실제 선택할 수 없도록 하여, 사용자의 잘못된 사용을 막을 수 있다. 2. 기본값 지정 다음은 자주 사용되는 값인 경우 기본적으로 선택하여 사용할 수 있도록 도움을 주는 옵.. 2022. 5. 8.
CSS - grid 기본 이해, 2차원 배열하기 CSS를 사용할 때, 특정 화면 사이즈에 요소들을 배치해야하는 경우가 있다. 이때 효율적으로 작성할 수 있는 부분이 바로 CSS에서 제공하는 grid이다. grid는 행과 열을 통한 2차월 배열을 지원한다. 따라서 행과 열을 grid 작성시 지정해 줄 수 있으며, 해당 기준의 열과 행에 맞춰서 화면 배열이 만들어지게 된다. grid에서 열(grid-template-columns), 행(grid-template-rows)을 지정하는 옵션을 통해 조절 할 수 있는데 repeat를 이용해 반복 횟수를 지정할 수 있다. 한줄에 2개의 열을 100px씩 표시하고 싶다면 아래와 같이 지정 할 수 있다. test1 test2 test3 test4 아래와 같이 100px씩 2개의 버튼이 열을 만들어 구성된 것을 알 수.. 2022. 4. 26.
Svelte - 고유키를 통한 데이터 변경 확인 Svelte는 데이터가 추가되거나 삭제되었을 때에만 새롭게 화면을 렌더링 되는데, 현재 화면의 데이터가 변경되었다는 것을 인식시켜, 새롭게 랜더링하는 작업을 고유키를 통해서 설정이 가능하다. 여기에 고유키라는 값을 설정하여 해당 값이 변경된것을 확인할 수 있다. 아래와 같이 items를 구성할 경우 고유키를 설정하지 않을 경우 데이터 변경 유무를 확인 할 수 없는 필드가 발생할 수 있다. {#each items as {id, title, content}, i} title, content {/each} 고유키는 () 소괄호를 이용해서 고유키를 설정할 수 있는데, 바로 {#each items as {id, title, content}, i 부분에 ()를 이용해서 고유키를 설정할 값을 지정하자. 예제에서는 데.. 2022. 4. 26.
Svelte - TypeScript 사용하기 TypeScript는 클래스 기반 객체 지향 프로그래밍 지원과 같은 JavaScript의 새로운 기능을 지원한다. Svelte에서도 TypeScript를 기본적으로 사용이 가능하다. 아래와 같이 TypeScript를 script 구문에 지정해서 사용하면 된다. Svelte의 기본 Template인 github의 sveltejs/template를 이용하면, Javascript를 사용하는 기준으로 템플릿이 작성되어 있는데, TypeScript로 변환할 수 있는 방안이 템플릿안에 제공되는데 scripts 폴더 안에 setupTypeScript.js이다. 아래와 같이 명령을 실행하면, 템플릿 구조가 TypeScript를 사용하는 것으로 변경된다. node scripts/setupTypeScript.js App... 2022. 4. 13.
CSS - element 요소 정리 CSS를 작성할 때 기본적으로 알아두면 좋은 element에 대해서 정리해 본다. (현재 업데이트중...) Ctrl + F 키로 검색을 하면 보다 편하게 찾을 수 있다. 요소 설명 background-color 배경 색 border 테두리 스타일 color 글씨 색상 padding 세로 가로 크기 text-align 글씨 정렬 (가로 기준) text-decoration 글씨 표현 방식(기본값 링크시 밑줄) display 가로 세로등 element 표현 방식 font-size 글씨 사이즈 border-radius 모서리 라운딩 :hover 마우스가 위치할때 변화 transition-duration :hover시 전환되는 속도(기본값 0) box-shadow 배경 그림자 설정 float 그룹의 정렬 위치, .. 2022. 4. 3.
CSS 마침표 "."의 의미 CSS에서 Style을 지정할 때 "."은 선택자로 특정 스타일을 지정하는 용도로 활용된다. . 기호는 class 값을 고유 선택자로 지정할 때 사용된다. 이러한 선택자는 HTML 태그에 고유 식별자를 지정해서 개별적인 디자인 효과를 줄 때 사용하므로 특정 스타일을 구분할 때 효과적이다. . 점 고유 선택자 나, 너, 우리라는 h1 태그를 달고 있는 글자를 출력하고자 한다. 이때 "나"라는 h1 태그에만 빨간색 효과를 주고자 한다면, class를 red를 지정하고, .h1라는 스타일 이름을 생성해 테스트를 해보도록 하자. 나 너 우리 아래와 같이 고유 식별자로 지정한 .h1를 통해 빨간색이 적용 된다. . 이 없는 건 바로 html 에 기본적 태그에 사용할 수 있다. 만약 위에 사용하고자 한다면, h1 .. 2022. 4. 2.
반응형