1. Flex와 Grid의 차이점에 대해서 설명해보세요.

키워드

• Flex는 축 하나를 기준으로 레이아웃을 정렬
• Grid는 행과 열을 기준으로 레이아웃을 정렬
• Flex는 유동적으로 레이아웃 변화 가능
• Grid는 유동적으로 레이아웃 변화 어려움

답변

• Flex는 축 하나를 기준으로 하여 레이아웃 설정하는 것입니다.
• Grid는 행과 열을 기준으로 레이아웃을 설정합니다.
• 그래서 축 하나 만을 기준으로 하기 때문에 레이아웃이 유동적으로 바꿀 수 있습니다.
• 하지만 Grid 같은 경우에는 이미 수평수직으로 레이아웃이 잡혀서 바꾸기 어렵습니다.

2. MVVM패턴과 Flux패턴의 차이점

키워드

• Flux는 Action, Dispatcher, store, view 로 데이터 흐름
• MVVM은 Model과 ViewModel에서 데이터를 다루고,
• View와 ViewModel에서 화면 구성을 담당
• Flux 패턴은 React, MVVM은 Vue

답변

• Flux 패턴은 Action, Dispatcher, Store, View 순서로 데이터가 흐릅니다
• 그래서 단방향 데이터 흐름이라서 코드 자체가 쉽습니다.
• MVVM 패턴은 Model, ViewModel에 데이터가 반영되고, ViewModel과 View가 서로 데이터가 동기화되어서 어느 한 부분이 고장나도 돌아가게끔 합니다. 그래서 어느 하나라도 돌아가면 테스트가 통과되어서 오히려 테스트가 어렵습니다.
• Flux 패턴은 React, MVVM 패턴은 Vue가 있습니다.

3. Reflow와 Repaint가 실행되는 시점

키워드

• Reflow는 HTML 및 레이아웃 관련해서 변화가 있을 때, 발생
• RePaint는 CSS에서 레이아웃을 제외한 나머지 변화가 있을 때, 발생
• 둘 다 렌더링 할 때 발생

답변

• 제가 알기로는 Reflow는 HTML과 CSS 중에서 레이아웃에 대한 변화가 있을 때, 발생합니다
• 그리고 RePaint는 레이아웃을 제외한 나머지 CSS가 변화할 때, 발생합니다.
• 둘 다 렌더링을 하면서, 자동으로 발생됩니다.

4. 주소창에 google.com을 입력하면 일어나는 일

키워드

• 입력한 주소를 IP 주소로 변환하기 위해서 DNS 조회
• 해당 URL을 통해서 HTTP 프로토콜 Get 요청
• 서버는 HTML, CSS, JS 등의 데이터를 응답
• 브라우저 렌더링 순서대로 렌더링

답변

• 주소창에 GOOGLE.COM을 입력하면, 해당 주소를 대변하는 IP 주소를 DNS 조회를 통해서 찾습니다
• 그리고 해당 IP 주소를 서버에 보냄으로서 HTTP GET 요청합니다.
• 그리고 서버는 HTML, CSS, JS 데이터를 응답합니다.
• 그리고 브라우저 렌더링 순서대로 렌더링합니다

5. margin, padding 이란?

키워드

• margin은 한 태그 기준으로 바깥쪽 요소 간격
• padding은 한 태그 기준으로 안쪽 요소 간격

답변

• margin은 한 태그 기준으로 바깥쪽 요소 간격입니다.
• 그리고 padding은 한 태그 기준으로 안쪽 요소 간격입니다.

6. position 이란?

키워드

• position은 화면에서 위치를 지정
• static : 기본값
• relative : static 위치에서 위치 조정
• absolute : 단독으로는 root 기준, 부모 요소가 relative면 부모기준
• fixed : 뷰포트 기준
• sticky : 뷰포트 기준이지만, 특정 위치 도달하면 다른 위치로 이동

답변

• position은 HTML 요소의 위치를 지정하는 속성입니다.
• static, relative, absolute, fixed, sticky 있습니다.
• static은 기본 위치이고, relative는 static 기준으로 위치 조절 됩니다.
• absolute는 단독 사용이면 root 기준, 부모가 relative면 부모 기준으로 위치 조정 됩니다.
• fixed는 뷰포트 기준이고, sticky도 뷰포트 기준이지만, 특정 위치 까지만 영향을 줍니다.