본문 바로가기

Frontend

 (74)
브라우저는 어떻게 동작하는가 (part. 07) 본 내용은 NAVER D2의 '브라우저는 어떻게 동작하는가? (by Tali Garsiel)'의 내용을 복습하며 작성했습니다. https://d2.naver.com/helloworld/59361 트리 구축 알고리즘 파서가 생성되면 문서 객체가 생성된다. 트리 구축이 진행되는 동안 문서 최상단에는 DOM 트리가 수정되고 요소가 추가된다. 토큰화에 의해 발행된 각 노드는 트리 생성자에 의해 처리된다. 각 토큰을 위한 DOM 요소의 명세는 정의되어 있다. DOM 트리에 요소를 추가하는 것이 아니라면 열린 요소는 스택(임시 버퍼 저장소)에 추가된다. 이 스택은 부정확한 중첩과 종료되지 않은 태그를 교정한다. 알고리즘은 상태 기계라고 설명할 수 있고 상태는 '삽입 모드'라고 부른다. 입력 예제 트리 생성 과정 H..
브라우저는 어떻게 동작하는가 (part. 05) 본 내용은 NAVER D2의 '브라우저는 어떻게 동작하는가? (by Tali Garsiel)'의 내용을 복습하며 작성했습니다. https://d2.naver.com/helloworld/59361 HTML 파서 HTML 파서는 HTML 마크업을 파싱 트리로 변환한다. HTML 문법 정의 HTML의 어휘와 문법은 W3C에 의해 명세로 정의되어 있다. 현재 버전은 HTML4와 초안 상태로 진행 중인 HTML5 이다. (2012년) 문맥 자유 문법이 아님 파싱 일반 소개를 통해 알게 된 것처럼 문법은 BNF와 같은 형식을 이용하여 공식적으로 정의할 수 있다. 안타깝게도 모든 전통적인 파서는 HTML에 적용할 수 없다. 그럼에도 불구하여 지금까지 파싱을 설명한 것은 그냥 재미 때문은 아니다. 파싱은 CSS와 자바..
브라우저는 어떻게 동작하는가 (part. 04) 본 내용은 NAVER D2의 '브라우저는 어떻게 동작하는가? (by Tali Garsiel)'의 내용을 복습하며 작성했습니다. https://d2.naver.com/helloworld/59361 어휘와 구문에 대한 공식적인 정의 어휘는 보통 정규 표현식으로 표현한다. 예를 들면 언어는 다음과 같이 정의될 것이다. INTEGER : 0|[1-9][0-9]* PLUS : + MINUS : - 보시다시피 정수는 정규 표현식으로 정의한다. 구문은 보통 BNF 라고 부르는 형식에 따라 정의한다. 언어는 다음과 같이 정의될 것이다. expression := term operation term operation := PLUS | MINUS term := INTEGER | expression 문법이 문맥 자유 문법이라..
브라우저는 어떻게 동작하는가 (part. 03) 본 내용은 NAVER D2의 '브라우저는 어떻게 동작하는가? (by Tali Garsiel)'의 내용을 복습하며 작성했습니다. https://d2.naver.com/helloworld/59361 동작 과정 예 웹킷과 게코가 용어를 약간 다르게 사용하고 있지만 동작 과정은 기본적으로 동일하다는 것을 알 수 있다. 게코는 시각적으로 처리되는 렌더 트리를 '형상 트리(frame tree)'라고 부르고 각 요소를 형상(frame)이라고 하는데 웹킷은 '렌더 객체(render object)'로 구성되는 '렌더 트리(render tree)'라는 용어를 사용한다. 웹킷은 요소를 배치하는데 '배치(layout)'라는 용어를 사용하지만 게코는 '리플로(reflow)'라고 부른다. '어태치먼트(attachment)'는 웹..
브라우저는 어떻게 동작하는가 (part. 02) 본 내용은 NAVER D2의 '브라우저는 어떻게 동작하는가? (by Tali Garsiel)'의 내용을 복습하며 작성했습니다. https://d2.naver.com/helloworld/59361 브라우저의 기본 구조 브라우저의 주요 구성 요소 1. 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분 2. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어 3. 렌더링 엔진 - 요청한 콘텐츠를 표시 (HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함) 4. 통신 - HTTP 요청과 같은 네트워크 호출에 사용 (플랫폼 독립적인 인터페이스, 각 플랫폼 하부에서 실행) 5. UI 백엔드 - 콤보 박스와 창 ..
브라우저는 어떻게 동작하는가 (part. 01) 본 내용은 NAVER D2의 '브라우저는 어떻게 동작하는가? (by Tali Garsiel)'의 내용을 복습하며 작성했습니다. https://d2.naver.com/helloworld/59361 브라우저는 가장 대중적인 소프트웨어이다. 주소 창에 naver.com을 입력했을 때 어떤 과정을 거치는지 확인해보자. 브라우저의 주요 기능 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있다. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다. URl란? 클라이언트가 서버에서 자원을 요청할 때 자원의 위치는 일반적으로 URL을 사용해서 나타낸다. 하지만 검색엔진을..
Frontend: Feed (part. 05) - toggleLike on Post Component 보호되어 있는 글입니다.
JS jQuery (part. 36) - 애니메이션 정지 clearQueue( ) 메서드에는 애니메이션 정지 기능이 없다 애니메이션을 정지시키려면 stop( ) 메서드를 사용해야한다 애니메이션 정지 메서드 stop( ) : 효과 및 애니메이션을 정지한다 $(selector).stop( ); $(selector).stop(clearQueue); $(selector).stop(clearQueue, goToEnd); 매개변수 clearQueue와 goToEnd는 불 자료형을 입력하며 입력하지 않으면 false를 입력한 것으로 간주한다 첫 번째 매개변수 clearQueue를 true로 설정하면 clearQueue( ) 메서드를 실행하는 것과 같은 효과를 낸다 두 번쨰 매개변수 goToEnd를 true로 설정하면 제자리에서 멈추는 것이 아니라 지정한 최종 형태에서 멈춘..
JS jQuery (part. 35) - 애니메이션 큐 jQuery의 효과 메서드는 계속 큐(먼저 들어간 것이 먼저 나오는 공간)에 누적된다 $(function () { $('div').click(function () { $(this).animate({ left: '+=60' }, 2000).animate({ width: '+=60' }, 2000).animate({ height: '+=60' }, 2000) }) }); animate( ) 메서드를 체이닝으로 연결했다 실행하면 동시에 애니메이션이 실행되는 것이 아니라 차례대로 실행된다 애니메이션 큐에 animate( ) 메서드의 내용이 차례대로 들어가고 나오면서 순서대로 동작한다 애니메이션 큐 관리 메서드 clearQueue( ) : 큐의 내용을 제거한다 $(function () { $('div').anim..
JS jQuery (part. 34) - 상대적 애니메이션 animate( ) 메서드 사용으로 현재 상태에서 상대적으로 애니메이션을 적용할 수 있다 $(function () { $('div').click(function () { var width = $(this).css('width'); var height = $(this).css('height'); }) }); css( ) 메서드로 이벤트 발생 객체의 width 속성과 height 속성을 추출한다 하지만 현재 변수 width와 height는 숫자가 아니라 '50px' 형태의 문자열이다 상대적으로 크기를 추가하려면 숫자로 바꾼 뒤에 더해야 한다 parseInt( ) 함수를 사용하면 문자열 '50px'을 숫자 50으로 바꿀 수 있다. $(function () { $('div').click(function () {..
JS jQuery (part. 33) - 사용자 정의 효과 개발자가 원하는 방향으로 효과를 만들고 싶을 때 사용하는 메서드 animate( ) : 사용자 지정 효과를 생성한다 $(selector).animate(object); $(selector).animate(object, speed); $(selector).animate(object, speed, easing); $(selector).animate(object, speed, easing, callback); animate( ) 메서드의 첫 번째 매개변수인 객체에 입력할 수 있는 속성 opacity height top width left margin right padding bottom $(function () { $('div').hover(function () { $(this).animate({ left: ..
JS jQuery (part. 32) - 기본 시각 효과 jQuery는 기본적으로 세 가지의 효과를 9개의 메서드로 제공한다 기본 시각 효과 메서드 show( ) : 문서 객체를 크게 확대하며 보여준다 hide( ) : 문서 객체를 작게 축소하며 사라지게 한다 toggle( ) : show( ) 메서드와 hide( ) 메서드를 번갈아 실행한다 slideDown( ) : 문서 객체를 슬라이드 효과와 함께 보여준다 slideUp( ) : 문서 객체를 슬라이드 효과와 함께 사라지게 한다 slideToggle( ) : slideDown( ) 메서드와 slideUp( ) 메서드를 번갈아 실행한다 fadeIn( ) : 문서 객체를 선명하게 보여준다 fadeOut( ) : 문서 객체를 흐리게 사라지게 한다 fadeToggle( ) : fadeIn( ) 메서드와 fadeOu..
JS jQuery (part. 31) - 입력 양식 이벤트 입력 양식 이벤트 종류 change : 입력 양식의 내용을 변경할 때 발생 focus : 입력 양식에 초점을 맞추면 발생 focusin : 입력 양식에 초점이 맞추어지기 바로 전에 발생 focusout : 입력 양식에 초점이 사라지기 바로 전에 발생 blur : 입력 양식에 초점이 사라지면 발생 select : 입력 양식을 선택할 때 발생 (input[type="text"] 태그 및 textarea 태그 제외) submit : submit 버튼을 누르면 발생 reset : reset 버튼을 누르면 발생 submit 이벤트 이름 : 비밀번호 : submit 이벤트는 form 태그에서 발생하는 이벤트이다 따라서 form 객체에 submit( ) 메서드를 연결한다 입력 양식의 유효성 검사를 할 때는 기본 이벤..
JS jQuery (part. 30) - 윈도우 이벤트 윈도우 이벤트는 윈도우 객체만 사용할 수 있는 이벤트가 아니라 window 객체와 document 객체 이외의 img 태그 등이 사용할 수 있는 이벤트이다 윈도우 이벤트 종류 ready : 문서 객체가 준비 완료되면 발생 load : 문서 객체를 불러들일 때 사용 unload : 문서 객체를 닫을 때 발생 resize : 문서 객체의 크기를 변화 시킬 때 발생 scroll : 문서 객체를 스크롤할 때 발생 error : 에러가 있을 때 발생 페이스북의 무한 스크롤 구현 스크롤이 문서 끝까지 내려가면 자동으로 문서가 연장된다 $(function () { $(window).scroll(function () { }); }); window 객체에 scroll 이벤트를 연결한다 window 객체는 별도의 선택자가..
JS jQuery (part. 29) - 키보드 이벤트 키보드 이벤트 종류 keydown : 키보드를 누를 때 발생 keypress : 글자가 입력될 때 발생 keyup : 키보드를 뗄 때 발생 글자 수 세기 프로그램 글자 수 세알리기 150 textarea에 keyup 이벤트 연결 keyup 이벤트가 발생하면 글자의 갯수를 받아 출력 $(function (event) { $('textarea').keyup(function () { var inputLength = $(this).val().length; var remain = 150 - inputLength; $('h1').html(remain) if (remain >= 0) { $('h1').css('color', 'black'); } else { $('h1').css('color', 'red'); } })..

티스토리툴바