[React] React에 대해 정리2
✔ 다국어 페이지는 제공방식
SSR의 경우 HTTP 요청 시 클라이언트에서 Accept-Language 헤더와 같이 기본 언어 설정에 대한 정보를 보냄 서버는 이 정보를 이용하여 해당 언어로 된 문서 버전을 반환 반환된 문서는 lang 속성을 선언합니다. CSR의 경우 클라이언트 사이드에서 해당 언어 팩(JSON 등)을 가져와 출력
✔ 브라우저의 동작 원리
브라우저의 기본적인 역할은 HTML, CSS 명세에 따라 HTML 파일을 해석하여 표시하는 것 브라우저를 구성하는 요소는 사용자 인터페이스, 브라우저 엔진(크롬, 사파리는 Webkit, 파이어폭스는 Gecko), 렌더링 엔진, 통신, UI 백엔드, 자바스크립트 해석기, 자료 저장소 등이 있다. 렌더링 엔진은 먼저 HTML 문서를 파싱해서 DOM 트리를 구축 그리고 CSS 마크업을 파싱해서 앞서 구축한 DOM 트리와 함께 렌더링 트리를 만듬 렌더링 트리는 화면에 보여줄 것들만 가지고 있는 트리로, 구축이 되면 순차적으로 화면에 배치 부모에서 자식 순서로 배치가 진행되며 배치가 완료되면 그리기를 시작
✔ 빈 화면에서 렌더링이 완료되기까지 너무 오래 걸린다는 피드백이 있을 때, 어떻게 하면 이 문제를 해결할 수 있나?(단, 캐시는 이미 적용 됨)
script 파일을 body tag 가장 하단에 위치시키거나 script 태그에 async 속성을 부여
또는 네트워크 리소스 블라킹을 통해 불필요한 무거운 파일들을 제한
✔ 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)의 차이는?
서버 사이드 렌더링은 전통적인 웹 방식을 의미하며 페이지가 새로고침 될 때마다 서버로부터 리소스를 전달받아 화면에 렌더링 하는 방식 하지만 React, Vue 등의 라이브러리가 등장하면서 훨씬 더 좋은 성능의 SPA 방식의 개발 환경을 선호하기 시작 클라이언트 사이드 렌더링에서 서버는 단지 JSON 파일을 보내주는 역할만 할 뿐이며, html을 그리는 역할은 클라이언트에서 수행 하지만, CSR은 자바스크립트가 모든 동작을 수행한 후에 화면에 내용이 나타나므로 초기 구동속도는 SSR에 비해 느리다는 단점이 있습니다. SEO를 할 수 없고 보안적으로 취약하다는 문제점도 나타남
✔ 생명주기(lifecycle) 메소드는 무엇인가?
클래스 기반 컴포넌트는 그들이 mount(DOM에 렌더링)되었을 때, unmount될 때 등과 같이 그들의 생명주기 중 특정한 시점에 호출되는 특별한 메소드를 선언할 수 있다. 예를 들면, 컴포넌트가 필요로 하는 것을 셋팅 및 해제하거나, 타이머를 설정하거나 브라우저 이벤트에 바인딩하는 데 유용
아래의 생명주기 메소드들은 컴포넌트를 불러오기 위해 사용할 수 있다.
- componentWillMount: 컴포넌트가 생성된 후 DOM에 렌더링되기 전에 호출
- componentDidMount: 처음으로 렌더링이 끝나고 컴포넌트의 DOM 엘리먼트가 사용 가능할 때 호출
- componentWillReceiveProps: props가 업데이트 될 때 호출
- shouldComponentUpdate: 새로운 props를 받았을 때 호출되며, 성능 최적화를 위해 리랜더링을 막을 수 있다.
- componentWillUpdate: 새로운 props를 받았고 shouldComponentUpdate가 true를 리턴할 때 호출
- componentDidUpdate: 컴포넌트가 업데이트된 후에 호출
- componentWillUnmount: 컴포넌트가 DOM에서 제거되기 전에 호출되어 이벤트리스너 등을 정리할 수 있게 해준다.
✔ 요소를 배치하는 방법(static, relative, fixed, absolute)간의 차이
- static: 기본값으로 요소들이 겹치지 않고 상→하로 배치
- relative: 원래 배치되어야 할 위치에서 지정한 값 만큼 떨어진 곳에 요소를 배치
- fixed: 웹 브라우저 화면 전체를 기준으로 배치합니다. 스크롤을 하더라도 위치가 고정
- absolute: 가장 가까운 상위 요소의 위치를 기준으로 지정한 값 만큼 떨어진 곳에 요소를 배치
✔ 제어 컴포넌트와 비제어 컴포넌트의 차이
HTML 문서에서 많은 form 엘리먼트들(<select>, <textarea>, <input> 등)은 고유한 state를 유지- 비제어 컴포넌트는 DOM을 이러한 input들의 state에 대한 진짜 근원(source of truth for the state of these inputs)으로 취급- 제어 컴포넌트에서 내부 state는 엘리먼트의 값(value)를 추적하기 위해 사용 input의 값이 변경되면 리액트는 input을 다시 렌더링- 비제어 컴포넌트는 non-React 코드와 합칠 때(예를 들어 jQuery 플러그인의 일부를 지원해야 할 때) 유용하게 사용될 수 있다.
✔ 쿠키와 세션 스토리지, 로컬 스토리지의 차이
기본적으로 쿠키와 로컬 스토리지, 세션 스토리지는 모두 브라우저에서 데이터 저장소의 역할 웹에서 로그인을 하기 위해서는 토큰을 발급받아 API를 호출해야 한다. 하지만 반복되는 작업을 계속하게 되는 것은 비효율적이고, 이를 보완하기 위해 쿠키를 서버와 클라이언트에 생성해서 토큰 발급 없이 쿠키만 가지고 서버에 요청을 할 수 있게 된다. 쿠키는 저장 공간이 4KB로 작은 편인데 이러한 단점을 보완하여 만든 것이 웹 스토리지
웹 스토리지는 서버에 클라이언트 데이터를 저장하지 않는다. 웹 스토리지에는 로컬 스토리지와 세션 스토리지가 있으며, 로컬 스토리지는 브라우저에 정보가 계속해서 남아있는 반면, 세션 스토리지는 해당 세션이 끝나면, 즉 브라우저가 닫히면 데이터가 사라짐
웹 스토리지는 데스크탑 기준 5~10MB의 저장 공간을 가지고 있어서 쿠키에 비해 훨씬 저장공간이 크다는 장점이 있다. 웹 스토리지는 반면 HTML5부터 지원하기 때문에 이전 브라우저에서는 지원이 되지 않는다는 단점이 있다.
✔ 크로스 브라우징
크로스 브라우징은 웹 표준에 따라 서로 다른 OS 또는 플랫폼에 대응하는 것을 말합니다. 브라우저별 렌더링 엔진이 다른 상황 등 어떠한 상황 속에서도 문제 없이 동작하게 하는 것을 목표로 합니다. 프론트엔드 개발자는 여러가지 전략을 세울 수가 있으며, feature detection(기능 탐지)을 사용해서 해당 기능이 해당 브라우저에 있는지를 확인하는 방법을 사용할 수도 있습니다. 특히 한 쪽 환경에 최적화를 하는 것 보다, 전체적인 웹 표준을 지키는 데에 노력해야 합니다.
✔ 클래스형 컴포넌트와 함수형 컴포넌트의 차이
React 16.8(hooks 도입) 이전에는 내부 state를 유지하는데 필요한 컴포넌트를 생성하거나 생명주기 메소드(lifecycle methods)(즉, componentDidMount 및 shouldComponentUpdate)를 활용하기 위해 클래스 기반 컴포넌트를 사용
클래스 기반 컴포넌트는 리액트의 Component 클래스를 확장하는 ES6 클래스 또한 최소한 render() 메서드를 포함해야 한다.
(hooks 도입 이전의) 함수형 컴포넌트는 state를 갖지 않으며 렌더링할 출력 결과를 리턴(반환) 함수형 컴포넌트는 클래스 기반 컴포넌트보다 심플하기 때문에 props에만 의존하는 UI을 렌더링하는데 선호
✔ 클리어링(Clearing)에는 어떤 것들이 있으며, 각각은 어떨 때 사용하는가
float 속성의 영향에서 벗어나기 위해 사용하는 clear 속성은 float의 특성을 지워주는 역할 총 4가지 값이 있는데 both는 양쪽의 float 속성을 지워주며, left와 right는 각각 왼쪽, 오른쪽 속성을 지워주고 none은 기본 값으로 아무 것도 지워주지 않습니다. 보통은 float 속성을 감싸고 있는 요소들의 height를 조정하기 위해 사용
✔ 프로그레시브 렌더링(Progressive Rendering)이란?
프로그레시브 렌더링은 컨텐츠를 가능한 빨리 표시하기 위해 성능을 향상시키는 기술. 인터넷 속도가 느리거나 불안정한 모바일 환경이 아직 많이 남아있기 때문에 이러한 경우에 유용하게 사용 대표적으로 레이지 로딩이 있다. 이미지를 한 번에 로드하는 것이 아니라, 자바스크립트를 통해 사용자가 표시하려는 부분만 스크롤 시에 이미지를 로드하는 것
✔ 호이스팅
ES6 이후에서 함수나 변수 선언이 해당 유효 범위(스코프)의 최상단으로 끌어올려지는 것처럼 보이는 현상
실제로는, 컴파일 타임에 변수/함수 선언이 메모리에 들어가되, 할당은 코드를 작성한 위치에서 진행 호이스팅은 변수/함수 선언에만 적용되는데, 초기화만 해주는 경우 호이스팅이 일어나지 않습니다. 또한, var로 변수를 선언한 경우에만 호이스팅이 일어남
✔ 화살표 함수와 일반 함수의 차이
화살표 함수는 ES6에서 새로 추가되었다. 화살표 함수는 익명 함수로, 이름이 없는 함수, 즉시 실행이 필요할 경우 사용하는 함수
우선 바인딩이란, 함수 호출과 실제 함수를 연결하는 방법 함수를 호출하는 부분에서 실제 함수가 위치한 메모리를 연결하는 것도 바인딩. 바인딩은 정적 바인딩(static binding)과 동적 바인딩(dynamic binding)으로 구분할 수 있다. (정적 바인딩은 실행 시간 전에 일어남. 실행 시간에는 변하지 않는 상태로 유지. 동적 바인딩은 실행 시간에 이루어지거나 실행 시간에 변경됨.)
- this: 자바스크립트에서 모든 함수는 실행될 때마다 함수 내부에 this라는 객체가 추가된다. 일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정됨. 화살표 함수는 선언할 때 this에 바인딩할 객체가 정적으로 결정됨. 화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다(Lexical this). 또한, call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.
- 생성자 함수로 사용 가능 여부: 일반 함수는 생성자 함수로 사용할 수 있다. 화살표 함수는 생성자 함수로 사용할 수 없다. prototype 프로퍼티를 가지고 있지 않기 때문
- arguments 사용 가능 여부: 일반 함수에서는 함수가 실행될 때 암묵적으로 arguments 변수가 전달되어 사용 가능하다. 화살표 함수에서는 arguments 변수가 전달되지 않는다.
✔ box model이 무엇이며, 브라우저에서 어떻게 동작하는가
box model은 각각의 object를 박스 형태로 나타내어 브라우저에 배치하기 위한 규칙 W3C 박스 모델과 IE 박스 모델이 있으며 두 가지 박스 모델은 차이가 있다. W3C 박스 모델은 content-box로 width가 content만 포함하는 반면, IE 박스 모델은 border-box로 width에 content, padding, border를 모두 포함
✔ class와 id의 차이
id와 class의 차이는 id는 유일한 요소에 적용할 때, 그리고 css는 복수의 요소에 적용할 때 사용한다는 점 하나의 id는 한 문서에서 한 번만 사용 가능하지만, 하나의 class는 여러 번 사용이 가능 우선순위는 id가 class보다 높다.
✔ CORS가 무엇이며 어떻게 해결을 할 수 있나?
다른 도메인에서 리소스 요청 시 cross-origin HTTP에 의해 요청을 하는데, 대부분의 브라우저는 보안 상의 이유로 이 요청을 제한 이를 동일 오리진 정책(Same Origin Policy)이라고 한다. 요청을 보내기 위해서는 요청 보내는 대상과 프로토콜이 같아야 하고, 포트도 같아야 한다. JSONP(JSON-padding)을 통해 해결하거나 특정 HTTP 헤더를 추가하여 이 이슈를 해결할 수 있다. 이와 같이 타 도메인 간 자원을 공유할 수 있게 해주는 것을 Cross Origin Resource Sharing, 줄여서 CORS라고 한다.
