본문 바로가기
반응형

svelte11

Svelte - Snowpack dev Port 조정 devOptions 사용 개발서버의 포트를 변경하기 위해서 찾아보던중 Snowpack 옵션중 devOptions을 변경해야 하는줄 알았다. 그럼 이에 대해서 알아보고자 한다. 설정을 하지 않으면 기본으로 지정된다. module.exports = { devOptions: { port: 8080, // 개발 서버를 실행할 포트 번호 fallback: 'index.html', // SPA인 경우 제공할 모든 사용자 경로 open: 'default', // 새 브라우저 탭에 개발 서버를 열기, “chrome”, “firefox”, “brave”등 설치 경로 지정 output: 'dashboard', // 콘솔의 출력 모드를 지정, "stream" | "dashbaord", 다중 실행시 stream으로 동일한 콘솔에 내용을 출력 host.. 2022. 7. 26.
Svelte - Docker + Nginx 를 이용한 배포하기 Svelte 배포시 Docker를 활용한 방법을 정리해보고자 한다. Svelte는 Build를 구성하였을때 최적화하여 Output을 만들어 주기 때문에 여기에 웹서비스를 함께 구성하면 효과적이다. 이때 함께 사용할 만한 옵션으로 Nginx가 효율성이 높다. 그럼 먼저 테스트 Application을 템플릿을 통해 구성하도록 하자. 이후 svelte-docker로 디렉토리를 이동한다. npx degit sveltejs/template svelte_test cd svelte_test 그리고 아래와 같이 중요 package.json와 package-lock.json 파일을 복사한다. 그리고 npm 설치 및 빌드를 통해 build 경로로 운영에 필요한 파일을 생성한다. 이후 nginx html 경로로 build를.. 2022. 7. 25.
Svelte - TinyMCE 기본 사용, conf 옵션 활용 TinyMCE는 Svelte에서 활용할 수 있는 가장 유용한 Editor중 하나이다. 실제 필자가 Svelte에서 사용할 만한 Editor를 비교한 글을 작성한 적이 있는데, 그중 당연히 제일 좋았던 기억이 난다. Svelte - 쓸만한 OpenSource Editor 찾기 (asecurity.dev) 2022. 5. 10.
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.
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.
SVELTESTRAP - Bootstrap 5, Svelte에서 사용하기 CSS를 많이 직접 작성해서 만드는 방법도 있지만, CSS Framework로써, 사전에 구성된 디자인 스타일을 이용하면 보다 손쉽게 화면을 구성할 수 있어서 기존에 필자 역시 웹 개발에 자주 사용하였다. 이번 Svelte를 진행하면서 기존 방식으로 활용할 수 있지만, Svelte에 최적화 된 BootStrap 버전인 SvelteStrap 에 대해서 얘기해 보고자한다. SvelteStrap은 Bootstrap 와 완벽하게 호환하여 Svelte에서 손쉽게 Bootstrap을 사용할 수 있도록 도와준다. 이를 사용하기 위해서 설치하는 방법은 npm을 이용해서 손쉽게 설치할 수 있다. 설치 npm install sveltestrap 이제 css 사용을 위해 main.js에 css를 import 시키도록 하자... 2022. 4. 1.
Svelte - SPA routes 설정 Web은 우리가 특정 사이트의 페이지를 방문하면 해당 페이지의 모든 내용을 서버에 요청을 하고 응답 받아 화면에 보여주는 하나의 사이클로 연결성이 없는 단일 요청 방식으로 구성되어 있다. 이렇다 보니 페이지를 요청할 때, 다양한 웹 화면에 구성된 이미지를 비롯해서 모두 새로 가져오기 때문에 서버에서는 적지 않은 부담이 된다.(브라우저에서 캐쉬를 가지고 있다고 하더라도 여러 사용자가 이와 같은 페이지 전체 요청을 하는 경우 서버에게 큰 부담이 될 수 밖에 없다.) 하지만 Front-End의 기술이 발전하면서, 실제 요청시 필요한 데이터만 요청을 하는 방식을 통해 보다 서버의 부하를 줄이고, 효율적으로 사용할 수 있는 방식이 개발 되었고, 이를 SPA(Single-Page-Application)이라고 한다... 2022. 3. 30.
반응형