🫧 이벤트 흐름표준에서 정의한 DOM 이벤트의 흐름에는 3단계가 존재합니다.캡처링(capturing): 이벤트가 하위 요소로 전파되는 단계타깃(target): 이벤트가 실제로 의도한 타깃 요소에 전달되는 단계버블링(bubbling): 이벤트가 상위 요소로 전파되는 단계예를 들어, 아래와 같은 코드가 있고 테이블의 세 번째 요소에 클릭 이벤트를 할당한 경우 apple banana cherry durian 세 번째 'cherry'..
전체 글
🌳 예시 html 코드아래는 이 글에서 사용될 전체 html 코드입니다. Cat-1 Ragdoll British Shorthair Scottish Fold Bengal Cat-2 Sphynx Munchkin Persian 🌳 태그 선택 메서드1) getElementById('id_명칭')document.getElementById('id_명칭')html의 id 속성을 이용하여 해당 id를 가진 태그를 반환선택된 태그 안에 다른 태그가 있다면 함께 선택됨id라고 명시했기 때문에 '#'을 작성할 필요 없음코..
🐝 브랜치 전략여러 개발자가 하나의 저장소를 사용하는 환경에서 해당 저장소를 효과적으로 활용하기 위한 work-flow(작업 흐름)- 참조 블로그 아래는 깃 플로우를 검색하면 나오는 가장 대표적인 이미지입니다.깃 플로우에는 5가지의 브랜치 종류가 존재하며 개발의 목적에 따라 사용하게 됩니다.main(master): 실제로 제품이 출시되는 주 브랜치develop: 다음에 출시할 버전을 개발하는 주 브랜치feature: 추가적인 기능을 개발하는 보조 브랜치, develop 브랜치에 포함됨release: 이번에 출시할 버전을 준비하는 보조 브랜치, develop 브랜치에서 개발한 내용을 해당 브랜치로 옮겨와 QA 및 테스트를 진행함hotfix: 출시된 버전(main 브랜치)에서 발생한 버그를 수정하는 보조 ..
🐝 스코프(Scope)스코프란 어떤 변수에 접근할 수 있는 범위를 의미합니다.스코프의 종류는 아래와 같습니다.전역(global) 스코프: 어디서나 해당 변수에 접근 가능지역(local) 스코프: 한정적인 범위 내에서만 해당 변수에 접근 가능블록 스코프함수 스코프 🐝 블록 스코프블록 스코프란 중괄호로 둘러싸인 { 블록 } 내부에서 선언된 변수는 해당 블록 안에서만 호출 가능한 것을 의미합니다.ES6 이후에 등장한 let과 const를 이용하여 선언한 변수가 블록 스코프의 개념을 따릅니다. 예를 들어, 아래와 같은 코드가 있을 때{ let test = 'block scope'; console.log(test); // 블록 내부에서 접근👍}console.log(test); // !블록 외부에서 접근👎블..
👾 Merge Commit(3-way merge)두 브랜치의 변경 사항(history)을 모두 유지하며 메인 브랜치에 다른 브랜치를 병합(merge)합니다.이 경우 각 브랜치의 변경 사항들이 과거의 커밋으로 보존되며,병합 시 메인 브랜치에 새로운 'merge commit'이 추가되며 병합이 완료됩니다.feature 브랜치의 가장 최근 커밋이 메인 브랜치로 병합되는 것을 볼 수 있습니다. 아래의 그림과 같이 3개의 커밋을 고려하여 병합이 이루어지기 때문에 3-way라는 이름이 붙여졌습니다.1번은 두 브랜치의 공통 조상이 되는 커밋,2번은 분기된 브랜치가 가리키고 있는 커밋,3번은 다른 브랜치가 가리키고 있는 커밋입니다. 장점프로젝트의 진행 상황을 명확히 추적할 수 있음브랜치 별 변경 사항이 유지되므로 커..
🌱 속성 선언 순서CSS 문서의 가독성과 팀원들과의 협업을 위해 개인 또는 팀만의 규칙을 지키며 속성과 클래스명을 선언하는 것은 중요한 습관입니다.속성을 선언할 때 반드시 지켜야 하는 순서는 없지만, 일반적인 순서는 존재합니다. 세세한 순서를 지키기보다 전체적인 틀을 생각하며 작성한다면가독성 있는 문서를 작성할 수 있으며, 유지보수 시에 필요한 속성을 금방 찾아낼 수 있습니다. 개략적인 선언 순서는 다음과 같습니다.시각적/레이아웃박스 모델배경폰트 및 텍스트사용자 인터페이스그밖의 속성들 세부적인 선언 순서는 다음과 같습니다.시각적/레이아웃overflowvisibilitydisplaypositiontop/right/bottom/leftfloatclear박스 모델widthheightmarginpadding..