2022/08/02 TIL

오늘 공부한 것

1. 브라우저 렌더링 원리

브라우저 렌더링 순서 : DOM, CSSOM 생성 → Render Tree 생성 → Layout → Paint

1. DOM, CSSOM 생성 : HTML, CSS를 다운받고, HTML CSS가 각각 Object Model을 만든다
2. DOM tree와 CSSOM Tree가 만들어진다음에, 이 둘을 이용하여 Render Tree를 생성한다. Render Tree에는 스타일의 정보가 들어있고, 실제 화면에 표현된 노드들로 구성된다
3. Layout단계: 브라우저의 뷰포트에서 각 노드들의 위치를 계산한다. 생성된 Render Tree 노드들이 가지고 있는 스타일과 속성에 따라 어느위치에 어느 크기로 출력될지를 계산한다. (reflow단계)
4. Paint 단계 : Layout 계산이 완료가 되면 실제로 화면에 요소를 그리는 단계이다(repaint) 처리해야할 스타일이 복잡할 수록 걸리는 시간이 길다.(예시, 그라데이션, 그림자)

2. this의 용법을 아는대로 설명하시오

This는 함수가 호출 될 때마다 결정된다. 전역 범위에서 사용될 때는 전역 객체를 가르킨다. 함수에서 사용될 때도 전역 객체를 가르킨다. 객체에 속한 매서드에서 사용될 때 그 메서드의 객체를 가르킨다. 객체에 속한 메서드의 내부함수에서 사용할 때는 전역객체를 가르킨다.

3. 이벤트 버블링에 대해 이야기 해보세요

이벤트 버블링은, 해당 요소의 최상위 부모까지 이벤트가 전달되어지는 과정이다. HTML 구조상 자식 요소에 발생한 이벤트가 상위 부모요소에 영향을 미치는 것이다. 이벤트 버블링이나 캡처링을 차단하고 싶을 때 e stopPropagation을 호출하면 이벤트 전파를 막고 해당 이벤트만 실행시킬 수 있다.

4. CSR과 SSR의 차이점에 대해 설명해 주세요

SSR은 사용자가 웹 페이지에 접근 할 떄, 서버에 각 각 페이지에 대해 요청하고 서버에서 HTML, JS를 모두 다운로드하여 화면에 렌더링하는 방식이다

CSR은 클라이언트 측에서 HTML을 반환한 후 JS가 동작하면서 데이터만을 주고 받아 클라이언트에서 렌더링을 진행한다.

초기 로딩속도에서는 SSR은 CSR에 비해 다운받는 파일이 많지 않아 속도가 빠른 반면, CSR은 모든 JS파일을 다운 받아와야하기 때문에 초기에 오래걸린다

서버 부담 측면에서는, SSR은 서버와 잦은 응답을 하기 때문에 서버에 부담이 되고, UX 측면에서는 떨어진다. CSR은 데이터 요청이 있을 때만 서버에 요청하기 떄문에 서버에 부담이 적다.

SEO 측면에서, SSR은 HTML에 대한 정보가 처음에 포함되어있어 데이터를 수집에 있어 SEO가 유리하다. CSR은 맨 처음에 HTML 파일이 비어 있어 구글을 제외한 크롤러가 데이터를 수집할 수 없다.

5. React의 상태관리 방법에 대해서 설명하시오

리액트의 상태관리에는 context API를 통한 방법 및 Mobx, Redux와 같은 다양한 상태방법이 있습니다. 그 중 Redux를 활용한 전역 상태관리를 가장 많이 사용합니다. Redux는 액션을 만들고, dispatch로 액션을 실행시킵니다. store에 해당 리듀서에 매칭되는 액신이 있다면, 스토러에서 상태를 변경해줍니다. 리덕스는 context api와는 다르게, 비동기 작업을 쉽게 해주는 장점이 있지만, 코드가 많고 복잡하기에, 꼭 이런 부가 기능이 필요한게 아니라면 소규모 프로젝트에는 context api를 쓰는 것이 나을 수 있다.

5. MVC, MVVM 모델에 대해 섦명하세요

MVC 패턴은 모델 뷰 컨트롤러로 구성되어 있다.

모델은 데이터와 데이터 처리를 하는 곳이다,

뷰는 사용자에게 보여지는 UI부분이다

컨트롤러는 사용자의 입력을 받고 처리하는 부분이다.

MVC 패턴은, 사용자의 액션이 컨트롤러에 들어오면, 컨트롤러가 액션을 확인하고 모델을 업데이트한다. 컨트롤러는 모델을 나타내줄 뷰를 선택하고, 뷰는 모델을 이용하여 화면을 나타낸다. 컨트롤러는 여러개의 뷰를 선택할 수 있다. 컨트롤러는 뷰를 선택할 뿐 직접 업데이트하지 않는다.

MVC는 뷰와 모델 사이의 의존성이 높기에 어플리케이션이 크고 복잡할수록 유지보수가 어렵다.

MVVM패턴 모델 뷰 뷰모델을 합친 용어이다.

모델은 데이터와 데이터 처리를 하는 곳이다,

뷰는 사용자에게 보여지는 UI부분이다

뷰모델은 뷰를 나타내 주기 위한 모델이자, 뷰를 나타내기 위해 데이터를 처리하는 부분이다.

뷰에 액션이 들어오면, 뷰모델에 액션을 전달한다. 뷰 모델은 모델에게 데이터를 요청하고, 모델은 요청받은 데이터를 뷰 모델에게 응답하고, 뷰 모델은 데이터를 가공하여 저장한다. 뷰는 뷰 모델과 데이터 바인딩을 하여 화면을 그리는 동작 방식이다. 이 패턴은 뷰와 뷰 모델의 의존성을 없애고 각 부분이 독립적이다. 대신, 뷰모델의 설계가 쉽지 않은 것이다. 로직 분리가 MVVM의 핵심이며, 리액트에서는 데이터와 화면 컴포넌트를 분리한 것이 그 예시이다.

오늘 공부한 것 출처

https://amyhyemi.tistory.com/m/224

모의 면접을 가져야할 답변을 이야기하는 태도

1. 어떤 특정 질문에 대한 답변은 두괄식으로 준비할 것

예시질문) 클로저를 설명해라

예시답변) 클로저는 외부 함수의 실행이 끝나더라도 외부 함수 내 변수를 사용할 수 있다.

1. 좋은 예시를 답변에 넣는다.

이전에 클로저를 어떤 이유로 사용했습니다

1. 도구를 적극 활용하여라.

칠판이 있다면 칠판을, 등등

---

모의 면접에서 느낀 생각

오늘 모의 면접을 통해서 면접을 할 때 내가 어떤 나쁜습관을 가지고 있는지 알수 있었다.

1. 시선은 면접관을 보고 같이 대화를 하고 싶은 사람처럼 면접에 임한다.
2. 면접을 하면서 쓸데 없는 손동작 안할 것
3. 굳어있지 말것
4. 억양을 다양하게 넣어 내용을 주목시킬 것
5. 두괄식으로 이야기하여 어떤 내용을 전달시킬지 쉽게 설명할 것