[Day 43] 2022-0823 : UX/UI + 브라우저 렌더링 과정(1)

🐈오늘 공부한 것

✔️UI / UX

https://friedegg556.tistory.com/205

더 좋은 웹앱을 만들기 위한 기본 개념, UI와 UX에 대해서 공부했다. 프론트엔드 분야에서 UI 란 주로 GUI 를 의미하는 것이다. UI가 좋다고 해서 무조건 좋은 UX를 제공한다고는 할 수 없지만, 나쁜 UI가 나쁜 UX를 제공할 수는 있다. 오늘은 반응형 디자인의 break point에 대해서도 알아보았는데, UI 레이아웃의 컬럼과 거터에 break point에 따라서 고정된 치수를 정해두고 반응형으로 디자인하면 훨씬 더 일관성 있으면서 매끄러운 UI를 만들 수 있는 것 같다. 

 

+) 디스코드에 디자인 시스템에 대한 참고 영상을 보게 되었는데, 상당히 인상깊었다. 일단 일관적인 디자인이라는 것도 사용자의 경험에 큰 영향을 줄 수 있다는 부분을 다시 깨닫게 되었고, 이 일관적인 디자인을 위해서 약속을 정하는 것을 넘어서서 아예 디자인 / 개발의 시스템 단계부터 접근했다는게 혁신적인 것 같다. 

✔️웹 브라우저 렌더링 과정 

목요일 스터디 발표 주제로 선정하여 공부를 했다. 먼저 웹 브라우저에서 렌더링이란, HTTP 요청을 통해 받아온 리소스를 파싱해 화면상에 보여주는 것을 의미한다. 모던 자바스크립트 딥다이브에 이 과정에 대해서 상세하게 정리되어 있어 많은 부분을 참고할 수 있었다.

자바스크립트가 Node.js 런타임에서도 동작하긴 하지만, 주로 웹 브라우저에서 많이 사용한다. 웹브라우저는 자바스크립트 이외에도 HTML 과 CSS 파일도 함께 파싱하여 화면에 렌더링 하는데, 이 3가지가 브라우저에서 어떻게 사용되는지 알면 자바스크립트 코드도 더 효율적으로 짤 수 있을 것이다. 

과정을 간략히 정리하자면...

1. HTTP 요청을 통해 서버에 리소스를 요청한다. 제일 먼저 HTML 파일을 받게 될 것이다.
2. HTML 파일을 파싱하여 DOM을 생성한다. 이 때 css를 연결하는 link 태그를 만나면, DOM 생성을 잠시 멈추고 CSS 파일을 요청하여 받은 뒤, 이를 파싱해 CSSOM 트리를 생성한다.
3. CSS 파싱을 완료하면 나머지 HTML파일을 파싱해 DOM 트리를 생성한다.
4. DOM 트리와 CSSOM 트리를 합쳐 렌더링 트리를 만들고, 이 렌더링 트리를 가지고 화면에 표현될 위치와 크기를 계산하는 레이아웃 과정 그리고 실제 픽셀로 표현하는 페인팅 과정을 거치게 된다.
5. 추가적으로 HTML 파싱 과정에서 scripts 태그를 만나게 되면 파싱을 멈추고 자바스크립트 파일을 받아 파싱을 하여 AST (추상 구문 트리) 를 생성해 인터프리터로 실행까지 마치게 된다. 이 과정이 끝난 뒤에 HTML 파싱을 마무리 하기 때문에, scripts 태그에 defer나 async를 추가해 그 과정을 병렬적으로 처리해주는 것이 효율적인 것이다. 
6. HTML과 CSS 는 브라우저의 렌더링 엔진이 처리하고, JS는 자바스크립트 엔진이 처리하는데 JS 파싱을 병렬적으로 처리해주지 않으면 제어권이 렌더링 엔진에서 js 엔진으로 넘어간다고 한다. 제어권이 넘어간다 => 블록킹 이라고 볼 수 있을 듯 하다. 

+) 자바스크립트 코드에 의해서 DOM 이 변경되는 경우, 레이아웃 과정과 페인팅 과정이 다시 실행되는데, 이를 리플로우 & 리페인트 라고 한다. 이렇게 다시 변경되는 과정에서는 모든 요소를 처음부터 다시 계산하기 때문에 비효율적이고, 따라서 최소화 하는 것이 바람직하다. 리액트에서 가상 돔을 사용하는 이유도 이런 과정을 최소화하여 성능 최적화를 시키기 위함이라고 할 수 있음.

 

자료를 조금 더 찾아보니 모든 변경 코드에 대해서 리플로우와 리페인트를 실행하는 것은 아니라고 하는데, 정확히 언제 리플로우와 리페인트가 실행되는지에 대해서 추가 조사가 필요할 것 같다. 또 DOM과 CSSOM, AST 트리 생성 과정에서 토큰으로 만든 뒤 이를 노드로 만든다고 하는데, 토큰과 노드에 대해서 명확하게 대답할 수 없다. 

🐈더 공부할 것

1. 토큰, 노드, CSSOM, 리플로우 & 리페인트

🐈오늘의 느낀 점

1. 리액트로 뭔가 만들려고 하니까 막히는 것도 많고, 질문하고 싶어도 뭘 해야될지 모르는 지경에 이르러서 다시 책이나 강의로 돌아가 조금 더 공부해야겠다. 완성은 좀 아쉽지만 그래도 얼추 기능은 구현했으니 일단 여기서 만족해야겠다.  다음주 부터는 커스텀 컴포넌트에 대한 내용을 실습하게 되어서 관련 개념위주로 보면 좋을 것 같음. 

 

2. 오전 모각코를 시작하게 되면서 아침형 인간이 되어가고 있다. 오늘 아침에는 조깅까지 뛰었는데, 잠도 많이 깨고 개운했다. 다만 아침에 알고리즘 풀 시간이 부족해 제대로 풀지 못한것은 아쉽다. 알고리즘만 미리 풀어둔다면 아침 조깅을 해서 체력관리를 하는게 좋을듯..! 

 

3. 쓰다보니 생각났는데. 오늘 데일리 코딩은 동적계획법으로 재귀를 구현하는 문제가 나왔다. 일반 재귀로 피보나치 함수를 구현했을 때 불필요하게 반복되는 부분이 너무 많다보니, 이미 했던 연산에 대해서는 그 값을 기억해 다른 연산에 사용하자는 메모이제이션 개념이 등장했다. 재귀도 어려운데 동적계획법이라니... 하지만 늘 그랬듯 자꾸 보다보면 친해지고 또 친해지면 잘하게 되겠지...!