프론트 엔드 기술면접 준비하기_Typescript,React

요즘 이직을 하기 위해 면접을 많이 다니고 있는데 생각보다 쉽지가 않네요

기술면접 때 제가 부족했던 부분들을 정리해 보았습니다

 

 

Typescript

타입스크립트란 자바스크립트 타임 개념을 추가한 언어이며 자바스크립트에서 확장된 언어입니다

타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 한 번에 컴파일 과정을 진행해야 합니다

 

 

왜 타입스크립트를 사용하는가?

타입 스크립트를 사용하면 에러를 사전에 방지할 수 있으며 개발툴에 기능을 최대한 활용할 수 있어서 개발 생산성을 높일 수 있습니다

 

타입 스크립트 기본 타입

String, boolean, Number 같은 타입은 제외한 주요한 타입입니다

Tuple : 배열의 길이가 고정되어 있고 배열의 각요소들에 타입이 정해져 있는 배열입니다

let arr: [string, number] = ['hi', 10];

 

Enum : 자주 사용하는 특정값(상수)들을 모아놓은 집합니다

enum Avengers { Capt, IronMan, Thor }
let hero: Avengers = Avengers.Capt;

 

Any : 모든 타입에 대해 허용하겠다는 의미를 가진 타입입니다

let str: any = 'hi';
let num: any = 10;
let arr: any = ['a', 2, true];

 

never : 함수 끝에 절대로 도달하지 않는다는 의미를 가진 타입입니다

function neverEnd(): never {
  while (true) {

  }
}

 

unknown : any와 비슷하지만 변수에 접근하거나, 할당, 사용하기 전 타입을 체크해야 되는 특징을 가지고 있습니다

let valueNum : unknown = 10;

 

리버스 매핑

숫자형 이넘에만 존재하는 특성으로 키로 값을 얻을 수 있고 값으로 키를 얻을 수 있는 특성입니다

enum Enum {
  A
}
let a = Enum.A; // 키로 값을 획득 하기
let keyName = Enum[a]; // 값으로 키를 획득 하기

 

 

 

인터페이스

상호 간의 정의한 약속 또는 규칙이며 타입스크립트에서는 아래와 같은 범주에서 인터페이스를 정의할 수 있습니다

• 객체의 스펙(속성과 속성의 타입)
• 함수의 파라미터
• 함수의 스펙(파라미터, 반환 타입 등)
• 배열과 객체를 접근하는 방식
• 클래스

let person = { name: 'Capt', age: 28 };

function logAge(obj: { age: number }) {
  console.log(obj.age); // 28
}
logAge(person); // 28

 

추상 클래스

특정 클래스의 상속이 되는 클래스이며 해당 클래스 속성, 메소드의 모양을 정의합니다

 

제네릭

타입을 마치 함수의 파라미터처럼 사용하는 타입이니다

한 가지 타입보다는 여러 가지 타입에서 동작할 수 있는 컴포넌트 혹은 함수를 만드는 데 사용됩니다

function getText<T>(text: T): T {
  return text;
}

 

타입 추론

타입스크립트가 코드를 해석하는 동작을 의미합니다

• 가장 적절한 타입 : 표현식을 이용하여 가장 근접한 타입을 추론합니다
• 문맥상 타이핑 : 코드의 위치(문맥)를 기준으로 타입을 정의합니다

 

타입 호환

특정 타입과 다른 타입이 잘 맞는지에 대한 의미를 가지고 있습니다

 

타입 가드

타입을 알 수 없거나 될 수 있는 타입이 여러 개일 때 조건문을 이용해 타입을 좁혀나가는 것을 의미합니다

 

타입 별칭

특정 타입이나 인터페이스가 참조할 수 있는 타입 변수를 의미합니다

 

타입 별칭과 인터페이스의 차이

가장 큰 차이점은 확장 가능/불가능의 대한 여부입니다

인터페이스는 확장이 가능하며 타입 별칭은 확장이 불가능합니다

 

d.ts

타입 스크립트가 코드를 해석할 때 타입 추론을 도와주는 파일입니다

 

유틸리티 타입

이미 정의되어 있는 타입을 변환할 때 사용하는 문법입니다

• Partial(파셜) : 특정 타입의 부분집합을 만족하는 타입을 정의합니다

interface Address {
  email: string;
  address: string;
}

type MayHaveEmail = Partial<Address>;
const me: MayHaveEmail = {}; // 가능
const you: MayHaveEmail = { email: 'test@abc.com' }; // 가능
const all: MayHaveEmail = { email: 'capt@hero.com', address: 'Pangyo' }; // 가능

• Pick(픽) : 특정 타입의 특정 속성들을 선택하여 타입을 정의합니다

interface Hero {
  name: string;
  skill: string;
}
const human: Pick<Hero, 'name'> = {
  name: '스킬이 없는 사람',
};

• Omit(오밋) : 특정 타입의 지정된 속성만 제외한 타입을 정의합니다

interface AddressBook {
  name: string;
  phone: number;
  address: string;
  company: string;
}
const phoneBook: Omit<AddressBook, 'address'> = {
  name: '재택근무',
  phone: 12342223333,
  company: '내 방'
}
const chingtao: Omit<AddressBook, 'address'|'company'> = {
  name: '중국집',
  phone: 44455557777
}

 

맵드 타입

기존에 정의되어 있는 타입을 새로운 타입으로 변환해 주는 문법입니다

 

 

React

useEffect

함수형 컴포넌트에서 사이드 이펙트를 수행하기 위해 사용되는 훅입니다

여기서 사이드 이펙트란 데이터 가져오기, DOM 조작 등과 같은 다름 컴포넌트에 영향을 미칠 수 있는 동작을 의미합니다

동작 조건

• 컴포넌트가 마운트 되었을 때 : useEffect 의존성 배열에 아무 상태도 넣지 않으면 내부 함수들은 컴포넌트가 마운트 되었을 때 실행이 됩니다
• 의존성 값이 변경이 되었을 때 : useEffect 의존성 배열에 넣은 상태가 변경이 되면 useEffect 내부에 함수들이 실행이 됩니다
• 컴포넌트가 언마운트 될 때 : useEffect 내부함수에서 반환하는 함수를 클린업이라고 하는데 이 함수는 컴포넌트가 언마운트될때 실행이 됩니다

 

useState

함수형 컴포넌트에서 상태를 쉽게 관리하기 위한 훅이며 상태가 변경되었을 때 자동 렌더링을 지원해 줍니다

• state를 직접 변경하지 않고 setState를 쓰는 이유
  • state를 직접 변경하려고 시도한다면 리액트는 컴포넌트를 다시 렌더링해야 하는지 알 수 있는 방법이 없습니다. 그래서 setState를 사용하면 리액트는 컴포넌트의 UI를 업데이트할 수 있습니다
• setState 가 비동기 인 이유
  • 비동기적으로 처리함으로써 여러 상태를 한 번에 업데이트하여 DOM이 여러 번 재렌더링 되는 것을 방지해 줍니다

 

useRef

DOM 요소에 직접 접근하거나 임의의 값을 저장하는 데 사용되는 훅입니다

 

useMemo

메모이제이션을 통해 계산비용 높은 값을 캐싱하고 이전 계산결과를 재사용합니다

 

useCallback

함수를 메모이제이션을 하여 불필요한 재생성을 방지하고 이전에 생성된 함수를 재사용합니다

 

redux

• react에서 전역 상태를 관리하기 위한 라이브러리
• 커다란 하나의 store라는 공간이 존재하며 여기서 상태를 총괄합니다
• 이 store는 순수함수인 리듀서를 통해서만 변경이 가능합니다
• 리듀서는 type과 payload를 속성으로 갖는 단순객체인 액션 이벤트가 발생했을 때 실행이 됩니다
• 액션 이벤트는 디스패치라는 함수에 단순 객체인 액션을 넣어 발생시킵니다

 

recoil

redux와 마찬가지로 react에서 전역 상태를 관리하기 위한 라이브러리입니다.

atom과 selector라는 주요 구성요소를 활용하여 상태를 단순화 시 킥 공유 상태 관리를 쉽게 해 줍니다

• atom : recoil의 기본 단위이며 상태를 표현합니다. key와 기본값으로 구성되어 있습니다
• selector : 순수함수이며 atom과 또 다른 selector의 파생 상태값입니다. 즉 상태를 변환하는 방법을 정의합니다

 

 

react-query

비동기 데이터를 가져오거나 캐싱, 동기화, 업데이트 및 자동 리프레시 등 과 같은 작업 수행에 도움을 주는 라이브러리

useQuery : 데이터를 조회하는 작업을 수행하는 훅입니다

• staleTime : 데이터가 오래되었다고 간주되기 전까지의 시간을 지정합니다
• cacheTime : 쿼리가 비활성화 이후 데이터가 캐시에 남아있는 시간을 지정합니다
• retry : 요청이 실패했을 경우 재요청하는 횟수를 지정합니다

 

useMutation : 데이터 변이(생성, 삭제, 수정)에 대한 작업을 수행하는 훅입니다

• onMutate : 변이가 일어나기 직전에 호출되는 함수입니다

 

낙관적 업데이트 : 서버에 요청을 한 후 응답을 기다리는 것이 아닌 예상한 결과가 성공적으로 완료될 것이다라고 간주하여 UI를 업데이트하는 방식, 캐시 된 데이터 기반으로 동작하며 API 호출 실패 시 롤백처리를 해주어야 합니다

 

invlidateQueries : 이전에 저장되어 있는 캐시를 무효화시키고 서버로부터 새로운 데이터를 가져와 캐시에 저장하는 방식입니다. 현재 클라이언트에 캐시와 서버의 상태를 동기화할 때 주로 사용합니다

 

prefetchQuery : 데이터를 미리 조회하는 방식을 제공해 줍니다. 서버로부터 데이터를 받은 후 캐시에 저장을 하고 결과값을 반환하지는 않습니다. 이후 동일한 키에 useQuery가 호출이 되면 캐싱된 데이터를 반환해 줍니다

 

 

아랫부분은 SSR 프레임워크를 사용하셨다면 받을 수 있는 질문들입니다(Nextjs)

 

CSR과 SSR 차이

CSR(Client Side Rendering) : 브라우저가 HTML 파일과 JS파일을 서버로부터 받은 후 렌더링하여 사용자의 상호작용에 따라 동적으로 화면을 렌더링 하는 기법

• 장점 : 서버의 부하가 적고, UX 가 좋습니다
• 단점 : 초기 로딩 속도가 느리고 SEO에 취약합니다

 

SSR(Server Side Rednering) : 브라우저 페이지를 요청할 때마다 서버로부터 HTML, CSS, JS 파일 및 데이터를 받아와 렌더링 하는 기법입니다

• 장점 : 초기로딩 속도가 빠르고 검색엔진 최적화가 가능합니다
• 단점 : 서버의 부하가 커지고 UX가 CSR에 비해 좋지 않습니다

 

검색엔진최적화(SEO)

웹사이트를 구축하거나 운영할 때 사용자들이 검색 엔진에서 웹사이트를 쉽게 찾을 수 있도록 웹사이트의 구조, 디자인, 콘텐츠 등을 최적화 화는 과정을 의미합니다

• Nextjs에서 SEO 적용하는 방법
  • 메타 태그 최적화 : 각 페이지에 있는 메타 태그들은 SEO에서 중요한 역할을 하고 있습니다. title과 meta description 태그들이 검색 결과에 직접 표시되므로 명확하게 전달해야 합니다 Nextjs에서는 next/head라는 모듈을 사용하여 각페이지별 고유한 메타 데이터를 전달할 수 있습니다
    
    
  • SSR 또는 SSG 적용 : Nextjs를 사용하면 웹사이트의 각 페이지를 서버에서 미리 렌더링 하거나 미리 생성할 수 있습니다. 이러면 검색엔진 크롤러가 콘텐츠를 더 쉽게 읽을 수 있습니다
    
    
  • Semantic HTML : Semantic HTML을 사용하면 검색엔진에게 웹사이트의 콘텐츠 구조를 명확하게 전달하는데 도움이 됩니다
    
    
  • URL 구조 최적화 : URL은 가능한 사용자가 이해할 수 있는 단어로 구성되어야 되며 각 페이지의 콘텐츠를 잘 설명해주어야 합니다. Nextjs를 사용하면 파일 기반 라우팅 시스템을 통해 URL 구조를 쉽게 최적화할 수 있습니다

 

SSG(정적사이트생성)

웹사이트의 각페이지를 빌드 시점에 HTML 파일로 생성하는 방법입니다. 브라우저에서 직접 로드되므로 서버에서 페이지를 렌더링 하고 필요한 데이터를 가져오는 시간이 없습니다

Nextjs에서는 'getStaticProps' 함수를 사용하여 빌드 시점에 페이지에 필요한 데이터를 가져올 수 있습니다 'getStaticProps'는 빌드시점에 한 번만 실행이 되므로 동적으로 변하는 데이터에는 적합하지 않습니다

 

ISR(증분적 정적 재생성)

SSG의 한계를 극복하기 위해 Nextjs 9.5 버전에서 도입되었습니다. SSg는 사이트의 모든 페이지를 빌드시점에 생성하므로 사이트에 수많은 페이지가 이거나 데이터가 자주 변경되는 경우 문제가 발생할 수도 있습니다

 

이러한 문제점을 해결하기 위해 ISR은 페이지가 요청될 때 재생성되도록 설정할 수 있습니다. 이렇게 되면 최초 요청 시점의 데이터로 페이지를 렌더링 하고, 이후 요청에서는 미리 생성된 페이지를 제공합니다

 

이런 기능을 활용하면 사용자는 항상 빠르게 페이지를 로드하면서 최신 데이터를 볼 수 있습니다

 

'getStaticProps' 함수에서 'revalidate' 옵션을 설정하면 ISR을 사용할 수 있습니다

 

 

참고문서

https://joshua1988.github.io/ts/

타입스크립트 핸드북