프론트엔드 기술면접 정리 - 1

앞으로의 기술면접을 대비해 그동안 공부했던걸 한번 정리해보려 한다.

Web

1. 주소창에 입력된 주소를 통해 서버를 찾아간다. 2. 이후 DNS가 연결해줄 곳을 찾는다 3. 서버에서 HTML 파일을 클라이언트로 보내준다 4. HTML문서는 파싱되어 DOM을 생성한다.(객체 형식) 5. 중간에 CSS를 로드하는 link혹은 style 태그를 만나면 HTML파싱 중지후 CSS파싱을 시작한다 6. CSS파싱 끝나면 다시 HTML파싱 시작 및 DOM트리 완성 7. DOM트리와 CSSOM트리가 합쳐져 렌더트리를 구축 8. 만약 script태그를 만나게 되면 JS코드를 실행하기 위해 파싱을 중단한다. 9. 이후 JS엔진을 실행하고 JS코드를 파싱한다. 이때 자바스크립트가 DOM이나 CSSOM을 변경하는 경우 리렌더링을 하게 된다.

CSR - 최초 로드시 필요한 파일을 전부 받고 사용사의 인터렉션에 따라 클라이언트단에서 받아와 렌더링을 해주는 방식 - 렌더링 속도가 빠르다는 장점이 있는 대신에 SEO에 취약하고 초기 화면의 렌더링 속도가 느리다는 단점이 있음 SSR - 서버에서 렌더링까지 다 마친 완전한 페이지를 받음 - 초기 화면의 렌더릭 속도가 빠르며 SEO에 최적화 된 장점이 있지만 매 렌더링마다 서버를 거쳐 속도가 느림

spa는 Single Page Application으로 최초 한번 페이지 전체를 로딩한 후 데이터만 변경해서 사용할 수 있는 웹 어플리케이션이다. 하나의 페이지에서만 실행된다는 특징이 있다

JavaScript

모든 선언이 코드의 선두르 끌어올려지는 것 처럼 동작하는 자바스크립트 고유의 특징으로 만약 글로벌 스코프에서 선언되었다면 스크립트의 가장위로 함수 스코프에서 선언되었다면 함수 내에서 제일 위로 끌어올려진다. 이때 선언부분만 위로 올라가고 값을 할당하는 것은 올라가지 않는다.

외부 함수보다 중첩 함수가 더 오래 유지되는 경우, 중첩 함수는 이미 생명 주기가 다한 외부 함수의 변수를 참조할 수 있으며, 이러한 중첩 함수를 "클로저(closure)"라고 한다.

클로저 함수는 외부 함수의 실행이 끝나더라도 회부 함수 내 변수를 사용할 수 있다. 클로저 함수에 각각의 변수아 할당하면 독립적으로 값을 사용하고 보존할 수 있다.

자원의 이름으로 구분해 자원의 상태를 주고받을 수 있는 API라는 뜻이다. HTTP 메서드 (POST, GET, PUT, DELETE)를 통해 서버에 데이터를 요청 및 받아온다.

Cookie - 만료 기간이 있는 클라이언트 단에 저장하는 작은 텍스트 파일 - 로그인 자동완성이나 다시 보지 않음 팝업창등에 사용됨. Local Storage - 사용자가 데이터를 지우지 않는 이상, 브라우저나 OS를 종료해도 계속 브라우저에 남아있음 - 자동로그인 등에 사용됨 Session Storage - 데이터가 오리진 뿐만 아니라 브라우저 탭에도 종속되기 때문에 윈도우나 프라우저 탭을 닫을 경우 제거 - 일시적으로 필요한 데이터 저장에 사용(일회성 로그인 정보, 입력폼 저장 등)