HTML
-
[Web] HTML 문서 파싱 & DOM 트리 생성 과정 알아보기프론트엔드 2022. 2. 10. 17:51
문서(HTML, CSS)가 어떻게 파싱되고 어떻게 DOM Tree가 되는가? 문서 파싱과 DOM Tree 구축 컴파일 전 동작 소스코드가 컴파일 과정을 거치기 전에, 소스코드 내용을 파싱하여 컴파일이 가능한 단위로 만드는 과정이 있다. 파싱 문서 파싱 : 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것. 파싱 결과는 보통 문서 구조를 나타내는 노드 트리인데, 파싱 트리 또는 syntax 트리라고 부른다. 일반적인 파싱 과정은 어휘 분석과 구문 분석으로 나뉜다. 어휘 분석 : 의미없는 공백, 줄 바꿈을 제거하고 토큰(의미있는 문자) 단위로 분해하는 과정. 구문 분석 : 언어의 구문 규칙을 적용하는 과정. 어휘 분석기로부터 새 토큰을 받아서, 구문 규칙과 일치하는지 확인함. 파싱 작업은 파서에..
-
[React] React에서 input 이벤트 사용하기 (onChange, onInput, onBlur)프론트엔드 2022. 2. 10. 17:36
자바스크립트의 onChange, onInput 이벤트는 onChange : input에서 포커스가 벗어났을 때, input에 입력된 값이 변경되었다면 이벤트 발생 onInput : input에 입력된 값이 변경될 때마다 이벤트 발생 이렇게 이벤트 발생 조건에 차이가 있다. 그런데 React에서는 onChange, onInput이 동일하게, input 값이 변경될 때마다 (포커스 아웃이 없어도) 이벤트가 발생한다. 그래서 리액트에서는 onChange와 onInput이 사실상 동일한 이벤트로 취급되고, 이 중에서는 onChange가 더 자주 사용되는 것 같다. 그렇다면 React에서 자바스크립트의 onChange 이벤트처럼 input에서 포커스가 벗어났을 때 값의 변경이 있는 경우 이벤트를 감지하려면 어떻게..
-
네이버 회원가입 페이지 따라 만들기(클론코딩) - HTML/CSS프론트엔드 2019. 12. 16. 22:57
HTML, CSS, Javascript 연습용으로 네이버 회원가입 페이지를 따라 만들어봤습니다. 회원가입 페이지 레이아웃을 html과 css로 비슷하게 따라하고, Javascript로 사용자가 데이터를 입력했는지 확인하기 + 사용자가 입력한 데이터가 조건에 맞는지 확인하기(유효성 검사) -> (데이터가 입력되지 않았거나 조건에 맞지 않다면) 에러메세지 출력하기 이렇게 간단한 기능을 구현해봤습니다. 자바스크립트로 기능구현한 부분은 따로 글을 작성할 예정이고 이 글에서는 결과물과 html, css 소스코드를 간단한 설명과 함께 보여드리려고 합니다. 결과물부터 보여드릴게요 결과물 네이버 실제 회원가입 페이지 따라 만든 페이지 (휴대폰 인증, Footer 부분 등은 생략하고 만들었습니다. ) 하필이면 제가 이거..