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

취업 관련

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

햄❤️ 2021. 6. 3. 16:05

728x90

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

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

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

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) 이슈

728x90