Reference: 신입 프론트엔드 개발자가 면접 전 꼭 알아야 할 기본 질문 11가지
Part 1. 웹 기본 지식
프로그래밍이란 뭐라고 생각하나요?
프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션입니다. 해결해야 할 문제(요구사항)를 명확히 이해한 후 적절한 문제 해결 방안을 정의할 필요가 있다. 0과 1밖에 알지 못하는 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구를 설명하는 작업이며, 그 결과물이 바로 코드다
HTTP와 HTTPS의 차이와 https를 사용했을 때의 장점은 무엇일까요?
HTTPS(HyperText Transfer Protocol Secure)는 기존 프로토콜(컴퓨터 사이의 데이터 교환 방식 규칙 정의)에서 데이터가 쉽게 도난 당할 수 있는 것을 방지하기 위해서 SSL(보안 소켓)을 사용하면서 브라우저와 서버 사이에 안전하게 암호화된 연결을 만들 수 있게 도와줍니다. 또한 TLS(전송 계층 보안) 프로토콜을 통해서도 보안을 유지합니다. TLS는 데이터 무결성을 제공하므로 데이터가 전송 중에 손상되거나 수정되는 것을 방지합니다.
또한, HTTPS의 장점은 검색엔진 최적화(SEO)에 도움이 됩니다. 구글과 같은 포털에서는 HTTPS를 사용하는 웹 사이트에 가산점을 부여합니다. 별개로 주소창 옆에 HTTPS가 아니라면 주의 요함과 같은 경고 문구가 있는데 사용자 측면에서도 자주 들어가고 싶지 않겠지요.
캐시란 무엇이고 어떻게 동작할까요?
캐시는 데이터나 값을 미리 복사해 높은 임시 저장소를 말합니다. 캐시는 데이터를 접근하는 시간이 오래걸리는 경우나 값을 계산하는 시간이 오래걸리는 로직등에 사용합니다. 캐시가 없다면 데이터가 변경되지 않는 고정 데이터임에도 계속해서 네트워크를 통해 데이터를 다운 받아야 합니다. 불필요한 데이터를 계속 받는다면 데이터 비용의 비중도 올라가게 됩니다. 그리고 결국 사용자 측면에서도 로딩 속도가 반복해서 느려지게 되고, 이는 사용자에게 좋지 못한 경험을 제공합니다.
캐시를 사용하면 새로고침 시에 반복되는 데이터가 네트워크를 통하지 않으므로 네트워크 사용량이 줄고, 브라우저 로딩 속도가 빨라지게 되며, 이는 빠른 사용자 경험으로 직결됩니다.
브라우저 렌더링 엔진은 HTML, CSS, Javascript를 어떤 순서로 해석할까요?
렌더링 엔진은 HTML 문서 자체를 파싱하여 DOM트리를 만듭니다. 그런 다음 CSS파일과 함께 포함된 CSSOM을 생성합니다. 이후 DOM트리와 CSSOM의 결과를 합친 렌더트리를 구축합니다. 그리고 렌더트리를 배치(Layout)한 후, 마지막으로 렌더트리를 그립니다. 렌더트리를 그리는 과정에서 화면에 그리는 Paint라는 레이어를 채우는 과정을 거쳐 합성(Composite)을 통해 실제로 레스터화를 하며 픽셀로 변환하는 단계를 거칩니다.
쿠키, 로컬스토리지, 세션스토리지는 각각 어떤 특징을 가지고 있을까요?
쿠키
만료 기간이 있는 Key, Value 형태의 저장소를 말합니다.
대부분의 브라우저가 지원하며, HTTP 요청마다 포함되어 API 호출의 부담으로 작용할 수 있습니다. 용량은 약 4KB 정도로 작은 편입니다.
쿠키 자체의 도난 위험이 있어 최근에는 구글 크롬의 샌드박스 정책과 같이 보안의 위험이 있는 경우를 방지하기 위해서 노력하는 중입니다.
로컬스토리지
가장 큰 특징으로는 브라우저 창을 닫더라도 데이터가 유지됩니다. 장점은 서버에 불필요한 데이터를 저장하지 않는 다는 점입니다.
그리고 브라우저마다 차이는 있지만 용량이 약 5MB로 매우 큽니다. 단점으로는 HTML5을 지원하지 않는 브라우저에서는 사용이 불가능합니다.
세션스토리지
가장 큰 특징으로는 브라우저 창을 닫는 순간 영구적으로 데이터가 삭제됩니다.
세션스토리지도 마찬가지로 서버에 불필요한 데이터를 저장하지 않고, 용량이 5MB로 매우 크고 HTML5를 지원하지 않는 브라우저에서는 사용할 수 없습니다.
주로 폼 정보나 장바구니 정보 등 휘발성이 강한 개인적인 내용에는 세션스토리지를 사용합니다. 자동 로그인 기능이나 다크모드 테마와 같은, 사용자에 귀속되면서 유출되어도 상관 없는 정보들에는 로컬스토리지를 사용하고, 만료 기간을 두고 몇일 보지 않는 팝업 같은 부분은 쿠키를 사용하는 것이 좋습니다.
Part 2. 프레임워크 활용 지식
CSR과 SSR의 차이는 무엇일까요?
CSR(Client Side Rendering)
최초에 서버에서 전체 페이지를 로딩해서 사용자에게 보여주고 이후에는 사용자의 요청에 따라서 리소스를 서버에서 제공하면서 클라이언트가 해석하고 바로 렌더링을 하는 방식입니다.
빠른 반응속도가 특징이며, 초기 구동속도가 SSR에 비해서 느리고 SEO에 취약합니다.
SSR(Server Side Rendering)
기존에 존재하던 방식으로 사용자가 웹페이지에 접근할 때 서버에서 페이지에 대한 요청을 해서 html과 같은 view 리소스들을 어떻게 보여줄지 결정한 뒤에 사용자에게 반환합니다.
SEO(검색엔진최적화)에 있어서는 google의 검색봇 등의 크롤링을 위해서 정적인 웹페이지의 리소스를 제공하는 것이 중요한데 이런 부분에 있어서는 SSR을 사용하는 것이 보다 도움이 됩니다.
리액트나 뷰와 같은 가상돔을 사용하는 프레임워크에서 상태 관리란 무엇일까요?
상태 관리란 해당 컴포넌트에 적용되는 상태이며, 화면이 바뀌는 것에 대한 데이터를 state로 만들어줍니다. 이러한 state를 사용하는 이유는 데이터가 변할 때마다 데이터에 관련된 DOM을 찾아서 원하는 동작들을 실행한다면 코드도 중복되고 불필요한 DOM에 대한 접근이 많아질 것입니다. React에서는 주로 Redux를 사용하며, Vue에서는 Vuex를 사용합니다. 기존의 디자인 패턴인 MVC 패턴과 다르게 단방향으로 데이터가 흐르는 Flux 패턴을 사용합니다. 따라서 View는 데이터가 어떻게 바뀌었는지 직접 MVC의 Model을 사용해서 참조할 필요가 없으며, Dispatch를 통해 Action을 발생시키므로 인해 Store에서 전체적으로 영향을 주는 View를 갱신합니다.
Webpack, Parcel, Rollup과 같은 모듈 번들러가 하는 일은 무엇이고 왜 사용할까요?
최종적으로 바인딩되는 웹 어플리케이션 리소스들(HTML, CSS, JS, Image, Font 등)을 모두 모듈로 보고, 이를 조합해서 하나로 만드는 역할을 합니다.
기존 HTML이나 Javascript 파일이 상대적으로 작았던 시절에는 서비스를 유지하는 것에 있어서 그렇게 큰 문제가 되지 않았으나 인터넷이 계속 발달을 거듭하며 대규모 웹 서비스들이 탄생하고,
이에 대해서 수십 수백개의 자바스크립트 파일들을 유지보수하면서 조금 더 편하고 모듈화 된 작업 단위들을 유지보수하고자 하는 욕구에 의해서 탄생했습니다.
프레임워크와 라이브러리의 차이는 무엇일까요?
프레임워크
프레임워크는 원하는 기능 구현에 집중하여 개발할 수 있도록 일정한 형태와 필요한 기능을 갖추고 있는 골격, 뼈대를 말합니다.
애플리케이션 개발 시 필수적인 코드, 알고리즘, DB 연동과 같은 기능들을 위해 어느 정도 뼈대(구조)를 제공하며 이러한 뼈대 위에서 사용자는 코드를 작성하여 애플리케이션을 개발합니다. 앱/서버 등의 구동, 메모리 관리, 이벤트 루프 등의 공통된 부분은 프레임워크가 관리하며, 사용자는 프레임워크가 정해준 방식대로 클래스, 메서드들을 구현하면 됩니다.
ex)
- Java 서버 개발에 사용되는 Spring
- Python 서버 개발에 사용되는 Django, Flask
- 안드로이드 앱 개발에 사용되는 Android
- 아이폰 앱 개발에 사용되는 Cocoa Touch
- 웹 개발에 사용되는 Angular, Vue.js 등
- Node.js 기반의 웹 서버를 구축할 수 있는 Express
- 자바 기반의 JSP를 위한 프레임 워크 Struts
- 루비로 작성된 MVC 패턴을 이용하는 Ruby on Rails
라이브러리
라이브러리는 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임. 즉 특정 기능을 모아둔 코드, 함수들의 집합이며 코드 작성 시 활용 가능한 도구들을 의미합니다.
ex)
- Python pip로 설치한 패키지/모듈 (tensorflow, pandas, beautifulsoup 등등)
- C++의 표준 템플릿 라이브러리(STL)
- Node.js에서 npm으로 설치한 모듈
- HTML의 클라이언트 사이드 조작을 단순화하는 JQuery
- 웹에서 사용자 인터페이스 개발에 사용되는 React.js
Part 3. 컴퓨터 공학
스택과 큐의 차이는 무엇일까요?
스택
스택은 물건을 쌓고 그것을 다시 뺄 수 있는 구조로 되어있습니다. 보통 배열이라고 하는 자료형의 구조도 스택으로 되어있습니다. 배열의 길이를 정하고 거기에 데이터를 넣는 것을 PUSH라고 합니다.
그리고 다시 꺼내는 것을 POP이라고 하며, LIFO(Last-In-First-Out) 구조라고 합니다.
큐
큐는 먼저 들어온 데이터가 먼저 처리되는 구조로 되어있습니다. 입구와 출구가 있는 이벤트 루프를 생각하면 쉽습니다. FIFO(First-In-First-Out) 구조라고 합니다.
컴파일러와 인터프리터의 차이는 무엇일까요?
우리가 코드를 통해 내린 명령을 수행할 주체는 컴퓨터입니다. 따라서 사람이 이해할 수 있는 자연어가 아니라 컴퓨터가 이해할 수 있는 언어, 즉 기계어로 명령을 전달해야 합니다.
기계어는 우리가 사용하는 언어와는 너무나도 체계가 다르기 때문에 기계어로 직접 명령을 전달하는 것을은 매우 어렵습니다. 기계어로 직접 명령을 전달하는 것을 대신할 가장 유용한 대안은
사람이 이해할 수 있는 약속된 구문으로 구성된 프로그래밍 언어를 사용해 프로그램을 작성한 후, 그것을 컴퓨터가 이해할 수 있는 기계어로 변환하는 일종의 번역기를 이용하는 것입니다.
이 일종의 번역기를 컴파일러(compiler) 혹은 인터프리터(interpreter)라고 합니다.
compile: 변환하다
interpret: 해석하다
컴파일러
전체 코드를 보고 명령어를 수집하고 재구성 합니다. C, C++ 등이 해당합니다.
인터프리터
소스코드의 각 행을 연속적으로 분석하며 실행합니다. 인터프리터는 고레벨 언어를 중간 레벨 언어로 변환 한 뒤에 각 행마다 실행하기 때문에 보통은 컴파일러가 인터프리터보다 빠릅니다.
Python, Javascript 등이 해당합니다. Java는 컴파일러에서 .class파일로 변환한 뒤에 인터프리터 과정으로 한번 더 해석을 하기 때문에 두가지 방법 모두 다 쓴다고 할 수 있습니다.
프로세스와 스레드의 차이는 무엇일까요?
프로세스
운영체제로부터 CPU 자원을 할당받는 작업의 단위입니다. 메모리에 올라와서 실행되고 있는 프로그램의 인스턴스를 의미합니다. Stack, Code, Data, Heap 구조로 되어있습니다.
스레드
프로세스 내에서 실행되는 여러 흐름의 단위입니다. 프로세스 내에서 각각 Stack만 따로 할당 받고 Code, Data, Heap 영역은 공유합니다.
멀티 스레드가 가지는 장점은 첫 번째로 프로세스를 생성하여 자원을 할당하는 시스템 콜이 감소하므로 자원을 효율적으로 관리할 수 있고, 스레드 간의 통신 비용이 더 적게 발생합니다.
대신, 스레드 간에 공유자원으로 인한 문제를 위해 동기화에 대해서 신경을 써줘야 합니다.