개발자R의 삶

Svelte 프로젝트를 시작할 때에 기본적으로 템플릿을 받아 시작하면 편리하다. 기본적인 파일구조나 서버 등의 세팅이 되어있기 때문이다. node를 깔았다면 아래와같이 명령어를 차례로 입력하면 된다. npm install -g degit npx degit sveltejs/template 프로젝트이름 cd 프로젝트이름 npm install npm run dev 그럼 터미널에 아래와 같은 결과가 뜬다. 크롬에 localhost:5000 을 치고 들어가면 기본 화면이 뜬다! 이 화면이 시작화면! App.svelte에 구현되어있다. 이제 여러 컴포넌트들을 추가하여 svelte 프로젝트를 시작해봅시다!

꽤나 중요한 내용인데 또 막상 외워지지 않는 그것. 온클릭 이벤트를 어떤 요소에 걸었을 때, 그 html 요소를 가져오고 싶을 때가 있다. 자바스크립트에는 버블링과 캡쳐링이라는 개념이 있다. 버블링은 한 요소에 이벤트가 발생하면 핸들러가 동작하고 그 다음 부모 요소의 핸들러가 동작하고.. 더이상 부모가 없을 때까지 이벤트 핸들러가 동작하는 것이다. 사실 버블링은 너무 자연스럽기 때문에 딱히 느껴지지 않기도 하다. 지금 술 계산기를 만들고 있는데, 카드를 누르면 그 요소를 가져와서 class를 추가해주고 싶다. {title} {emoji} card 클래스를 가진 요소에 on:click 함수를 걸어주었다. 하지만 사실상 emoji 클래스를 클릭하거나, title을 클릭해도 card 클래스에 걸려있는 on:c..