본문 바로가기

기술면접

(16)
position 속성과 z-index의 연관성에 대해 설명하세요. position 속성은 태그를 어떻게 위치 시킬지를 정의하고, z-index는 어느 객체가 앞으로 나오고 뒤에 나올지 배치 순서를 결정하는 속성입니다. z-index는 포토샵으로 생각한다면 레이어를 생각할 수 있으며, 값이 클 수록 상단에, 값이 작을 수록 하단에 위치합니다. z-index는 position 속성이 적용된 요소에서만 작동합니다. 먼저 position의 속성에 대해 설명하자면, position 속성이 없는 태그들은 순서대로 쌓입니다. 하지만 position 속성이 있는 태그라면 없는 태그들보다 위에, 나오는 순서대로 쌓입니다. position 속성(기본값인 static 제외)과 z-index 값이 모두 존재하는 태그라면 z-index 값을 비교해 z-index 값이 큰 태그가 위에 쌓입니다..
객체 지향 프로그래밍이란 무엇인가요? 보통 OOP라고 많이 부르는 객체지향 프로그래밍은 프로그램을 명령어 또는 함수의 목록으로 보는 전통적인 명령형 프로그래밍의 절차지향적 관점에서 벗어나 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 말합니다. 특정한 개념의 함수와 자료형을 함께 묶어서 관리하기 위해 탄생했으며 객체 내부에 자료형(필드)와 함수(메소드)가 같이 존재합니다. 객체지향 프로그래밍은 객체 간의 독립성이 생기고 중복코드의 양이 줄어드는 장점이 있으며 독립성이 확립되면 유지보수에도 도움이 될 수 있습니다. 객체 지향 프로그래밍의 대표적인 특징 4가지 추상화 (Abstraction) 캡슐화 (Encapsulation) 상속 (Inheritance) 다형성 (Polymorphism) 추상화란, 객..
event loop에 대해서 설명하세요. 자바스크립는 싱글쓰레드 언어입니다. 자바스크립트 엔진은 하나의 call stack을 가지고 있기때문에 한번에 하나의 동작만을 처리할 수 있기 때문입니다. 그런데 브라우저가 동작하는것을 보면 많은 부분이 동시에 처리 되는 것처럼 느껴집니다. 이와같이 자바스크립트의 동시성을 지원하는 것이 이벤트 루프입니다. 브라우저 환경에는 자바스크립트 엔진과 call stack 말고도 web API와 event loop 그리고 task queue가 있어 비동기 처리가 가능합니다. 자바스크립트의 코드가 실행되면 비동기 호출에 대한 처리를 브라우저에서 web API로 넘기고 동기적인 처리를 call stack에 담아 먼저 처리하게 됩니다. 이후에 비동기 호출에 대한 처리가 끝나면 web API는 비동기 호출의 콜백 함수를 t..
리액트 라우터같은 Client Side Routing 에 대해서 설명하세요. 라우팅이란? 라우팅은 사용자가 웹사이트의 다른 페이지로 이동하는 프로세스로 라우팅과 렌더링은 애플리케이션의 효율성과 속도에 미치는 영향을 추측하는데 도움이 됩니다. 클라이언트 측 라우팅은 페이지의 JavaScript에 의해서만 처리됩니다. 사용자가 링크를 클릭할 때마다 URL 표시줄이 변경되고 페이지에 다른 뷰가 렌더링됩니다. 이러한 SPA는 전체 페이지를 새로 고치지 않기 때문에 이용자에게 부드러운 UI와 UX를 제공합니다. 리액트를 이용해서 SPA을 구현할 때 리액트 라우터를 사용하면 어떤 메뉴를 클릭했을 때 페이지를 이동하지 않고 업데이트되는데 이 때 url 역시 바뀝니다. 브라우저의 이전페이지, 다음페이지 버튼 역시 정상적으로 일반적인 웹페이지를 이동하듯이 적용됩니다. 이러한 클라이언트 사이드 라..
리액트에 있는 라이프사이클과 각 라이프사이클의 역할을 설명하세요. React의 모든 컴포넌트는 초기화 단계, 업데이트 단계, 소멸단계를 거칩니다. 이러한 흐름을 Lifecycle 생명주기 라고 합니다. 초기화 단계는 최초에 컴포넌트 객체가 생성 될 때 한번 수행되는 과정입니다. 업데이트 단계는 컴포넌트가 마운트 된 이후 컴포넌트의 속성값(props) , 상태값 (state)이 변경되면 업데이트 단계가 실행 됩니다. 소멸단계는 컴포넌트가 소멸 할 때의 과정입니다. 초기화 단계 초기화 단계는 최초에 컴포넌트 객체가 생성 될 때 한번 수행되는 과정입니다. 초기와 단계에서 실행되는 함수 Constructor() : 메소드를 바인딩하거나 state(상태)를 초기화 하는 작업이 없다면 constructor(생성자)가 없어도 됩니다 . react 컴포넌트의 constructor(생..
state를 직접 변경하지 않고 setState를 사용하는 이유에 대해서 설명하세요. state는 immutable(불변성)을 유지해야하기 때문입니다. 컴포넌트는 현재의 this.state와 setState를 비교해서 업데이트가 필요한 경우에만 render 함수를 호출하는데, state를 직접 수정하게 되면 리액트가 render 함수를 호출하지 않아 상태 변경이 일어나도 렌더링이 일어나지 않을 수 있습니다. 상태 변경을 추적하고 변경에 따라 구성요소를 다시 렌더링하려면 setState를 사용해야 합니다. setState는 비동기적으로 동작하기 때문에 state가 직접 수정되어 여러번 상태를 업데이트 하는 경우, 이전 업데이트 내용이 다음 업데이트 내용에 덮어 쓰여질 수가 있어 예상치 못한 곳에서 버그가 발생 할 수 있습니다. PureComponent에서 동작하지 않습니다. PureComp..
Reflow가 발생하는 이유와 방지 방법은 무엇인가요? Reflow가 발생하는 이유 Reflow는 브라우저 렌더링을 위해 DOM 트리를 그리는 과정에서 발생합니다. 생성된 DOM 노드의 레이아웃 수치(너비, 높이, 위치 등) 변경 시 영향 받은 모든 노드의(자신, 자식, 부모, 조상(결국 모든 노드) ) 수치를 다시 계산하여(Recalculate), 렌더 트리를 재생성하는 과정입니다. Reflow가 일어나는 상황은 페이지 초기 렌더링(최초 layout 과정), 노드의 추가 혹은 제거, 요소의 위치나 크기 변경 (margin, padding, border, width, height 등), 폰트 변경과 이미지 크기 변경, 윈도우 리사이징이 있습니다. Reflow 최적화 방법 이러한 reflow 발생비용을 최적화하기 위한 방법은 여러가지가 있습니다. 스타일을 변경..
웹페이지 redirect의 다양한 구현법에 대해서 설명하세요. redirect는 영어단어 뜻 그대로 새 방향으로 돌린다는 뜻으로 웹페이지에서 redirect 구현 방법은 크게 세가지로 HTTP redirect, HTML redirect, JavaScript redirect가 있습니다. HTTP redirect는 3xx 상태 코드를 지닌 응답을 활용해 리다이렉트를 할 수 있습니다. 리다이렉트 응답을 수신한 브라우저는 제공된 새로운 URL을 사용해 즉시 로드합니다. HTTP redirect는 세가지 카테고리로 나누어지는데, 이는 영속적, 일시적, 특수 리다이렉션이 있습니다. 영속적인 리다이렉션: 영원히 지속됨을 의미합니다. 원래의 URL이 더이상 사용되지 않아야하며, 새로운 URL을 더 선호해야함을 시사합니다. 301 - moved permanently 308 - pe..

반응형