[JavaScript / React]

브라우저 렌더링 과정

첫번째는 Parsing단계로, HTML파일과 CSS파일을 파싱하여 각각 트리를 만듭니다. HTML 파일을 해석하여 DOM 트리를 구성하고, 파싱 중 HTML에 CSS가 포함되어 있다면 CSSOM 트리 구성 작업도 함께 진행합니다. 두번째는 Style단계로, 두 트리를 결합하여 렌더 트리를 만듭니다. Render 트리는 화면에 보여질 내용만 포함하기 때문에 display: none과 meta tag같은 화면에 보이지 않는 것들은 포함되지 않습니다. 세번째는 layout단계로, Render 트리를 화면에 어떻게 배치해야 하는지 노드의 정확한 위치와 크기를 계산합니다. 네번째는 Paint단계로, 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고 레이어를 만듭니다. 마지막으로 Composite단계로, 레이어를 합성하여 실제 화면에 나타냅니다.

*파싱이란 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽고, 실행하기 위해 텍스트의 문자열을 분해하고 구조를 생성하는 일련의 과정을 말한다.
*렌더링이란 HTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에 사용자가 눈으로 볼 수 있도록 시각적으로 출력하는 것을 말한다.

주소창에 URL을 입력하면 어떤일이 생길까요?

첫번째로 사용자가 브라우저 주소창에 URL을 입력하면,
두번째로 브라우저가 URL의 IP주소를 찾기 위해 캐시에서 DNS 기록을 확인합니다.
DNS 기록을 찾기 위해 브라우저는 브라우저 캐시, OS 캐시, 라우터 캐시, ISP 캐시 차례대로 확인합니다.
세번째로 만약 요청한 URL이 캐시에 없다면 ISP의 DNS 서버가 URL을 호스팅하는 IP주소를 찾습니다.
네번째로 브라우저가 해당 웹 서버와 TCP 연결을 시작합니다.
다섯번째로 TCP 연결이 설정되면 브라우저가 웹 서버에 HTTP 요청을 처리하고 응답을 보냅니다.
그렇게 응답을 보내면 브라우저가 HTML 컨텐츠를 보여주게 됩니다.

CORS란? 대응 방법은?

서버와 브라우저 간에 서로 통신을 할 때, 서버는 브라우저가 자원에 접근하는 것에 대해 권한을 부여하고 이를 알려줘야 합니다. 그러지 않을 시 브라우저 측에선 해당 자원에 접근하는 것이 안전하지 않다고 판단하여 통신을 차단해버리는데, 이 때 발생하는 것이 CORS 오류입니다. 이에 대응하기 위해 서버 측에서 브라우저에게 접근에 대한 권한이 있음을 알리는 방법과 응답 헤더의 Access-Control-Allow-Origin에 접근을 허용할 출처를 반환하는 방법이 있습니다.

RESTful API란?

RESTful API는 HTTP URL을 통해 사용자가 받고자 하는 리소스를 명시하고 POST, GET, PUT, DELETE와 같은 HTTP Method를 통해 서버에 요청을 보내면 서버는 리소스를 확인하여 응답하는 방식인 REST 규격을 준수하는 API를 의미합니다.

GET과 POST의 차이, PUT과 PATCH의 차이점은?

  GET은 서버로부터 데이터를 받아오기 위한 메서드이고, POST는 서버에 데이터를 전송하기 위한 메서드입니다. 
  PUT은 리소스의 모든 것을 업데이트하지만, PATCH는 리소스의 일부를 업데이트합니다.

localStorage, sessionStorage, cookie의 차이

localStorage는 같은 도메인에 대하여 같은 정보를 저장하며, 창을 닫거나 탭을 닫는 등 세션이 만료되어도 정보가 지워지지 않습니다. sessionStorage는 같은 도메인이더라도 탭, 창 별로 서로 다른 정보를 저장하며, 세션이 만료되면 데이터도 함께 사라집니다. Cookie는 용량이 상당히 작은 텍스트 파일로, 만료 기간을 가져 일정 시간이 지나면 만료되어 데이터가 삭제됩니다.록 돕는다 물론 특정 도메인과 경로에 대한 요청에만 포함되도록 cookie 선택적 전송도 가능한다

  팝업 창 : Cookie
  자동 로그인 : LocalStorage
  입력 폼 정보 :  SessionStorage 
  비로그인 장바구니 :  SessionStorage

JWT 방식과 Session 방식의 차이

Session은 서버의 메모리를 사용하여 데이터를 저장하고, 로컬에는 세션 ID만을 쿠키에 저장하여 이를 서버로 보내 데이터를 받아오는 방식이므로, 매번 유저가 요청할 때마다 전체 데이터를 보내주어 서버에 과부하가 생길 위험이 큽니다. JWT는 필요한 정보를 payload에 담고, 암호화/복호화 데이터를 header에 넣어 한 번에 암호화하고, 이 토큰을 서버에 보내 검증 여부만 서버에서 전송받으므로 서버에 무리가 덜하지만 토큰을 탈취당하면 보안상 문제가 발생할 수 있습니다.

SEO란?

검색 엔진 최적화의 약어로 검색 엔진이 보다 컨텐츠를 잘 이해하고, 사용자에게 제공할 수 있도록 도와주어 사이트를 개선하는 프로세스를 의미합니다. 사이트의 디렉토리 구조가 단순하고, 의미가 명확한지, 독창적인 메타 데이터와 URL 구조, 사이트 접근과 크롤링에 대한 처리를 담당하는 robot.txt의 구성, 페이지 순위, 이미지 최적화 등을 고려해볼 수 있습니다.

CSR과 SSR의 차이점

  SSR이란 Server Side Rendering의 약자로 말 그대로 서버쪽에서 렌더링 준비를 마친상태로 클라이언트에 전달하는 방식이다.
  CSR이란 Client Side Rendering의 약자로 말 그대로 SSR과 달리 렌더링이 클라이언트 쪽에서 일어난다. 
  즉, 서버는 요청을 받으면 클라이언트에 html과 JavScript를 보내주고 클라이언트는 그것을 받아 렌더링을 시작하게 된다.


  1. 웹 페이지를 로딩하는 시간
  웹 페이지 로딩의 종류는 두가지로 나눌 수 있다.
  하나는 웹 사이트의 가장 첫 페이지를 로딩하는 것과 나머지를 로딩하는 것.

  첫 페이지 로딩시간

  CSR의 경우 html, CSS와 모든 Script들을 한 번에 불러온다. 
  반면 SSR은 필요한 부분의 html과 Script들만 불러오게 된다. 따라서 평균적으로 SSR이 더 빠르다.
  나머지 로딩시간
  첫 페이지를 로딩한 후, 사이트의 다른 곳으로 이동하는 식의 동작을 가정한다면 CSR은 이미 첫 페이지 로딩할 때 나머지 부분을 구성하는 코드를 받아왔기 때문에 빠르다. 
  반면, SSR은 첫 페이지를 로딩한 과정을 정확하게 다시 실행한다. 그래서 더 느리다.

 2. SEO 대응
검색 엔진은 자동화된 로봇인 '크롤러'로 웹 사이트들을 읽는다. 
  CSR은 JavaScript를 실행시켜 동적으로 컨텐츠가 생성되기 때문에 JavaScript가 실행되어야 meatadata가 바뀌었다. 
  SSR은 애초에 서버 사이드에서 컴파일 되어 클라이언트로 넘어오기 때문에 크롤러에 대응하기 용이하다.

3. 서버 자원 사용
SSR이 서버자원을 더 많이 사용하게 된다. 매번 서버에 요청을 하기 때문이다.

  사용 권장
  - SSR을 사용하는 경우

  네트워크가 느릴때 (CSR은 한번에 모든것을 불러오지만 SSR은 각 페이지 마다 불러오기 때문)
  SEO(검색엔진 최적화)가 필요할 때.
  최초 로딩이 빨라야하는 사이트를 개발할 때
  메인 Script가 크고 로딩이 매우 느릴 때 CSR은 메인 스크립트가 로딩이 끝나면 API로 데이터 요청을 보낸다. 
  하지만 SSR은 한번의 요청에 아예 렌더가 가능한 페이지가 돌아온다.
  웹 사이트가 상호작용이 별로 없을 때

  - CSR을 사용하는 경우
  네트워크가 빠를 때
  서버의 성능이 좋지 않을 때
  사용자에게 보여줘야하는 데이터의 양이 많을 때 (로딩창을 띄울 수 있는 장점이 있다.)
  메인 Script가 가벼울 때
  SEO에 상관 없을 때
  웹 어플리케이션에 사용자와 상호작용할 것들이 많을 때(아예 렌더링 되지 않아 사용자의 행동을 막는 것이 경험에 오히려 유리함.)

DOM과 가상 DOM이란?

Document Object Model의 약자로, HTML, XML 문서의 프로그래밍 인터페이스를 의미합니다. HTML은 브라우저에서 실행될 수 있게끔 DOM Tree로 파싱되고, 이를 바탕으로 렌더링이 됩니다. 가상 DOM은 추상화된 DOM을 뜻합니다. 기존 DOM을 조작하고 렌더링하는 부분에서 오는 시간을 줄입니다. 그리고 DOM과 유사한 객체를 메모리에 올려놓고, 변경 사항이 생기면 가상 DOM을 바꿔 실제 돔에서는 변경 사항만 변경하여 더 반응성 빠른 웹을 구현할 수 있습니다.

‘attribute’와 ‘property’의 차이점

  attribute 와 property 를 한국어로 번역하자면 둘다 '속성' 이라는 의미를 가지고 있다. 
  단순히 단어명이 같은 것을 떠나서 실제로 둘은 html 요소에 대한 클래스와 아이디와 같은 속성을 가리킨다. 
  이처럼 어트리뷰트와 프로퍼티의 둘은 같은 의미를 내포하지만, 웹 프로그래밍에서 이 둘은 구체적인 차이점이 존재 한다.

  HTML의 Attribute
  어트리뷰트는 HTML의 속성이다. 
  엘리먼트에 아이디나 클래스와 같은 추가적인 정보를 일컫는다고 보면 된다

  DOM의 Property
  프로퍼티는 DOM의 속성이다. 
  즉, html의 attribute를 DOM 내에서 대신해서 표현이라고 보면 된다.

  attribute는 html 안에서 property 는 DOM tree 안에서 존재한다. 
  이것이 뜻하는 바는 attribute는 정적으로 변하지 않고 property는 동적으로 그 값이 변할 수 있다는 의미를 내포하고 있다. 
  예를 들어 체크 박스 태그가 있을 때 유저가 체크박스에 체크를 하면 attribute의 상태는 변하지 않지만 property의 상태는 checked로 변하게 된다.

  HTML에 미리 정의된 태그의 속성 뿐만 아니라 개발자가 임의로 엘리먼트에 사용자 정의 속성을 만들어 넣을 수도 있다.
  그런데 프로퍼티의 특징으론 엘리먼트가 가진 모든 속성이 프로퍼티로 되지는 않다는 점이다. 
  HTML에 지정된 속성들은 프로퍼티로도 표현되지만, 엘리먼트에 임의로 지정한 사용자 정의 속성은 프로퍼티로 자동으로 표현되지 않는다. 

Cascading이란?

`
Cascading은 '위에서 아래로 상속, 종속하는' 이라는 의미를 내포하고 있다.
따라서 적용된 여러 스타일을 중에서 어떤 스타일로 브라우저에 렌더링할지 결정하는 원리로 이해할 수 있다.

Cascading은 스타일 우선순위 기준에 따라 보여지는 원리이다.
`

  어떤 스타일을 먼저 적용할지를 결정하는 것을 스타일 우선순위라 부르는데 가장 먼저 중요도를 고려한다.

  윈도우와 같이 시스템에 저장된 스타일 시트가 가장 먼저 적용된다. 
  다음으로는 !important 속성을 사용해 정의한 스타일이 적용된다. 
  그 다음엔 개발자가 정의한 스타일이 적용된다. 
  마지막으로 브라우저에서 default 값으로 가지고 있는 User Agent Style Sheet가 적용된다.

 중요도
시스템 스타일 > !important > 개발자 작성 스타일 > User Agent Style

중요도에 의해서 결정되지 못했다면 적용 범위를 고려해볼 수 있다.

적용 범위
인라인 스타일 > id 선택자 > class 선택자 > 태그 선택자

적용 범위에서도 결정하지 못했다면 마지막으로 소스 코드의 순서를 고려한다.

소스 코드 순서
나중에 나온 스타일이 먼저 나온 스타일을 덮어쓴다.

  상속되는 스타일로는 visibility, opacity, font, color, line-height, text-align, white-space 등이 적용된다.

Flex 속성 설명해주세요.

  Flexbox는 기존 컨텐츠를 수평으로 배치할 때 쉽게 해결할 수 있도록 추가된 기능입니다. 다양한 디바이스 환경에서 언제나 똑같은 레이아웃을 유지시켜줌으로서 반응형 웹 사이트에 유용하게 쓰입니다. Flex는 컨텐츠를 감싸는 상위 부모요소인 Flex Container와 각 컨텐츠들인 자식 요소 Flex Item으로 구성되어 있습니다. Flexbox 적용방법은 부모 요소인 container에 display:flex를 선언하고 전체적인 정렬과 관련된 속성인 flex-direaction, align-items, flex-wrap 같은 속성을 정의합니다. 그리고 자식 요소인 flex item에는 flex-grow, flex-shrink 같은 크기나 순서 같은 속성을 정의합니다.

Box model에 대해 설명해주세요.

  모든 HTML 요소는 BOX모양으로 구성되며, 이것을 박스모델이라고 합니다. 박스 모델은 총 네 영역으로 이루어지고, 이 네가지 영역은 padding, border, margin, content로 구분합니다. Content는 텍스트나 이미지가 들어가 있는 박스의 실질적인 부분으로 색상, 너비, 높이 등을 지정할 수 있으며, padding은 내용과 테두리 사이의 간격입니다. 또 border는 내용과 패딩 주변을 감싸는 테두리이며, margin은 테두리와 이웃하는 요소 사이의 간격입니다.

Display에 대해 설명해주세요.

  Display 속성은 요소를 배치할 때 사용합니다. None, block, inline, inline-block, flex, grid 총 5가지 속성이 있는데 none은 요소가 차지하는 공간이 사라지게 만듭니다.
Block은 블록 박스 요소에 기본으로 적용되는 값으로, 인라인 박스 요소를 블록 박스 요소로 변경시킬 수 있고, Inline은 box와는 반대로 사용됩니다.
Inline-block은 block 요소의 특성과 inline 요소의 특성을 따릅니다. Block 요소의 특성으로는 width와 height를 지정할 수 있고 margin, border, padding 영역을 갖는다는 점이 있습니다. Inline 요소의 특성으로는 요소의 크기가 내용에 의존적이라는 점과 줄바꿈 현상이 일어나지 않는다는 점입니다.
Flexbox는 1차원 레이아웃을 대상으로 하고, 컨테이너들의 레이아웃, 정렬 그리고 간격을 설정하는데 효과적입니다. Flexbox는 주로 반응형을 만들 때 사용됩니다.
Grid는 2차원 레이아웃을 대상으로 하고 그리드 기반의 레이아웃을 생성할 때 사용합니다.

크로스 브라우징이란?

  웹 페이지를 만들 때 모든 브라우저에서 깨지지 않고 의도한 대로 나오게 하는 작업을 말합니다. 크로스 브라우징을 고려하지 않으면 HTML, CSS, JS 파일 등 코드가 원하는대로 동작하지 않을 수 있습니다. 그래서 브라우저가 달라도 정상적으로 작동하도록 설정해줘야 하는데 이에 대한 사전 대응 방법 첫번째는 브라우저 호환성 검토합니다. Flex 등 브라우저 호환이 잘 되지 않는 것이 있기 때문에 타겟으로 한 브라우저가 호환이 되는지 확인해봐야 합니다. 두번째, CSS 초기화 작업을 하여 브라우저마다 저장되어 있는 기본 스타일 값들을 초기화 시켜줍니다. 마지막으로 CSS 속성인 prefix를 통해 브라우저별로 스타일 적용을 시키는 방법이 있습니다.

얕은 복사와 깊은 복사의 차이는?

  데이터나 객체를 비교하는 데 사용되는 방법입니다.
얕은 복사는 객체나 배열의 주소나 참조만을 복사하여 새로운 객체나 배열을 생성합니다. 하위 객체나 배열은 동일한 메모리 주소를 공유합니다.
깊은 복사는 객체나 배열의 내용을 재귀적으로 복사하여 완전히 새로운 객체나 배열을 생성합니다. 모든 속성과 하위 객체, 배열까지 새로운 메모리 주소를 할당합니다.

호이스팅이란?

  호이스팅이란 JavaScript에서 변수 선언과 함수 선언을 위로 끌어올리는 동작을 의미합니다. 하지만 실제로 코드의 위치가 변경되는 것은 아니며, JavaScript 엔진이 코드를 실행하기 전에 변수 선언과 함수 선언을 메모리에 미리 할당하는 것을 말합니다. 단 ES6 에서 도입된 let, const, class 를 사용한 선언은 호이스팅이 발생하지 않은 것처럼 동작합니다. Temporal Dead Zone 에 의해서 let 의 호이스팅은 에러를 발생시킨다.

var, let, const 차이점

``` var는 중복선언, 재할당이 가능하고 let은 재할당은 가능하지만 중복선언이 불가하며 const는 재할당, 중복선언 모두 불가능합니다. ```

Prototype과 Prototype Chaining이란?

  prototype 이라는 단어의 의미처럼, 어떠한 객체의 원형이 되는 객체를 의미합니다.  즉, prototype은  현재 객체의 부모객체를 의미합니다. 모든 인스턴스는 [[Prototype]] 라는 내부슬롯이 존재하고, 해당 슬롯에는 prototype의 참조가 존재합니다.
즉, 객체의 원형이 담겨져 있는 공간이라고 보면됩니다.

Prototype Chaining은 객체에서 자기 자신의 프로퍼티 뿐만이 아니라, 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티도 자신의 프로퍼티처럼 사용할 수 있게 하는 것입니다

이벤트 캡쳐링, 이벤트 버블링이란?

  이벤트 버블링이란 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상을 말합니다. 이벤트 캡쳐링은 이벤트 버블링과는 반대로 최상위 태그에서 해당 태그를 찾아 내려갑니다.

This란?

  This는 문맥에 따라서 다양한 값을 가지고 크게 4가지로 나뉩니다. 첫번째, 일반 함수로 호출된 경우 this는 전역 객체입니다. 그리고 이 this는 브라우저에서 window 객체가 됩니다. 두번째, 메소드로 호출되었다면 this는 메서드를 호출한 객체입니다. 세번째, 함수가 호출될 때나 생성될 때 apply, call 또는 bind가 사용되었다면 이 함수 안에서 this는 첫번째 인자값이 됩니다. 마지막으로 함수가 호출될 때 new 키워드를 사용했다면 이 함수 안의 this는 새로운 객체이기 때문에 빈 객체일 것입니다.

call과 apply의 차이점

  This가 함수 호출식에 따라 객체를 가리켰다면 call, apply, bind는 함수가 직접 실행 문맥을 결정합니다. 그 중 call과 apply는 함수를 호출해서 실행합니다. 두번째로 쓰이는 매개변수가 배열일 경우엔 apply를 사용합니다.

bind는?

  새로운 함수를 반환합니다. 따라서 보통 변수를 할당하여 호출하는 형태로 사용되고, 첫번째 인자로는 this 키워드를 지정하고 그 뒤의 인자들은 바인드 된 함수에 매개변수로 제공됩니다.

콜백 함수란?

  콜백함수는 함수의 매개변수로 다른 함수를 전달하고, 어떠한 이벤트가 발생한 후 매개변수로 전달한 함수가 다시 호출되는 것을 의미합니다. 보통 비동기 처리시 콜백함수를 사용하며, 콜백지옥에 빠지면 가독성이 떨어지기 때문에, Promise나 Async/Await를 이용해 보완할 수 있습니다.

실행 컨텍스트란?

  코드를 실행하기 위해 필요한 정보들을 가진 범위를 객체 형태로 나타낸 것입니다. 실행 컨텍스트는 VariableEnvrionment, LexicalEnvironment, ThisBinding 3가지로 구성되어 있는데
VariableEnvrionment는 현재 컨텍스트 내부의 식별자 정보인 EnvironmentRecord와 외부 환경 정보인 outerEnvironmentReference가 있고, LexicalEnvironment는 VariableEnvrionment를 그대로 복사하여 사용하나 변경 사항이 실시간으로 적용되어 VariableEnvrionment는 초기 상태를 저장하고, LexicalEnvironment는 최신 상태를 저장합니다. 마지막으로 ThisBinding는 this 식별자가 바라보고 있는 대상 객체를 뜻합니다.

화살표 함수와 일반 함수의 차이점

  화살표 함수는 함수를 간단하게 표현할 수 있는 ES6문법입니다. 일반 함수는 this가 동적으로 바인딩되는 반면, 화살표 함수는 바로 상위 스코프의 this와 같습니다. 또한, 화살표함수는 프로토타입 프로퍼티를 가지고 있지 않기 때문에 생성자 함수로 사용이 어려우며, 일반함수는 생성자 함수로 사용이 가능합니다. 그리고 일반함수에서는 함수가 실행될 때 암묵적으로 arguments변수가 전달되어 사용할 수 있지만, 화살표 함수에서는 arguments변수가 전달되지 않습니다. 그래서 객체 프로토타입으로 메소드를 선언할 때에는 화살표 함수는 적합하지 않습니다.

Promise란?

  Promise는 비동기 연산이 종료된 이후에 결과값이나 실패 사유를 처리하기 위한 것이고, Promise를 이용하면 동기 메서드처럼 값을 반환할 수 있습니다. Promise는 resolve와 reject를 파라메터로 받고 있는데 비동기 작업이 성공하면 resolve 함수를 호출하고, 실패하면 reject 함수를 호출합니다.
  메서드: 첫번째로 then() 메서드는 2개의 콜백함수를 인수로 받는데 하나는 Promise가 이행했을 때고 다른 하나는 거부했을 때의 콜백 함수입니다. 두번째로 Catch() 메서드는 거부했을 때 실행되는 메서드입니다. 세번째로 finally() 메서드는 이행과 거부 상관없이 비동기 작업이 완료된 후 실행합니다. 네번째로 Promise.all() 메서드는 배열이나 객체에 있는 모든 프로미스가 이행하거나 거부하였을 때 Promise를 반환합니다. 단, 하나라도 거부되는 것이 있다면 어떤 데이터도 얻지 못해서 Promise.all() 메서드는 정보를 다 보여주거나 혹은 다 보여주지 않을 때 사용하는 것이 좋습니다. 마지막으로 Promise.race() 메서드는 배열이나 객체 안에 있는 프로미스 중 이행, 거부 상관없이 가장 먼저 완료된 Promise의 결과를 받을 수 있습니다.

Async/await란?

  async와 await는 기존의 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 코드 가독성을 좋게 만들어주는 비동기 처리 패턴입니다. async가 붙은 함수는 프로미스를 반환하고 프로미스가 아닌 것은 프로미스로 감싸 반환하며, await 키워드를 만나면 프로미스가 처리될 때까지 기다립니다. 프로미스가 처리되어 resolve 될 땐 값만 따로 추출하여 리턴할 수 있습니다.

클로저는 무엇인가요?

  외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있는데 이런 중첩 함수를 클로저라고 합니다. 클로저는 상태가 의도치 않게 변경되지 않도록 상태를 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하기 위해 사용됩니다.

event.target과 event.currentTarget의 차이점

event.target은 부모로부터 이벤트가 위임되어 발생하는 자식의 위치 즉, 내가 클릭한 자식 요소를 반환하지만 event.currentTarget은 이벤트가 부착된 부모의 위치를 반환합니다.

Virtual DOM 작동 원리

  우선 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링합니다. 이전 Virtual DOM에 있던 내용과 현재 Virtual DOM의 내용을 비교하여 바뀐 부분만 실제 DOM에 적용합니다.

Virtual DOM이란?

  DOM을 자주 조작하면 성능에 많은 영향을 끼치기 때문에 속도가 느려집니다. 이는 웹 브라우저에서 DOM에 변화가 일어나면 브라우저 렌더링 과정을 거치게 되고 이 과정에서 시간이 소요되고 성능이 저하되는 것입니다. 그렇기 때문에 Virtual DOM을 사용해 DOM 처리 횟수를 최소화하고 효율적으로 진행하게 해줍니다.

왜 React를 사용하는지?

  우선 Virtual DOM이 존재하기 때문입니다. 기존의 DOM은 페이지가 바뀔 때마다 새 HTML을 로드하면서 DOM 전체를 바꾸게 되는데 Virtual DOM은 DOM과 비교해서 달라진 부분만 찾아 바꾸기 때문입니다
두번째로 컴포넌트 단위 작성인데, 컴포넌트 단위로 작성하게 되면 또 다른 웹에서 재사용이 가능해집니다. 이는 생산성과 유지 보수를 용이하게 합니다.
마지막으로 커뮤니티입니다. 개발을 하다 보면 막힐 때나 오류가 발생할 때가 생깁니다. 리액트는 vue에 비해 사용자가 많고 페이스북에서 업데이트를 계속 하고 자료가 방대하기 때문에 리액트를 사용하게 되었습니다.

클래스 컴포넌트와 함수 컴포넌트의 차이

  클래스 컴포넌트의 경우 state의 사용이 가능하여 상태 저장이 가능하고, 리액트 라이프 사이클 메서드를 사용 가능합니다. 함수가 아닌 클래스이기 때문에 return문이 없고 render() 함수가 필수적으로 있어야 JSX 반환이 가능합니다.
함수 컴포넌트는 클래스보다 선언하기 좀 더 편하고, 함수는 한번 실행되고 나면 메모리 상에서 사라지기 때문에 메모리 자원을 덜 사용하는 것이 장점입니다. 함수형 컴포넌트에서는 hook을 사용할 수 있고, return문을 사용합니다.

useMemo()란?

  컴포넌트의 성능을 최적화시킬 수 있는 hook이고, Memoization된 값을 반환합니다.
여기서 memoization된 값은 연산의 결과값을 메모리에 저장해두고 동일한 입력이 들어오면 값을 재사용한다는 것을 의미합니다. 이렇게 되면 함수 호출 시간도 줄이고, props로 받는 하위 컴포넌트의 재렌더링도 방지할 수 있습니다.

useCallback()이란?

  Memoization된 함수를 반환하는 대표적인 hook입니다.
함수를 props로 넘겨줄 경우 함수는 객체이고, 새로 생성된 함수는 다른 참조 값을 가져 하위 컴포넌트가 재렌더링이 발생하게 됩니다. 이런 경우 useCallback()으로 함수를 감싸면 의존성 배열 안에 넣어준 값이 바뀔 경우를 제외하고 항상 동일한 객체를 넘겨줌으로써 불필요한 재렌더링을 방지할 수 있습니다.

React의 라이프사이클에 대해 설명해주세요

  리액트는 컴포넌트 기반의 view를 중심으로 한 라이브러리입니다. 그러다 보니 각각의 컴포넌트에는 라이프사이클 즉, 컴포넌트의 수명 주기가 존재합니다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전부터 페이지에서 사라질 때 끝이 납니다. 라이프 사이클은 크게 보면 컴포넌트가 처음 실행될 때인 mount, 데이터에 변화가 있을 때인 update, 컴포넌트가 제거될 때인 unmount 이렇게 3개로 나눌 수 있습니다.

MVC, MVVM 모델에 대해 설명해주세요.

  MVC 패턴은 모델 + 뷰 + 컨트롤러를 합친 용어입니다. 모델은 데이터 및 데이터를 처리하는 부분이고, 뷰는 사용자에게 보여지는 UI 부분입니다. 그리고 컨트롤러는 사용자의 입력을 받고 처리하는 부분입니다. MVC는 사용자의 액션이 컨트롤러에 들어오면, 컨트롤러가 액션을 확인하고 모델을 업데이트합니다. 컨트롤러는 모델을 나타내줄 뷰를 선택하고, 뷰는 모델을 이용하여 화면을 나타냅니다. 컨트롤러는 여러 개의 view를 선택할 수 있는 1:N 구조이고, 뷰를 선택할 뿐 직접 업데이트를 하진 않습니다. 보편적으로 널리 사용되는 패턴이지만 뷰와 모델 사이의 의존성이 높고, 어플리케이션이 커질수록 복잡해 유지보수가 어렵다는 단점이 있습니다.
MVVM 패턴은 모델 + 뷰 + 뷰 모델을 합친 용어이고, 모델과 뷰는 MVC와 동일합니다. 뷰모델은 뷰를 표현하기 위해 만든 뷰를 위한 모델이자 뷰를 나타내기 위해 데이터 처리를 하는 부분입니다. 액션이 뷰를 통해 들어오면 뷰 모델에 액션을 전달합니다. 뷰 모델은 모델에게 데이터를 요청하고, 모델은 요청받은 데이터를 뷰 모델에게 응답하고, 뷰 모델은 받은 데이터를 가공하여 저장합니다. 뷰는 뷰 모델과 데이터 바인딩을 하여 화면을 그리는 동작 방식입니다. 이 패턴의 가장 큰 장점은 뷰와 뷰 모델의 의존성을 없애고, 각 부분이 독립적이라는 것입니다. 단점은 뷰 모델의 설계가 쉽지 않다는 점입니다. 이 패턴의 주요 목적은 로직의 분리이고, 리액트에서는 데이터와 화면 컴포넌트를 분리하는 것을 예시로 들 수 있습니다.

Flux 패턴에 대해 설명해주세요.

  Flux는 기존의 MVC 모델의 단점을 보완하기 위해 페이스북에서 발표한 디자인 패턴인데, 사용자 입력을 기반으로 Action을 만들고 Action을 Dispatcher에 전달하여 Store(Model)의 데이터를 변경한 뒤 View에 반영하는 단방향의 흐름인 디자인 패턴입니다. 기존의 MVC 패턴 같은 경우에는 데이터가 양방향으로 흐를 수 있기 때문에 조금만 서비스가 복잡해질 수록 많은 의존성이 생길 수 있고 데이터의 흐름을 유추하기가 상당히 어려워집니다. Flux 패턴의 등장은 이런 맥락에서 예측 가능성을 높이기 위해 나왔다고 볼 수 있습니다. 각 요소들이 단방향 흐름에 따라 순서대로 역할을 수행하고, View에서 새로운 변경이 생기면 다시 같은 순서로 실행함으로서 흐름을 예측할 수 있게 된다는 장점이 있습니다.

웹팩과 바벨에 대해서 설명해주세요

  웹팩은 여러 개의 파일을 하나로 합쳐주는 모듈 번들러입니다. 웹팩은 모듈 지원, 파일 분할, css loader, jsx 변환 작업을 해줍니다. 그리고 여러 개로 나눠진 자바스크립트 파일을 html이 실행할 수 있는 하나의 자바스크립트 파일로 합쳐줍니다. 이로 인해 네트워크 접속의 부담을 줄여 더 빠른 서비스를 제공할 수 있습니다.
바벨은 대표적인 트랜스파일러인데 모든 브라우저가 ES6 문법을 제공하지 않기 때문에 ES5 문법으로 변환시켜줍니다.

NPM이란?

  Node Packaged Manager의 약자로, NPM은 Node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램입니다. 자바스크립트 패키지 매니저이고, Node.js에서 사용할 수 있는 모듈들을 패키지화에서 모아둔 저장소 역할이기도 합니다. 많은 자바스크립트 프로그래머들이 유용한 패키지들을 만들어 NPM에 코드를 공개합니다.