프론트엔드 면접3 프론트 엔드 면접 3 React란? - 페이스북이 만든 사용자 UI 구축을 위한 라이브러리 - 기본 뷰를 날려버리고 가상 돔을 사용해 처음부터 새로 랜더링 한다. React의 특징 - 컴포넌트 구조 - 단방향 데이터 흐름 - ECMAScript(ES6) - JSX 문법 - Virtual DOM React Life Cycle - React Component가 DOM에 마운트되고 해제되는 모든 과정을 React Life Cycle이라고한다. Component의 Life Cycle Mounting -> Update -> Unmounting -> Error Handiling Mounting constructor() -> static getDerivedStateFromProps() -> render() -> componentDidMo.. 2021. 11. 3. 프론트 엔드 면접준비 2 상황에 때른 this 의 값은? 1. global scope 에서 사용될 때 this는 전역 객체를 가리킵니다. 2. 함수에서 사용될 때에도 this는 전역 객체를 가리킵니다. 3. 객체에 속한 메소드에서 사용될 때 this는 메소드가 속한 객체를 가리킵니다. 4. 객체에 속한 메소드의 내부함수에서 사용될 때 this는 전역 객체를 가리킵니다. 5. 생성자에서 사용될 때 this는 이 생성자로 인해 생성된 새로운 객체를 가리킵니다. 필요시 bind를 사용해 this를 원하는 값으로 설정할 수 있습니다. 화살표 함수 - 화살표 함수는 익명함수로만 만들 수 있습니다. - 화살표 함수는 생성자로 사용할 수 없습니다. - 화살표 함수는 스스로의 this, argument를 가지지 않습니다. - 함수가 정의돈 스.. 2021. 11. 3. 프론트엔드 면접 준비 DOM (Document Objec Model) DOM은 HTML이나 XML 과 같은 마크업 기반의 문서들을 프로그램에서 읽어들이기 위해 만들어진 일종의 규칙입니다. 브라우저의 렌더링 과정 브라우저 주소창에 주소를 치면 해당 주소 서버를 찾아간다. DNS(실제 서버 주소를 알고있는 서버)서버가 연결해줄 곳을 찾음 서버에서 index.html 파일을 클라이언트로 보냄 브라우저는 텍스트로 이루어진 파일을 파싱 DOM트리를 만들어나감 중간에 link태크를 만나 css요청이 방생하면 요청과 응답과정을 거치고 css를 파싱함 css파싱이 끝나면 중단된 html파일을 다시읽으며 DOM트리완성함 완성됨 DOM트리와 CSSDOM트리를 합처 Render tree를 만들고 그린다. 이 전체 과정중 script 태그를 만나.. 2021. 11. 2. 이전 1 다음