백신맞고 더 강해져셔 돌아온 나라리야! 프론트엔드 기술면접에 대비해 다양한 질문에 대한 답을 가져와봤어! 혹시라도 잘못된 정보가 있다면 꼭 댓글로 알려주면 좋겠어!!
그럼 오늘도 힘차게 시작! 👊🏻
1. 브라우저 렌더링 작동 원리
브라우저의 렌더링은 사용자가 참조하고자 하는 웹페이지를 서버에 요청하고 서버의 응답을 받아 브라우저에 표시해야 합니다. 자세히 말하면 브라우저는 서버로부터 html css javascript 이미지 파일 등을 응답받는다고 할 수 있습니다. Html css 파일은 렌더링 엔진의 html 파서와 css파서에 의해 파싱되어 dom, cssom 트리로 변환되고 렌더 트리로 결합되게됩니다. 이렇게 생성된 렌더 트리를 기반으로 브라우저 웹페이지를 표시하게 됩니다.
파싱(parsing)
프로그래밍 언어로 작성된 파일을 실행시키기 위해 구문 분석(syntax analysis)을 하는 단계이다. 파일의 문자열들을 문법적 의미를 갖는 최소 단위인 '토큰'으로 분해하고, 이 토큰들을 문법적 의미와 구조에 따라 노드라는 요소로 만든다. 노드들은 상하관계를 반영해 트리를 형성하는데, 이 트리를 파스트리라고 한다.
렌더링(rendering)
HTML, CSS, JavaScript 파일을 파싱해, 브라우저에 시각적으로 출력하는 과정이다.
2. 웹페이지가 사용자에게 보여지는 과정
사용자가 브라우저를 먼저 실행하고 접속하고 싶은사이트의 url을 주소창에 입력하면 브라우저는 입력된 url의 서버에게 사이트 정보를 받아와 이를 화면에 표시하고 표시된 정보를 사용자가 활용할 수 있게 됩니다.
Dns조회 / 도메인 이름과 ip주소를 변환해주는 역할
url입력-브라우저가 url해석-dns서버를통해 도메인 이름을 ip주소로 변경 - http or https 프로토콜방식으로 요청 및 응답 - 브라우저가 서버에게서 받은 자료를 바탕으로 렌더링 - 사용가능
3. 서버사이드 렌더링과 클라이언트사이드 렌더링의 차이 (SSR VS CSR)
렌더링은 요청 받은 웹페이지의 내용을 화변에 그려주는것을 말하는데 여기서 어느쪽에서 리소스를 해석하고 그려주느냐에따라 서버사이드렌더링, 클라이언트 사이드 렌더링으로 나뉘어 집니다.
웹페이지를 이동할 때 마다 서버에 요청하는 방식을 서버사이드 렌더링이고
최초 로딩시 브라우저가 서버에 html을 비롯한 css, js등 각종 리소스를 받아오는 방식이 클라이언트 사이드 렌더링 입니다.
ssr은 csr에 비해 다운받는 파일이 많지 않아 초기 로딩 속도가 빠릅니다. 하지만 페이지를 이동할 때마다 서버에 매번 요청하기 때문에 서버의 부하가 커질 수 있습니다. 반대로 csr은 서버에 요청하는 횟수가 적기 때문에 서버부담이 ssr에 비해 적고 최초 로딩시 모든 리소스를 받아와야해서 초기 로딩 속도가 느립니다.
4. 번들링이 무엇이며 왜 필요한가요?
번들링이란 기본적으로 여러개로 흩어져 있는 파일들을 압축 난독화 등을 하여 하나의 파일로 모아주는 것을 말합니다. 요즘의 프로젝트나 웹 애플리케이션의 규모는 굉장히 큰데 번들링을 하지 않는다면 예상치 못한 중복된 이름으로의 에러나 네트워크 병목현상이 일어날 수 있는데 이때 번들링을 사용한다면 모듈단위 코딩으로 가독성을 높이고 유지보수에 용이할 뿐만 아니라 여러파일을 하나로 묶어서 보낼 수 있고 종속성을 알아서 확인하여 사용하지 않은 파일은 포함하지 않기 때문에 파일의 크기를 줄여 페이지 로딩을 빠르게하는 효과를 볼 수 있습니다. 이를 통해 네트워크 병목현상도 해결할 수 있습니다.
5. 프론트엔드 입장에서 신경써야할 보안 !
CSRF 정의와 예방법
사이트간 요청 위조 (크로스 사이트 요청위조 )는 웹사이트 취약점 공격의 하나로 사용자가 자신의 의지와는 무관하게 공격자가 의도한 행위 (수정, 삭제 등록 등)을 특정 웹사이트에 요청하게하는 공격을 말합니다.
예방할 수 있는 방법은 referer체크가 가장 기본인데. 그 외에는 세션에 임의난수(토큰)을 발급해서 토큰이 없는 상황에서 해당 동작들이 이루어지면 요청을 거부하는 방법으로 예방할 수 있습니다.
XSS 정의와 예방법
사이트간 스크립팅(크로트 사이트 스크립팅)은 웹 애플리케이션에서 많이 나타나는 취약점의 하나로 엡사이트 관리자가 아닌 이가 웹페이지에 악성 스크립트를 삽입할 수 있는 취약점. 주로 다른 웹사이트와 정보를 교환하는 식으로 작동하므로 사이트간 스크립팅이라고 한다.
예방할 수 있는 방법은 입력값에 대해 정규식을 이용하여 정확하게 허용되는 패턴의 데이터만 입력되도록하는 방법 , 서버로 들어오는 모든 요청에 대해 xss 필터를 적용하여 안전한 값만 전달되어 사용되도록 하는방법 출력값에 대해 html 인코딩을 적용하여 스크립트가 동작되지 않도록 하는 방법 등이 있습니다.
7. SPA 장점이 무엇인가요?
싱글 페이지 애플리케이션 - 하나의 페이지로 구성된 애플리케이션입니다.
싱글 페이지 애플리케이션은 기존 형태의 웹이 주던 딱딱하고 끊기는 느낌이아니라 애플리케이션처럼 부드럽고 자연스러운 사용자 경험을 느끼게 해줍니다. 또 전체 페이지를 업데이트할 필요가 없어서 빠르고 깜박 거림이 없습니다. 그 외에도 필요한 리소스만 부분적으로 로딩이 가능하고 서버의 템플릿 연산을 클라이언트로 분산해서 서버의 부담을 줄이고 컴포넌트별 개발에 용이하며 모바일 앱 개발을 염두에 둔다면 동일한 api를 사용하도록 설계가 가능합니다.
<참고자료>
연속적인 페이지 간의 사용자 경험의 간섭을 막아준다.
→ 기존 형태의 웹이 주던 딱딱하고 끊기는 느낌을 사용자에게 주는 것이 아니라. 애플리케이션처럼 부드럽고 자연스러운 사용자 경험 (UX)을 느끼게 해 준다.
→ SPA의 최대의 목적은 뛰어난 사용자 경험을 준다는 것이다.
필요한 리소스만 부분적으로 로딩
→ 페이지의 모든 정보를 가져오는 것이 아닌, 화면 구성에 필요한 정보만 동적으로 요청을 해서 화면을 변경하는 방식으로 사용한다.
→ 필요한 부분만 요청하는, 데이터를 적게 사용하는 방식이기 때문에, 모바일 네트워크에서도 빠른 속도로 렌더링이 가능하다.
서버의 연산 부담을 클라이언트로 분산
→ 최초의 http 요청을 통해 딱 한 번만 http, Css, javascript를 로딩. 이후 데이터를 받아 올 때만 서버와 통신.
→ 통신된 데이터를 통해 기존 페이지의 내부를 수정해서 보여주는 방식.
컴포넌트로 나누어서 개발함으로 관리적 용이성
→ 모던 웹 들은 계속 다채로워지고 화려해지고 있다. (점점 복잡해진다!)
→ 많은 컴포넌트 ( 홈페이지에서 각각의 아이템들이라고 생각하면 편하다. 메뉴창, 내비게이션 바 등..)를 분리해서 관리를 함.
→ 데이터 변경이 있어 화면을 재 구성해야 하는 경우 전체를 바꾸는 것이 아닌, 컴포넌트 단위로 화면을 갱신.
8. Lazy loading 이 무엇인가?
말 그대로 지연된 로딩이라는 뜻으로 필요시점까지 객체의 초기화를 연기시키기 위해 컴퓨터 프로그래밍에서 사용되는 디자인패턴의 하나입니다. 적절하게 사용될 경우 프로그램의 운영 차원에서 효율성(비용감소, 성능향상)에 기여할 수 있습니다.
왜 사용해야하는가 ?
성능향상
Lazy loading을 이용하면 페이지 초기 로딩 시 필요한 이미지 수를 줄일 수 있습니다. 리소스 요청을 줄이는 것은 다운로드 바이트를 줄이는 것이며 이는 유저가 사용할 수 있는 제한된 네트워크 대역폭의 경쟁을 줄이는 것을 의미하고 디바이스가 다른 리소스들을 더 빠르게 처리해서 다운로드하도록 확보하는 것입니다. Lazy loading을 쓰지 않는 것에 비해서 페이지를 훨 씬 더 빨리 유저가 이용하게 될 수 있다.
비용감소
네트워크로부터 전송될 바이트의 감소는 비용감소로 이어지기 때문이다.
9. 이벤트 위임이 무엇인가요?
이벤트위임(event delegation) 다수의 자식 요소를 가지고 있는 상태에서 각 자식 요소에 각자의 이벤트 핸들러를 바인딩하는 대신 공통의 부모요소에 하나의 이벤트 핸들러를 바인딩함으로써 성능과 메모리 사용성을 개선하는 패턴을 말합니다.
10. 이벤트 버블링이란 무엇이며 막을 수 있는 방법?
이벤트 버블링이란 자기자신(현재타겟)에서 부모로 전파되는 것을 이벤트 버블링이라고한다.
이벤트 버블링을 막으려면 event의 stopPropagtion() 메서드를 통해 이벤트가 더 이상 체인 위로 버블링 되지 않도록 막을 수 있다. 또는 preventDefault() 메서드를 이용해 현재 이벤트 동작을 중지할 수도 있다. 리액트에서는 명시적으로 꼭 사용해줘야 한다.
11. 웹페이지의 다양한 redirect 구현방법
웹페이지의 리다이렉트 구현방법은 크게 3가지로
http 리다이렉트, 2. Html 리다이렉션 3, javascript 리다이렉션이 있습니다.
http 리다이렉트는 3xx상태 코드를 지닌 응답이고 리다이렉트 응답을 받은 브라우저는 제공된 새로운 url을 사용해 그것을 즉시 로드한다. Html 리다이렉션은 head 내에 meta 엘리먼트와 http-equiv 속성으로 html페이지를 만들 수 있는데 해당 페이지를 디스플레이할 때 브라우저는 이 엘리먼트를 발견하고 표시된 페이지로 이동한다. 다만 가능한 경우 항상 http 리다이렉트를 사용하며 meta 엘리먼트를 사용해서는 안된다. 그리고 js 리다이렉션은 window.location프로퍼티에 값을 설정해서 만들어지며 새로운 페이지가 로드된다. 모든 리소스에서 실행되는 것은 아니며 자바스크립트를 실행한 클라이언트 상에서만 동작해서 조건에 따라 리다이렉션 시킬 수 있다.
12. Reflow가 발생하는 이유와 방지법
리플로우가 뭐야?
리플로우는 하나의 DOM 객체의 크기나 위치가 변경되었을 때 레이아웃의 변경작업 등 다른 dom객체들의 위치와 크기가 함께 변경되는 것을 말한다.
특정 엘리먼트에 스타일 변화가 발생했을 때 그 개체가 가진 자식요소에 대한 레이아웃 재정리를 위해 리플로우가 실행된다. 설령 그 변화가 그 자식 요소 및 페이지에는 아무 여향을 미치지 않을 지라도 기계는 이를 알고있지 못한다 따라서 작은 변화에도 자식개체는 물론 페이지 전체에 리플로우가 실행된다
원인 케이스
윈도우 리사이징 / 폰트의 변화, 스타일추가 또는 제거, 내용변화(인풋박스 텍스트 입력등)/:hover와같은 CSS Pseudo Class / 클래스 Attribute의 동작변화 / JS를 통한 Dom의 동적변화 / 엘리먼트에 대한 화면에서 보여지는 좌표 계산시 / 스타일 Attribute 동적변화 등에서 발생됩니다.
최소화 하는 방법
클래스 변화 에 따른 스타일을 변화할 경우 최대한 dom 구조상 끝단에 위치한 노드에 주어라
인라인 스타일을 최대한 배제하라
애니메이션이 들어간 엘리먼트는 가급적 Position:fixed 또는 position:absolute로 지정
퀄리티와 퍼포먼스 사이에서 타협해야한다
테이블 레이아웃을 피한다
IE 경우 css에서의 js표현식을 피한다
Js를 통해 스타일 변화를 주어야 할 경우 가급적 한번에 처리해야한다.
css 하위선택자는 필요한 만큼만 정리한다
Position:relative 사용시 주의
13. 디자인패턴이란 무엇이고 장단점에 대해서 설명해라
디자인 패턴이란 건축학 및 컴퓨터 과학에서 사용되는 용어로 설계 문제에 대한 해답을 문서화하기위해 고안된 형식 방법을 말합니다. 이런 디자인 패턴은 설계자들이 올바른 설계를 빨리 만들 수 있도록 도와주는 역할을 합니다. 즉 , 소프트웨어를 설계할 때 특정 맥락에서 자주 발생하는 고질적인 문제들이 발생했을 때 재사용할 수 있는 해결책이다.
장점은
개발자 간의 원활할 의사소통이 가능하고
소프트웨어 구조 파악에 용이하며 재사용을 통한 개발 시간을 단축하여 생산선을 높일 수 있고
설계 변경 요청에 대한 유연한 대처가 가능합니다 .
단점은
대부분의 디자인패턴은 객체지향설계와 구현에서 많이 사용되는데 c언어를 주로 사용하는 구조적 설계나 구현에서도 사용할 수 있지만 너무 복잡해서 크게 도움이 되지않습니다. 그리고 디자인패턴을 사용하지 않는 경우보다 초기에 시간과 노력이 많이 듭니다.
대표적인 디자인패턴 8가지 <참고>
Singleton Pattern
각 클래스가 하나의 인스턴스만 갖도록 하는 디자인패턴이다.
- 생성자의 접근제어자를 private로 정의하며, 하나의 인스턴스를 반환하는 getInstance() 메소드를 사용한다.
Strategy Pattern
- 객체가 수행할 수 있는 행위들을 미리 만들어 두고, 동적으로 행위의 변경이 필요한 경우 행위를 직접 수정하는 대신 전략을 바꾸는 것으로 구현하는 디자인패턴이다.
- 행위를 추상화하여 인스턴스로 정의한 뒤에, 구체적인 행위를 구현 클래스로 작성하며, 필요에 따라 각 행위 클래스를 주입하여 사용한다.
Decorator Pattern
- 객체에 추가해야 할 기능이 많은 경우에 각 기능을 클래스로 만들어 두고 필요에 따라 조립하여 사용하는 디자인패턴이다.
Proxy Pattern
- 객체에 대한 직접적인 접근을 제어하기 위해, 대리자 역할을 하는 클래스를 구성하는 디자인패턴이다.
- 프록시 클래스는 객체를 요청하기 전에 권한 처리나, 객체 생성에 시간이 걸리는 작업의 백그라운드 처리 등을 수행할 수 있다.
Template Method Pattern
- 유사하지만 부분적으로 다른 작업을 수행하는 비슷한 클래스를 여러개 만들어야 하는 경우에, 상위 클래스에서 처리 흐름을 제어하고 하위 클래스에서 처리의 내용을 구체화하도록 구성하는 디자인패턴이다.
Template Callback Pattern
- 전략 패턴에 익명 클래스를 가미하여 사용하는 디자인패턴이다. 전략 패턴의 컨텍스트를 템플릿, 익명 클래스로부터 생성되는 객체를 콜백이라 한다.
- 전략 패턴의 기본적인 구조에서 변경이 필요한 메소드 단위로 익명객체를 생성하여 전달하는 방식이다.
Factory Method Pattern
- 조건에 따라 다른 객체를 생성해야 하는 경우, 객체의 생성을 팩토리 클래스에 위임하는 디자인패턴이다.
- 객체간 결합도를 낮추고, 유지보수가 용이하게 한다.
Adapter Pattern
어떤 클래스의 인터페이스를 다른 인터페이스로 변환하여, 호환되지 않는 인터페이스들을 함께 사용할 수 있게 하는 디자인패턴이다.
