[2023-09-20] TIL - 브라우저 동작 원리, 프론트엔드의 역할

간단하게 브라우저는 통신 렌더링 스크립트 실행으로 나누니다.

 

 

통신

서버와의 통신

브라우저가 서버에 요청하면 서버는 요청에 따라 특정값을 응답

이 요청은 한 번에 하나만 할 수 도 여러 번 할 수도  있음

 

렌더링

DOM이라는 객체를 화면에 그리는 행위

DOM은 통신을 통해서 받은 HTML을 브라우저가 읽어서 생성함

 

- DOM

  브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱 하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다

 

스크립트 실행

자바스크립트를 실행

브라우저가 script태그를 만나면 자바스크립트 파일을 읽고 실행된다.

이를 통해 UI에 이벤트를 입력하거나 화면을 다크모드로 바꾸는 등 동적인 화면을 구성할 수 있음

 

 

💬더 자세하게

https://poiemaweb.com/js-browser

Javascript Environment | PoiemaWeb

 

 

 

프런트엔드의 역할

프런트엔드가 UI를 만들기까지 과정은 굉장히 험난하다.

 

그림처럼 프런트엔드 개발자는 항상 마지막을 담당하는 직군이다.

디자인이 있어야 UI를 만들  수 있고,

백엔드로부터 데이터를 받을 수 있어야 사용자에게 가공하여 정보를 제공할 수 있다.

 

이 과정이 순탄치 않아 험난하다고 여긴다.

 

. 프런트엔드 개발자의 핵심역량은?

1. 커뮤니케이션

 - 혼자 일할 수 없는 직군이기 때문에 함께 일하는 동료와의 커뮤니케이션은 중요하다

2. UI

 - UI는 어떻게 구성되는지 어떻게 나타내는지 기술적인 역량이 필요

3. 네트워크

 - 데이터를 받아와 고객들에게 보여주기 위해서는 네트워크의 기본 지식이 필요하다.

4. 보안

5. 브라우저

 - 다양한 브라우저를 대응할 수 있어야 한다 - 크로스브라우징

6. 디자인

 

 

프런트엔드 개발자가 해서는 안 되는 것은>

1. 컴퓨터 과학  무시

 - 알고리즘, 설계패턴, 메모리와 같은 컴퓨터 과학적인 요소는 어떤 개발자든 꼭 필요한 지식이다.

2. CSS 안 하기

 - 퍼블리셔의 일이 아님

3. 단순한 코더가 되는 것

 - 오로지 프레임워크나 라이브러리의 기능을 가져다 쓰는 것을 지양해야 한다.

 - 복잡한 제품을 만들 수 없게 된다.