본문 바로가기
반응형

svelte15

Svelte 와 SvelteKit 비교 우리는 Svelte를 사용할 때 Svelte와 SvelteKit를 별도로 구분하지 않지만, 실제로는 Svelte와 SvelteKit은 조금은 다르다고 할 수 있다. Svelte는 코어적인 부분을 담당하고, Sveltekit은 코어 위에 올라가는 프레임워크라고 할 수 있다. .Net으로 생각한다면, .Net Framewark 위에 MVC 가 존재하는 그림이라고 할 수 있다. Svelte는 JavaScript를 기본적으로 사용하는 프레임워크이다. 그렇다보니 Svelte 자체만 사용해서는 완성도 높은 웹(다양한 동작을 하는)을 구성하기에는 태생적으로 한계가 있다고 할 수 있다. SvelteKit을 이용하지 않을 때에는 vite를 이용하여 빌드하면 SvelteKit을 제외하고 사용이 가능하다. Svelte 빌드.. 2024. 3. 13.
Java - 비구조화 할당(Unpacking) 이해, 예제 포함 Java에서는 비구조화 할당이라는 기능을 제공하는데, 고급 개발 언어인 이유중 하나가 바로 비구조화 할당이라고 할 수 있다. Python에서도 제공하는 기능이지만 비구조화된 할당을 사용하면 다음과 같은 장점을 가지게 된다. 코드 가독성 향상 당연한 거지만 비구조화 할당은 코드를 더욱 간결하고 읽기 쉽게 만들어 줍니다. 변수명이 길거나 복잡한 객체를 다룰 때 유용하게 사용할 수있다. 코드 중복 제거 비구조화 할당을 사용하면 불필요한 중복 코드를 제거할 수 있는데, 반복적(for 문과 같이)인 객체의 속성을 추출해서 변수에 저장할 때 객체명을 계속해서 입력하는 것을 방지할 수 있다. 속도 향상 비구조화 할당은 작은 메모리 객체에서 더욱 효율적이다. 이유는 객체의 속성을 개별 변수로 바로 할당하기 때문이다. .. 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.
NodeJS, Svelte - CORS 해결 3가지 방법 필자도 CORS를 알고 있지만, 이번에는 프론트쪽 언어를 진행하면서 CORS를 다시금 경험하여 해결 방안을 Nodejs, Svelte 입장에서 정리해본다. CORS는 가장 요점만 정리한다면, 현재 도메인 이외의 경로에서 정보를 요청했을때, 사전에 요청을 현재 도메인이 허용하는지를 구성하도록 하여 해커의 공격을 막기 위한 브라우저의 보안 설정이라고 할 수 있다. 이를 해결하기 위해서는 1. 쿠키 정보를 공유하거나 2. Access-Control-Allow-Origin를 설정하거나 3. Proxy 설정을 하는 것이다. 각 방법에 대해서 간략히 정리해 본다. 1. 인증된 요청 (Credentialed Request) 통한 방법 인증된 요청 (Credentialed Request)은 인증 정보들 전달한다는 의미.. 2024. 2. 22.
Svelte - VSCode Can't find stylesheet to import scss prependData 설정 문제 해결 오랫만에 Svelte 코드를 수정할 일이 있어서 파일을 열었는데 온통 붉은 빛으로 물든다... 확인해보니, Can't find stylesheet to import scss 오류와 함께, svelte.config.js에서 지정한 prependData 설정이 잘못되었다고 한다. 흠... 한참을 들여다보다가, 문제의 원인을 확인한 부분은 바로... 경로에 있다는 것을 알게 되었다. 위 경로를 보면, ./src/scss/main.scss 상대 경로로 되어 있어 실제 사용할 때에는 문제가 없지만, VSCode입장에서는 어디인지 위치 확인이 원할하지 않은 문제.. 그래도 붉은색은 개발자에게 있어서 매우 불길한 색상이기에 검색을 해본 결과 절대 경로로 설정할 수 있는 방법을 찾았는데 아래와 같다. import pa.. 2022. 12. 15.
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 앱이 없는 경우 최초에 진행하는 작업이다. 별도의 개발한 프로젝트가 있다면 생략한다.) npx degit sveltejs/template svelte_test cd svelte_test Dockerfile 생성 Dockerfile 구성은 어렵지 않다. 아래와 같이 package.json와 package-lock.json 파일을 복사한다. 그리.. 2022. 7. 25.
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.
반응형

티스토리툴바