프론트엔드 전반 면접 단골 질문 정리 (+ 리액트 핵심 용어)
프론트엔드 전반
- 브라우저 렌더링 과정에 대하여
1. 브라우저 주소창에 특정 주소가 입력된다
2. DNS가 해당 주소를 변경하여 실제 서버가 있는 곳으로 연결해준다.
3. 서버에서 index.html을 받아와서 브라우저에서 파싱하며 DOM트리를 만들어 나간다
4. link태그를 만나 css요청이 발생하면 중단된 CSSOM트리를 만든다.
5. 완성된 두개의 트리를 합쳐서 브라우저에 표시할 렌더트리를 만든다.
6. 렌더트리를 layout(배치)하고 화면에 painting(그림)한다.
7. 위 과정에서 script태그를 만나면 제어 권한을 JS 엔진에게 넘기고, 자바스크립트 파일을 로드해서 파싱하고 실행한다.
(script 태그에 defer 속성을 주면, 문서 파싱은 중단되지 않고 문서 파싱이 완료된 이후에 자바스크립트가 실행된다)
- Webpack, Babel
웹팩은 여러개로 나누어진 자바스크립트 파일을 html이 실행할 수 있는
하나의 자바스크립트 파일로 합쳐주는 모듈 번들러이다.
많은 파일을 받아오지 않아서 네트워크 부하 걱정을 덜 할수 있고,
같은 이름의 변수나 함수로 충돌 걱정을 하지 않아도 된다.
바벨은 대표적인 트랜스파일러이다. 트랜스파일러는 모든 브라우저가 ES6의 기능을 제공하지 않기 때문에
ES5코드로 변환시키는 과정을 수행해준다.
- ESLint와 Prettier
eslint같은 린터는 동적분석을하는(프로그램을 실행해야 오류가 보이는) 자바스크립트를 도와준다.
린터는 코드를 정적으로 분석해주어서, 프로그램이 실행되지 않아도,
에러코드를 잡아내고 코드 문법을 잡아내는등 코드 품질 개선에 도움을 준다.
prettier같은 코드포멧터는 띄어쓰기, 따옴포, 괄호 등 코드가 예쁘게 보이는것에 중점을 둔다.
이즈린트와 프리티어는 함께쓸때 최고의 린터 + 코드포멧터 역할을 하기때문에 같이 쓰자!
- CORS ?
CORS란 브라우저에서 cross-origin (프로토콜, 도메인, 포트) 요청을 안전하게 할 수 있도록 하는 메커니즘이다.
cors가 없이 모든곳에서 데이터 요청을 할수 있게 되면 보안상의 위험이 있기 때문에,
브라우저가 요청한 origin과 응답한 header의 값을 비교하여 유효한 요청이라면 리소스를 응답하는것이다.
보통은 출처를 비교하는 로직이 브라우저에서 이루어지기 때문에,
서버에서 정상적으로 응답을 하더라도 브라우저가 응답을 분석했을때
요청된 cors정책에 위반되었다면 cors위반 에러를 띄게 된다.
따라서 서버와 access-control-allow-origin이 유효한지 확인해야한다.
- Bundler의 사이즈를 줄이려면?
대표적인 번들러인 webpack의 webpack-bundle-analyer를 사용하여 알아보면된다.
어떠한 모듈이 용량을 많이 차지하는지 알수 있다.
사용되지 않는 라이브러리 라던지, 굳이 사용하지 않는 부분의 라이브러리를 발견하고 제거할 수 있다.
또한, 빌드 했을시 이전 빌드 결과물을 제거해주는 플러그인들을 webpack에 설정해주면 된다!
웹팩 4버전 이후부터는 mode라는 플래그가 추가되었다.
production이라는 모드는 프로덕션 환경에서 실제 앱을 빌드할때 코드 최소화,
dev 라이브러리 삭제등등 최적화를 진행하기 때문에 mode를 프로덕션으로 해주자 !
- 쿠키의 동작 방식
클라이언트가 페이지를 요청하면 서버에서 http 헤더에 쿠키를 포함시켜 응답한다.
쿠키에는 사용자 인증이 유효한 시간등을 명시할 수 있으며,
브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관한다.
같은 요청을 할 경우 http 헤더에 쿠키를 같이 보낸다.
서버에서 쿠키를 읽어 상태 정보 변경 필요가 있을때 쿠키를 업데이트 하여
변경된 쿠키를 돌려준다. 현재 클라이언트에서도 쿠키에 접근하여 수정해서 보낼수 있는 라이브러리가 있지만,
httpOnly값 설정으로 서버에서 클라이언트에서 document.cookie로 접근을 할 수 없도록 막을수 있다.
- JWT 토큰
인증에 필요한 정보들을 암호화시킨 JSON 토큰을 의미한다. http 헤더에 실어 서버가 클라이언트를 식별하는 방식이다.
토큰 내부에는 위변조 방지를 위해 전자서명도 들어있다. header, payload, signature부분으로 이루어져있다.
signature는 서버의 비밀키가 없으면 복호화 및 조작이 불가하다.
- 크로스 브라우징이란?
쉽게 말해 웹 페이지의 상호 호환성을 의미한다. 100% 똑같은 브라우저가 아니라, 공통적인 요소를 사용하여
동등한 수준의 정보와 기능 접근성을 가지고 있는 웹 페이지를 제작하는 기법이다. 해당 브라우저의 렌더링 엔진은
모두 다르기 때문에, 기본적인 기능 , 그래픽 인터페이스, 응답, 반응형등을 확인해야한다.
- 웹 성능 최적화 방법
1. 웹팩을 사용하여 하나의 자바스크립트 파일로 번들해준다.
2. 이미지 최적화 / 각 이미지의 용량을 계산하고, 로딩시점을 지정해준다.
3. 라이브러리 의존성 낮추기
(라이브러리 외부에 감쌀 모듈을 만들어 wrapping 한다. 내부 작동시 문제가 있더라도 외부에서 분기처리가 가능하다)
- 객체 지향 프로그래밍이란?
프로그래밍에서 필요한 데이터를 추상화 시켜 상태와 행위를 가진 객체로 만들고, 객체간의 상호작용을 통해 로직을 구성하는 프로그래밍 방법이다. (객체 : 사용되는 데이터 또는 식별자에 의해 참조되는 공간, 변수와 작업을 수행할 메소드를 서로 연관지어 묶어놓은것. )
모듈 단위로 개발하기 때문에 업무 분담이 편하고 대규모 소프트웨어 개발에 적합하며 유지보수가 편하고 코드 재사용성이 좋다.
설계시 많은 시간과 노력이 필요하고, 처리속도가 상대적으로 느리다.
- Rest란?
Rest란 http uri를 통해 자원을 명시하고, http method를 통해 해당 자원에 대한 crud를 적용하는것을 의미한다.
- 리플로우와 리페인트?
생성된 돔 노드의 레이아웃 변경시 영향 받은 모든 노드의
수치를 다시 계산하여 렌더트리를 재생성하는 과정이 (Layout) reflow이며,
렌더트리를 다시 그리는 과정이 (Paint) repaint이다.
모든 CSS 속성이 바뀐다고 하여 리플로우가 일어나는 것은 아니다.
단순히 background-color, visibility, outline등의 스타일 변경은 수치가 변경되지 않으므로 리페인트 과정만 일어난다.
- dependencies 와 devDependencies?
dependencies: 프로덕션 환경에서 응용 프로그램에 필요한 패키지
dev : 로컬 개발 및 테스트에만 필요한 패키지
- XSS와 CSRF?
크로스사이트스크립트 : 웹사이트에서 의도치않은 스크립트를 넣어서 실행시키는 기법.
유저의 쿠키정보, 비밀번호등의 api를 호출하는 행위가 가능하다. (클라이언트 쪽에서의 탈취)
CSRF : 서버쪽에서의 권한을 빼앗아 사용자가 의도하지 않은 행위를 하게 하도록하는 탈취이다.
- 실행컨텍스트?
실행할 코드에 제공할 환경 정보들을 모아놓은 객체.
이러한 정보들을 콜스택에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다. 외부 환경 정보를 구성하고, this값을 설정하는 등의 동작을 수행한다.
- CSS 관련
- display란?
화면에 어떻게 요소의 크기를 결정하여 보여줄것인가를 정하는 속성이다.
none : 보이지도 차지하지도 않음
block : 기본속성. width가 본인의 100%
inline : 컨텐츠의 크기만큼만 차지함
inline-block : 임의로 크기가 바뀌는 inline속성
- px, em, rem, 반응형?
픽셀은 모니터마다 고정 값으로 정해지기 때문에 css에서 절대값으로 분류된다. 각 모니터마다 1px이 어떤 수치인지 정해져있기 때문에 반응형 웹 작업에 효용적이지 못하다. 하지만 반응형 웹 작업할 의향이 없다면 얼마든지 사용가능하다.
em과 rem은 모두 픽셀과 연관이 되어있다.
rem은 웹에 가장 최상위인 루트 요소의 폰트 사이즈에 따라서 크기가 지정되는 단위이다.
그냥 쓰게 되면 기본 브라우저 16px에 맞추어 설정된다.
em은 부모요소, 즉 바로 상위요소의 폰트 사이즈에 따라서 크기가 지정되는 단위이다.
따라서 부모의 크기에 따라 비례적으로 늘고 줄어야 하는 요소는 em이 개인적으로 편했다.
(현재 단위가 직관적이지 않아 파악하는데 어려움이 있다. 주관주의! )
- vw, vh?
현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환하겠다는 뜻이다.
100vh, 100vw가 전체 화면의 기준이 된다. 열려있는 화면 전체의 상대길이이기 때문에 스크롤바를 포함한 길이를 반환한다.
%는 부모 요소의 길이에 맞게 반환하는 요소이다.
- CSS 선택자 우선순위(cascading)란?
같은 요소가 여러 css 선언의 대상이 된 경우, 어떠한 css 속성을 우선적으로 적용할 것인지를 결정하는 방법입니다.
점수가 높은 선언이 우수하고, 같으면 가장 마지막에 해석된 선언이 우선합니다.
!important가 무한대로 가장 높으며, inline 방식, id선택자, class선택자, 태그 선택자 등등으로 순위가 내려갑니다.
- flexbox란?
css의 display 속성 중 하나로, 컨테이너들의 레이아웃, 정렬, 간격을 설정하는데에 효과적이다.
row, column, align-items, justify-content등으로 정렬을 flex하게 할 수있으며,
우선순위를 가릴수 있는 order속성, 줄 단위의 정렬에 편의를 주는 flex-wrap 속성등을 줄 수 있다.
- SASS SCSS?
둘 다 CSS를 편리하게 사용할 수 있도록하며 추가기능이 있는 확장판 스크립트 언어이다.
SCSS가 CSS로 호환성이 더 좋고 사용자가 많다.
- Position 속성?
태그를 어떻게 위치시킬지를 정한다. static은 기본값, absolute는 절대 좌표, fixed는 스크롤과 상관없는 좌표, inherit는 부모태그 상속, relative는 원래 있던 위치를 기준으로 좌표지정 이다.
- CSS animation/ JS animation?
css animation은 비교적 간단한 Hover, transform등의 애니메이션을 구현, 처리하는데 사용한다.
하지만 reflow와 repaint 단계가 지속적으로 일어나 끊기는 듯한 느낌이 날 수있기 때문에 간단한 효과에만 사용하도록한다.
js animation은 보통 바닐라고 하게되면 계속해서 요소의 위치를 재계산하기 때문에 라이브러리를 쓴다. 브라우저 호환성 측면에서 css보다 뛰어나다.
리액트 관련
- React?
자바스크립트의 라이브러리로, 대표적인 싱글페이지 라이브러리.
html, css, javascript를 이용하여 웹페이지를 만들 수 있지만, 사용자와 상호작용하는 부드러운 UI를 만들수 있다.
대표적인 특징으로는 단방향 데이터 흐름, 컴포넌트 기반 구조, 가상 돔, prop와 state, jsx가 있다.
- React 라이프사이클?
리액트는 컴포넌트 기반의 라이브러리이기 때문에, 각 컴포넌트에는 생명주기가 존재한다.
컴포넌트의 수명은 보통 페이지에서 렌더링 되기 전 준비단계에서 시작되고 - 페이지에서 사라질때 끝이 난다.
라이프사이클은 크게 Mount(생성될때), Update(업데이트할때), Remove(제거될때)의 3가지 유형으로 나눌수 있다.
업데이트가 일어나는 경우는 4가지이다.
props가 바뀔때, state가 바뀔때, 부모 컴포넌트가 리렌더링 될때, 강제로 렌더링 트리거를 작동시킬때이다.
- 함수형 컴포넌트, 클래스형 컴포넌트?
기능은 동일하지만, 코드 구조에서 약간의 차이가 있으며
클래스 컴포넌트는 라이프 사이클 기능과 state관리 기능이 코드에 구현되고,
함수형 컴포넌트는 hook을 통해 기능을 활용하여 코드를 짤수 있다.
함수형 컴포넌트가 선언하기 좀 더 편하고, 메모리 자원을 덜 사용한다는 장점이 있다.
- 리덕스란?
자바스크립트 상태관리 라이브러리. 스토어라는 하나뿐인 데이터 공간에 항상 동일한 데이터가 있다.
액션이라는 객체를 통해서만 상태를 변경할 수 있고, 스토어에서 변경된 데이터를 읽어온다.
애플리케이션의 규모가 커질수록 데이터를 관리하기 까다롭기 때문에 상태를 잘 다루고 돔으로 업데이트하기까지 도와주는 라이브러리가 필요하기 때문에 리덕스가 필요하다.
- 리덕스 사가?
비동기적으로 api를 호출하여 데이터를 가져오는일과 그 부수효과를 쉽게 처리하기 위해 사용하는 라이브러리이다. 기존 요청을 취소해야한다거나, 여러개의 api를 순차적으로 호출해야하는 등 좀 더 까다로운 비동기 작업을 다루는 상황에 유용하다.
사가 내에서 제너레이터 함수를 사용하여 특정한 타입의 액션이 발생하였을때 원하는 비동기 함수를 실행시킬수 있다.