써니스크립트 글쓰기

프로젝트에서 다른 곳에 있는 모듈을 불러올때상대경로를 사용해 불러오는것 보다 alias경로를 통해 불러오는 것이 가독성이 훨씬 좋다. // Beforeimport Button from '../../../components/Button';import { UserType } from '../../../../types/user';// Afterimport Button from '@/components/Button';import { UserType } from '@/types/user';이렇게 긴 상대경로를 짧은 별칭으로 대체하는 기능을 Path Alias라고 하는데이 기능을 사용하려면 프로젝트에서 별도로 설정을 해주어야 한다. 설정할때마다 그때그때 검색하며 세팅했더니 헷갈리는 부분도 있고 헤맸던 부분이 있어서..

오랜만에 바닐라 자바스크립트로 투두리스트를 만들던 중 완료여부를 표시하는 체크박스가 동작하지 않았다.클릭할때마다 이벤트가 1,3,7,15...번씩 중복 실행되는 현상이 생겨 콘솔창을 확인해보니투두항목을 업데이트 할 때마다 체크박스 요소에 이벤트리스너가 계속해서 추가되고 있었다. - 초기코드처음 렌더링할때 아래처럼 리스트를 순회하면서 직접 내부 동작 요소에도 직접 이벤트를 바인딩했다.이후 각 리스트에 변경이 있을때는 해당 li 요소를 찾아서 새롭게 바인딩 하고이벤트도 새로 추가하는 방식으로 만들었었다. const todoList = $('#todoList'); todoData.forEach(todo => { const li = createTodoItemElement(todo); // 각 li..

이벤트 버블링이벤트가 발생했을 때 가장 안쪽 타겟요소에서부터 시작해서 부모요소로 거슬러올라가며 전파되는 단계.브라우저의 기본 이벤트 전파 방식.타깃리스너 실행 이후 전파된다.버튼 ✅"click" 이후, ↑document> ↑ *addEventListener("click", ~) 가 부착되어있다면, (event.currentTarget) ↑ ↑ (event.target)활용- 이벤트 위임부모 요소에 리스너를 한번만 등록해두면 자식요소의 이벤트 클릭을 감지할 수 있다.-> 부모 요소 안에 이벤트를 감지해야하는 자식요소가 동적으로 여러개 생기는 경우 효과적 (ex. 태그 안의 들)function attachTodoListEvents() { const todoList = document...