2021-04-23
코드, 면접문제중 아무거나 2문제씩
[Frontend Question]
1. 브라우저 동작 원리에 대해 설명해 보세요
Answer.
브라우저 주소창에 주소를 치면 서버를 찾아가고, DNS(실제 서버가 어디에있는지 알고 있는 서버)가 연결해줄 곳을 찾습니다. 여기서 주소 앞에 https가 붙었다면 https방식으로 통신합니다. 서버의 기본설정이 대부분 index.html되어 있어 서버에서 이파일을 클라이언트로 보내게 됩니다. 브라우저는 텍스트로 이루어진 index.html 파일을 파싱합니다. 한줄한줄 읽으면서 DOM트리를 만들어나가고 중간에 link태그를 만나 css요청이 발생하면, 요청과 응답과정을 거치고 css를 파싱합니다. CSS파싱이 끝나면 중단된 html을 다시읽고 DOM트리를 완성합니다. 완성된 DOM트리와 CSSOM트리를 합쳐 Render Tree를 만들고 그립니다.
javascript는 중간에 HTML파서가 Script태그를 만나게 되면 javascript 코드를 실행하기 위해 파싱을 중단하고 제어권한을 자바스크립트 엔진에게 넘기고, 자바스크립트 코드 또는 파일을 로드해서 파싱하고 실행시킵니다.
[Frontend Question]
2. React State and Props에 대해 설명해 보세요
Answer.
리액트 컴포넌트에서 다루는 데이터는 두개로 나뉘고, 그것이 props 와 state 입니다. props 는 부모 컴포넌트가 자식 컴포넌트에게 주는 값입니다. 자식 컴포넌트에서는 props 를 받아오기만하고, 받아온 props 를 직접 수정 할 수 는 없습니다. 반면에 state 는 컴포넌트 내부에서 선언하며 내부에서 값을 변경 할 수 있습니다.
