Frontend interview 질문을
구글링,경험을 바탕으로 정리하기로 했다✨
https://joshua1988.github.io/web-development/interview/frontend-questions/
01. 바벨이란?
크로스브라우징 이슈를 해결하기 위해 생겨난 툴.
트랜스파일러의 역할을 함.
최신 ES6버전을 ES5로 변환함.
https://devowen.com/293
02. 폴리필(polyfill) 이란?
최신 ECMAScript환경을 만들기 위해 코드가 실행되는 환경에 존재하지 않는 빌트인, 메소드등을 추가하는 역할.
03. 실무에서는 웹팩으로 통합해 사용하는 경우가 많음 -> babel-loader를 사용함.
04. 웹팩 webpack이란?
- webpack == 모듈번들링
- 다수의 js파일을 하나의 js파일로 만들어주는것.
SPA(Single Page Application)하나의 html페이지에 연관되어있는 js파일들을 하나의 파일로 묶어줌. - 컴파일 시간을 줄여줌
- js파일로 만들어 웹페이지 성능을 최적화함.
05. React란?
https://velog.io/@stampid/React%EB%9E%80
페이스북에서 제공해주는 프론트엔드 라이브러리.
컴포넌트 기반.
한 방향으로 데이터가 흐름.
부모의 데이터를 올려주기 위해 state를 사용
props & State
props : 부모 컴포넌트에서 자식컴포넌트로 전달해주는 데이터
최상위 부모컴포넌트만 props를 변경 할 수 있음.
state : 동적인 데이터를 다룰때 사용함.
VirtualDOM
변경된 부분만 DOM에
06. CORS란?
Cross-Origin Resource Sharing
Resource Origin이 다를때 생기는 문제
Scheme, Host, Port - 세가지가 동일하면 해결할 수 있음.
https://evan-moon.github.io/2020/05/21/about-cors/
07. REST(아키텍쳐 원칙세트)API
https://gmlwjd9405.github.io/2018/09/21/rest-and-restful.html
Representational State Transfer의 줄임말
자원을 이름(자원의 표현)으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든 것
https://gmlwjd9405.github.io/2018/09/21/rest-and-restful.html
08. 브라우저 동작원리
Load-> Parsing->렌더틸트리만들기
->Layout:렌더트리배치->Paint그리기
09. async defer차이
https://beomy.github.io/tech/browser/async-defer/
async : 리소스 다운로드가 완료된 시점에서 스크립트가 실행됨
defer: HTML파싱하는 동안 리소스를 다운로드하고 HTML파싱이 완료되면 스크립트가 실행됨.
10.
SSR - Sever Side Rendering
CSR - Client Side Rendering
SSR
페이지를 이동할때마다 새로운 페이지를 요청.
SEO검색엔진 최적화 가능 - SSR을 통해 얻는 가장 큰 장점.
페이지 요청마다 새로고침이 발생.화면깜빡임.부하.
CSR
첫 요청 할때 한 페이지만 불러옴.
사용자의 행동에 따른 필요한 부분만 다시 읽어들임. 필요한 부분만 리로딩 없이 서버로부터 화면을 갱신함.
