Svelte.js [Core API] 완벽 가이드대시보드

The operation was rejected by your operating system. It's possible that the file was already in use (by a text editor or antivirus), or that you lack permissions to access it.   If you believe this might be a permissions issue, please double-check the permissions of the file and its containing directories, or try running the command again as root/Administrator (though this is not recommended).   package.json에 복붙하고 npm i 하면 이런 식으로 에러가 뜨네요.. 깃헙에 있는 npm i -D 패키지들 이것도 마찬가지입니다 ㅠㅠ

list.js 에서 스토어를 사용안하고 스토리지만 사용해서 할 수도 있는 부분이 아닌가요? 시도는 안해봤지만.. 왠지 스토어가 없어도 될 거 같은데 왜 스토어를 사용하는지 궁금합니다..! 말도 안되는 질문이라면 죄송합니다

    왜인지 모르겠지만 에러가 계속나고 node-sass가 빌드? 설치?가 안된다는거 같은데...왜 그럴까요?

mergeConfig.js:92 Uncaught (in promise) TypeError: Cannot convert undefined or null to object     at Function.keys (<anonymous>)     at mergeConfig (mergeConfig.js:92:24)     at Axios.request (Axios.js:39:12)     at Axios.<computed> [as get] (Axios.js:129:17)     at Function.wrap [as get] (bind.js:9:15)     at HTMLButtonElement.searchMovies (App.svelte:11:27) mergeConfig @ mergeConfig.js:92 request @ Axios.js:39 Axios.<computed> @ Axios.js:129 wrap @ bind.js:9 searchMovies @ App.svelte:11   input 창에 lion을 검색했을 때 이러한 오류가 떠서 질문드립니다.   현재 코드   <script>     import axios from "axios";     let apikey = "0000000";     let title = "";     let movies = null;     let error = null;     let loading = false;     async function searchMovies() {         const res = await axios.get(             `http://www.omdbapi.com/?apikey=${apikey}&s=${title}`,         );         console.log(res);         movies = res.data.Search;     } </script> <input bind:value={title} /> <button on:click={searchMovies}>검색</button> {#if loading}     <p style="color: royalblue">Loading...</p> {:else if movies}     <ul>         {#each movies as movie}             <li>{movie.Title}</li>         {/each}     </ul> {:else if error}     <p style="color: red;">{error.message}</p> {/if}

props와 context가 기능이 비슷해보이는데 언제 props를 쓰고 언제 context를 쓰는건가요?

안녕하세요. 강의 내용대로 따라하면서 svelte를 접하고 있습니다. 현재 svelte 3.0 에 axios 설치시에 0.25.0 버전이 설치 되는데 이후 오류가 발생하고 있습니다. @rollup/plugin-json 을 설치하고 rollup.config.js 파일을 수정해도 동일한 오류가 발생하는데 해결할 방법이 없을까요?

Heropy님 좋은 강의 감사합니다. searchMovies()함수의 구조가 Promise 안에 async가 들어있는 중첩구조처럼 느껴집니다. 한 번만 비동기를 해도 될 것 같은데 비동기 코드 안에서 비동기가 다시 실행되는 것처럼 느껴져서 혼란스럽습니다. 결국 작동원리와 오브젝트의 흐름이 파악되지 않아서 fetch()로 바꿔봤는데요, 이런 접근에 어떤 장단점이 있을까요? promise = fetch(`http://www.omdbapi.com/?apikey=${apikey}&s=${title}`) .then(res => res.json()) .then(data => data.Search)

node-sass 설치하려고 하면 python 2.7 의 경로를 찾을 수 없다고 설치를 실패합니다.      

안녕하세요~ 전체적으로는 잘 동작하고 문제가 없습니다. 다만 마우스로 클릭후 드래그 할때 드래그로 전환이 안되고 텍스트의 블록만 잡게되는 경우가 한번식 발생하는데 이게 좀 거슬린다고나 할까요? 텍스트 선택이 안되고 하고 무조건 클릭하면 드래드&드롭이 되도록 하거나 텍스트로 드래그가 되는걸 예방하는 방법이 있을까요? 아 그리고 이런 원인은 무엇일까요 ㅜㅜ (가끔씩 이미지처럼 드래그가 안되고 글씨영역을 드래그로 선택...)

현재 npm i axios -D하면 0.21버전이 설치되는데 이게 npm run dev할때 에러를 일으키네요 ㅜㅜ 교육영상에서와 같은 0.20버전으로 해야 동작합니다. (다른분들도 문제 생기면 0.20으로 시도해보세요) npm i axios@0.20  이 문제는 rollup과 관련된 문제인가요?

(사진)

+ Add another card 버튼을 아무리 눌러도 onEditMode로 안넘어 갑니다. onEditMode 부분에 콘솔로그 찍어보면 isEditMode는 true로 다 잘 나옵니다. 화면에 변화만 없습니다. 다음 진도 나가고 싶은데 나갈 수가 없네요... 크롬 개발자 모드에서 + 클릭할때 보면 .list 에서만 반짝 합니다. 도와주십시요~~~!! <script>   import { tick } from "svelte";   import { autoFocusout } from "~/actions/autoFocusout.js";   let isEditMode = false;   let title = "";   let textareaEl;   function addCard() {}   async function onEditMode() {     title = "";     isEditMode = true;     await tick();     textareaEl && textareaEl.focus();   }   function offEditMode() {     isEditMode = false;   } </script> {#if isEditMode}   <div use:autoFocusout={offEditMode} class="edit-mode">     <textarea       bind:value={title}       bind:this={textareaEl}       placeholder="Enter a title for this card..."       on:keydown={(event) => {         event.key === "Enter" && addCard();         event.key === "Esc" && offEditMode();         event.key === "Escape" && offEditMode();       }}     />     <div class="actions">       <div class="btn success" on:click={addCard}>Add Card</div>       <div class="btn" on:click={offEditMode}>Cancel</div>     </div>   </div> {:else}   <div class="add-another-card" on:click={onEditMode}>+ Add another card</div> {/if}

안녕하세요 훌륭한 강의 덕분에 Svelte를 잘 학습하고 있습니다. '반응성 구문' 학습 도중 잘 이해가 가지 않는 부분이 있어 질문을 남깁니다.  먼저 반응성 구문은 tick을 적용하지 않는다면, 화면이 한 번 갱신되고 난 후에 실행이 된다고 이해했습니다.  그런데, 선생님께서 보여주신 예제에서는 tick()을 적용하지 않은 상태에서도 화면 상의 double 값이 0 => 2로 변화하였습니다. 이에 의문이 남아 아래의 코드와 같은 실험을 해보았습니다. Assign 버튼을 클릭하였을 때 제가 예상한 작동 순서는 다음과 같습니다.  0. assign 함수 실행 1.  count ++  2. console.log(double) => 콘솔 상에 0 출력, 아직 화면이 갱신되지 않았으니 반응성 구문 실행 x 3. assign 함수 종료 4. 화면 갱신 5. 화면이 갱신되었으니, count값에 의존하고 있는 반응성 구문 실행 -- 여기서부터 반응성 구문-- 6. count가 1로 증가한 상태로 화면이 갱신되었으니 'id = count'인 태그는 1 출력 7. double에는 아직 새로운 값이 할당되지 않았으니 'id = double'인 태그는 0 출력 8. 'double = count * 2' 문장 실행 : double = 2 9. 문자열 'double' 출력 하지만 제 예상과는 다르게 'double = count * 2' 문장이 실행되기도 전에,  let double_ = document.getElementById("double"); console.log(double_); 으로 인한 결과 값이 <h2 id="double">2</h2>로 출력되었습니다.  즉, double이라는 변수가 2로 변경되기도 전에 화면 상의 double은 2로 렌더링 되었습니다. 위와 같은 현상의 원인이 무엇인지 궁금합니다.  (소스코드는 아래에 텍스트로 남기겠습니다. ) 다시 한 번 양질의 강의에 감사의 말씀 드립니다. 코드 <script>   import { tick } from "svelte";   let count = 0;   let double = 0;   $: {     let count_ = document.getElementById("count");     let double_ = document.getElementById("double");     console.log(count_);     console.log(double_);     double = count * 2;     console.log("double!");   }   async function assign() {     count++;     console.log(double);   } </script> <button on:click={assign}> Assign</button> <h2 id="count">{count}</h2> <h2 id="double">{double}</h2>

강사님 강의 정말 잘 듣고 있습니다 ^^ 현재 '조건 반복과 키 > 2.반복 블록의 Key 사용' 파트를 듣고 있는데요, 동영상에서는 버튼 클릭을 통해 li 요소를 하나씩 지울 때마다 ul 태그는 반짝거리되, body 태그는 반짝거리지 않는데요 같은 코드를 제가 실행을 할 때에는 body 태그와 ul 태그가 함께 반짝이더라고요. 혹시 이유를 알 수 있을까요?

안녕하세요 선생님 강의 너무 잘 보고있습니다. 이번강을 들으며 한가지 궁금한 부분이 생겼습니다. axios를 통해서 api를 호출하면 크롬network 탭에 가면 제가 호출한  omdbapi.com 사이트 주소와 api키가 전부 노출됩니다. 만약 제가 svelte를 배워서 추후에 웹 서비스를 제작하면 유저에게 이 키가 노출되면 문제가 생길거같습니다. 이부분에 대해서 어떻게 해야할지 궁금해서 질문드립니다.

삭제된 글입니다

안녕하세요 . 헤로피님  회사에서 React에서 Svelte로 툴 변경을 위해 강의를 수강중인 학생입니다 ^^  svelte의 context API인 getContext, setContext를 보던 중 Store와 비슷하게보여, 하위 컴포넌트에서 동일한 key를 다른 값으로 set해보았습니다. 그런데, 컴포넌트 외부에서 함수가 실행되었다고 에러 메세지가 나오고 이를 확인해보기 위해 검색을 해본결과 context로 넘긴 값은 반응성을 가지지 않는다고 알아 내었습니다.  그렇다면, store객체는 context의 기능과 더불어 어디에서나 사용가능하며, 반응성을 가지는데, 스벨트에서는 비슷한 역할을 하지만, 좀 더 활용방안이 높은 store와 context로  기능을 나누어 놓은 이유가 궁금하네요. (context의 기능을 실무에서는 하위 컴포넌트로 domain같은 상수 값 들을 전달하는 용도로만 사용하고 store는 반응성을 가질 수 있는 컴포넌트로 구분지어 사용하는 편이 좋을까요 ? 아니면 store로 context의 기능을 대체하여 사용할까요 ? )

안녕하세요! 강의 수강중 궁금한 사항이 생겨서 질문드립니다. component 섹션  10-4 강의에서 자식에서 부모로 createEventDispatcher() 함수를 사용하여 전달하는 방법을 배웠었는데, 이번 강의도 이것과 비슷해보이네요. 아직 실무에서 사용해본적이 없어서 그런가 지식을 얻을수록 더 혼돈이 오네요 ... ㅎㅎ 이것 또한 상황에 따라 쓰임새가 다른거겠죠..?

안녕하세요. 강의 정말 잘 보고 있습니다. :) 해당 강의를 보고, 검색 전에 영화 목록을 불러오는 기능을 만들어 보고 있습니다. getMovies 라는 함수를 만들어서 생명주기 강의 때 배웠던 beforeUpdate 훅에서 호출을 했었는데, beforeUpdate  는 컴포넌트의 데이터 값이 바뀌면 실행돼서 검색어를 입력할 때마다 getMovies 가 호출되는 문제가 있더라구요. 그래서 onMount 훅에서 getMovies 함수를 호출하는 방법으로 바꿔서 문제는 해결했지만,  보통 실무에서 api 를 호출할 때 어느 시점에서 불러오는지 궁금해서 질문드립니다. beforeUpdate  훅에서 불러오면서 문제를 해결할 방법도 있을까요?

안녕하세요, 라이프 사이클에서 소스 코드를 따라하던 중, 아무리 토글 버튼을 클릭해도 점이 추가가 안돼서 문의드립니다. 제가 어디서 잘못한 부분이 있는지 소스코드 첨부드립니다. ㅜㅜ 한번만 확인해주시면 감사하겠습니다. <script> import {onMount, onDestroy, beforeUpdate, afterUpdate} from 'svelte' let name='Something..' let h1 function moreDot(){ name +='.' } beforeUpdate(() =>{ console.log('beforeUpdate'); console.log(h1 && h1.innerText); }) afterUpdate(() =>{ console.log('afterUpdate'); console.log(h1.innerText); }) onMount(() =>{ console.log('onMount'); h1=document.querySelector('h1') }) onDestroy(()=>{ console.log('onDestroy') }) </script> <h1 on:click={moreDot}>{name}</h1>