Peep

Javascript DOM(Document Object Model)과 BOM(Browser Object Model)

일단 DOM(Document Object Model)과 BOM(Browser Object Model)을 알기 전에 Window 객체를 알아야합니다.

Window Object

모든 브라우저로부터 지원을 받으며 브라우저 전체를 담당하는 객체이자 최상위 객체입니다.

Window 객체에는 DOM, BOM 그리고 Javascript Core가 있습니다.

문서 객체 모델(DOM, Document Object Model)

객체 지향의 모델로서 구조화된 문서를 표현하는 방식입니다.

프로그래밍언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 동적으로 문서의 내용, 구조, 스타일을 변경할 수 있습니다. W3C가 표준화한 여러개의 API의 기반이 됩니다.

Document Tree

브라우저 객체(BOM, Browser Object Model)

Javascript가 브라우저와 소통하기 위해 만들어진 모델입니다. 
브라우저마다 세부사항은 다를 수 있습니다.
BOM은 공식 표준은 아니며 브라우저 대부분이 비슷한 메소드와 속성을 가지고 있기 떄문에 통칭하여 BOM이라고 합니다. window 속성을 통해 접근할 수 있으며 속성에 속한 객체들을 말합니다. 
window, navigator, document, location, history, screen

문서 객체 모델

https://ko.wikipedia.org/wiki/%EB%AC%B8%EC%84%9C_%EA%B0%9D%EC%B2%B4_%EB%AA%A8%EB%8D%B8

DOM 소개

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/%EC%86%8C%EA%B0%9C

BOM, DOM에 대한 설명

https://velog.io/@songsong2920/DOM

window, DOM, BOM 이란?

https://cbw1030.tistory.com/46

Object Model(DOM, BOM)

https://chrismare.tistory.com/m/entry/Object-ModelDOM-BOM?category=973304

"프론트엔드 전반" 포스팅을보고 공부하면서 요약해보자!

CSR(Client Side Rendering)과 SSR(Server Side Rendering)

SPA (Single Page Application)

• 하나의 HTML 파일을 기반

• 자바스크립트를 이용해 동적으로 화면의 컨텐츠를 바꾸는 방식

MPA (Multiple Page Application)

• 사용자가 페이지를 요청할 때마다 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식

• 전통적인 방식

  • SPA - CSR

  • MPA - SSR

CSR

SSR

브라우저의 렌더링 과정

원리

렌더링엔진이 HTML, CSS, Javasript 렌더링 시에 CRP(Critical Rendering PAth) 프로세스로 진행

과정

자바스크립트 엔진이 코드를 실행하는 과정

1. 소스 파싱 *AST(Abstract Syntax Tree)로 변환

2. 인터프리터(Interpreter)는 AST기반으로 바이트 코드(Bytecode)생성

3. 인터프리터가 바이트코드를 실행할때 자주사용되는 함수, 타입정보등의 프로파일링 데이터(Profiling Data)와 같이 최적화 컴파일러(Optimizing Compiler)에게 보낸다.

4. 최적화 컴파일러가 프로파일링데이터 기반으로 최적화된 코드를 생성한다.

   • 프로파일링데이터가 잘못되었다면 최적화해제 후 다시 바이트 코드를 실행해서 이전 동작을 반복한다.(3번)

AST란?

더보기

추상구문 트리(Abstract Syntax Tree), 구문 트리(Syntax Tree)라고 한다

프로그래밍 언어로 작성된 소스코드의 추상 구문 구조의 트리이다.

이 트리의 각 노드는 소스 코드에서 발생되는 구조를 나타낸다.

추상적이기 때문에 실제 구문에 나타나는 모든 세세한 정보를 나타내지 않는다.

인터프리터(Interpreter)란?

바이트코드(Bytecode)란?

프로파일링 데이터(Profiling Data)란?

최적화 컴파일러(Optimizing Compoiler)란?

BOM(Browser Object Model) 과 DOM(Document Object Model)

BOM

• 브라우저 창, 프레임을 프로그래밍적으로 제어할 수 있게해주는 객체 모델

DOM

• 웹 페이지를 프로그래밍적으로 제어할 수 있게 해주는 객체 모델

  • 텍스트나 주석도 포함

모듈 번들러와 트랜스파일러

모듈번들러

• 모듈단위로 파일을 엮어서 개발하는 방식

트랜스파일러

• 특정언어로 작성된 코드를 비슷한 다른 언어로 변환시키는 것

• ES6이상의 기능을 하위 브라우저가 지원하지 않기 때문에 ES5로 변환할때, 트랜스파일러가 이 작업을 수행한다.

  • React, Vue, Typescript 등도 마찬가지

• 보통 모듈번들러에 트랜스파일러를 추가 사용하는 방식을 사용한다.

CI와 CD

CI (Continuous Integration, 지속적 통합)

• 빌드와 테스트를 자동화해서 공유 저장소에 병합시키는 프로세스

CD (Continuous Delivery/Deploy, 지속적 전달/배포)

• CI 빌드, 테스트가 정상적으로 수행되었을때 빌드에 대한 프로세스를 뜻한다.

• CI/CD의 대표적인 서비스로 Jenkins, Travis CI, Circle CI 등이 있다.

  • 지속적 전달 : 수동으로 배포

  • 지속적 배포 : 자동으로 배포

CSS와 JS 애니메이션의 차이점

웹 페이지에 애니메이션 효과를 부여할 때

• CSS : transition / animation 

• JS : setInterval() / requestAnimationFrame()

CSS 애니메이션

• 간단한 애니메이션 처리시 사용된다.

  • 지속적으로 하나의 객체의 style 속성의 x, y 좌표값의 이동을 변경하는 예제를 진행할 때 JS 애니메이션을 사용한다면 setInterval을 통해 작업해야하며

• 브라우저의 렌더링 과정에서 reflow(layout)단계를 발생 시켜 부자연스러운 느낌을 받을 수 있다. 이때 CSS 애니메이션으로 구현하는 것이 더 좋다고 할 수 있다.

  • JS는 메인쓰레드에서 작업하지만 CSS는 별도의 컴포지터 쓰레드에서 그려지기 때문에 효율적이다.

메인 스레드(Main Thread)

컴포지터 스레드(Compositor Thread)

JS 애니메이션

CSS로 처리하기 복잡하고 무거운 작업에 효율적이고 세밀한 작업 시 사용된다.

바닐라 JS로 구현 시 비효율적인 부분이 존재하며 60fps를 보장할 수 없다. (사용자가 느끼는 자연스러운 프레임?)

이 때문에 RAF(RequestAnimationFrame) API가 등장했다.

구현방식은 동일하며 60fps를 보장할 수 있다.

이 외에도 외부 라이브러리나 Web Animations API(지원브라우저가 적다)를 통해 성능좋은 애니메이션을 구현할 수 있다.

* 하드웨어 가속이 모바일에서 성능저하를 발생할 수 있는데, GPU를 통한 하드웨어 가속을 제어할 수 있다. 이는 CSS 특정 속성으로 인한 가속을 막아준다.

추가 공부 Keyword

렌더링 : CSR, SSR,  SPA, MAP, Parser

BOM, DOM

requestAnimationFrame

Web Animation API

프론트엔드 전반취준생이 반드시 알아야 할 프론트엔드 지식들-프론트엔드 전반

https://github.com/baeharam/Must-Know-About-Frontend

플래닝 포커(Planning Poker)

의미

"

다른 말로 스크럼 포커(Scrum Poker) 라고도 불린다.

추정을 위한 합의 기반 기술(consensus-based technique)로써 대부분 소프트웨어 개발에 있어서 개발 목표를 위한 공수 산정이나 상대적 규모산정에 사용된다.
플래닝 포커에서 그 그룹의 구성원들은 공수 산정 시에 입으로 크게 말하는 대신에 숫자로된 카드를 테이블에 엎어놓는 방식으로 놀이처럼 진행한다. 그 카드들을 확인 하면서 해당 공수들이 논의된다. 

숫자를 숨기는 이런 방식은 구성원들의 편향적인 고정관념을 피할수 있게 해준다. 누군가 처음 숫자를 크게 말하면서 다음 사람들의 공수 산정에 영향을 미칠 수 있는것 처럼 말이다.

"

- 위키 백과

즉 일정을 세우기 위한 전략이다.

사용이유?

른 참가자의 영향을 배제하기 위하여 사용한다.
다른 참가자가 숫자를 먼저 말하게될 경우 제안처럼 들릴 가능성이 있어 다른 참가자들에게 영향을 미칠 수 있다.

장치

1. 여러벌의 숫자카드
   • 일반적으로 피보나치 숫자가 쓰여있는 카드가 놓이며 큰 아이템의 공수 산정 시 내제된 불확실성을 반영하기 위함
   • 조직마다 추가로 들어가는 아이템(컵 : 쉬고싶다를 의미할 수도 있다.)들이 있으며 포커카드를 사용하기도 한다. 이때, 킹(king)은 큰 아이템 공수에 대해 공수산정이 힘들경우 혹은 다음에 논의하자는 의미가될 수 있다. 
   • 너무 큰 아이템일 경우 공수산정을 위해 쪼개서 진행하기도 한다.
   • 비대면일 경우 앱이나 다른 것을 사용하기도 한다. (ex: Scrum Time, Scrum Poker Cards (Agile))
2. 기능 리스트
3. 타이머
   • 시간 내에 논의할 수 있도록

절차

• 중계자: 진행을 담당할 사람

• 제품관리자: 요구 사항을 정의하는 사람

• 참가자: 실제 개발을 진행할 사람 

1. 중계자가 공수를 산정하지 않고 미팅에 참석한다.

2. 제품관리가자 개요설명을 한다.

   • 애매한부분이나 위험요소를 확실히한다.

3. 토론내용을 종합 정리한다.

4. 개인이 카드를 엎어둔다.

   • 토론 시 산정에 영향을 미칠 어떠한 숫자를 언급하면안된다.

5. 동시에 엎어둔 카드를 오픈한다.

   • 가장 높은 숫자, 낮은 숫자를 제시한 사람의 타당한 이유를 듣고 토론을 계속 진행한다.

6. 공수산정 합의에 도달할 때까지 반복한다.

   • 이때 개발을 담당하는 개발자가 제시한 내용이 대부분 반영이 된다.

7. 토론마다 타이머를 통해 토론을 진행한다.

위키백과

https://ko.wikipedia.org/wiki/%ED%94%8C%EB%9E%98%EB%8B%9D_%ED%8F%AC%EC%BB%A4

데일리 미팅! 플래닝 포커! 회고! (2017년 글)

https://woowabros.github.io/woowabros/2017/09/14/scrum.html

Chrome 86 업데이트 :focus-visible, Quick Focus Highlight (접근성)

:focus-visible

• :focus와 같아 보일 수 있으나 :focus-visible은 키보드를 통해 탭할때에 스타일을 지정할 수 있다.
• :focus와 함께 사용 가능하다.
• Firefox의 :-moz-focusring과 유사한 기능을 제공하지만 동일하지 않다.
• 웹 외에 키보드 입력을 지원하는 모든 요소에서 사용된다.

도입이유

외관상의 이유로 클릭을 받았을때 :focus를 css로 비활성화하는 경우가 많다. 
이것은 안티패턴으로 분리된다.
:focus를 비활성화할 경우 저시력, 인지장애가 있는 사용자의 접근성 문제가 야기되기때문에 :focus와 분리된 :focus-visible이 추가되었다.

테스트방법

9월 3일 베타버전, 글을 작성하는 당시(9/8)는 베타버전으로 실험용 플래그 설정 후 확인 가능

1. chrome://flags/ 
2. Experimental Web Platform features 검색
3. Enabled로 변경하고 확인가능

Syntax

:focus-visible

/ * 마우스나 터치 시 정의 * /
button:focus:not(.focus-visible) {}
  
/ * 키보드 포커스 시 정의 * /
button:focus-visible{}

Basic example

<input value="Default styles">
<button>Default styles</button>
<input class="focus-only" value=":focus only">
<button class="focus-only">:focus only</button>
<input class="focus-visible-only" value=":focus-visible only">
<button class="focus-visible-only">:focus-visible only</button>

input, button {
  margin: 10px;
}

.focus-only:focus {
  outline: 2px solid black;  
}

.focus-visible-only:focus-visible {
  outline: 4px dashed darkorange;
}

Output

Browser Support

Quick Focus Highlight

• 사용자 기본 설정할 수 있다.
• 탭으로 탐색 시에 초점이 맞춰진 요소가 2초동안 표시 기능을 제공한다.
  • 항상켜짐모드는 아니다.
• 입력 장치에 관계없이 초점 표시를 일치하게 만들 수 있다.
• :focus 기능과는 별도며 :focus 기능 스타일을 비활성화해도 표시한다.

출처 및 참고

• chromium blog

  • https://blog.chromium.org/2020/09/giving-users-and-developers-more.html

• mdn

  • https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

• CSS tricks

  • https://css-tricks.com/almanac/selectors/f/focus-visible/

• Caniuse

  • https://caniuse.com/css-focus-visible