원글 페이지 : 바로가기
최종 프로젝트 3일차 기술면접 예상 질문 연습 브라우저의 렌더링 과정에 대해서 설명해주세요. 의도 : 단순히 자바스크립트, 리액트 등의 코딩 기술이 아니라 전반적인 프론트엔드 지식을 가지고 있는지 확인!?!? 내 답변 : 브라우저의 렌더링 과정은 HTML 파싱 – CSS 파싱 – COM트리와 CSSOM트리 결합 – 레이아웃 계산 – 페인팅 단계로 이루어집니다. HTML을 파싱해 COM트리를 만들고, 비슷하게 CSS를 파싱해 CSSOM트리를 만듭니다. 이후에 두 트리를 결합하여 렌더트리를 생성하고 페이지에 렌더링 하기 위해 필요한 공간을 계산합니다. 마지막으로 레이아웃에 따라 화면에 요소를 페인팅합니다. 쿼리 스트링은 주로 어디에 사용하셨나요? 의도 : 쿼리 스트링의 개념과 작동 방식에 대해 이해하고 있는지 확인!?!? 내 답변 : 쿼리 스트링은 URL의 함 부분으로, 요청하는 URL에 부가정보를 포함할 때 사용합니다. 기존 URL은 단순한 형태의 요청과 응답을 주고 받지만 쿼리 스트링을 사용하면 조건에 맞게 정렬된 특정 형태의 정보를 요청하고 받을 수 있습니다. 예를 들면 유저에게 상품 리스트를 보여줄 때 상품종류가 1000개가 있다면 전부를 보여주는 것이 아니라 최신순으로 상위 10개만 보여줄 수 있게 요청할 수 있습니다. 브라우저에 URL을 입력하면 일어나는 일에 대해 순서대로 설명해주세요. 의도 : 기본적인 브라우저 작동 방식에 대해 이해하고 있는지 확인!?!? 내 답변 : 브라우저에 URL을 입력하면 프로토콜, 도메인 이름, 경로를 분석하고 도메인 이름을 IP주소로 변환하기 위해 DNS에 요청을 보냅니다. 그러면 DNS는 도메인에 해당하는 IP주소를 응답으로 보내줍니다. 그리고 브라우저는 TCP 네트워크 연결을 구축하여 해당 IP 주소를 가진 웹 서버에 접근하여 데이터를 요청합니다. 그러면 웹서버는 HTTP 응답을 브라우저에 보내고 브라우저는 받아온 HTML, CSS, JS 코드를 화면에 렌더링합니다. 정규 표현식을 사용해본 경험이 있으신가요? 의도 : 정규 표선식에 대한 개념을 알고 있는지 파악하는 질문!?!? 내 답변 : 와 도저히 모르겠는데요!?!?!?!?!?!?!? 크로스 브라우징이 무엇인가요? 의도 : 웹 브라우저 간 예외 처리가 필요하다는 점을 알고 있는지 확인!?!? 내 답변 : 참고 자료 1.https://oliviakim.tistory.com/80#%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%20%EB%A0%8C%EB%8D%94%EB%A7%81%20%EC%88%9C%EC%84%9C%20%EC%A0%95%EB%A6%AC-1 2. https://velog.io/@rayong/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B8%B0%EC%B4%88-%EC%BF%BC%EB%A6%AC-%EC%8A%A4%ED%8A%B8%EB%A7%81-useSearchParams https://sirius7.tistory.com/40 3. https://velog.io/@khy226/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%97%90-url%EC%9D%84-%EC%9E%85%EB%A0%A5%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EC%9D%BC%EC%9D%B4-%EB%B2%8C%EC%96%B4%EC%A7%88%EA%B9%8C https://velog.io/@forest_xox/%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-%EC%A3%BC%EC%86%8C%EC%B0%BD%EC%97%90-URL%EC%9D%84-%EC%9E%85%EB%A0%A5%ED%95%98%EB%A9%B4-%EC%9D%BC%EC%96%B4%EB%82%98%EB%8A%94-%EC%9D%BC 4. https://yozm.wishket.com/magazine/detail/1197/ 5. https://tlsdnjs12.tistory.com/57