[모의면접] 띵스플로우 모의 면접(항해)

나는... 나는 말미잘이다.. 대답을 못한 나는 해삼이다...나는 생각을 멈춘 돌멩이다.... 😰😰😰😱😭

ㅇ늘은.. 떡볶이를 먹어야겠다... 꺼흐그흑 따흐흐흑 

그리고 앞으로 공부좀 더 열심히 해야겠다... 비가 온다... 내 눈물 가려줘 비야...

 

 1) 웹팩, 바벨? 

 ◼ 웹팩

 - 모듈(module) 번들러(bundler).

 - 의존성을 분석해 모듈을 번들(여러 개를 하나로 묶어주는, 웹팩 실행 후에 나오는 결과 파일)시켜주는 역할. 빌드(build)라는 과정을 통해 하나의 파일로 만들어 준다.

 - 웹팩을 이용하면 여러가지 리소스를 사용자에게 전달하기 좋은 형태로 만들 수 있다.

  ◼ 바벨

- 입력과 출력이 모두 자바스크립트 코드인 컴파일러

- 구형 브라우저들이 ES6 를 제대로 호환하지 못해, 오래된 브라우저에서도 사용 가능하게 하고자 필요

- 최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있도록 코드 자체를 변환(ES6을 ES5로 변환) 6to5
   JSX문법을 ES5코드로 변환

- @babel/core: 바벨을 실행하기 위해 필수로 설치

◼  폴리필

- 오래된 브라우저를 지원하기 위해 바벨로 문법을 변환하는 동시에 폴리필(polyfill)도 사용해야 한다.

- 폴리필이란 런타임에 기능을 주입하는 것

 

2) 네이버에 주소를 치면 일어나는 과정

  - 클라이언트가 요청! 서버의 응답!

3) 브라우저 렌더링 과정
  - 

 

 

 4) 리덕스 쓰는 이유와, 그 외 상태관리 할 수 있는 것들? Context API가 뭔지 

 ◼ 리덕스를 쓰는 이유

   - 리액트의 상태관리 라이브러리이자 상태관리를 전역으로 하기 위해 사용
 

◼ 그 외 리액트의 상태관리 할 수 있는 것

   - Mobx, Context API, Recoil 등이 있음 (Recoil 읽어보쟝) 

◼ Context API? 

   - 프로젝트 안에서 전역적으로 사용 할 수 있는 값을 관리 할 수 있음(꼭 상태가 아니어도 함수, 외부 라이브러리 인스턴스 혹은 DOM도 가능하다)

   - 생성할 때 React.createContext() 함수 이용. 파라미터에는 Context 의 기본값 설정
      이 함수를 호출하면 Provider 와 Consumer 라는 컴포넌트들이 반환!
       Provider는 Context에서 사용할 값 설정할때 사용, Consumer는 나중에 우리가 설정한 값을 불러와야 할 때 사용

// const 내보낼 이름
const Context = React.createContext(null);

import React, { createContext } from 'react';

  - ⭐상태관리를 위해 왜 리덕스를 쓰나?  
     1) 미들웨어, 리덕스 devtools 등 다양한 추가 라이브러리를 통해 긴밀하고 정확한 코딩을 할 수 있지만, Context API는 부가적인 기능을 제공하지 않음.
     2) 리덕스는 컴포넌트에서 글로벌 상태의 특정값을 의존하게 될 때 해당값이 바뀔때만 리렌더링되게 최적화가 되어있어, 의존하지 않는 값이 바뀌게 될 때에는 낭비 렌더링이 발생하지 않음! but Context API는 이런 성능 최적화가 이루어지지 않음.

 

5) ES6에서 나온것? 애로우펑션과 그냥 함수의 차이?

  ◼ ES6에서 추가된 것

(와 엄청 많네🙄 , 세부 내용은 별도로 공부해서 정리하쟈 😆)

    - String Literal, 객체 비구조화, 객체 리터럴, for .. of, Spread Operator, Rest Parameter, Arrow Function, Default Params, let & const, import & export, Map & Set 

  ◼  Arrow Function과 그냥 함수의 차이

6) 비동기 함수 처리 과정

7) SSR이란?

8) 타입스크립트

 - TypeScript는 JavaScript 기반의 언어이며 자바스크립트의 Superset(상위확장) 
 - 정적타입(컴파일 단계에서 오류를 포착할 수 있는 장점)
 - 강력한 객체지향 프로그래밍 지원
 - ES6의 새로운 기능들을 사용하기 위해 Babel과 같은 별도 트랜스파일러(Transpiler)를 사용하지 않아도  ES6의 새로운 기능을 기존의 JavaScript 엔진(현재의 브라우저 또는 Node.js)에서 실행 가능
 - 명시적인 정적 타입 지정은 코드의 가독성을 높이고, 디버깅을 쉽게 함

9) 리액트 성능 최적화 방법

 아 헉 거창한 성능 최적화 방법이 있는 줄 알고 대답 못했는데... 내가 썼던...코드에 썼던 것들이라니 후.... 😫

  - useMemo() :  React에서 CPU 소모가 심한 함수들을 캐싱하기 위해 사용. 인자로 함수와 의존 값(dependencies)을 받는다. 두번째 의존값의 인자가 하나라도 변경되면 값을 재 계산(비었다면 렌더시마다 항상 새로 계산해서 return)

  - Lazy Loading : 부하를 단축하기 위해 자주 사용되는 최적화 기법, React.lazy() API를 사용, 동적 import를 사용하여 component를 생성하고 렌더링 하는 걸 쉽게 만들어준다

 - React.memo() : 컴포넌트 렌더링 결과 재사용. 함수 컴포넌트를 캐시하는데 사용된다. (컴포넌트 감싸서 props가 동일하다면 재렌더링 하지않고 렌더링 결과를 재사용)

 - useCallback() : 함수 선언을 memoize 하는데 사용. 기존 함수를 기억해서 사용하고, 이를 props로 전달

 - React.PureComponent : shouldComponentUpdate를 구현하지 않아도 변화가 있을때만 렌더링 해준다. 

 - shouldComponentUpdate : 현재 counter와 미래의 counter가 바뀌면 렌더링한다. 

* React.memo와 useMemo의 차이점
 - React.memo는 HOC(고차컴포넌트)로 컴포넌트를 인자로 받아 새로운 컴포넌트롤 다시 return
    useMemo는 Hook이라 함수형 컴포넌트에서만 사용 가능

 

 10) React와 Vue, Angular의 차이점  

 🔸 공통점? : SPA 기반 프론트엔드 프레임워크/라이브러리

 ◼ React 

 - VirtualDom
 - 코드 작성할때 자유도가 높은 편 -> 장점이자 단점이 됨
 - 단방향 바인딩(부모 컴포넌트로부터 props로 불리는 속성이 전달)
 -  JSX 문법 사용(JS + XML). 코드 내에서 HTML과 JS를 함께 사용 가능. 완성 코드는 JS로 트랜스파일 됨
 - 앵귤러, 뷰와 비교하여 플레인 JS와 가까움
 - Next.js를 통해 SSR 쉽게 구현 가능
 - UI 라이브러리(프레임워크) 중 가장 사용자가 많아서 개발 생태계가 활성화 되어있음
 - JS기반 템플릿을 사용하기 때문에 테스트와 구조화가 용이하고 큰 규모의 어플리케이션 개발에 유리

 ◼ Vue

 - 가장 적은 러닝커브(웹 표준에 대한 이해가 있다면 단 하루만에 기본적인 사용이 가능할 정도로 입문이 쉬움)
 - Virtual Dom
 -  Angular에서 핵심적인 요소들이 가진 장점을 기반으로 가볍게 제작한 프레임워크
 - 컴포넌트 기반 프레임워크로서 코드의 재사용성이 높고 관리가 용이
 - 단방향 바인딩과 양방향 바인딩을 목적에 맞게 적절히 사용 가능
 - 라이브러리의 크기가 리액트에 비해 절반 정도 수준으로 작다.
 - 타입스크립트와의 결합이 용이하지 않다.
 - 타 프레임워크(혹은 라이브러리)에 비해 점유율이 낮으며, 개발 생태계가 작다.
- 작은 규모의 어플리케이션의 개발시 용이하며 속도 측면에서 큰 장점을 보인다. 

 ◼ Angular

- 프레임워크임 
- 쉽게 양방향 바인딩을 구현할 수 있다.(MVC 패턴의 모델이 변경되면 뷰가 함께 변경되고, 뷰의 상태가 변경되면 모델의 상태도 함께 변경됨)

* MVC(Model - View - Controller), 모델이란 애플리케이션의 정보, 데이터, 데이터 가공을 책임지는 컴포넌트이며 뷰는 사용자 인터페이스 요소를 나타냄(입력/출력). 컨트롤러는 데이터와 사용자 인터페이스 요소를 잇는 다리역할(이벤트 처리)

 - 컴포넌트간 서비스 사용 및 의존성 관리 용이, 코드 상 밀접 연관이 적은 컴포넌트 테스트 용이
- CBD(Component Based Development) 도입을 통해 개발 생산성을 높였으며 대규모 어플리케이션에 적합한 구조
 - 타입스크립트를 채택함으로서 다양한 도구의 지원을 받을 수 있으며, 코드의 가독성과 안정성 향상
 - 가장 복잡하고 큰 러닝커브(초기 도입에 많은 시간이 소모되며 엔지니어 구인이 쉽지 않음)
 - SEO(Search Engine Optimization) 이슈