53,900원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Svelte.js [Core API] 완벽 가이드
tick 과 변수 재할당
안녕하세요 강사님, 예를들어 배열에 새로운 값을 넣고 화면을 다시 그리고 싶을때 해당 변수에 새로운 배열값을 넣어주면 되는데 이경우 await tick 을 썻을때와 차이가 있을까요 ? 강의와 관련있는 질문을 남겨주세요.• 강의와 관련이 없는 질문은 지식공유자가 답변하지 않을 수 있습니다. (사적 상담, 컨설팅, 과제 풀이 등)• 질문을 남기기 전, 비슷한 내용을 질문한 수강생이 있는지 먼저 검색을 해주세요. (중복 질문을 자제해주세요.)• 서비스 운영 관련 질문은 인프런 우측 하단 ‘문의하기’를 이용해주세요. (영상 재생 문제, 사이트 버그, 강의 환불 등) 질문 전달에도 요령이 필요합니다.• 지식공유자가 질문을 좀 더 쉽게 확인할 수 있게 도와주세요.• 강의실 페이지(/lecture) 에서 '질문하기'를 이용해주시면 질문과 연관된 수업 영상 제목이 함께 등록됩니다.• 강의 대시보드에서 질문을 남길 경우, 관련 섹션 및 수업 제목을 기재해주세요. • 수업 특정 구간에 대한 질문은 꼭 영상 타임코드를 남겨주세요! 구체적인 질문일수록 명확한 답을 받을 수 있어요.• 질문 제목은 핵심 키워드를 포함해 간결하게 적어주세요.• 질문 내용은 자세하게 적어주시되, 지식공유자가 답변할 수 있도록 구체적으로 남겨주세요.• 정확한 질문 내용과 함께 코드를 적어주시거나, 캡쳐 이미지를 첨부하면 더욱 좋습니다. 기본적인 예의를 지켜주세요.• 정중한 의견 및 문의 제시, 감사 인사 등의 커뮤니케이션은 더 나은 강의를 위한 기틀이 됩니다. • 질문이 있을 때에는 강의를 만든 지식공유자에 대한 기본적인 예의를 꼭 지켜주세요. • 반말, 욕설, 과격한 표현 등 지식공유자를 불쾌하게 할 수 있는 내용은 스팸 처리 등 제재를 가할 수 있습니다.
- 미해결Svelte.js [Core API] 완벽 가이드
Uncaught ReferenceError: require$$0$1 is not defined
강의대로 진행하는 중인데 에러가 발생합니다.. 일단 uuid 로 대신 바꿔서 진행하고있는데, 해당 에러는 어떻게 해결할 수 있을까요? Uncaught ReferenceError: require$$0$1 is not defined
- 미해결Svelte.js [Core API] 완벽 가이드
vs code 애서 코드 단축시킨 결과 문의
PS. 처음 질문이 두서가 없어서 다시 정리했습니다. 다른분들도 볼수 있을것 같아서.
- 미해결Svelte.js [Core API] 완벽 가이드
tick 문구를 제거해도 적용된것처럼 나옵니다.
<script>function handler() { name = 'heropy'; const h1 = document.querySelector('h1'); console.log(h1);}</script><h1 on:click={handler}>{name}</h1>===> world 출력 --------------------------------------------------------<script>import { tick } from 'svelte';function handler() { name = 'heropy'; tick(); const h1 = document.querySelector('h1'); console.log(h1);}</script><h1 on:click={handler}>{name}</h1>===> <h1>heropy</h1>출력----------------------------------------------------<script>function handler() { name = 'heropy'; const h1 = document.querySelector('h1'); console.log(h1);}</script><h1 on:click={handler}>{name}</h1>===> <h1>heropy</h1>출력3번째 실행해서 서버 실행을 멈추고 npm run dev를 해도브라우저 캐시를 지워도 다른 브라우저로 들어가도 다시 world 가 안 나올까요 ?tick 문구를 지우면 원래대도 나와야 정상일것 같은데...왜 적용이 안 사라지는지 모르겠습니다.
- 미해결Svelte.js [Core API] 완벽 가이드
요소방식은 돔을 직접건드리는것인가요?
궁금합니다 !!
- 해결됨Svelte.js [Core API] 완벽 가이드
Snowpack 에서 지원하는 Rollup 플러그인은 왜 쓸까요?
안녕하세요강사님! 새해 복 많이 받으세요^^ Snowpack 이관하다 SCSS 적용안되는것을스노우팩 예제 깃헙 소스 참고해서 Sortable SCSS 적용안되던거 잘되게 만드느라 이것저것 플러그인 공부도 하게 되었는데요, 스노우팩 공식사이트에서 그랬는지 잘은 기억이 안나는데,Snowpack 만 있어도 충분히 생산성이 좋아지는데,Rollup 플러그인을 지원하는 공식홈에 적힌 설명이, Snowpack + Rollup 은 최상의 생산성을 제공합니다 대충 이런 것이었습니다. 그래서, 저는 이게 단순히 이전의 Rollup 프로젝트를 Snowpack 으로 점진적인 적용을 위한 플러그인 인줄로만 짐작했는데, `생산성`을 높여주다니요? 어떤식으로 생산성이 좋아진다는 것인지, 의문이 드는데요,저는 막 이렇게 생각했거든요,`컴파일러가 2개에 번들링까지 한다는것 같은데 어느부분에서 생산성이 좋아지는걸까??????` 라구요 ㅎㅎ 이런 부분에 대해서 강사님의 견해가 궁금합니다. 읽어주셔서 감사합니다.
- 해결됨Svelte.js [Core API] 완벽 가이드
모던 CSS 스타일링 `flex`속성 적용범위에 관한 질문입니다
제가 모던 CSS 속성들은 적용시점이 애매한지라 질문하게 되었습니다^^; 과거 `flex & grid` 등장이후, 수많은 호환성 문제로 업계에서 바로 쓰이진 않고, 지금에서야 많이 쓰이는걸로 알고 있습니다. 그래서 드는 궁금점이 전부터 있었는데요,바로 `flex` 도배에 관한 의문점이예요..`flex`속성 접하고 드는 생각은"이걸로 몽땅 레이아웃 잡으면 되는거 아냐?" 라구요ㅎ 그러나, 강사님이 소개해주시는 레이아웃 기법에는`flex` 사용을 적절히 하시는것을 보고적당히 써야할 곳을 찾아야 되는것을 알았습니다 flex 적용범위를 판단하는 기준은 어떤것이 있을까요?예를 들어 컨테이너 레벨 요소는 일반 CSS 정렬 적용 자식 요소가 많은경우 `flex` 적용 등등.. 마침 CSS 강의를 해주셔서, 그리고, 패캠 프론트엔드 강의에서 못여쭤본 부분에 대한 질문인데 답변해 주실수 있으신가요? 실무서 기준을 어떻게 잡으시는지가 궁금합니다부담없으시도록 간단 요약 답변을 주셔도 좋을것 같습니다 읽어주셔서 감사합니다
- 해결됨Svelte.js [Core API] 완벽 가이드
setTimeout() VS tick() 처리로직 과 `범용성`에 관한 질문 입니다
아래 Wondam Jung 님 질문에서 정리 해 주신글 잘 보았습니다. 댓글로 질문을 남기려다 관련성이 떨어진다 싶어 새로 질문을 작성했는데요, 저는 `tick()` 적용하시리라 생각했는데 setTimeout 은 의외적으로 느껴졌습니다. 컴포넌트 외부에서는 tick() 처리를 하지 않으신 이유를 알수 있을까요?(tick() 처리가 효율적이지 않아서일까요?? 아니면 다른 문제가 있는건지...)그리고, setTimeout 처리 방식을 다른 라이브러리같은Vue 나 React 의 경우에도 사용이 가능하겠지요?(내부적으로 처리되게 하는 방식이 있겠지만요..) 읽어주셔서 감사합니다.
- 해결됨Svelte.js [Core API] 완벽 가이드
Snowpack + Svelte 탬플릿 설치법이 변경되어 새 방법을 요약 했습니다.
2021.02.03 기준Snowpack 기본 탬플릿 구성 > Snowpack 오피셜 깃헙 링크 < 설치방법 오피셜 깃헙에 가셔서 탬플릿명을 확인하고 아래 명령줄에 기입합니다 < 프로젝트구성 , npm 모듈설치까지 한방에 클리어 합니다 > npx create-snowpack-app 새폴더명 --template @snowpack/탬플릿명 [--use-yarn | --use-pnpm | --no-install] 설치된 프로젝트폴더 구성( TypeScript 예시 ): JS용은 `types 폴더`, `tsconfig.json`이 빠져있겠네요 Svelte TypeScript-template npx create-snowpack-app 프로젝트ROOT폴더명 --template @snowpack/app-template-svelte-typescript JavaScript-template npx create-snowpack-app 프로젝트ROOT폴더명 --template @snowpack/app-template-svelte React TypeScript-template npx create-snowpack-app 프로젝트ROOT폴더명 --template @snowpack/app-template-react-typescript JavaScript-template npx create-snowpack-app 프로젝트ROOT폴더명 --template @snowpack/app-template-react
- 미해결Svelte.js [Core API] 완벽 가이드
Rollup 과 npm 버전 관리 와 `npm audit fix` 에 관한 간결한 질문입니다.
안녕하세요 강사님^^최고의 강의 감사합니다 npm 모듈 버전명시를 해두신 것을 보고,충돌이 잦아서 `저렇게 명시를 해둬야 하는구나` 싶으면서도 드는 의문이 생겼습니다 `특정 모듈 설치 후에 생기는 충돌점은어떻게 관리하시나요?충돌이 없게끔, 한땀한땀 마이너 버전을 찾아야 되는건가요??`충돌없는 버전 찾는방법에 조막만한 Tip 이랄것이 있을까요? npm audit fix 가 취약점 해결 명령어 인걸로 아는데이것으로도 충돌이 해결되는 경우도 있나요? 버전명시해 두신것 보고 식은땀이 났습니다..ㅠㅠSvelte 의 생태계 기반이 잡혀나가는 현 시점에서는 어쩔수 없는 숙명이겠죠? 읽어주셔서 감사합니다!!
- 해결됨Svelte.js [Core API] 완벽 가이드
`title` props 중복 부분, `최상위 요소`개념 질문입니다
Vue 와 Svelte 의 Props 작명 관례을 자세하게 설명해 주셨어요. Svelte 와 관련되지 않은 부분이라 남기기 고민스러웠지만, 내부구조 비교 영역이라 생각이되어 질문을 남기게 되었습니다. Vue.js `title` 중복에 대한 설명부분에서 `컴포넌트 내 하위요소들은 최상위 요소에 연결되어 있습니다` 하고 말씀하신부분의 `최상위요소`라 함은`HTMLElement` 를 뜻하는 건가요?? 그래서 `title`Attr 이 중복 충돌이 생긴다로 이해했습니다. Svelte 스벨트 컴포넌트에서 말하는 `최상위 요소`는 DocumentFragment 인가요?(bundle.js 의 컴포넌트 생성부를 보니 사용하더라구요) 틀린개념에 후시딘과 반창고를 부탁드려도 될까요? 읽어주셔서 감사합니다.
- 미해결Svelte.js [Core API] 완벽 가이드
buffer is not defined나오면서 화면이 안 나와요
브라우저 터미널 rollup.config.js export default { ..., plugins: [ svelte({ compilerOptions: { dev: !production, }, css: (css) => { css.write("bundle.css"); }, preprocess: sveltePreprocess({ postcss: { plugins: [autoprefixer()] } }), }), css({ output: "bundle.css" }), replace({ values: { "crypto.randomBytes": 'require("randombytes");', }, }), resolve({ browser: true, dedupe: ["svelte"], }), commonjs(), globals(), builtins(), alias({ entries: [{ find: "~", replacement: path.resolve(__dirname, "src/") }], }), ..., ], ... }; 맞게 작성한 것 같은데 브라우저에 화면이 안 나오네요 어떻게 해야 될까요? stackoverflow에 buffer 관련 검색해봤는데, 답변이 안 달려있거나 주제와 관련없는 글이 대부분이서 남깁니다 현재 trello 예제 실습하는 "랜덤 고유 문자열 생성(crypto-random-string)과 rollup 구성" 보고 있습니다
- 해결됨Svelte.js [Core API] 완벽 가이드
Svelte 반응성 적용 오류 - TypeError: Cannot read property 'insertBefore' of null
세심한 터치가 느껴지는 강의에 감동스럽게 듣고있습니다.그러나 잘 나가다가 돌부리에 걸려 넘어진 격으로 애러를 만났습니다.{ #if $done } 반응성 적용이 안되어요..ㅠ 브라우저 콘솔 lifecycle.js import {onMount, onDestroy, beforeUpdate, afterUpdate} from 'svelte';import {writable} from 'svelte/store';export function lifecycle() { beforeUpdate(() => { console.log(`Before update!`); }); onMount(() => { console.log(`Mounted to App`); }); afterUpdate(() => { console.log(`After Update!`); }); onDestroy(() => { console.log(`Before destroy`); });}export function delayRender(millis = 3000) {// let status = {isDone: false}; let isRender = writable(false); onMount(() => { setTimeout(() => {// status.isDone = true; isRender.set(true);//> store set }, millis); }); return isRender;} App.svelte <script> import {lifecycle, delayRender} from './lifecycle'; let isRender = delayRender();//> 3초 딜레이 lifecycle();</script>{#if $isRender} <h1>Hello Lifecycle</h1>{/if} 특이하게 다를게 없는데어디서 부터 잘못된건지 감을 못잡겠습니다. 반응성 적용하려고, store 객체 done ( isRender ) 적용 시점에 저렇게 애러가 나면서 적용이 안되더라구요.. 어디를 살펴봐야 원인을 찾을 수 있을까요??
- 해결됨Svelte.js [Core API] 완벽 가이드
기본 동작 방지 기능은 왜 있는 건가요?
나머지 기능은 왜 있는지 대충 알겠는데 기본동작방지는 왜 있는지 잘 모르겠습니다. 동작하라고 만든 사이트일텐데..
- 미해결Svelte.js [Core API] 완벽 가이드
Todo 예제 소스 경로 다시 알려주세요.
Todo 예제 강의를 들었는데 마지막에 Todo 예제 전체 소스 경로를 알려주었는데 경로를 긇어올수 없네요 여기에 다시 적어주시면 감사하겠습니다.
- 해결됨Svelte.js [Core API] 완벽 가이드
프로젝트가 커짐에 따라 번들 크기
안녕하세요~ HEROPY님 질문이 있습니다. 흔히 Svelte는 경량화된 번들 사이즈를 장점이라고 홍보합니다. 어떤 글에 의하면 번들된 크기가 최근에 많이 쓰이는 React, Vue보다 10배 작다는 글도 있더라구요. 이런 작은 번들 사이즈와 가상돔을 사용하지 않아 Diffing을 하지 않는 장점으로 임베디드? 장비에 Svelte가 사용된다는 정보도 들었습니다. 그런데 제가 글을 문득 읽다보니 Svelte도 결국 엔터프라이즈급이나 플젝 규모가 커지면 번들사이즈가 앞서 소개한것처럼 다른 프레임워크, 라이브러리와 큰 차이가 없다는 글을 읽었습니다. HEROPY님은 실제 중규모이상 플젝을 Svelte로 해보시는 것으로 알고 있는데요. 번들 사이즈가 다른 라이브러리로 만든 것과 비교한다면 어떤거 같은가용? 좋은 하루 보내세용!
- 미해결Svelte.js [Core API] 완벽 가이드
이벤트 객체에 관하여
질문대상 강의 : 1-5강 Todo list 질문 내용 : 강의 10분~11분 사이에 보면, 아래와 같은 코드가 있습니다. <input bind:value={title} type="text" on:keydown={ (e)=>{e.key==='Enter' && createTodo() } 여기서 bold 표시한 부분이 이해되질 않습니다. if 문과 동일하게 동작한다는 점은 이해되지만, a.key 부분의 이벤트 객체가 이해되지 않습니다. 'abc.가나다' 라는 형식이 있을때, abc라는 객체의 속성 중 '가나다'라는 속성을 선택하는 형식인 것으로 알고 있습니다. 이벤트 객체라 할때, js에서 keydown 등과 같은 이벤트를 사용하려면 그 이벤트를 내포하고 있는 document 객체이거나 window객체인 것으로 알고 있는데 위에서 적힌 'e'라는 것은 임의의 인자입니다. 여기서 질문드리고 싶은점은, 1. 인자로 e를 받아오려면, 함수 내부에 변수가 지정되어있어야하는데 위 코드의 익명함수에서 변수는 무엇인지? 2. e를 인자로 받아와서 e가 객체가 되었다면 그것이 key라는 속성을 포함하고 있는 것인지? 이상입니다. 감사합니다.
- 미해결Svelte.js [Core API] 완벽 가이드
화면분기와 액션함수
안녕하세요, 강의 잘 듣고 있습니다. CreateList.svelte 에서 window 이벤트가 먼저 먹히는 부분이 이해가 안되서요. 예상은 isEditMode 가 false 인 부분이 렌더링이 먼저되고 클릭시 isEditMode 가 true 로 되면서 use:autoFocusout={offEditMode} 이 액션부분이 실행이 되고. 액션에 바인딩된 함수가 실행후 인수로 전달한 offEditMode 가 실행이될거라 생각했습니다. 하지만 강의를 듣고 이해한 바로는 화면의 분기와 상관없이 처음 렌더링시 isEditMode 가 false 임에도 불구하고 true 일때의 use:autoFocusout={offEditMode} 도 먼저 실행되는것 처럼 보입니다. 따라서 처음 렌더링시 isEditMode 가 false 임에도 불구하고 위 코드블럭에서 먼저 액션이 미리 실행되어 window.addEventListener('click', focusoutListener); 가 먹혀서 발생되는 에러라고 정리하면 될까요? 화면 분기에 상관없이 미리 액션 함수가 읽히는것에 대해 이해가 안가서 질문 드립니다 이거는 스벨트 액션에만 해당하는 문제인가요? 감사합니다.
- 미해결Svelte.js [Core API] 완벽 가이드
혹시 sapper 강의는 계획이 있으신가요?
sapper 강의는 없는거같아서 혹시 계획이 있으신가 문의 드립니다..!
- 미해결Svelte.js [Core API] 완벽 가이드
Store강의 질문 (시작하기-5)
시작하기-5 store 강의를 듣던중, 마지막 부분에서 다음과 같이 선생님의 코드와 똑같이 코딩했는데도 result 창에 name에 할당된 world라는 string이 보이지 않습니다. 코드 내용은 아래와 같습니다. -app.svelte 파일 <script> import {storeName} from './store.js' //store객체를 가지고 온다 import Parent from './Parent.svelte' let name = 'world'; $storeName = name //이렇게 storeName에 name(world)를 할당한다 이제 이 name을 스토어에 저장되었기때문에 name을 사용할 수 있다. // console.log(storeName) //console찍어보면 set, update,subscribe 3개의 메소드가 나온다. 내장 메소드. // console.log($storeName) // $기호를 써서 storeName의 데이터를 출력한다. 지금은 빈 문자열로 해놔서 콘솔창열어도 데이터가 안보임. //이걸 quto-subscribtion이라고한다. </script> <h1>Hello {name}!</h1> <Parent/> <!--원래는 app.-Parent.-child.으로 부모자식관계가 연속적으로 형성되어 name이라는 변수를 위 <Parent/>에 props개념으로 할당하여, app.svelte의 name변수를 child까지 내려서 사용할 수 있는데, 이렇게하면 이 관계가 복잡하고 많아졌을때 감당하기 힘드므로 store라고 외부에 빼놔서 그걸 사용한다. --> -store.js 파일 import { writable } from 'svelte/store' //svelte에 store라는 개념이 있는데 이걸 쓸수있게하여 import하겠다는 뜻. // writable뿐 아니라 읽기전용-readable, 계산된데이터를? 뽑아내는 get이 있다 export let storeName=writable('ㅇㅇ') //빈 값으로 초기값을 지정하여 나중에 입력하려함. 초기값을 다른 값으로 지정해도 됨. //즉, 초기값으로 ''을 지정해서 storeName변수에 넣고, 이걸 export해서 외부에서 사용할수 있게함. //이때 let=''을하지않고 굳이 함수로 지정하는건 writable함수가 나중에 수정가능하기 때문 -Child.svelte파일 <script> // import Child from './Child.svelte' import { storeName } from './store.js' //storeName이라는 객체를 가져올건데, 이파일 주변에 있는 store.js에서 가지고 온다는 것 </script> <div> child {$storeName} </div> <child/> 혹시 몰라 위와 같이 필기한 내용까지 그대로 넣은점 양해부탁드립니다! 아무리 보아도 입력하란대로 그대로 입력한것 같은데,,, result 창에 world가 나오지 않는 이유를 모르겠습니다 ㅠㅠ