Frontend/기타15 [FE] DOCTYPE Document Type의 약자로, HTML이 어떤 버전으로 작성되었는지 미리 선언하여 웹브라우저가 내용을 올바로 표시할 수 있도록 해주는 것 이다. 으로 선언하는데 이걸 해주지 않으면 호환 모드(quirks mode) 로 동작한다. 호환 모드의 경우 각 브라우저마다 문서를 나타내는 방식이 다르기 때문에 크로스 브라우징 이슈가 훨씬 심해지게 된다. DTD(Document Type Definition) DTD(Document Type Definition)란 문서 형식을 정의해놓은 것으로 DOCTYPE을 명시할 때 사용한다. 즉, HTML 문서가 어떤 문서 형식을 따르는지 DOCTYPE에서 DTD를 지정하는 것이다. 예시로 아래와 같은 것들이 있고 W3C Recommended list of Doctype d.. 2023. 3. 4. [FE] CSS 애니메이션 vs JS 애니메이션 웹사이트에 애니메이션 효과를 부여할 때 CSS의 transition / animation 속성을 사용할 수 있고 JS의 setInterval() / requestAnimationFrame() 을 사용할 수 있다. CSS 애니메이션 일반적으로, 마우스를 올렸을 때 혹은 메뉴 버튼의 전환과 같은 간단하게 처리하는 애니메이션의 경우 CSS로 처리한다. 예를 들어, 200 크기의 정사각형을 왼쪽 위에서 오른쪽 아래로 350px 움직이게 하는 애니메이션을 구현한다고 하면, transform 의 translate 를 사용해서 구현할 수 있다. 하지만 이를 JS로 구현하기 위해선 setInterval 을 통해서 계속해서 style.top 과 style.left 속성을 변화시켜줘야 한다. 이렇게 되면 이 속성은 브라우.. 2023. 3. 3. [FE] CI와 CD CI (Continuous Integration, 지속적 통합) CI는 빌드와 테스트를 자동화해서 공유 저장소에 병합시키는 프로세스를 뜻한다. git과 같은 버전관리 시스템을 사용할 때 여러명의 개발자가 하나의 공유 저장소를 사용하는 경우가 많다. 이렇게 되면 새로운 코드의 변경 사항이 저장소에 통합되지 않을 경우 서로 충돌할 수 있다. 따라서 빌드/테스트 자동화부터 코드의 일관성(Consistency)을 제공하기 때문에 지속적으로 통합한다는 용어를 사용하는 것이다. CD (Continuous Delivery/Deploy, 지속적 전달/배포) CD는 CI의 빌드/테스트를 통해서 정상적으로 수행됨을 확인하면 이는 배포를 수동으로 하느냐 자동으로 하느냐에 따라 2가지로 나뉜다. 지속적 전달 : 프로덕션 배포.. 2023. 3. 2. [FE] BOM과 DOM BOM (Browser Object Model) 브라우저의 창이나 프레임을 프로그래밍적으로 제어할 수 있게 해주는 객체모델 이다. 이를 통해서 브라우저의 새 창을 열거나 다른 문서로 이동하는 등의 기능을 실행시킬 수 있다. 전역객체로 window 가 있으며 하위 객체들로 location , navigator , document , screen , history 가 포함되어 있다. DOM (Document Object Model) 웹페이지를 프로그래밍적으로 제어할 수 있게 해주는 객체모델 이다. 최상위 인터페이스로 Node가 있으며 이는 아래와 같은 구조로 나타난다. (이미지 출처) 위의 트리구조를 보면 엘리먼트 뿐만 아니라 텍스트와 주석도 있는 것을 알 수 있는데, 이런 것들까지도 DOM 트리에 포함된다.. 2023. 2. 28. [FE] 자바스크립트 엔진이 코드를 실행하는 과정 소스코드를 만나면 파싱하여 AST(Abstract Syntax Tree) 로 변환한다. 인터프리터(Interpreter) 는 AST를 기반으로 바이트코드(Bytecode)를 생성 한다. 인터프리터가 바이트코드를 실행할 때, 자주 사용되는 함수 및 타입 정보 등이 있는 프로파일링 데이터(Profiling data) 와 같이 최적화 컴파일러(Optimizing compiler) 에게 보낸다. 최적화 컴파일러는 프로파일링 데이터를 기반으로 최적화된 코드(Optimized code)를 생성 한다. 하지만, 프로파일링 데이터 중에 잘못된 부분이 있다면 최적화 해제(Deoptimize) 를 하고 다시 바이트코드를 실행해서 이전 동작을 반복한다. 2023. 2. 27. [FE] 브라우저 렌더링 원리 브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(Webkit)이나 게코(Gecko) 등과 같은 렌더링 엔진 을 사용한다. 렌더링 엔진이 HTML, CSS, Javascript로 렌더링할 때 CRP(Critical Rendering Path) 라는 프로세스를 사용하며 다음 단계들로 이루어진다. HTML 파싱 후, DOM(Document Object Model) 트리 구축 CSS 파싱 후, CSSOM(CSS Object Model) 트리 구축 Javascript 실행 주의! HTML 중간에 스크립트가 있다면 HTML 파싱이 중단된다. DOM과 CSSOM을 조합하여 렌더트리(Render Tree) 구축 주의! display: none 속성과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 것은 렌더트.. 2023. 2. 26. 이전 1 2 3 다음
