실무에서 코드를 작성하는데 eslint가 type을 자꾸 명시하라한다.. 왜그럴까 궁금해서 찾아보았다. 1. 브라우저 기본 동작 방지 button 태그의 기본 타입은 "submit"으로 설정되어 있다. 따라서 버튼 클릭 시, 주의 폼의 제출 동작이 발생할 수 있다. 이런 동작을 방지하기 위해서 type="button"을 명시하여 버튼의 클릭 동작이 폼을 제출하지 않도록 방지할 수 있다. 2. 사용자 경험 개선 버튼의 목적이 폼 제출이 아닌 함수 호출 등 다른 동작을 수행하는 목적이라면, 명시적으로 type="button"을 주어서 사용자 경험을 향상시킨다. 버튼에 명시적인 동작이 없다면 사용자가 버튼을 눌러도 아무 일도 일어나지 않게된다.
브라우저 렌더링 엔진 동작과정은 크게 4~6단계로 이루어진다! 1. HTML,CSS 파싱 2. DOM Tree 구축, CSSOM Tree 구축 3. 렌더 트리 구축 4. 렌더 트리 배치(Layout 단계 ⇒ Paint 단계) 5. 렌더 트리를 Reflow해서 그리기 6. Repaint까지 1. 파싱이란? 파싱이란 '(문장을 문법적으로) 분석하다' 라는 뜻으로 하나의 프로그램을 런타임환경 (예를 들면, 브라우저 내 자바스크립트 엔진)이 실제로 행할 수 있게 분석하고 변환해주는 것을 의미한다! 파싱은 다운로드한 HTML을 해석하여 DOM 트리를 구성 HTML 또는 리소스에 CSS가 포함된 경우에는 CSSOM 트리 구성 작업도 함께 진행 DOM 트리 구성 DOM이란 Document Object Model 의 ..
니꼴라 쌤과 함께하는 바닐라 JS로 크롬 앱 만들기를 시작했다!! 이 과정을 통해 바닐라 JS와 좀 더 친해지는 기회가 되길 바라며!! Start!! https://nomadcoders.co/javascript-for-beginners 1.3 Sofeware Requirements 크로미움 기반의 브라우저 크로미움 기반의 브라우저는 광고를 막아주며 제일 최신의 브라우저를 사용하고 있는 것 여기서 니꼴라쌤이 말하는 크로미움 기반의 브라우저를 처음 들어서 추가로 구글링을 해보았다!! 크로미움이란? 크로미움이라는 오픈소스 프로젝트에서 만든 브라우저 이름이 크로미움이다. 구글에서 2008년 9월 시작한 프로젝트인 크로미움은 오픈소스 프로젝트 이기 때문에 구글 직원이 아닌 사람들도 참가할 수 있다. 프로젝트의 산..
flex는 레이아웃 모델! flex의 특징 기본이 inline-block이다! direction에 따라 justify 방향이 달라지다! (상대적이다) flex는 서로 다른 크기의 화면과 기기에서도 HTML 요소들이 자동으로 재정렬되어, 웹 페이지의 레이아웃을 언제나 똑같이 유지할 수 있다! Flexbox was introduced in 2009 as a new layout system, with the goal to help us build responsive web pages and organize our elements easily flex 사용법 flex는 부모와 자식이 있어야한다! flex는 부모를 위한 속성과 자식을 위한 속성들로 나눠져 있다! 부모(container)에게 주는 속성 1. dis..
