프론트엔드 인터뷰 예상 질문 (3) - Etc

서동경·2023년 11월 13일

interview

인터뷰 준비

목록 보기

3/3

🔎 HTML/CSS

💬 HTML5의 주요 태그

<!DOCTYPE html>: 브라우저에서 HTML 형식을 알려주는 태그(HTML 문서의 최상단에 위치)
<html>: 모든 HTML 요소를 감싸는 루트 태그
<head>: 문서의 메타데이터(title, meta, link, base)를 정의하는 태그
<body>: 문서의 본문을 정의하는 태그

💬 px, em, rem의 차이

px은 고정된 크기 단위이고, em과 rem은 상대적인 크기 단위로 em은 부모 요소, rem은 루트 요소를 기준으로 한다.
반응형을 만들 때는 em이나 rem을 사용하는것이 편리하지만 px을 사용하면 좀 더 세밀하게 크기를 조정할 수 있다.

💬 Attribute와 Property의 차이

Attribute는 HTML의 속성이고 Property는 DOM에서 HTML의 속성을 다룰 때 사용하는 표현이다.
Attribute는 변하지 않는 정적인 값을 가지고, Property는 변할 수 있는 동적인 값을 가진다. 만약 Attribute의 값도 같이 변경하고자 한다면 setAttribute 메서드를 사용하면 된다.

💬 DOM

HTML 문서의 구조와 정보를 나타내는 트리 형태의 인터페이스이다. / DOM API를 통해 DOM을 조작하여 HTML 요소를 수정할 수 있다.

◽ DOM의 구성 요소(주요 노드)

Document Node: HTML 문서를 나타내는 최상위 노드
Element Node: HTML 요소를 나타내는 노드
Attribute Node: 속성을 나타내는 노드
Text Node: 텍스트를 나타내는 노드
Comment Node: 주석을 나타내는 노드

💬 vw, vh

현재 디바이스의 뷰포트를 기준으로 한 상대적 너비와 높이 값이다.

💬 반응형 브레이크 포인트

MOBILE: 375px ~
TABLET: 768px ~
DESKTOP: 1024px ~

자주 사용되는 브레이크 포인트

375px, 480px, 640px, 768px, 1024px, 1200px, 1280px

💬 CSS 케스케이딩

스타일 적용에 충돌이 발생했을 때 어떻게 우선 순위가 정해지는지에 대한 원칙이다.

◽ 명시도에 따른 우선 순위

적용 범위가 적을수록 명시도가 크고 높은 우선 순위를 갖는다.
1. !important
2. 인라인 스타일
3. 아이디 선택자
4. 클래스 선택자, 속성 선택자, 가상 클래스 선택자
5. 태그 선택자
6. 전체 선택자
7. inherited

◽ 코드 위치에 따른 우선 순위

선언이 중복되면 뒤 선언으로 덮어쓴다. (명시도에 차이가 있다면 코드 위치는 상관X)

💬 시멘틱 마크업

HTML 문서에 구조적 의미를 부여하는 마크업 방식이다. 시멘틱 마크업을 잘 지키면 검색 엔진에 더욱 의미있는 정보를 제공할 수 있고, 개발자가 문서를 이해하기 편하게 해준다.

💬 ⭐ display 속성

요소를 화면에 어떻게 표현할 지를 결정하는 속성으로, 요소를 인라인 요소, 블록 요소, 인라인 블록 요소, 플렉스 컨테이너, 그리드 컨테이너로 만들 수 있다.

display:none과 visibility:hidden의 차이점

둘 다 요소를 화면에서 보이지 않도록 하는 속성이다. 하지만 display:none은 렌더트리에 포함되지 않아 레이아웃에서 공간을 차지하지 않는 반면, visibility:hidden은 렌더트리에 포함되어 레이아웃에서 공간을 차지한다.

💬 ⭐ Flex

크기가 자유로운 요소들을 단일 축 방향으로 정렬하는 레이아웃 모델이다. flex-direction, justify-content, align-items 등의 속성을 통해 레이아웃을 그린다.

💬 ⭐ Grid

크기가 정해진 요소들을 2차원으로 정렬하는 레이아웃 모델이다. grid-template-rows, grid-template-columns 등의 속성을 통해 2차원 레이아웃을 그린다.

💬 ⭐ postition 속성

요소의 위치를 지정하기 위한 속성으로, static, relative, absolute, fixed, sticky 등을 사용할 수 있다.
- static은 문서의 일반적인 흐름에 따라 요소를 배치하는 기본값이다.
- relative는 '문서의 일반적인 흐름에 따른 위치'를 기준으로 요소를 이동시킬 수 있다.
- absolute는 '상위 요소 중 position 값이 static이 아닌 요소'를 기준으로 요소를 이동시킬 수 있고, 레이아웃 상에 배치되지 않는 공중에 떠 있는 위치를 가진다.
- fixed는 '뷰포트'를 기준으로 요소를 이동시킬 수 있고, 스크롤에 영향을 받지 않는 고정된 위치를 갖는다.
- sticky는 문서의 일반적인 흐름에 따른 위치를 가지다가, 스크롤에 의해 특정 위치에 위치하게 되면 fixed처럼 동작한다. (이 위치는 문서의 일반적인 흐름을 기준으로 지정)

💬 ⭐ 중앙 정렬 방법

width: ?를 설정하고 margin: ? auto
display: flex, justify-content: center, align-items: center
부모 요소에 position: relative를 설정한 후, 자식 요소에 position: absolute, top: 50%, left: 50%, transform: translate(-50%, -50%)

💬 Box Model

요소를 하나의 박스로 보는 CSS 모델로, 박스는 content, padding, border, margin으로 구성된다.

margin과 padding

margin은 border 바깥쪽 빈 공간이고, padding은 border 안쪽 빈 공간이다.

◽ box-sizing 속성

box-sizing 속성에 따라 width와 height값이 다르게 결정된다. 기본값인 content-box로 설정된 경우, content의 크기를 기준으로 width와 height 값이 결정된다. 그러나 border-box로 설정할 경우, content, padding, border을 합친 크기를 기준으로 width와 height 값이 결정된다.

💬 가상 클래스 선택자 (Pseudo-Class Selectors)

특정 조건에 해당하는 요소를 선택할 때 사용하는 선택자이다. 한 개의 콜론을 사용하여 표현하며, hover, active, focus, nth-child 등이 존재한다.

💬 가상 요소 선택자 (Pseudo-Element Selectors)

문서에 실제로 존재하지 않는 요소를 선택할 때 사용하는 선택자이다. 두 개의 콜론을 사용하며, before, after를 통해 생성한다.

💬 마진 병합(마진 상쇄)

인접 요소 혹은 부모 자식 요소 등에서 두 개의 마진이 겹쳤을 때 큰 마진 값으로 병합되는 현상이다. 패딩 요소를 사용하거나 부모 요소에 flex, grid 속성을 부여하여 해결할 수 있다.

💬 ⭐ Sass와 SCSS

Sass: CSS의 확장 언어이자 전처리기로, 변수, 중첩, 상속(@extend), 믹스인(@mixin, @include), 수학 연산자, 함수 등의 기능을 사용할 수 있다.
SCSS: Sassy CSS의 약자로, Sass의 기능을 지원하면서 CSS와 거의 같은 문법을 가진다.

💬 ⭐ CSS In JS

자바스크립트 안에서 CSS를 작성하는 스타일링 방식이다. 코로케이션과 컴포넌트 단위 스타일링이 가능해져 유지 보수가 용이해지고 가독성이 개선된다. 다만 자바스크립트 런타임에 스타일이 적용되어 초기 렌더링 속도가 느려질 수 있다는 단점이 있다.
styled-components, emotion는 CSS In JS 라이브러리이다. 일부 Sass 문법을 사용할 수 있어서 변수, 수학 연산자, 함수 등의 기능을 사용할 수 있다.

🔎 ⭐ TypeScript

자바스크립트의 정적 타이핑을 지원하기 위한 언어이다.

💬 타입스크립트를 사용하는 이유

자바스크립트의 동적 타이핑은 코드 규모가 커질수록 디버깅과 유지 보수가 어려워진다. 타입스크립트를 사용하면 정적 타이핑이 가능해져 코드의 안정성을 높힐 수 있다.

💬 type과 interface

타입을 정의하기 위한 키워드이다. type은 &(앰퍼샌드)를 통해 확장이 가능하고, interface는 extends를 통해 확장이 가능하다. 동일한 이름으로 타입을 정의할 경우, type은 에러가 발생하고 interface는 자동으로 확장된다.

💬 유니온 타입

둘 이상의 타입을 지정할 때 사용되는 타입으로, |로 표현한다.

💬 인터섹션 타입

두 타입이 공통적으로 갖는 타입을 지정할 때 사용되는 타입으로, &로 표현한다.

💬 유틸리티 타입

기존 타입을 변환하여 새로운 타입을 만들어주는 타입

◽ `Partial<Type>`

타입의 모든 속성을 Optional로 만드는 타입

◽ `Readonly<Type>`

타입의 모든 속성을 Read-Only로 만드는 타입

◽ `Pick<Type,Keys>`

키를 통해 특정 속성을 고르는 타입

◽ `Omit<Type,Keys>`

키를 통해 특정 속성을 제외하는 타입

◽ `Extract<Type,Union>`

유니온 타입을 통해 특정 속성을 고르는 타입

◽ `Exclude<Type,Union>`

유니온 타입을 통해 특정 속성을 제외하는 타입

◽ `Record<Keys,Type>`

키를 통해 특정 속성들에 동일한 타입을 지정하는 타입
첫번째 인자에 string을 입력하여 모든 문자열 키의 속성에 대해 동일한 타입을 지정할 수 있다.

💬 제네릭 타입

한번의 선언으로 다양한 타입을 지정할 수 있도록 하는 타입을 파라미터화한 타입으로, 타입에 유연성을 제공하고 재사용성을 높일 수 있다.
타입 파라미터(<T>)로 선언하고, 함수 호출 시 명시적으로 타입을 지정한다. 지정하지 않아도 타입 추론을 통해 자동으로 지정된다.

(유니온 타입이나 함수 오버로드를 대체할 수 있다.)

function identity<T>(arg: T): T {
    return arg;
}

// 숫자를 전달할 때
let outputNumberOne = identity(5); // 타입 추론을 통해 outputNumberOne 타입은 number
let outputNumberTwo = identity<number>(5); // 명시적으로 작성해도 된다.

// 문자열을 전달할 때
let outputStringOne = identity("Hello"); // 타입 추론을 통해 outputString 타입은 string
let outputStringTwo Two= identity<string>("Hello"); // 명시적으로 작성해도 된다.

(인수를 배열로 받을 경우 따로 제네릭 처리를 T[] 나 Array<T> 로 해주어야 한다.)
```
function identity<T>(arg: T[]): T[] {
   console.log(arg.length); 
   return arg;
}
```
함수 오버로딩

함수를 중복 선언하여 하나의 함수에 대해 다양한 타입을 지정하는 방식이다.
정의부를 가지지 않는 함수를 여러 개 선언하여 여러 개의 타입을 지정하고, 정의부를 가지는 함수는 타입을 any로 지정하여 사용한다.
```
function add(a: string, b: string): string; // 오버로드 함수 선언
function add(a: number, b: number): number; // 오버로드 함수 선언
function add(a: any, b: any): any { // 오버로드 함수 실행부 (any를 써준다)
  return a + b;
}

add('hello ', 'world~');
add(1, 2);
```
any를 쓰면 되는 것 아닌가?

any 타입을 사용하면 타입을 아예 체크하지 않기 때문에 정적 타이핑이라고 볼 수 없어 코드 안정성을 보장할 수 없다.

🔎 ⭐ Next.js

💬 Next.js란?

리액트에 SSR, SSG 등의 기능을 제공하는 웹 프레임워크이다

◽ SSR(Server Side Rendering)

전체 페이지에 대한 DOM을 그리는 작업이 없기 때문에 초기 로딩 속도가 빠르다. (Next.js에서는 사전 렌더링까지 지원하므로 더더욱.) 또한 검색 엔진에 완전한 HTML이 수집되기 때문에 검색 엔진 최적화에 유리하다.

◽ SSG(Static Site Generation) (aka. SSR과의 차이)

또한 Next.js는 SSG을 지원한다. SSG는 SSR과 유사한 방식과 특징을 가지지만, SSR은 요청이 들어왔을 때 페이지를 생성하고 반환하는 반면 SSG은 페이지를 미리 생성해놓고 요청이 들어왔을 때 반환한다. SSR은 각 요청마다 다른 정보를 보여주는 페이지나 실시간으로 업데이트되는 페이지에 적합하고 SSG는 각 요청에 항상 동일한 정보를 보여주는 페이지에 적합하다.

🔎 네트워크/운영체제

💬 ⭐ 웹 프로토콜

◽ HTTP(HyperText Tranfer Protocol)

월드 와이드 웹(WWW)에서 클라이언트와 서버 간에 데이터를 주고받기 위한 통신 프로토콜이다.
HTTP 메서드로는 GET, POST, PUT, PATCH, DELETE가 있다.
200번대 응답 코드는 성공 상태, 400번대 응답 코드는 클라이언트 측 오류 상태, 500번대 응답 코드는 서버 측 오류 상태를 나타낸다.

◽ HTTPS(HyperText Tranfer Protocol Secure)

HTTP에 데이터 암호화가 추가된 보안 버전이다. 암호화/복호화 과정이 필요하기 때문에 HTTP보다 속도가 약간 느리다.

💬 ⭐ 브라우저 렌더링 과정

다운로드
- URL의 도메인 네임 부분을 DNS 서버에 검색하고, DNS 서버에서 해당 도메인 네임에 해당하는 IP 주소를 찾아서 (사용자가 입력한 URL 정보와 함께) 브라우저에 전달한다.
- 브라우저는 IP 주소를 전달받으면 HTTP 요청 메시지를 생성하고 TCP 프로토콜을 사용하여 IP 주소로 전달한다.
- IP 주소의 서버가 요청 메시지를 받으면 응답 메시지를 생성하여 다시 브라우저에게 전달한다.
파싱
- 응답 메시지의 body에 있는 HTML과 CSS를 파싱하여 DOM 트리와 CSSOM 트리를 생성한다.
렌더트리 생성
- DOM 트리와 CSSOM 트리를 결합하여 렌더트리를 생성한다.
레이아웃·페인트
- 렌더트리를 계산하고 브라우저에 그려낸다.
리플로우·리페인트
- 화면을 다시 그려야할 경우, 렌더트리를 재생성하여 다시 계산하고 다시 브라우저에 그려낸다.

IP와 DNS

IP는 네트워크에서 장치를 식별하는 번호이고, DNS는 도메인 주소와 IP를 매칭해주는 서버이다.

◽ script 태그 처리의 효율성 높히기

HTML 파싱 과정에서 script 태그를 만날 경우 파싱 작업을 멈추고 스크립트를 처리한다. 이를 방지하기 위해 body 태그에 가장 아래에 script 태그를 위치시킬 수 있지만,HTML 파일이 큰 경우 속도 저하가 심각할 수 있다. 이를 해결하기 위해 defer 혹은 async 속성을 사용하여 병렬적으로 스크립트를 다운로드할 수 있다. / defer 속성을 사용할 경우, HTML 파싱이 종료될 때까지 기다렸다가 다운로드된 스크립트를 순서대로 실행시키고, async 속성을 사용할 경우 다운로드가 완료될 때마다 파싱을 잠시 멈춘 후 스크립트를 실행시키므로 스크립트 태그 처리의 효율성을 높힐 수 있다.

파싱 중 script 태그를 만나면 렌더링이 멈추는 이유

자바스크립트 코드를 파싱하기 위해 렌더링 엔진에서 자바스크립트 엔진으로 제어권이 넘어가기 때문이다.

◽ TCP/IP

컴퓨터 간 통신을 위한 가장 보편적인 '프로토콜 스위트'(프로토콜의 집합체)로, IP(인터넷 프로토콜)와 TCP(전송 조절 프로토콜)를 핵심 개념으로 하는 규칙이다.
IP는 데이터의 전달 여부를 확인할 수 없고 순서를 보장하지 않는다. TCP는 IP 위에서 동작하는 프로토콜로, 데이터의 전달 여부를 확인할 수 있고 순서(보낸 순서대로 받도록)를 보장 받는다. 즉, TCP/IP를 사용하겠다는 것은 IP Routing을 통해 목적지에 도달하며 TCP의 특성을 활용해 송신자와 수신자를 연결하여 데이터의 신뢰성을 유지하겠다는 것을 의미한다.

◽ 리플로우와 리페인트가 실행되는 시점

DOM 요소 혹은 CSS 스타일에 변경점이 있을 때

💬 ⭐ REST(Representational State Transfer)

REST란 HTTP URI를 통해 이름을 명시하여 리소스를 구분하고 HTTP 메서드를 통해 상태를 주고받는 원칙이다. / REST API는 이러한 REST 원칙을 기반으로 하는 API를 의미하고 RESTful API란 이 원칙을 잘 지켜 이해하기 쉬운 API를 의미한다.

◽ REST API에서 HTTP 요청 메서드

GET: 리소스를 읽어오기 위한 메서드 (요청 시 body 없음)
POST: 리소스를 생성, 수정하기 위한 메서드
PUT: 리소스 전체를 업데이트하기 위한 메서드
PATCH: 리소스 일부를 업데이트하기 위한 메서드
DELETE: 리소스를 삭제하기 위한 메서드
HEAD: GET 방식과 동일하지만 응답 코드와 header만 반환하는 메서드 (body는 반환하지 않음)
OPTIONS: 서버가 지원하는 메서드나 헤더 등을 확인하기 위해 사용하는 메서드 (CORS와 연관하여 요청이 안전한지 사전 요청을 보내기 위해 사용)

API(Application Programming Interface)

서로 다른 소프트웨어가 상호 작용할 수 있도록 도와주는 인터페이스(=규칙)

💬 Path Variable, Query Parameter

URL을 통한 HTTP 요청을 위한 개념으로, 리소스를 식별하고 싶으면 Path Variable을 사용하고, 정렬이나 필터링 등의 추가적인 정보를 요청한다면 Query Parameter(=Query String)를 사용한다.

💬 운영체제

하드웨어와 응용 프로그램이 상호 작용할 수 있도록 돕는 시스템 소프트웨어이다. 프로세스, 메모리, 파일 시스템 등을 관리한다.

◽ 대표적인 운영체제

Windows
Linux(오픈 소스 운영 체제)
iOS/MacOS/iPadOS
안드로이드

💬 프로세스와 스레드

프로세스는 운영체제에서 실행 중인 프로그램이고, 스레드는 프로세스에서 실행되는 작업의 단위이다.
(각 프로세스는 독립된 메모리 공간을 할당 받고, 코드, 데이터, 스택, 힙 등을 가지고 있다.)
(하나의 프로세스는 여러 개의 스레드를 가질 수 있지만 자바스크립트는 단일 스레드를 가진다.)

💬 DOS와 DDOS가 무엇인지

DOS는 서버에 트래픽이 과중되게 하여 웹 사이트 또는 리소스를 사용할 수 없게 만드는 공격이고 DDOS는 여러대의 컴퓨터를 이용한 DOS 공격이다.

💬 Load Balancing

로드 밸런싱이란 서버가 받는 트래픽을 로드 밸런서를 통해 분산하는 설계 패턴이다.
- 라운드 로빈 알고리즘: 순서대로 여러 서버에 번갈아가며 분산시킨다.
- 랜덤 샐렉트 알고리즘: 랜덤으로 분산시킨다.
- 리스트 커넥션 알고리즘: 로드 밸런서와 서버가 연결되어 있어 가장 여유로운 서버에 트래픽을 할당한다.
- 레이시오 알고리즘: 성능이 좋은 서버에 많은 트래픽을 할당한다.

🔎 기타 프로그래밍 지식

💬 프로그래밍

문제 상황 인식하고 해결 방법 도출하여 프로그래밍 언어를 통해 컴퓨터에게 명령을 내리는 일이다.

💬 컴파일러, 인터프리터

사람이 이해할 수 있는 프로그래밍 언어를 컴퓨터가 이해할 수 있는 기계어로 변환하는 일종의 번역기이다. / 컴파일러는 전체 코드를 한번에 변환하여 초기 로딩 속도가 느리지만 실행 속도가 빠르다. (컴파일 단계와 실행 단계가 나뉘며 실행 파일을 생성한다. C, C++, C#, Java 등이 대표적인 컴파일러 언어이다.) / 인터프리터는 코드를 한 줄씩 변환하여 초기 로딩 속도는 빠르나 실행 속도가 느리다. (인터프리트 단계와 실행 단계가 나뉘지 않기 때문에 실행 파일도 없다. JavaScript, Python 등이 대표적인 인터프리터 언어이다.)
자바스크립트는 인터프리터 언어이지만, V8 엔진부터 실행 속도를 보완하기 위해 JIT(Just-In-Time) 컴파일러를 함께 사용한다.

💬 프론트엔드

HTML/CSS/JS와 같은 웹 언어와 Private API 혹은 Public API를 사용하여 사용자 인터페이스를 구축하는 직무이다.

💬 웹 표준

웹에서 사용하는 기술들을 표준화된 방식으로 작성하는 것을 의미한다. 웹 표준을 지키면 다양한 브라우저에서의 호환성과 검색 엔진 최적화 등의 측면에서 장점이 있다.

💬 웹 접근성

신체적, 환경적 조건에 관계없이 웹에 접근할 수 있도록 하는 것을 의미한다. 웹 접근성을 지키면 다양한 사용자를 대상으로 동등한 기회를 부여할 수 있다.

💬 크로스 브라우징

웹 애플리케이션이 여러 브라우저 및 여러 버전에서 일관되게 동작하도록 하는 작업이다. 여러 브라우저들은 각각의 렌더링 엔진이 다르기 때문에 크로스 브라우징 작업을 통해 브라우저마다 동일한 화면이 보이도록 할 필요가 있다. 'Can I Use'와 같은 사이트를 통해 각 브라우저의 호환성을 검토할 수 있다

💬 ⭐ 개발 환경 세팅

◽ webpack과 babel

webpack은 여러 개의 파일을 하나로 합쳐 웹 페이지에서 사용할 수 있는 형태로 가공하는 '모듈 번들러'이고, babel은 최신 자바스크립트 문법(ES6)을 이전 버전(ES5)으로 변환해주어 다양한 브라우저에서 동작 가능한 코드로 변환해주는 '컴파일러'이다.
webpack과 babel은 설정에 있어 진입 장벽이 있는데, 리액트의 CRA를 사용하면 webpack, babel의 초기 설정이 쉽게 가능하다. (이 경우, eject 혹은 customize-cra 와 react-app-rewired와 같은 라이브러리를 사용하여 webpack 설정을 수정할 수 있다.)

◽ vite

esbuild를 사용하여 빠르게 개발 환경을 세팅해주는 빌드 도구로, Webpack을 대체할 수 있다. 개발 환경에서 아주 높은 속도를 보여준다.

💬 MVVM 패턴과 Flux 패턴

MVVM 패턴은 양방향 데이터 흐름을 의미하고, Flux 패턴은 단방향 데이터 흐름을 의미한다. React는 Flux 패턴을 따르고, Vue와 Angular는 MVVM 패턴을 따른다.

💬 애자일(Agile)

신속한 반복 작업을 통한 고객과의 협력 및 개인과의 상호 작용을 강조하는 개발 방법론이다.

💬 TDD(Test-Driven Development)

코드를 작성하기 테스트 케이스를 작성해보는 개발 방법론이다. 테스트 케이스를 작성할 때 주로 작은 단위로 만들기 때문에 코드가 방대해지지 않으면서 코드의 모듈화가 자연스럽게 이루어진다. TDD 도구로는 Jest, Mocha 등이 있다.

💬 ⭐ XSS(Cross-Site Scripting)와 CSRF(Cross-Site Request Forgery)

웹 보안 공격으로, XSS는 악의적인 스크립트를 삽입하는 공격이고, CSRF는 사용자의 의도와 무관하게 사용자 권한을 이용하여 악의적인 요청을 보내는 공격이다.
XSS를 해결하려면 HTML 문자를 HTML Entity로 변경해주는 Sanitize 조치를 취할 수 있다.
CRSF를 해결하려면 서버에서 사용자의 세션과 연결된 CSRF Token을 생성하여 모든 요청에 해당 토큰을 포함시켜 검증하도록 해야 한다.

💬 dependencies 와 devDependencies

dependencies는 애플리케이션 동작과 연관된 라이브러리를 관리하는 속성이고, devDependencies는 개발 환경에서만 필요한 라이브러리를 관리하는 속성이다.
애플리케이션 배포 시 dependencies는 포함되고 devDependencies는 포함되지 않는다.

SOP란 '동일 출처 정책'으로, 웹 애플리케이션은 보안상의 이유로 동일한 프로토콜, 호스트명, 포트를 가져야만 리소스를 공유할 수 있다는 정책을 두고 있다. CORS란 이를 해결하기 위한 '교차 출처 리소스 공유 정책'으로, 서버에서 특정 조건에서 데이터 접근 권한을 허용하여, 출처가 다른 도메인에서의 요청을 가능하도록 하는 정책이다.

만약 클라이언트 측에서 SOP 관련 이슈를 해결해야한다면?

SOP는 브라우저의 정책이기 때문에, 서버 간의 통신은 SOP가 적용되지 않는다. 그러므로 프록시 서버를 사용하면 SOP를 우회할 수 있다. 클라이언트의 요청을 프록시 서버에 위임하고, 프록시 서버에서 데이터 요청을 전송하고, 서버가 응답 결과를 클라이언트에게 전달한다. 이 방식을 사용하면 클라이언트 측에서 SOP 관련 이슈 없이 서로 다른 출처에서 리소스를 공유할 수 있다.

💬 ⭐ 쿠키, 세션, 웹 스토리지의 차이

HTTP의 비연결성 지향, 무상태 성격으로 인해, 클라이언트(브라우저)는 새로고침이나 페이지 이동 시 서버로부터 받은 데이터(주로 사용자 인증 데이터)를 잃게 된다. 이러한 문제는 클라이언트가 데이터를 쿠키, 세션, 웹 스토리지에 저장함으로써 해결할 수 있다. / 쿠키와 웹 스토리지는 클라이언트에 저장되고 세션은 서버에 저장된다. 따라서 쿠키와 웹 스토리지는 세션에 비해 보안이 취약한데, 특히 쿠키는 자동 전송 위험이 있어 CSRF 위험이 있고 모든 요청에 쿠키가 포함되어 서버 부담이 증가한다. / 데이터의 유효 기간에도 차이가 있는데, 쿠키는 만료 기간에 따라 종료되고, 로컬 스토리지는 영구적으로 저장되며 세션 스토리지와 세션은 브라우저를 닫으면 종료된다. 따라서 쿠키는 팝업창, 로컬 스토리지는 자동 로그인, 세션 스토리지는 브라우저를 닫을 때 로그아웃되는 로그인, 세션은 쿠키와 함께 사용해서 일정 시간동안 유지되는 로그인을 구현하기 유리하다.
세션과 쿠키를 사용한 로그인
1. 서버는 사용자를 식별하기 위한 고유한 세션 ID를 만들어 서버에 저장하고. 클라이언트에 쿠키로 전달
2. 클라이언트에서 서버로 요청을 보낼 경우, 쿠키에 저장된 세션 ID를 같이 전달. 서버는 저장된 세션 ID와 비교하여 사용자 인증
  - 서버는 각 사용자마다 고유한 세션 ID를 저장해야 하기 때문에 서버의 부담이 높고 확장성이 좋지 않다.
브라우저 저장소와 상태 관리 라이브러리의 차이

브라우저 저장소 :
- 디스크에 저장된다 → 새로고침해도 값이 유지된다.
- 사이드 이펙트가 발생하지 않는다.
상태 관리 라이브러리 :
- 메모리에 저장된다 → 새로고침하면 값이 사라진다. (recoil-persist를 통해 브라우저 저장소와 연결 가능)
- 상태가 바뀌었을 때의 리렌더링이 일어난다.

💬 ⭐ 토큰 기반 인증 방식

클라이언트와 서버 간의 유효성 검사를 위해 토큰을 사용하는 인증 방식이다. JWT, Oauth2.0 등의 방식이 대표적이다.

JWT(JSON Web Token)

JSON 형태의 Token을 사용하는 토큰 기반 인증 방식으로, Header, Payload, Signature로 이루어진다.
페이로드에 사용자 정보를 포함하고 있기 때문에, 사용자 정보를 서버에 따로 저장할 필요가 없다. 즉 서버 부하를 줄일 수 있고 확장성이 뛰어나다.
로그인 성공 시 서버는 토큰을 발급하여 클라이언트에게 전달하고, 클라이언트는 이를 쿠키나 웹 스토리지에 저장하여 서버에 인증이 필요한 요청을 보낼 때 사용한다.

💬 Git/GitHub

Git은 소스 코드를 관리하는 형상 관리 도구이고, GitHub는 Git의 웹 호스팅 서비스이다.

💬 ESLint와 Prettier

코드 컨벤션을 위한 도구로, ESLint는 함수 선언, 반복문 등의 '코딩 방식'을 통일하고, Prettier는 공백, 줄바꿈, 들여쓰기 등의 '코드의 스타일'을 통일한다.

💬 ⭐ 캐시

자주 사용하는 데이터를 임시로 저장하는 저장 공간으로, 캐시를 사용하면 반복적인 요청에 대한 응답 시간 및 네트워크 사용을 최소화할 수 있다.
쿠키, 세션, 웹 스토리지는 사용자 인증을 위해 주로 사용되고, 캐시는 이미지, 동영상 등을 임시 저장하기 위해 주로 사용된다.

💬 ⭐ REST API와 캐싱

REST API는 웹 표준을 따라 고유한 엔드포인트 사용하기 때문에 'HTTP 캐싱 전략'을 그대로 사용할 수 있다.

HTTP 캐싱 전략

각각의 엔드포인트에서 헤더를 사용하여 캐싱을 구현하는 것

💬 GraphQL

클라이언트와 서버 간 데이터 통신을 위한 쿼리 언어로, 한번의 요청으로 가져오고 싶은 모든 데이터를 가져올 수 있다.
GraphQL은 하나의 엔드포인트를 갖기 때문에 HTTP의 캐싱 전략을 사용할 수 없다. 따라서 캐싱을 구현하려면 영속 쿼리나 아폴로 클라이언트를 사용하여 GraphQL의 결과를 따로 관리해야 한다.

Query

데이터베이스나 API 등에서 정보를 요청하거나 조회할 때 사용하는 언어

💬 ⭐ Web Socket

웹 소켓은 클라이언트와 서버 간 데이터를 교환하는 실시간 양방향 통신 프로토콜로, 채팅 구현에 사용할 수 있다.

💬 SSE(Server Sent Event)

SSE는 서버에서 클라이언트로 데이터를 보내는 실시간 단방향 통신 프로토콜로, 알림 구현에 사용할 수 있다.

서동경

개발 공부💪🏼

이전 포스트

프론트엔드 인터뷰 예상 질문 (3) - Etc

인터뷰 준비

🔎 HTML/CSS

💬 HTML5의 주요 태그

💬 px, em, rem의 차이

💬 Attribute와 Property의 차이

💬 DOM

◽ DOM의 구성 요소(주요 노드)

💬 vw, vh

💬 반응형 브레이크 포인트

💬 CSS 케스케이딩

◽ 명시도에 따른 우선 순위

◽ 코드 위치에 따른 우선 순위

💬 시멘틱 마크업

💬 ⭐ display 속성

💬 ⭐ Flex

💬 ⭐ Grid

💬 ⭐ postition 속성

💬 ⭐ 중앙 정렬 방법

💬 Box Model

◽ box-sizing 속성

💬 가상 클래스 선택자 (Pseudo-Class Selectors)

💬 가상 요소 선택자 (Pseudo-Element Selectors)

💬 마진 병합(마진 상쇄)

💬 ⭐ Sass와 SCSS

💬 ⭐ CSS In JS

🔎 ⭐ TypeScript

💬 타입스크립트를 사용하는 이유

💬 type과 interface

💬 유니온 타입

💬 인터섹션 타입

💬 유틸리티 타입

◽ Partial<Type>

◽ Readonly<Type>

◽ Pick<Type,Keys>

◽ Omit<Type,Keys>

◽ Extract<Type,Union>

◽ Exclude<Type,Union>

◽ Record<Keys,Type>

💬 제네릭 타입

🔎 ⭐ Next.js

💬 Next.js란?

◽ SSR(Server Side Rendering)

◽ SSG(Static Site Generation) (aka. SSR과의 차이)

🔎 네트워크/운영체제

💬 ⭐ 웹 프로토콜

◽ HTTP(HyperText Tranfer Protocol)

◽ HTTPS(HyperText Tranfer Protocol Secure)

💬 ⭐ 브라우저 렌더링 과정

◽ script 태그 처리의 효율성 높히기

◽ TCP/IP

◽ 리플로우와 리페인트가 실행되는 시점

💬 ⭐ REST(Representational State Transfer)

◽ REST API에서 HTTP 요청 메서드

💬 Path Variable, Query Parameter

💬 운영체제

◽ 대표적인 운영체제

💬 프로세스와 스레드

💬 DOS와 DDOS가 무엇인지

💬 Load Balancing

🔎 기타 프로그래밍 지식

💬 프로그래밍

💬 컴파일러, 인터프리터

💬 프론트엔드

💬 웹 표준

💬 웹 접근성

💬 크로스 브라우징

💬 ⭐ 개발 환경 세팅

◽ webpack과 babel

◽ vite

💬 MVVM 패턴과 Flux 패턴

💬 애자일(Agile)

💬 TDD(Test-Driven Development)

💬 ⭐ XSS(Cross-Site Scripting)와 CSRF(Cross-Site Request Forgery)

💬 dependencies 와 devDependencies

💬 ⭐ SOP(SOP, Same-Origin Policy), CORS(Cross-Origin Resource Sharing)

만약 클라이언트 측에서 SOP 관련 이슈를 해결해야한다면?

💬 ⭐ 쿠키, 세션, 웹 스토리지의 차이

💬 ⭐ 토큰 기반 인증 방식

💬 Git/GitHub

◽ `Partial<Type>`

◽ `Readonly<Type>`

◽ `Pick<Type,Keys>`

◽ `Omit<Type,Keys>`

◽ `Extract<Type,Union>`

◽ `Exclude<Type,Union>`

◽ `Record<Keys,Type>`