[React] React(TS) + Vite + npm(pnpm) 모노레포 프로젝트 구성하기
멋쟁이사자처럼 2주차 과제로 React + Vite 프로젝트 템플릿을 구성하는 과정과 유의점을 정리 1. Git Git 초기화프로젝트 버전 관리를 위한 Git 초기화git init # -b mainGit 관리 제외➕ .gitignoreGit 관리 제외 파일 - 제외 항목을 추가한다. 라인 엔딩 설정라인 엔딩(line ending): 텍스트 파일 줄의 끝을 나타내는 문자나 문자 조합 UNIX 계열에서는 \\n을 사용하지만, MS-DOS와 Windows에서는 \\r\\n을 사용Windows에서 작성한 파일을 macOS에서 열면 줄 바꿈 표시가 잘못될 수 있어, 모든 텍스트 파일의 줄 바꿈 문자를 자동 변환하도록 설정한다. ➕ .gitattributestext eol=lf 2. 에디터 구성 및 기본 메타 데..
[Javascript] 브라우저 이벤트 : 이벤트 위임(Event Delegation)
이벤트 위임이벤트가 발생한 요소가 아니라, 부모 요소에서 이벤트를 처리하는 기법. 이벤트가 발생한 요소에 이벤트 핸들러를 설정하는 대신, 해당 이벤트가 버블링(Bubbling)되어 부모 요소에게 전달 될 때 부모 요소에서 이를 처리한다. 즉 이벤트가 부모 요소에 위임(delegation)된다.이벤트 위임의 각기 다른 2가지 사례를 통해 이벤트 위임을 알아보자. 이벤트 위임 사례 1ul 안의 특정 li박스를 클릭 했을 때 강조 적용하기 HTML 박스 박스 박스 박스 JSul.onclick = function (e) { let li = e.target.closest("li");//(1) if (!li) return; if (!ul.contains(li)..
[Javascript] 브라우저 이벤트 : 버블링(Bubbling)과 캡처링(Capturing)
Dom 이벤트의 흐름1. 캡처링이벤트가 하위 요소로 전파되는 단계2. 타깃 단계이벤트가 실제 타깃 요소에 전달되는 단계3. 버블링이벤트가 상위 요소로 전파되는 단계출처: JavaScript Event Flow: Bubbling, Capturing, and Delegation Decoded!를 클릭하면 이벤트가 최상위 조상에서 시작해 아래로 전파되고(캡처링 단계), 이벤트가 타깃 요소에 도착해 실행된 후(타깃 단계), 다시 위로 전파된다.(버블링 단계).Dom 이벤트 흐름의 특징캡처링 단계를 사용하는 경우는 거의 없다. 이벤트 타겟 순서는 기본적으로 버블링이다. 이전에는 이벤트 타겟 순서가 브라우저별로 달랐지만, W3C에서 표준 이벤트 실행 순서를 지정했다.타깃이 되는 가장 하위 요소부터 이벤트를 상위로..