프론트엔드 면접 질문 정리 Part2(Frontend,HTML/CSS)

박먼지·2023년 9월 13일

Frontend

브라우저 렌더링 과정을 설명해주세요.

클라이언트가 서버에 파일을 요청하면 HTML 데이터를 받게 되는데, 여기서 HTML 마크업을 파싱해서 DOM Tree를 생성하고 CSS 마크업으로 CSSOM Tree를 생성합니다.
DOM Tree와 CSSOM Tree를 바탕으로 Render Tree를 생성하고 이를 기반으로 레이아웃을 계산 합니다. 이 레이아웃을 바탕으로 실제 화면에 나타냅니다.

Webpack, Babel, Polyfill에 대해 설명해주세요.

Webpack
웹팩은 자바스크립트 모듈 번들러입니다. 여러 개의 파일을 하나로 번들링하는(묶는) 이유는 브라우저가 페이지를 요청할 때 파일을 여러 번 요청하는 것 보다 한 번 요청하는 것이 웹페이지를 사용자에게 빠르게 전달할 수 있기 때문입니다.
Babel
바벨은 자바스크립트 컴파일러입니다. 바벨에는 폴리필뿐만 아니라 최신 JavaScript문법 제공, JSX 문법 변환, TypeAnnotation 기능 등을 제공합니다.
Polyfill
폴리필은 최신 ECMAScript 환경을 만들어줍니다. 최신 기술을 다양한 브라우저에서 사용 가능하게 합니다.

CSR과 SSR의 차이는 무엇인가요?

CSR은 클라이언트 사이드 렌더링이라는 뜻으로 초기 로드 시 빈 HTML과 Javascript를 로드하는데 빈 HTML에 Javascript를 이용해서 DOM을 동적으로 생성해서 그리게 됩니다.
동적으로 DOM을 그리기 때문에 원하는 내용만 업데이트 할 수 있다는 장점이 있습니다.
하지만 첫 로드 시 모든 로직이 담겨있는 Javascript를 다운로드 하다 보니 로딩 속도가 길다는 단점이 있습니다.

SSR은 서버 사이드 렌더링이라는 뜻으로 서버에서 렌더링하여 완성된 HTML 파일을 로드해줍니다. SSR은 페이지의 HTML을 다운받기 때문에 CSR보다 초기 로딩이 빠르고, 개별 페이지를 넘겨 받기 때문에 각 페이지에 대한 정보를 입력할 수 있어 SEO를 향상시킬 수 있습니다.
하지만 링크 이동시 화면 깜빡임 현상이 있을 수 있고, 페이지 이동이 CSR보다 느립니다. 그리고 Javascript 다운이 늦어진다면 기능이 동작하지 않는 경우가 있습니다.

CORS는 무엇인지, 이를 처리를 해본 경험을 말씀해주세요.

CORS란 교차 출처 리소스 공유로 한 출처에서 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제를 말합니다.
한 출처에서 다른 출처의 자원의 접근을 막는 이유는 보안 때문인데, 예전에는 이것을 절대적으로 지켰지만 기술이 발달하면서 서로 다른 출처끼리 데이터를 주고 받아야 하는 일이 많아졌고, 이에 따라 몇 가지 예외 상황에 대해서는 다른 출처로도 요청을 보낼 수 있게 허락하는 CORS가 나타나게 되었습니다.
CORS 에러를 해결하기 위해서는 서버측에서 접근 권한을 주는 헤더를 추가하거나 리액트에서 프록시 속성을 설정하는 경우가 있습니다.

웹 표준을 지키며 개발하시나요?

DOCTYPE 선언
시맨틱 태그 사용
CSS 스타일 시트 사용
웹 접근성 고려(alt, aria-label...)

쿠키와 세션, 웹스토리지에 대해 설명해주세요.

기본적으로 HTTP 프로토콜 환경은 무상태성이기 때문에 서버는 클라이언트가 누구인지 매번 확인해야 합니다. 이를 보완하기 위해 쿠키와 세션, 웹스토리지를 사용할 수 있습니다.

쿠키
쿠키는 클라이언트 로컬에 저장되는 데이터로 유효 기간이 지나지 않으면 브라우저가 종료되어도 유지된다는 특징이 있습니다.

세션
세션은 서버 측에 저장되며 브라우저가 종료될 때까지만 상태를 유지합니다. 데이터가 서버에 저장되기 때문에 쿠키보다 보안이 좋지만 사용자가 많아질수록 서버 메모리를 많이 차지하게 됩니다.

웹 스토리지
웹 스토리지는 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 추가된 저장소로 로컬 스토리지와 세션 스토리지가 있습니다.
로컬 스토리지는 사용자가 데이터를 지우지 않는 이상 브라우저를 종료해도 계속 남아있고 세션 스토리지는 브라우저가 종료될 경우 데이터가 제거됩니다.

타입스크립트를 사용하는 이유는 무엇인가요?

타입스크립트는 컴파일 언어이기 때문에 컴파일 과정에서 오류를 잡아내기 때문에 오류를 잡기 쉽습니다.
또한 타입스크립트를 사용하면 어떤 타입의 값을 리턴해야 하고 어떤 타입의 매개변수가 들어가는지 쉽게 알 수 있기 때문에 가독성이 좋고 협업에 도움이 됩니다.
또한 VSCode에서 타입스크립트를 사용하면 자동완성을 지원해주기 때문에 코드를 작성하는데 편리합니다.

크로스 브라우징 경험이 있으신가요?

~~예..~~
리액트 네이티브로 개발을 진행했을 때 안드로이드와 iOS가 사용하는 문법이나 기본으로 적용되어있는 CSS가 달라 두 기기에서 테스트 해보면서 작업을 했던 경험이 있습니다.

웹 소켓을 사용해보셨나요?

~~아니요~~
웹소켓은 클라이언트와 서버를 연결하고 실시간으로 통신이 가능하도록 하는 통신 프로토콜입니다.
웹소켓은 한 번의 요청으로 handShake 과정을 통해 연결을 유지하므로 양방향 통신과 데이터 이동 가능합니다.

웹사이트 성능 최적화에는 어떤 방법이 있나요?

Webpack을 통해 번들 된 자바스크립트 파일의 크기를 최대한 줄입니다.
CSS를 최적화 합니다.(리플로우, 리페인트를 고려한 스타일 작성)
이미지 최적화 합니다.(이미지 지연로딩 활용, 스프라이트 이미지 사용)
기타 등등..

bundle의 사이즈를 줄이려면 어떻게 해야 하나요?

소스 코드 최소화하기(Minify:압축하기, Uglify:난독화)

Webpack은 v4이상의 버전에서 mode가 production일 때 자동으로 압축과 난독화를 진행합니다. v5에서는 이 과정에서 사용되는 플러그인으로 terser-webpack-plugin을 내장하고 있습니다.
모종의 이유로 이 과정을 생략하고 싶다면 webpack 설정에 optimization:{minimize: false}를 추가하면 됩니다.

CSS 압축하기

CSS의 불필요한 공백을 제거하기 위해 Webpack의 CssMinimizerPlugin을 활용합니다. 추가적으로 CSS를 별개의 파일로 분리하기 위해서 MiniCssExtractPlugin을 활용합니다.

style-loader와 MiniCssExtract의 차이

style-loader는 DOM에 바로 CSS를 주입하고, MiniCssExtract는 JS 파일 하나 당 다른 CSS 파일을 생성합니다.

style-loader는 CSS 파일을 받아오기 위한 요청의 개수를 줄일 수 있어 페이지의 로딩 속도를 단축할 수 있지만 현재 페이지에서 불필요한 CSS까지도 주입될 수 있다는 단점이 있습니다.

반면에 MiniCSsExtract를 활용하면 별도의 요청을 보내야만 CSS를 불러올 수 있지만 현재 페이지에서만 사용될 CSS를 불러오기 때문에 불러올 데이터의 크기가 줄어듭니다.

번들을 나누지 않고 하나의 파일로 생성하거나, 페이지 간에 공유하는 스타일이 많으면 전자를, 코드 스플리팅을 적용해 번들 파일이 여러개이거나 페이지 별로 공유하는 CSS의 크기가 크지 않으면 후자를 선택하는 것이 좋습니다.

코드 스플리팅

코드 스플리팅은 반드시 필요한 코드만 불러오고 요청을 병렬적으로 처리해서 로딩 속도를 개선할 수 있습니다.

3-1. webpack 설정
자동으로 중복되는 코드를 판단해서 별도의 파일을 분리하도록 설정합니다.
```
output: {
// 번들에 별도의 이름 => 생성되는 파일 이름 충돌 발생 방지
 filename: '[name].bundle.js', 
 path: path.join(__dirname, '/dist'),
 clean: true
},
splitChunks: {
 chunks: 'all'
}
```
3-2.React.lazy를 활용해 페이지 분리하기
React.lazy와 React Router를 함께 사용해 각 루트를 동적으로 불러오면 코드가 실행됐을 때 그 모듈을 필요한 시점에 불러올 수 있습니다.

HTML CSS

Cascading에 관해서 설명해주세요.

Cascading은 위에서 아래로 흐른다는 뜻으로 스타일의 적용 규칙을 말합니다. 캐스캐이딩은 중요도, 명시도, 코드 순서 요소를 통해 우선 순위를 결정합니다.

CSS 애니메이션과 JS 애니메이션의 차이에 대해 설명해주세요.

간단한 애니메이션의 경우 CSS로 처리합니다. CSS 애니메이션은 외부 라이브러리를 필요로 하지 않고 반응형 구현이 가능하고 브라우저 렌더링 과정에서 layout이나 paint 단계를 거치지 않기 때문에 성능 개선에 효과적입니다.

CSS로 처리하기에 복잡하고 무거운 애니메이션들을 효율적으로 세밀하기 다루기 위해 JS 애니메이션을 사용합니다. 크로스 브라우징 측면에서 JS 애니메이션이 유리합니다.

Flexbox를 사용해보셨나요?

Flexbox는 요소를 한 방향으로 나열시킵니다. 레이아웃을 자유롭게 배치할 때 주로 사용합니다.

Grid 를 사용해보셨나요?

Grid는 2차원 적으로(두 방향)으로 나열시킬 수 있습니다. 주로 고정된 레이아웃에 사용합니다.

position 속성을 나열해주세요.

CSS에서 position속성은 기본 값인 static, 원래 위치를 기준으로 상대적으로 배치해주는 relative, 상위 요소를 기준으로 배치하는 absolute, 뷰포트에 고정으로 배치시키는 fixed, 스크롤을 내리다가 요소를 만나면 고정시키는 sticky가 있습니다.

참조
https://velog.io/@hozzijeong/WebPack%EA%B3%BC-Babel-%EA%B7%B8%EB%A6%AC%EA%B3%A0-Polyfill%EC%97%90-%EB%8C%80%ED%95%B4
https://story.pxd.co.kr/1662
https://interconnection.tistory.com/74
https://medium.com/@uk960214/%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94-1-%EB%B2%88%EB%93%A4-%ED%81%AC%EA%B8%B0-%EC%A4%84%EC%9D%B4%EA%B8%B0-react-webpack-minify-code-splitting-e2391e7e5f1b
https://runcoding.tistory.com/19
그 외 미처 추가하지 못한 출처들

박먼지

개발괴발

이전 포스트

프론트엔드 면접 질문 정리 Part1(CS, JS,React)

다음 포스트