프론트엔드 기술면접 질문

드디어 프론트엔드 개발자로 취업을 성공했다. 그동안 여러 기술들을 사용법 위주로 익혔던터라 막상 기술 면접을 보니 생각보다 더 어려웠다. 그래서 앞으론 기술을 익힐 때 꼭 이론적인 부분도 이해하면서 깊이 공부해야겠다고 느꼈다. 아무튼 면접을 준비하면서 공부했던 내용들을 간단히 기록해 보자. 질문 항목은 내가 작업한 프로젝트 기술 스택 위주이다. 

---

React

• 리액트 장단점
  • 장점: 리액트는 기능 단위, UI 단위로 캡슐화하여(묶어서) 코드를 관리하기 때문에 재사용성이 높습니다. 또한 가상 돔을 사용해 이벤트 발생 시 UI를 빠르게 랜더링하여 사용자에게 좋은 퍼포먼스를 제공할 수 있습니다.
  • 단점: 클라이언트 사이드 랜더링 하기 때문에 초기 로딩시간이 깁니다. 그리고 SEO가 적절하지 않을 수 있습니다. 그 이유는 주로 검색엔진은 <meta> 태그에서 웹사이트 정보를 읽어오는데 하나의 index.html이므로 페이지가 전환되어도 추가 정보가 제공되지 않아서 입니다.
• 리액트 동작방식
  • 리액트는 실제 돔에 접근하여 조작하는 대신 가상 돔을 활용합니다. 만약 동적으로 데이터가 변화했을 때 직접적으로 돔을 조작하지 않고 새로운 가상 돔을 생성합니다. 그리고 새로 생성된 가상 돔과 이전에 저장된 가상 돔을 비교해 변경된 부분의 실제 돔만 변경합니다.
• 가상 DOM이란
  • 실제 돔을 추상화시킨 자바스크립트 객체입니다. 가상 돔이 사용되는 이유는 특정 데이터가 변경 되었을 때 실제 DOM의 경우 변경된 부분만 재랜더링이 일어나는 것이 아닌 전체 페이지가 재랜더링이 됩니다. 하지만 가상 돔의 경우 가상돔의 변경 전과 후를 비교한 후에 변경된 부분만 실제 돔에 적용하여 한번만 재랜더링이 일어납니다.
• 리액트 훅
  • v.16.8에 도입된 기능으로 함수형 컴포넌트에 사용되는 몇가지 기술들은 Hook이라고 부릅니다. 훅은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 제공합니다. 상태관리를 할 수 있는 setState, 랜더링 직후 작업을 설정하는 useEffect 등이 있습니다.
  • useState()를 이용하면 함수형 컴포넌트 안에서 state를 사용할 수 있습니다. setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행합니다. state가 변경되면 컴포넌트는 리랜더링됩니다.
  • useEffect()는 컴포넌트가 랜더링 될때마다 특정 작업(사이드 이펙트)을 실행할 수 있도록 하는 기능입니다. 사이드 이펙트로는 컴포넌트가 랜더링 된 이후 비동기 처리 등등이 사용됩니다.
• 배포
  • 빌드가 완성되어 실행 가능한 파일을 사용자가 접근할 수 있는 환경에 배치키시는 일입니다.
  • Heroku는 별도의 미들웨어나 프로그램 설치 없이 코드를 업로드라면 개발한 웹사이트를 띄어주는 클라우드 호스팅 서비스입니다.

JavaScript

• JWT
  • 인증받은 사용자들에게 암호화된 토큰을 발급해서, 서버에 인증이 필요한 리소스를 요청할 때 HTTP 헤더에 토큰을 함께 보내어서 유효성 검사를 하는 방식입니다.
  • 토큰은 한번 발급되면 유효기간이 완료될 때까지 계속 사용 가능함으로 어세스 토큰의 유효기간을 짧게 설정합니다.
  • 세션/쿠키 방식과의 차이점으로는 세션/쿠키는 세션 저장소에 유저의 정보를 넣고, jwt는 토큰 안에 유저의 정보를 넣습니다. 클라이언트 입장에선 동일하게 http 헤더에 정보를 실어보내지만 서버 입장에선 인증을 암호화하냐, 별도의 저장소를 이용하냐의 차이가 발생합니다.
• CSR과 SSR
  • 클라이언트 사이드 랜더링은 최초 로딩 시 서버에서 HTML, CSS, JS 등 각종 리소스를 모두 받아와서 클라이언트에서 랜더링 합니다. 이 때문에 초기 로딩 속도는 SSR에 비해 느리지만, 초기에 받은 리소스를 통해 클라이언트에서 화면을 제어하기 때문에 페이지 전환 속도는 SSR와 비교 시 더 빠릅니다. 자바스크립트를 실행시켜 동적으로 콘텐츠가 생성됩니다.
  • 서버 사이드 랜더링은 서버에서 즉시 랜더링 가능한 HTML 파일을 만들어서 요청한 클라이언트에게 전달합니다. 이 때문에 초기 로딩 속도는 빠르지만 이후 페이지 이동 시 매번 서버에서 요청받아 제어하기 때문에 다소 느리고 서버 자원을 더 많이 사용됩니다.
  • 차이점 포인트: 첫 페이지 로딩시간, 이후 나머지 페이지 로딩시간, SEO 대응, 서버자원 사용량
• DOM이란
  • HTML 태그를 자바스크립트로 조작할 수 있도록 브라우저가 트리 형태의 객체로 표현한 것입니다.
• 비동기 함수와 동기 함수
  • 비동기는 실행 결과를 기다리지 않아도 되는 함수이고, 동기는 실행 결과가 리턴될때까지 기다려야 다음 동작을 실행할 수 있는 함수입니다.
• 자바스크립트 비동기 처리가 중요한 이유
  • 자바스크립트는 싱글 스레드 언어이다. 때문에 브라우저에서 어떤 로직이 동기적으로만 실행될 경우 기다리는 시간이 많아져 사용자가 불편함을 느끼게 됩니다. 따라서 비동기 함수가 광범위하게 사용됩니다.
  • 하지만 비동기 처리하는데 콜백함수로 인자로 넘겨 처리하는 경우 콜백함수가 중첩되어 가독성이 떨어지기 때문에 최근엔 promise와 async/await를 이용합니다.
• promise
  • 자바스크립트에서 비동기 처리에 사용되는 객체(패턴)입니다. 비동기 처리가 완료되지 않으면 pending, 완료되었다면 fulfilled, 실패하거나 오류가 발생했다면 reject 상태를 갖습니다.
  • new 키워드와 함수 인자로 받는 생성자로 생성됩니다. 이때 함수 인자는 resolve와 reject라는 두개의 함수형 파라미터를 가집니다. resolve()는 얻게 될 결과를 넘겨주고, reject()는 발생할 예외를 넘겨줍니다.
  • 정상적인 인자를 넘긴 경우(resolve) then() 메소스가 호출되고, 비정상적인 인자를 넘긴 경우(reject) catch() 메서드가 호출됩니다. 근데 promise도 체인이 계속 발생될 수 있다.
• 쿠키와 세션
  • 쿠키는 클라이언트에 저장, 텍스트 형식, 만료시점 지정(브라우저 종료되도 만료시점이 지나지 않으면 삭제 안됨), 세션보다 빠르고, 보안은 덜 좋음
  • 세션은 웹서버에 저장, 객체 형식, 브라우저 종료시 삭제되고 따로 기간 지정 가능, 쿠키보다 느리지만 보안은 우수함.
  • 세션은 클라이언트를 구분하기 위해 세션ID를 부여하고 브라우저가 종료될때까지 인증상태를 유지한다. 사용자가 많아질수록 서버 메모리 차지 많아짐.
• 브라우저 저장소
  • 쿠키는 설정 이후 모든 HTTP Request에 쿠키정보가 포함되어 서버로 전송됩니다. 문자열만 저장 가능하고 용량에 제한이 있으며 만료일자가 존재합니다.
  • 웹 스토리지는 영구저장소인 로컬 스토리지와 임시 저장소인 세션 스토리지로 나뉩니다. 스토리지는 브라우저에 저장된 후 서버로 전송되지 않습니다. 문자열 외에도 객체를 저장할 수 있고, 용량은 쿠키에 비해 넉넉합니다. 또한 한번 저장한 데이터는 명시적으로 지우지 않는 한 영구적으로 존재합니다.
  • 로컬 스토리지는 브라우저가 종료되도 데이터가 보관되고, 세션 스토리지는 브라우저 리로드 시엔 데이터가 남아있지만 브라우저가 종료되면 데이터가 제거됩니다.
• 브라우저 동작원리
  • 브라우저가 서버에게 요청하여 HTML 파일을 다운로드합니다. 그리고 HTML 파일을 해석해 HTML, CSS, JS를 파싱하여 돔 트리를 구축합니다. 구축한 DOM과 CSSOM을 결합하여 최종적으로 브라우저에 보여질 요소들로 render tree 를 생성합니다. 그리고 각 요소의 스타일에 따라 브라우저 화면에 위치, 크기를 계산하고, 계산이 완료되면 브라우저 화면에 표시합니다.
• 호이스팅
  • 코드가 실행되기 전 함수 안에 있는 선언들을 해당 함수 유효 범위의 최상단으로 끌어 올려진 것 같은 현상을 말합니다.
• var, let, const
  • 변수 선언 방식에 따라 나뉩니다. var는 재선언, 재할당이 가능합니다. let은 재선언은 불가, 재할달이 가능합니다. const는 재선언과 재할당이 불가합니다.
  • 변수 모두 호이스팅이 일어날 때 var로 선언된 변수는 선언 이전에 참조 시 undefined로 읽히는 반면 let, const로 선언된 변수는 선언 이전에 참조 시 참조 에러가 발생합니다.
• HTTP GET과 POST
  • GET은 리소스 데이터를 요청하기 위한 메소드이고, URL 파라미터에 요청하는 데이터를 담아 보냅니다. 그리고 POST는 리소스를 생성 및 업데이트 하기 위해 서버에 데이터를 보낼 때 사용하는 메소드이고, HTTP body에 데이터를 담아 보냅니다.
• RESTful API
  • 자원을 이름으로 구분하여 해당 자원의 상태 정보를 주고 받는 모든 것을 의미합니다.
  • 다양한 클라이언트에 제약을 두지 않고 범용적으로 사용성을 보장하도록 하기 위해 HTTP 표준 교약을 지키면서 API를 만드는 것입니다.
  • HTTP와 URI 기반으로 자원에 접근할 수 있도록 제공하는 애플리케이션 개발 인터페이스입니다.
  • 즉, 다양한 클라이언트와의통신에 대응할 수 있도록 서버가 범용적으로 사용하도록 HTTP 표준 규약을 지킨 API를 만든 것.
• 라이브러리와 프레임워크
  • 미리 만들어진 기능의 집합체로, 애플리케이션의 제어 흐름에 대한 주도성이 누구에게 있는가에 차이점이 있습니다. 프레임워크는 전체적인 흐름은 직접 쥐고 있고 사용자가 그 안에 맞춰 필요한 코드를 짜넣는 구조이고, 라이브러리는 사용자가 전체적인 흐름을 만들고 필요한 기능을 라이브러리에서 가져다 쓰는 구조라고 할 수 있습니다.
• 웹팩과 바벨
  • 웹팩은 의존성 있는 모듈을 하나의 파일로 통합시켜주는 도구인 번들러입니다. 만약 페이지 로드 시 매번 각각의 모듈을 따로 다운로드하면 네트워크 병목현상이 일어날 수 있습니다. 이처럼 번들러가 여러 파일을 하나로 통합해주기 때문에 기능별로 코드를 모듈화하여 개발할 수 있습니다.
  • 바벨은 자바스크립트 트랜스파일러입니다. 최신 버전의 자바스크립트 문법을 사용해 개발한 것을 구버전의 자바스크립트 문법으로 바꿔주어 다양한 여러 버전의 브라우저들이 해석할 수 있도록 도와줍니다.
• 프록시 서버
  • 클라이언트가 다른 네트워크에 접속할 수 있도록 중간에서 대리해주는 서버를 말합니다. 즉 서버와 클라이언트 사이에서 대리로 통신을 수행해주는 기능을 하는 서버를 프록시 서버라고 부릅니다.
• <script> 태그를 </body> 전에 두어야 하는 이유
  • 브라우저는 <script> 태그를 만나면 html 파싱을 멈추고 스크립트를 다운로드 받아 실행합니다. 만약 모든 html 요소가 파싱되기 전(DOM이 생성되기 전)에 스크립트를 불러오게 되면 DOM을 조작할 수 없게 됩니다. 따라서 모든 html 요소가 파싱된 후에 JS 파일을 다운로드라고 실행하도록 </body>에 위치하는 것이 바람직합니다.
  • async는 HTML 파싱하는 동시에 스크립트를 다운받고, HTML파싱이 완료되지 않아도 스크립트를 실행할 수 있을 때 즉시 실행합니다.
  • defer는 HTML 파싱하는 동시에 스크립트를 다운받고, HTML파싱이 완료되어야만 스크립트를 실행할 수 있습니다.
• CORS(Cross-Origin Resource Sharing)
  • 서로 다른 도메인간에 리소스를 공유하는 것을 의미하며 기본적으로 차단되어 있습니다. 잘 모르는 외부인이 내 웹사이트의 리소스를 함부로 가져가는 것은 좋지 못하니깐요. 하지만 필요에 의한 외부 데이터 공유 시엔 기본적으로 차단되어 있는 CORS 에러를 해결해야 가능합니다.
  • CORS 에러 해결 방법: 서버에서 응답 헤더에 특정 헤더를 포함하는 방식으로 설정해주어 해결할 수 있습니다.

TypeScript

• 타입스크립트란?
  • 타입스크립트는 자바스크립트의 모든 기능을 포함하면서 타입이나 여러 다른 기능이 추가된 프로그래밍 언어입니다.
  • 자바스크립트는 변수 선언 시 별도로 타입을 선언하지 않고, 변수에 값을 할당하는 시점에 변수의 타입이 동적으로 결정됩니다. 반대로 타입스크립트는 변수 선언 시 타입을 선언해주어야 합니다.
  • 자바스크립트는 자바스크립트 엔진에 의해 암묵적으로 타입이 변하기도 해서 변수의 타입을 추적하기가 어렵고 신뢰성이 떨어집니다. 또 인터프리터 언어이기 떄문에 실제 프로그램이 실행된 때인 런타임에서 오류를 발견할 수 있습니다.
  • 하지만 타입스크립트는 컴파일 언어로 컴파일 과정을 통해(바벨 등) 자바스크립트 코드로 변환되는데, 이때 타입을 체크해 오류를 확인할 수 있습니다. (단, 그만큼 코드량이 증가하고 컴파일 시간이 오래 걸린다는 단점이 있습니다.)
• 타입스크립트 장단점
  • 장점: 타입스크립트를 자바스크립트로 컴파일하는 과정에서 미리 타입 에러를 발견해 런타임 전에 오류를 예방할 수 있습니다.
  • 단점: 자바스크립트 라이브러리를 타입스크립트에서 사용하려면 추가적인 작업이 필요합니다. 예를 들어 type/node나 type/react 등 모듈을 추가 설치해야 합니다. 그리고 컴파일하는데 추가적인 시간이 듭니다.
• 컴파일러와 인터프리터 차이
  • 컴파일러는 전체 파일을 스캔하여 한꺼번에 번역합니다. 그래서 초기 스캔시간이 오래 걸리지만 한번 실행 파일이 만들어지고 나면 빠릅니다. 전체 코드를 스캔하는 과정에서 모든 오류가 출력되어 프로그램 실행 전에 오류 확인이 가능합니다.
  • 인터프리터는 프로그램 실행 시 한번에 한 문장씩 번역합니다. 그래서 실행 시간이 느립니다. 하지만 컴파일러와 같이 코드 생성과정이 없기 때문에 메모리 효율이 좋습니다. 프로그램 실행 후 오류를 알 수 있습니다.
• 타입스크립트 사용 역량
  • 인터페이스 - 자주 사용하는 타입들을 오브젝트 형태의 묶음으로 정의해 만들어 사용하는 기능
  • 유니언 타입 - 한가지 이상의 타입을 선언할 때 사용 ( 예: string | number)
  • (안써본)제네릭 - 인자를 넘겨 호출하는 시점에 타입을 결정할 수 있음.
• any와 void
  • any는 변수의 타입을 미리 예측하기 어려울때 사용됩니다. 예로 사용자 input 값으로 무엇이 들어올지 모른 경우. 반대로 void는 변수에 유형이 없을을 나타냅니다(값 할당은 null, undefined만 가능). 값을 반환하지 않는 함수에서 주로 사용됩니다.

Next

• Next란? (+Hydrate)
  • 리액트의 서버 사이드 렌더링 프레임워크입니다.
  • 클라이언트에서 요청 시 서버에서 미리 웹페이지(html 파일)을 생성하여 전달합니다(Pre-Rendering). 이때 클라이언트가 받은 웹페이지는 단순히 화면만 보여주는 html 파일이고 자바스크립트 요소는 없는 상태입니다. 이후 바로 리액트가 번들링 된 자바스크립트 코드를 클라이언트에게 전달하고, 클라이언트는 이전에 받은 HTML 코드와 JS 코드를 서로 매칭시키는 과정을 진행합니다. 이때 클라이언트가 자바스크립트를 랜더링할 때 실제 웹페이지를 다시 그리는 과정까진 않습니다(pain함수 호출 안함)
  • 이것은 마치 자바스크립트 코드들이 돔 요소의 필요한 요소를 채운다 하여 Hydrate(수화)라는 용어로 표현합니다.
• SSG와 SSR
  • pre-rendering을 동적으로 해서 페이지를 생성하면 SSR, 정적으로 페이지를 생성하면 SSG 입니다.
  • SSG는 peges 폴더에 static한 파일로 생성하기 때문에 해당 페이지 요청 시 이미 생성된 페이지를 반환하는 형태로 동작합니다. 따라서 리액트의 CSR보다 응답속도가 빠르고 Next에서도 SSG 사용을 지향합니다.
    • getStaticProps 함수는 api와 같은 외부 데이터를 받아오는 용도로 사용됩니다. props에 리턴값을 담아 컴포넌트에 전달합니다.
    • getStaticPaths 함수는 외부에서 데이터를 가져와 동적으로 페이지를 생성하는 용도로, 이때 생성한 params 인자를 getStaticProps 함수에 넘겨 주어 사용합니다.
• 페이지 라우팅
  • Next는 라우터를 내장하고 있어서 pages 폴더에 있는 파일 이름 그대로 라우팅합니다.

Redux

• 가장 많이 사용하는 상태관리 라이브러리로 상태(state)를 효율적으로 관리할 수 있게 도와줍니다.
• 리액트는 단방향으로만 상태를 전달할 수 있기 때문에 컴포넌트 구조가 복잡할 수록 상태를 추적하고 관리하는데 어렵습니다. 이때 리덕스는 상태를 컴포넌트 외부에서 효율적으로 관리할 수 있게 해줍니다. 쉽게 상태값을 공유하고 업데이트할 수 있습니다.
• 컴포넌트에서 상태에 관련 로직을 별도의 파일로 분리시켜 체계적으로 관리하는데 작업 효율을 극대화해줍니다. (상태 중앙화)
• 리덕스 스토어 환경 설정은 너무 복잡해 리덕스 툴킷으로 코드는 좀더 간단히 작성함으로서 그 복잡합을 낮춰 사용성을 높일 수 있습니다. configureStore 함수에서 리듀서명, 리듀서 등 정보를 전달합니다.

Redux-saga

• 비동기 작업와 같은 부수적인 작업을 따로 처리하는데 사용됩니다. 리덕스의 action이 발생하면 reducer가 그 액션을 처리하기 전에 여러 작업을 할 수 있도록 미들웨어 역할을 해줍니다.
• put: 인자로 들어온 액션을 dispatch합니다. call: 주어진 함수를 실행합니다. takeEvrey: 특정 액션에 대해 특정 함수 작업을 처리해줍니다.