프론트엔드 실무 면접 준비 - CS

조민수·2024년 2월 26일

front end 면접

실무면접

목록 보기

5/10

중요도가 높은 질문들 - ⭐

실무 면접을 여러 번 진행해보면서 받아본 질문들 - ✔️

1. 브라우저 렌더링 원리? ⭐ ✔️

브라우저가 웹 페이지를 불러오는 과정에선 렌더링 엔진이 사용된다.
- 렌더링 엔진 : HTML, CSS, JS와 같은 웹 페이지 구성 요소들을 파싱하고 화면에 표시하는 역할
브라우저 렌더링 원리는 렌더링 엔진, 렌더 트리, 레이아웃, 페인팅으로 구성된다.

<1> 렌더링 엔진

HTML 문서 파싱 → DOM 트리 구축
CSS 파싱 → CSSOM 트리 구축

HTML : 문서 구조 정의

CSS : 문서 스타일 정의

JS : 문서 동작 정의

<2> 렌더 트리

렌더링 엔진은 DOM 트리와 CSSOM 트리를 결합해 Render Tree 구축
화면에 표시될 요소들만으로 구성된 트리 구조

<3> 레이아웃

렌더 트리를 통해 화면에 요소의 크기와 위치를 계산하는 과정

<4> 페인팅

레이아웃을 기반으로 화면에 요소를 그리는 작업

2. 렌더링 성능 최적화? ⭐ ✔️

CSS 코드 압축, 중복 최소화
JS 코드 압축
Lazy loading, code splitting 등을 통한 성능 개선
@babel등의 webpack 사용

3. DOM(문서객체모델) 이란?

웹 페이지의 콘텐츠 및 구조, 스타일 요소를 구조화 시켜 표현해 JS가 해당 문서에 접근해 조작할 수 있도록 하는 일종의 인터페이스
HTML 문서를 계층적 구조와 정보로 표현
웹에서 발생하는 수많은 이벤트 = JS의 객체
- 이벤트는 이벤트 각각이 갖게되는 전파 경로를 따라 전파
- 이 전파 경로는 DOM Tree 구조에서의 Element의 위상에 따라 결정됨.

4. CORS 란? ⭐ ✔️

웹 브라우저에서 외부 Domain Server과의 통신 방식 표준화 보안 메커니즘
즉, 타 도메인 간에 자원을 공유할 수 있도록 해주는 것
- React의 localhost:3000 과 FastAPI의 localhost:8000도 이에 해당한다.
Server, Client는 정해진 헤더를 통해 Request에 대한 Response를 결정
주로 CORS Middle ware를 통한 proxy server로서 동작
Client에서 HTTP 요청 헤더에 Origin를 담아 전달
Server는 응답 헤더에 Access-Control-Allow-Origin을 담아 Client에 전달
Client에서 Origin과 서버가 보내준 Access-Control-Allow-Origin을 비교
- 유효하다면 사용, 유효하지 않다면 CORS 에러

CORS 에러를 겪었다면 어떻게 해결했는지? ✔️

Proxy Server 의 구축 or 사용
CORS 미들웨어 사용 (Node.js Express)
Server : Access-Control-Allow-Origin 헤더 세팅

5. 브라우저 저장소에 대해 알려주세요 ⭐ ✔️

Local Storage : 저장한 데이터를 지우지 않는 이상 영구적으로 보관, 브라우저를 닫았다 다시 열어도 남아있다.
- 도메인마다 별도의 Local Storage가 생성
Session Storage : 도메인 마다 별도로 생성되는 점은 Local Storage와 동일, 세션 종료 시에 Client에 대한 정보가 삭제된다.
- 브라우저 컨텍스트가 다르기 때문에 같은 사이트의 같은 도메인이여도 브라우저가 다르면 다른 영역이 된다.
- 서버 메모리에 저장되며 Client는 Session ID를 부여받는다.
- ex) 비로그인 장바구니
Cookie : 매번 서버로 전송, 용량은 최대 4KB, 만료 시기가 존재한다.
- User의 웹에 저장되며 보안에 취약하다.

6. Token 인증 방식 이란? ✔️

첫 Login 시, 각 Client에게 Token 발급 → 해당 Token은 Client의 Storage에 저장 → Client가 Server에 요청 시에 HTTP 헤더에 Token을 포함해 요청 → Server는 해당 Token을 검증 후 응답
전통적인 인증방식 : Session에 User 정보를 저장해야 하지만 Token 방식은 그럴 필요가 없다.

JWT Token

Header + Payload + Signature의 요소로 이루어진 JSON 기반 토큰 기반 인증 시스템
JWT 자체는 암호화 되지 않아 HTTP를 통해 전송할 경우, Token이 가로채질 위험이 존재함

7. HTTP, HTTPS란? ⭐ ✔️

HTTP : 인터넷에서 데이터를 전송하는데 사용되는 프로토콜
- 웹 브라우저와 웹 서버 간의 통신을 가능하게 함
- 비 연결성 프로토콜
- Stateless 특성으로 서버가 각 요청을 별도로 처리해야 함
- HTTP/1.1, HTTP/2.0이 주로 사용
  - HTTP/2.0에선 멀티플렉싱 기능을 제공
HTTPS : HTTP에 SSL 또는 TLS 프로토콜을 추가해 데이터 전송 시 암호화를 통해 보안을 강화한 것
- 데이터 무결성 보장

8. WebSocket이란? ✔️

실시간, 지속적인 양방향(Full-Duplex) 통신을 가능하게 한 통신 프로토콜
Server에 데이터가 있을 때, Client에게 즉시 데이터를 보낼 수 있음을 의미함.
- 데이터 전송에 대한 지연시간의 감소, 네트워크 자원의 효율적 사용 가능
wss://를 통해 WebSocket 연결의 암호화 가능
주로 실시간 주식 차트, 채팅 어플리케이션 등에서 사용

9. Process, Thread

Process : 실행중인 프로그램의 인스턴스, OS에 의해 메모리 공간, 데이터, 코드, 자원 등이 할당되어 독립적으로 실행
- 각 Process는 별도의 메모리 공간을 가진다.
Thread : Process 내에서 실행되는 실행의 단위
- Process내의 thread들은 코드, 데이터, heap 영역을 공유하며, 각 thread는 자신의 stack을 가진다.
MultiThreading : 하나의 Process에서 여러 Tasks를 동시에 수행할 수 있게 해줌

10. Webpack 이란? ⭐

웹팩은 모듈번들러로, JS와 CSS, img 등 관련 자원을 하나의 파일로 결합해 로딩 시간과 성능 최적화에 사용된다.
모듈 번들링을 통해 네트워크 요청 횟수를 줄이고, 로딩 시간의 최적화의 이점을 얻을 수 있다.
@babel은 JS 컴파일러로 .jsx를 .js로 변환하는데 필요하다.
- React에서 babel-loader를 통해 jsx와 ES6 코드를 일단 JS로 변환하고 번들링하는 과정을 거친다.
Webpack의 4가지 속성
1. Entry : Webpack이 애플리케이션을 번들링하기 시작하는 곳, 애플리케이션의 루트(시작) 파일
2. Output : Webpack이 bundle을 생성한 후 이를 배치할 위치 지정
3. Loaders : Webpack이 다른 타입의 파일들을 처리할 수 있도록 변환
4. Plugins : 번들 최적화, 환경 변수 주입 등의 작업 수행

11. 웹 표준이란?

웹 페이지가 다양한 브라우저와 장치에서 일관되게 작동하도록 보장하는데 중요한 역할
HTML + CSS + JS로 구성
웹 표준을 준수함에서 오는 이점
- 호환성
- 접근성
- SEO (검색엔진최적화)
- 유지보수 용이성

12. UI와 UX란? ⭐

UI : 사용자 인터페이스, 물리적 수단으로서 버튼, 아이콘, 레이아웃, 폰트, 색상 등을 의미한다.
UX : 시스템 전반에 대한 사용자의 경험, 사용성, 편의성, 효율성, 만족도 등을 의미한다.

13. PWA (프로그레시브 웹 앱) 란?

모바일 기기에서 Native Application과 같은 사용자 경험을 제공하는 Web Application
- 푸쉬알람, 오프라인 지원 등의 기능까지 제공하는 것을 의미한다.
장점
- 개발 비용 저렴
- 일반적인 웹 기술을 통해 개발 가능
- 기본적으로 반응형, 다양한 폼팩터에 적용 가능
- SEO를 통해 검색엔진을 통해 찾을 수 있다.
한계
- 모바일 게임의 경우, PWA는 좋은 선택지가 아니다.
- 모바일 운영체제 접근에서의 한계

13. SPA와 MPA란? ⭐

SPA : 단일 HTML 페이지에서 사용자와 상호작용을 동적으로 처리
- 한 번의 페이지 로딩으로 필요한 모든 자원(HTML, CSS, JS)를 로드, 이후 상호작용에 따라 필요 부분만 JS를 통해 동적으로 업데이트
- 페이지 전체 새로고침이 필요없이 특정 부분만 변경가능
- 빠른 페이지 전환속도, 반응형 상호작용
- 서버와의 통신을 최소화, 비동기적으로 데이터를 로드
- SEO에 불리하며 XSS와 같은 브라우저 호환성 및 보안 문제가 발생할 수 있다.
MPA : 전통적 방식의 웹 애플리케이션 구조, 여러 HTML 페이지로 구성되며 Client의 요청에 따라 전체 페이지가 새로고침 된다.
- 대부분의 콘텐츠 처리는 Server에서 이루어지는 SSR 방식이다.
- SEO에 유리하다.
- 상태 관리에 있어 복잡한 메커니즘을 가진다.

14. CSR과 SSR ⭐

콘텐츠를 사용자에게 보여주는 방식과 타이밍에서의 차이
CSR : 웹 페이지가 Client Side에서 렌더링
- 기본적인 HTML을 로드한 후, JS를 통해 추가 콘텐츠를 가져와 브라우저에서 렌더링
- React, Vue 등 SPA 기반 Front-end Framework에서 주로 사용
- 사용자 상호작용 및 페이지 전환에 대한 반응이 빠르며, Server 부하를 줄일 수 있다.
- 초기 로딩 시간이 길고, SEO에 불리
SSR : Server에서 페이지의 콘텐츠를 렌더링 후 Client의 요청에 따라 HTML을 렌더링해 완성된 페이지의 형태로 전송
- Next.js가 대표적
- 초기 로딩 시간이 빠르며 SEO에 유리
- 페이지의 각 부분, 상호작용에 따라 Server에 요청해야함, Server 부하 증가, 사용자 경험이 느려진다.

언제 사용하는게 좋은 지

CSR : 동적이고 상호작용이 많은 웹 어플리케이션, 사용자의 경험이 중요시되는 웹 사이트에 적합
SSR : SEO가 중요하고, 동적 변화가 많이 없는 홍보용 사이트에 적합

15. Flux 패턴이란? ⭐

사용자 Action → Dispatcher → Store → View 로 이어지는 단방향 흐름의 아키텍처 패턴
React의 경우, Flux 패턴을 사용
프로그램의 데이터 흐름을 일관성있게 관리함으로써 프로그램의 예측가능성을 높임

16. MVC 패턴이란? ⭐

애플리케이션의 구성요소를 Model, View, Controller의 세가지 역할로 구분한 아키텍처 패턴
사용자의 요청을 Controller가 받는다.
Controller는 비즈니스 로직을 처리한 후 결과를 Model에 전달한다.
Model에 저장된 결과를 바탕으로 View를 통해 사용자에게 전달한다.
Model은 Controller, View와 의존관계를 지니면 안된다.
View는 Model에만 의존해야한다.
View가 Model로부터 데이터를 받을 때는 반드시 Controller에서 받아야 한다.

장점

특정 작업에 대한 관심사의 분리
컴포넌트의 역할 분리로 인한 결합도의 약화
코드 재사용성, 확장성 ↑
서비스 유지보수, 테스트에 용이

단점

Model과 View의 의존성을 완전히 분리시킬 수 없다.
Controller의 비중이 높아진다면 Massive-View-Controller 현상을 피할 수 없다.

17. MVVM 패턴이란? ✔️

Model, View, ViewModel 요소로 이루어진 아키텍처 패턴
ViewModel은 View와 Model 사이에서 중개자 역할을 수행하며, View를 보여주기 위한 데이터 처리 역할 을 수행
- View를 표현하기 위한 Model
Vue에서 MVVM 패턴을 사용한다.

18. SEO (검색엔진최적화)란?

웹사이트가 검색 엔진에서 상위에 노출될 수 있도록 최적화하는 과정
웹 크롤러를 통해 해당 웹 페이지를 판단하고 해당 페이지를 색인에 추가하는 과정
- 색인 : 검색 엔진이 잠재적인 검색자에게 제공하기 위해 저장한 모든 가능성 있는 결과

19. 크로스 브라우징이란?

최대한 많은 종류의 웹 브라우저에서 정상적으로 작동하는 웹 페이지를 만드는 방법론
W3C에서 채택된 웹 표준 기술을 기본으로 제작한다.
모든 화면에서 동일하게 보이는 "동일성"이 아닌,
동등한 수준의 정보 제공 및 기능 제공의 "동등성"을 얘기하는 것

20. REST API란? ⭐ ✔️

REST?
- HTTP URI를 통해 자원을 명시하고
- HTTP Method(GET, POST, PUT, DELETE)를 통해 해당 자원에 대한 CRUD를 적용하는 것
- HTTP 표준 프로토콜을 따르는 모든 플랫폼에서 사용 가능
REST API란 REST의 원리를 따르는 API를 의미.
올바른 REST API 설계 규칙
- URI는 동사보단 명사를, 대문자보단 소문자를 사용
- 마지막에 /를 포함하지 않는다.
- _ 대신 -
- 파일 확장자(.jpg, .pdf)은 URI에 포함하지 않는다.
- 행위를 포함하지 않는다. ex) http://lookin_min.com/create-id/ X
RESTful 이란?
- REST의 원리를 따르는 시스템을 의미
- REST API의 설계 규칙을 올바르게 지킨 시스템
- CRUD의 모든 기능을 POST로만 처리하거나, URI 규칙이 올바르지 못하다면,
  RESTful이라 할 수 없다.

21. HTTP의 GET, POST 비교 설명 ⭐ ✔️

GET은 Server의 리소스에서 데이터를 요청할 때,
POST는 Server의 리소스를 생성하거나 업데이트할 때 주로 사용된다.
GET은 HTTP 메시지에 body가 없고 POST는 body에 데이터를 담아 보낸다.
- 유저 정보, 이벤트 정보 등
GET은 URL의 Parameter 붙여 전송, 대용량 데이터 전송에 한계
POST는 body에 데이터 타입을 Header Content-Type에 명시해야함
속도 측면에서 GET 방식이 POST 방식 보다 빠르다
- GET 방식은 캐싱이 가능하기 때문
GET 요청은 멱등, POST는 멱등이 아니다.
- 멱등 : 연산을 여러 번 하더라도 결과가 달라지지 않음

22. www.naver.com에 접속하는 과정 설명 ⭐

브라우저가 www.naver.com의 IP주소를 찾기 위해 캐시에서 DNS 기록을 확인
요청 URL의 캐시가 없다면, ISP의 DNS 서버가 DNS 쿼리로 URL을 호스팅하는 서버의 IP 주소를 찾는다.
브라우저가 해당 서버와 TCP 연결을 시작한다.
브라우저가 웹 서버에 HTTP Request를 보낸다.
서버는 요청을 처리해 Response를 보낸다.
브라우저는 HTML 컨텐츠를 클라이언트에게 보여준다.
ISP
- 인터넷 접속 서비스, 웹 구축 및 호스팅 서비스 제공 회사 (KT, LG U+ ...)
DNS
- 웹사이트의 IP 주소와 도메인 주소를 이어주는 시스템
- 도메인(URL) → IP 주소로 연결되게 해줌

23. 객체지향 프로그래밍이란? ⭐

프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체로 만들고, 객체들간의 상호작용을 통해 로직을 구성하는 프로그래밍 방법
- 캡슐화, 상속, 다형성, 추상화, 확장 및 유지보수에 용이

추상화란

클래스를 설계하는 것 자체
공통의 속성이나 기능을 묶어 이름붙이는 것

캡슐화란

정보의 은닉을 통해 적절한 접근 제어로 객체의 접근을 선택적으로 허용하는 것
코드를 수정하지 않고 재활용 할 수 있는 근간
기능과 특성의 모음을 클래스라는 캡슐에 분류
- 객체의 역할을 수행하기 위한 하나의 목적으로 하나로 묶는 것

상속이란

부모 클래스의 속성과 기능을 자식 클래스가 이어받아 그대로 사용하고, 일부 기능의 변경은 자식 클래스에서 재정의해 사용하는 것

다형성이란

하나의 변수명, 함수명이 상황, 위치에 따라 다르게 사용되는 것
- 메소드 오버라이딩, 오버로딩

24. 클래스와 인스턴스 ⭐

클래스

속성과 행위를 변수와 메서드를 통해 정의한 것.
객체를 만들기 위한 메타 정보(붕어빵 틀)

인스턴스

클래스에서 정의한 것을 토대로 실제 메모리에 할당된 것.
실제 프로그램에서 사용되는 데이터

25. 오버라이딩과 오버로딩이란?

Overriding : 상위 클래스에 있는 메소드를 하위 클래스에서 재정의
Overloading : 매개변수의 개수나 타입을 다르게 하여 같은 이름의 메소드를 여러 개 정의

26. 시간복잡도와 공간복잡도

시간복잡도
- 특정 알고리즘이 어떤 문제를 해결하는데 걸리는 시간
- 실행 시간이 아닌 연산 수치로 판별
- O(1) < O(logN) < O(N) < O(N logN) < O(N²) < O(2^n)
공간복잡도
- 작성한 프로그램이 얼마나 많은 메모리를 차지하는가
- 총 요구 공간 = 고정 요구 공간 + 가변 요구 공간
```
int a = 10;  // 일반적으로 공간이 하나씩 생성되면 O(1)
```
```
int factorial(int n){
  if(n > 1) return n * factorial(n-1);
  else return 1;
}
```
- 다음과 같은 재귀함수의 경우 O(n)의 공간 복잡도를 가진다.
- 고정 공간보단 가변 공간을 사용하는 자료구조로 코드를 짜는게 공간 복잡도 측면에서 효율적이다.

27. MSA란? ⭐ ✔️

Microservices Architecture의 줄임말
애플리케이션을 여러개의 작은 독립된 서비스로 나누어 개발하는 방법론
- 독립적 배포, 유지보수, 스케일링이 가능

장점
1. 각 기능마다 특화된 프레임워크, 개발 언어 등을 통해 개발해 적합한 기술 선택에 대한 자유
2. 새로운 기능을 빠르게 추가할 수 있는 유연성 및 확장성
3. 서비스 간 격리로 인한 장애 발생 시, 전체 시스템에 미치는 영향 최소화 가능

단점
1. 서비스 간 통신, 데이터 일관성 유지, 배포 자동화 등에서 복잡성 증가
2. 여러 서비스로 나눠진 만큼, 운영 작업이 증가
3. 데이터 관리에서의 복잡성(각 서비스가 독립적 DB를 가질 시)

조민수

멈춤에 두려움을 느끼는 것

이전 포스트

프론트엔드 실무 면접 준비 - JS/TS (3)

다음 포스트