이벤트 객체에 관하여

빠른 답변 감사합니다! 아래에 말씀하신 3개 파일 내용을 복사해서 남깁니다. 감사합니다. -App.svelte 파일 script> export let name; script> main> h1>Hello {name}!h1> p>Visit the a href="https://svelte.dev/tutorial">Svelte tutoriala> to learn how to build Svelte apps.p> main> style> main { text-align: center; padding: 1em; max-width: 240px; margin: 0 auto; } h1 { color: #ff3e00; text-transform: uppercase; font-size: 4em; font-weight: 100; } @media (min-width: 640px) { main { max-width: none; } } style> -rollup.config.js 파일 import svelte from 'rollup-plugin-svelte'; import commonjs from '@rollup/plugin-commonjs'; import resolve from '@rollup/plugin-node-resolve'; import livereload from 'rollup-plugin-livereload'; import { terser } from 'rollup-plugin-terser'; import css from 'rollup-plugin-css-only'; const production = !process.env.ROLLUP_WATCH; function serve() { let server; function toExit() { if (server) server.kill(0); } return { writeBundle() { if (server) return; server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], { stdio: ['ignore', 'inherit', 'inherit'], shell: true }); process.on('SIGTERM', toExit); process.on('exit', toExit); } }; } export default { input: 'src/main.js', output: { sourcemap: true, format: 'iife', name: 'app', file: 'public/build/bundle.js' }, plugins: [ svelte({ compilerOptions: { // enable run-time checks when not in production dev: !production } }), // we'll extract any component CSS out into // a separate file - better for performance css({ output: 'bundle.css' }), // If you have external dependencies installed from // npm, you'll most likely need these plugins. In // some cases you'll need additional configuration - // consult the documentation for details: // https://github.com/rollup/plugins/tree/master/packages/commonjs resolve({ browser: true, dedupe: ['svelte'] }), commonjs(), // In dev mode, call `npm run start` once // the bundle has been generated !production && serve(), // Watch the `public` directory and refresh the // browser on changes when not in production !production && livereload('public'), // If we're building for production (npm run build // instead of npm run dev), minify production && terser() ], watch: { clearScreen: false } }; -package.json 파일 { "name": "svelte-app", "version": "1.0.0", "scripts": { "build": "rollup -c", "dev": "rollup -c -w", "start": "sirv public" }, "devDependencies": { "@rollup/plugin-commonjs": "^16.0.0", "@rollup/plugin-node-resolve": "^10.0.0", "rollup": "^2.3.4", "rollup-plugin-css-only": "^3.0.0", "rollup-plugin-livereload": "^2.0.0", "rollup-plugin-svelte": "^7.0.0", "rollup-plugin-terser": "^7.0.0", "svelte": "^3.0.0" }, "dependencies": { "sirv-cli": "^1.0.0" } }

이벤트 객체에 관하여

아하... 자세한 답변 정말 감사드립니다. 사실 코딩도 이제 시작했고 js와 함께 스벨트를 배우는 중이라,,, js개념이 명확히 자리잡지 못한것 같습니다. 해당부분 복습 진행하고 있습니다. 감사합니다 한가지만 더 질문드리고 싶습니다. 라이프사이클 부분 강의를 수강하며 잘 듣고 있었는데, 오늘 다시 강의를 들으며 VScode를 통해 코딩을 실행하려고 하니, 스벨트의 시작부분에서 계속 오류가 뜹니다. 오류가 발생하는 지점은 npm run dev 지점입니다. [ vs code 실행 - 새 터미널- cd로 desktop 접근 - npx degit sveltejs/template lifemodule - cd lifemodule - code . - (새 vs code 창이 열린 뒤) npm i - npm run dev - 아래와같은 오류 발생 오류의 화면은 아래와 같습니다. 오류의 뜻이 뭔말인지도 모르겠고,,, vs code를 재설치해보고 수차례 시도해보고, 구글링을 해봐도 잘 나오지 않아 이렇게 질문드립니다. 감사합니다! npm install의 터미널 결과와 npm run dev를 포함한 결과를 워드와 이미지 형식으로 아래에 남깁니다. Windows PowerShell Copyright (C) Microsoft Corporation. All rights reserved. 새로운 크로스 플랫폼 PowerShell 사용 https://aka.ms/pscore6 PS C:\Users\joj05\desktop\life-module> npm install npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules\rollup\node_modules\fsevents): win","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN svelte-app@1.0.0 No repository field. npm WARN svelte-app@1.0.0 No license field. added 96 packages from 131 contributors and audited 97 packages in 4.434s 5 packages are looking for funding run `npm fund` for details found 0 vulnerabilities PS C:\Users\joj05\desktop\life-module> npm run dev > svelte-app@1.0.0 dev C:\Users\joj05\desktop\life-module > rollup -c -w rollup v2.34.2 bundles src/main.js → public\build\bundle.js... [!] Error: Identifier directly after number (Note that you need plugins to import files that are not JavaScript) src\App.css (1:13) 1: main.svelte-1tky8bj{text-align:center;padding:1em;max-width:240px;margin:0 auto}h1.svelte-1tky8bj{color:#ff3e00;text-transform:uppercase;font-size:4em;font-weight:100}@media(min-width: 640px){main.svelte-1tky8bj{max-width:none}} ^ Error: Identifier directly after number (Note that you need plugins to import files that are not JavaScript) at error (C:\Users\joj05\Desktop\life-module\node_modules\rollup\dist\shared\rollup.js:5265:30) at Module.error (C:\Users\joj05\Desktop\life-module\node_modules\rollup\dist\shared\rollup.js:9835:16) at tryParse (C:\Users\joj05\Desktop\life-module\node_modules\rollup\dist\shared\rollup.js:9716:23) at Module.setSource (C:\Users\joj05\Desktop\life-module\node_modules\rollup\dist\shared\rollup.js:10142:19) at ModuleLoader.addModuleSource (C:\Users\joj05\Desktop\life-module\node_modules\rollup\dist\shared\rollup.js:18312:20) at ModuleLoader.fetchModule (C:\Users\joj05\Desktop\life-module\node_modules\rollup\dist\shared\rollup.js:18368:9) at async Promise.all (index 1) at ModuleLoader.fetchStaticDependencies (C:\Users\joj05\Desktop\life-module\node_modules\rollup\dist\shared\rollup.js:18393:34) at async Promise.all (index 0) at ModuleLoader.fetchModule (C:\Users\joj05\Desktop\life-module\node_modules\rollup\dist\shared\rollup.js:18370:9) [이미지파일] (사진)

Store강의 질문 (시작하기-5)

안녕하세요! 요즘 js를 복습하느라 svelte공부를 잠시 중단했어서 이제야 답변 확인하고 재질문 드립니다. 말씀주신대로 대소문자를 살펴보니, Parent.svelte파일 하단에 로 c를 소문자로 해놓아서 오류가 생겼었고 이를 대문자로 바꾸었더니 강의 화면처럼 정상적으로 표시되었습니다. import Child from './Child.svelte' Parent 이건 수정 후 Parent.svelte의 코드 내용입니다. 하지만 여전히 풀리지 않는 궁금증이 있습니다. 오류의 해결이 저 를 통해 해결되었는데, store의 개념상 컴포넌트간의 연결없이도 외부의 저장소인 store.svelte에서 데이터를 빼오는 것이라고 이해했습니다. 그런데 나 등은 store를 쓰지않고 컴포넌트간 '직접연결'할때 쓰는 것으로 알고 있는데, 왜 오류의 지점이 저것이었는지 궁금합니다. 즉, 이냐 이냐로 오류가 발생하였는데, store.svelte의 개념을 사용한 이상, 이러한 컴포넌트간 연결 태그가 무슨 소용이 있는가 하는 의문입니다. 만약 메일로 답변주셔야한다면 joj05280959@gmail.com 으로 주셔도 괜찮습니다! 바쁘신 와중에 자세한 답변 남겨주셔서 정말 감사드립니다.

Store강의 질문 (시작하기-5)

빠른 답변 감사드립니다. 여전히 이해가 되지 않는 부분이 있어 재질문 남깁니다 :) 1. 컴포넌트의 연결이 import를 통해 연결하는것을 말씀하시는 것이 맞는지 궁금합니다. 맞다면, 현재 제 파일에서 app.svetle에서는 Parent.svelte에 import로 연결되어있고, Parent.svelte에는 import로 Child.svelte가 연결되어 있기에 현재 지적해주신 '연결이 안되어있다'는 부분에 의문이 있습니다. (혹시 export가 안되어있는게 문제인가 싶습니다만, 아래 질문과 이부분은 함께 말씀드리겠습니다. 2. 제가 이해하기로는 store의 개념이 App.svelte=>Parent.svelte => Child.svelte로 연결할 필요없이, (즉, Parent.svelte 파일이 아예 없더라도) store라는 외부 공간을 따로 만들어서, 마치 창고에서 물건 가져오듯 쓰는 것으로 이해했습니다. 따라서 import로 Parent 컴포넌트와 Child 컴포넌트, App 컴포넌트가 상호간 연결되어있지 않은 점이 문제가 된다라는 피드백이 이해되질 않습니다ㅠㅠ 감사합니다.