Portfolio

자바스크립트

원시값과 객체의 비교

원시 타입: 숫자, 문자열, 불리언, null, undefined, 심벌

객체 타입: 객체

원시값은 변경 불가능(immutable)한 값이다.

원시값을 변수에 할당하면 변수에는 실제 값이 저장된다.

원시값을 갖는 변수를 다른 변수에 할당하면 원본의 원시값이 복사되어 전달된다.

객체는 변경 가능(mutable)한 값이다.

객체를 변수에 할당하면 참조값이 저장된다.

객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조값이 복사되어 전달된다.

객체지향 프로그래밍이란 무엇인가요?

답변

객체라고 하는 단위의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임.

좀 더 철학적이고 넓은 의미로는 ‘인식론’이라고도 할 수 있을 것 같습니다.

개별적인 사물을 각각 객체로 인식하는 것인데, 그 사물은 여러 속성을 가지고 있습니다.

상태를 나타내는 프로퍼티, 동작을 나타내는 메서드 등이 있습니다.

이처럼 사물을 객체로 바라보고, 그 속성을 묶어서 구성하려는 것.

그리고 객체와 객체 간의 상호작용을 나타내는 것.

이러한 관점으로 세계를 인식하고, 프로그래밍을 통해 표현하려는 것.

그것이 객체지향 프로그래밍이라고 이해하고 있습니다.

[객체 지향 프로그래밍의 4가지 특징]

추상화

객체들이 공통적으로 필요로 하는 속성이나 동작을 하나로 추출한다.

캡슐화

객체 내부의 동작에 대한 구현 원리를 감추는 것

상속

자식 클래스가 부모 클래스의 속성을 물려받아 사용

다형성

서로 다른 클래스가 같은 동작 수행 명령을 받았을 때,

각자의 특성에 맞는 방식으로 동작하는 것

객체 각각은 독립적으로 작용할 수 있도록 응집도가 강해야 하고,

다른 모듈을 참조하는 결합도는 낮아야 한다.

객체란 무엇인가요?

답변

객체는 하나의 자료구조인데, 여러 개의 속성을 하나의 단위로 묶어 구성한 것.

속성 중에는 ‘상태’를 나타내는 ‘프로퍼티’라는 것이 있구요,

‘동작’을 나타내는 ‘메서드’라는 것도 있습니다.

상태 데이터와 동작을 하나의 단위로 묶은 것을 객체라고 할 수 있습니다.

상속이란 무엇인가요?

답변

어떤 객체가 상위 객체의 프로퍼티나 메서드를 상속받아 사용할 수 있는 것.

자바스크립트는 프로토타입을 기반으로 상속을 구현합니다.

프로토타입이란 무엇인가요? ★★★

답변

어떤 객체의 상위 객체의 역할을 하는 객체로서,

하위 객체에 프로퍼티나 메서드를 공유하는 객체를 말합니다.

하위 객체는 프로토타입의 프로퍼티나 메서드를 자신의 것처럼 자유롭게 사용할 수 있습니다.

모든 객체는 [[Prototype]]이라는 내부 슬롯을 갖는데, 여기에 들어있는 값은

프로토타입의 참조입니다. 객체는 __proto__(언더바 언더바 proto 언더바 언더바)라는

접근자 프로퍼티를 통해 자신의 프로토타입에 간접적으로 접근할 수 있습니다.

기타

getter, setter

접근자 프로퍼티를 사용하는 이유: 상호 참조 방지

__proto__를 직접 사용하는 것은 권장하지 않는다.

모든 객체가 __proto__ 접근자 프로퍼티를 사용할 수 있는 것은 아님. 직접 상속

getPrototypeOf, setPrototypeOf

프로토타입의 프로토타입은 언제나 Object.prototype이다.

생성자 함수, 프로토타입, 인스턴스의 관계를 설명하세요 ★

답변

생성자 함수, 프로토타입, 인스턴스(객체)의 삼각 관계가 있는데요.

생성자 함수는 인스턴스를 생성하는 템플릿과 같은 것입니다.

인스턴스는 그 결과물이구요.

생성자 함수가 커피머신이라면, 인스턴스는 커피라고 할 수 있을 것 같습니다.

또 한편으로는, 생성자 함수의 프로토타입이라는 것이 존재하여

여기에 프로퍼티 또는 메서드를 할당함으로써 인스턴스에게 상속을 해주는 것이 가능합니다.

좀 더 기술적으로 말씀을 드리면,

생성자 함수는 prototype이라는 프로퍼티를 통해 프로토타입에 접근할 수 있구요.

인스턴스는 __proto__라는 접근자 프로퍼티를 통해 프로토타입에 접근할 수 있습니다.

한편, 프로토타입에는 constructor라는 프로퍼티가 있어서 이것을 통해 생성자 함수에

접근할 수 있습니다. 물론, 이것은 상속이 되기 때문에 인스턴스도 constructor 프로퍼티를

통해 자신의 생성자 함수에 접근할 수 있습니다.

한편, 생성자 함수와 프로토타입은 단독으로 존재할 수 없고 언제나 동시에 존재합니다.

생성자 함수가 생성되는 시점에 프로토타입도 더불어 생성됩니다.

기타

non-constructor: 화살표 함수, ES6 메서드의 축약 표현으로 정의된 메서드

Object.create를 사용한 직접 상속

프로토타입 체인이란 무엇인가요?

자바스크립트는 객체의 프로퍼티에 접근하려고 할 때

해당 객체에 접근하려는 프로퍼티가 없다면 [[Prototype]] 내부 슬롯의

참조를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색한다.

이를 프로토타입 체인이라고 한다.

프로토타입 체인은 상속을 구현하는 메커니즘

프로토타입의 프로토타입은 항상 Object.prototype (프로토타입의 종점)

Object.prototype의 [[Prototype]] 내부 슬롯의 값은 null

오버라이딩과 오버로딩은 무엇인가요?

답변

오버라이딩이란, 상위 클래스의 메서드를 하위 클래스의 메서드가 재정의하여

사용하는 것을 말합니다.

오버로딩이란, 함수의 이름은 동일하지만 매개 변수의 개수나 타입이 다른 함수를 구현하고,

매개변수에 의해 함수를 구별하여 호출하는 방식을 말합니다.

자바스크립트는 오버로딩을 지원하지 않는 것으로 알고 있습니다.

하지만 arguments 객체를 사용한다면 비슷하게 구현할 수 있을 것이라고 추정합니다.

브라우저의 렌더링 과정에 대해 설명해주세요. ★★★

사용자가 특정 페이지에 접속하여 HTML을 서버로부터 내려받으면,

브라우저의 렌더링 엔진에서는 이를 파싱한다.

HTML 파싱을 진행하면서 DOM 트리를 만들게 되는데,

이때 Link 태그를 만나 StyleSheet를 내려받게 될 경우

CSS 파싱을 통해 CSSOM 트리를 만들게 된다.

이 일련된 과정을 통해 둘을 결합하여 렌더 트리를 만들고,

레이아웃 작업을 통해 사용자에게 그려줄 영역을 계산한 뒤, 화면에 뿌려주게된다. (페인트)

위 과정을 진행하면서 자바스크립트를 만나면

자바스크립트 런타임 환경에 컨트롤(수행권한)을 넘겨 결과 값을 받는다.

이 과정 중 DOM 파싱은 중단된다.

생성된 DOM 노드의 레이아웃 수치(너비, 높이, 위치 등) 변경 시

영향 받은 모든 노드의 수치를 재계산하여,

렌더 트리를 재생성하는 과정을 리플로우라고하며,

이 과정이 끝난 후 재생성된 렌더 트리를 다시 그리게 되는데

이 과정을 리페인트라고 한다.

reflow가 이루어졌다고 항상 repaint가 되는 것은 아니며,

background-color, visibillty, outline 등

레이아웃 수치에 영향을 끼치지 않는 것은 repaint 과정만 진행된다.

p.661

width, height, position, 요소의 추가 및 삭제,

요소의 크기 및 위치 이동, 윈도우 창 크기의 변경 등

async와 defer의 공통점 및 차이점 + type = module

익스플로러 10 이상

리플로우 & 리페인팅

자바스크립트에 의해 DOM 요소의 변경이 발생하는 경우가 있다.

DOM의 레이아웃(위치, 크기 등)이 변경되는 경우

DOM과 CSSOM은 렌더 트리를 다시 만들게 되는데, 이것이 리플로우.

그리고 이렇게 재생성된 렌더 트리를 화면에 다시 그리는 작업을 리페인팅.

DOM 요소를 변경했다고 해서 항상 리플로우가 발생하는 것은 아니며,

레이아웃의 변경이 없는 경우 리페인트만 발생한다. (visibility, translate)

호이스팅에 대해 설명해주세요. ★★

호이스팅

변수, 함수, 클래스 등 모든 식별자의 선언문은

런타임 이전에 먼저 실행되는데 이것을 호이스팅이라고 한다.

그리고 스코프에 식별자와 식별자에 바인딩된 값이 등록된다.

실행 컨텍스트의 렉시컬 환경은 스코프를 생성.

그 스코프에 식별자와 그 식별자에 바인딩 된 값을 저장한다.

이 스코프에 저장된 정보를 기반으로, 자바스크립트는 코드를 실행한다.

이것이 호이스팅과, 호이스팅이 발생하는 이유라고 이해하고 있습니다.

변수 호이스팅 vs 함수 호이스팅

함수 호이스팅과 변수 호이스팅은 미묘한 차이가 있다.

런타임 이전에 먼저 실행되어 식별자를 생성한다는 점에서는 동일하다.

그러나 var 키워드로 선언된 변수는 undefined로 초기화되고,

함수 선언문을 통해 생성된 식별자는 함수 객체로 초기화된다.

P.165

함수 선언문 vs 함수 표현식

함수 표현식은 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생한다.

var vs let, const의 호이스팅

var는 초기화 이전에 사용할 수 있으나(undefined이지만),

let 또는 const로 선언한 변수는 초기화 이전에는 사용할 수 없다.

선언 단계 - TDZ - 초기화 단계 - 할당 단계

P.42, P.208

런타임 이전에 선언문을 모두 끌어올려서
최상단에 선언하는 것을 말합니다.

호이스팅에는 함수 호이스팅과 변수 호이스팅이 있는데,
변수 호이스팅의 경우 각 변수 선언 키워드마다 차이가 있습니다.

함수 호이스팅의 경우에는 함수 선언식을 통해 작성한 함수는 해당 함수의 내부 블럭까지 호이스팅되기 때문에 어디서든지 사용할 수 있으나, 함수 표현식의 경우에는 변수 호이스팅과 동일하게 동작하기 때문에 이 점을 유의하여 코드를 작성해야합니다.

var와 let, const의 차이점에 대해 설명해주세요. ★

var

변수 중복 선언 허용
함수 레벨 스코프 (함수 외부에서 var로 선언한 변수는 모두 전역 변수)
변수 호이스팅. 이것은 let, const도 동일하지만 var 키워드로 선언한 변수는

선언문 이전에 참조할 수 있다 (undefined)

var 키워드로 선언한 전역 변수는 전역 객체 window의 프로퍼티

let

변수 중복 선언 금지 (재할당 가능)
블록 레벨 스코프 (모든 코드 블록을 지역 스코프로 인정)
변수 호이스팅 (TDZ, 변수 선언문 이전에는 참조할 수 없음)
let 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아니다.

const

let과 거의 동일하다.

선언과 동시에 초기화해야 한다.
재할당이 금지된다.

이벤트 버블링에 대해서 설명해주세요.

이벤트 버블링은 특정 DOM 요소에서 이벤트가 발생했을 때,

해당 이벤트가 더 상위의 DOM 요소들로 전달되어가는 특성을 의미합니다.

이벤트 버블링은 이벤트 위임의 동작 메커니즘이라고 볼 수 있습니다.

이벤트 버블링은 기본적으로 child -> parent 인데 반대로 구현하는 방법은 무엇일까요?

반대로 구현하는 것을 이벤트 캡쳐라고 합니다.

addEventListener의 옵션 객체에 capture: true를 설정해주면 됩니다.

이벤트 전파 (버블링, 캡처링)

이벤트 위임 기법

하나의 상위 DOM 요소에 이벤트 핸들러를 등록하는 방법

e.stopPropagation: 이벤트 전파 중지

e.preventDefault: 해당 요소의 기본 동작을 중단

e.target: 이벤트를 발생시킨 요소 / e.currentTarget: 이벤트가 바인딩된 요소

Throttle과 Debounce의 차이를 설명하세요. ★

이벤트 핸들러의 과도한 호출을 방지하는 기법 (공통점)

디바운스는 마지막에 단 한 번만 이벤트 핸들러가 호출되도록 한다.

(버튼 중복 클릭 방지, 검색어 자동 완성 UI, resize 이벤트 처리 등)

스로틀링은 일정한 시간 단위로 이벤트 핸들러가 최대 한 번만 호출되도록 한다.

(무한 스크롤 UI)

스로틀링은 일정한 시간 동안 이벤트 핸들러가 한 번은 호출됨을 보장한다.

디바운스는 그렇지 않다.

Mutable과 Immutable을 설명하세요.

Mutable은 바뀔 수 있는 변수 타입을 말하며,

Immutable은 이와 반대되는 개념입니다.

Javascript에서는 Object와 Array만 Mutable한 타입이고,

다른 원시 타입의 경우 Immutable하다고 볼 수 있습니다.

this에 대해서 설명하세요 ★★

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다.

this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.

물론 함수 내부가 아니어도, 코드 어디에서든 this를 참조할 수 있다.

전역에서 this는 전역 객체 window를 가리킨다.

일반 함수 내부에서 this는 전역 객체 window를 가리킨다. (메서드 내부의 일반 함수도)

만약 엄격 모드가 적용되었다면 this는 undefined를 가리킨다. (그 이유를 추정)

메서드 내부의 this는 메서드를 호출한 객체를 가리킨다.

생성자 함수 내부의 this는 생성자 함수가 미래에 생성할 인스턴스를 가리킨다.

apply, bind, call 메서드를 통해 this 바인딩을 조정해줄 수 있는데,

첫 번째 인수로 전달한 객체에 this가 바인딩된다.

화살표 함수는 함수 자체의 this 바인딩을 갖지 않는다.

화살표 함수 내부의 this는 상위 스코프의 this를 그대로 참조한다.

렉시컬 스코프와 비교하며 설명하는 것도 좋겠다.

스코프는 정적이고, this는 동적이다.

스코프에 대해서 설명하세요 ★★

스코프는 식별자가 유효한 범위를 말한다.

모든 식별자(변수, 함수, 클래스 이름 등)는

다른 코드가 식별자 자신을 참조할 수 있는 유효 범위를 갖는데,

이것은 식별자가 선언된 위치에 의하여 결정된다.

자바스크립트 엔진은 스코프를 통해 어떤 변수를 참조할 것인지 결정한다.

스코프는 전역 스코프, 지역 스코프, 그 안에 지역 스코프로

계층적으로 연결되며, 이것을 스코프 체인이라 한다.

자바스크립트 엔진은 스코프 체인을 통해 변수를 검색한다. (식별자 결정)

변수를 참조하는 현재 스코프에서 시작하여

상위 스코프 방향으로 이동하면서 변수를 검색한다.

렉시컬 스코프.

함수를 어디서 호출했는지가 아니라

함수를 어디서 정의(선언)했는지에 따라 상위 스코프를 결정한다.

함수는 이렇게 결정된 자신의 상위 스코프를 기억한다.

함수가 호출될 때마다 상위 스코프를 참조할 필요가 있기 때문이다.

전역 스코프의 변수는 어디서든지 참조할 수 있다.

지역 스코프의 변수는 자신의 스코프와 하위 스코프에서만 유효하다.

스코프 내에서 식별자는 유일해야 하지만,

다른 스코프에는 같은 이름의 식별자를 사용할 수 있다. (let, const)

화살표 함수에 대해서 설명하세요 ★★

ES6에서 도입된 화살표 함수는

function 키워드 대신 화살표 키워드를 사용하여 간략하게 함수를 정의할 수 있다.

표현만 간략한 것이 아니라 내부 동작도 일반 함수보다 간략하다.

일반 함수와의 차이는 다음과 같다.

화살표 함수는 인스턴스를 생성할 수 없는 non-constructor다.

인스턴스가 없으므로 프로토타입도 생성하지 않고,

함수 객체라면 모두 가지고 있는 prototype 프로퍼티도 없다.

화살표 함수는 함수 자체의 this 바인딩을 갖지 않는다.

(arguments, super 등의 바인딩도 갖지 않는다)

화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조한다.

특히, 화살표 함수는 “콜백 함수 내부의 this 문제”를 해결하는 데 유용하다.

콜백 함수가 일반 함수라면, 그 내부의 this는 전역 객체를 가리킨다.

strict 모드 또는 클래스(암묵적으로 strict 모드)에서

콜백함수로 일반 함수를 사용한다면 this에 undefined가 바인딩되는 문제가 있다.

이를 해결하려면 apply, call, bind 메서드를 사용해도 되지만,

화살표 함수가 유용하다.

화살표 함수 내부의 this는 상위 함수의 this를 그대로 참조하기 때문이다.

예를 들어, 클래스의 프로토타입 메서드에서 화살표 함수를 사용했다면,

화살표 함수의 this는 프로토타입 메서드의 this와 일치된다.

이것은 인스턴스가 된다.

이와 같이 this 바인딩 문제를 해결하는 데 굉장히 유용하게 사용될 수 있다.

화살표 함수를 사용하는 것이 좋지 않은 경우

일반 객체의 메서드를 정의하면서 화살표 함수를 사용하는 것은 좋지 않다.

화살표 함수의 this는 전역 객체 또는 undefined를 가리키게 될 것이므로.

그 경우에는 ES6의 메서드 축약 문법을 사용하는 것이 낫다.

그러면 this는 그 메서드를 호출한 객체가 된다.

중첩되어 있다면 더 위로 올라간다. 화살표 함수가 아닌 함수의 this를 참조

일반 함수는 매개변수의 이름 중복을 허용한다. (물론 strict mode에서는 에러 발생)

화살표 함수에서 중복된 매개변수 이름을 선언하면 에러가 발생한다.

ES6에서 새롭게 도입된 기술은 무엇이 있나요?

let, const, 블록스코프

클래스

화살표함수

매개변수 기본값 지정

Rest 파라미터

전달 인자들의 목록을 배열로 전달받는다.

arguments 객체와 유사하나, arguments 객체는 유사 배열 객체이므로,

배열로 변환해야 하는 번거로움이 있었다.

화살표 함수는 arguemnts 객체를 갖지 않으므로, REST 파라미터가 필요

(가변 인자 함수)

스프레드 연산자

구조분해 할당 (객체, 배열)

템플릿 리터럴 (보간)

모듈

프로미스

객체 리터럴이 강화

프로토타입 설정 가능

프로퍼티 축약 표현

메소드 축약 표현

super 호출 (자신을 바인딩한 객체)

계산된 이름을 프로퍼티 이름으로 사용

ES6 사양에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미

4. 자바스크립트 ES6 에서 추가된 문법

2015에 나온 ES6 (ECMAScript = javascript)의 기능 ES6에서 변수를 정의하는데 let, 상수를 정의하는데 const를 사용 할 수 있다. 그리고 이 키워드로 선언하면 - 블록레벨의 스코프를 가짐 - 같은 스코프에선 let으로 변수를 재정의 하는 것 불가 - let, const는 호이스팅 적용이 안됨.

https://way-be-developer.tistory.com/157

자바스크립트에서 함수의 종류는 무엇이 있나요?

일반 함수

일반 함수로서 호출
생성자 함수로서 호출
객체의 메서드로서 호출

메서드

화살표 함수

제러네이터 함수

async 함수

클로저에 대해서 설명하세요 ★★★★★

외부 함수보다 내부 함수가 더 오래 유지되는 경우,

내부 함수는 이미 생명 주기가 종료한 외부 함수의 지역 변수를 참조할 수 있다.

이러한 내부 함수를 클로저라고 부른다.

외부 함수의 실행 컨텍스트는 콜 스택에서 제거되지만,

외부 함수의 렉시컬 환경까지 소멸하는 것은 아니기 때문이다.

내부 함수의 [[Environment]]라는 내부 슬롯은

외부 함수의 렉시컬 환경을 여전히 가리키고 있고,

이 렉시컬 환경에 식별자가 남아있기 때문에

지역 변수를 여전히 참조할 수 있고, 변경할 수 있다.

동기와 비동기 처리

자바스크립트 엔진은 싱글 스레드 방식으로 동작한다.

한 번에 하나의 태스크만 실행할 수 있다. 이것이 동기 처리.

현재 실행 중인 태스크가 종료한 뒤에 다음 태스크를 실행하는 것.

실행 순서가 보장된다는 장점이 있지만, 이후 태스크들이 블로킹되는 단점이 존재.

비동기 처리.

현재 실행 중인 태스크가 종료되는 것을 기다리지 않고 다음 태스크를 실행하는 것.

4가지: 타이머 함수, DOM API, HTTP 요청, 이벤트 핸들러

(동기적 이벤트: focus, click 이벤트, 커스텀 이벤트 등)

자바스크립트 엔진은 싱글 스레드 방식이나,

브라우저는 멀티 스레드로 동작한다.

태스크 큐

비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역

이벤트 루프

이벤트 루프는 콜 스택과 태스크 큐를 반복해서 확인한다.

만약 콜 스택에 실행 컨텍스트가 없고, 태스크 큐에 대기 중인 함수가 있다면

대기 중인 함수를 순차적으로 콜 스택으로 이동시킨다.

마이크로태스크 큐

프로미스의 후속 처리 메서드의 콜백 함수가 일시적으로 보관되는 영역

프로미스에 대해서 설명하세요 ★★★

Promise는 비동기처리에 사용되는 객체입니다.

기존 비동기 처리에서 사용되었던 콜백함수의 단점인

중첩으로 인한 복잡도 증가 및 에러처리의 어려움을 해결하기 위해 ES6에서 등장하였다.

프로미스의 상태에는 Pending(대기), Fulfilled(성공), Rejected(실패)가 존재한다.

(비동기 처리가) 성공 상태인 경우, resolve를 호출하고 then으로 처리한다. (후속 처리 메서드)

(비동기 처리가) 실패 상태인 경우, reject를 호출하고 catch로 처리한다.

성공이나 실패와는 상관없이 마지막에 호출되는 finally도 있다.

모든 후속 처리 메서드는 프로미스를 반환하며, 연쇄적으로 호출할 수 있다. (프로미스 체인)

Promise.resolve, Promise.reject

Promise.all, Promise.allSettled, Promise.race (정적 메서드)

async & await에 대해서 설명하세요 ★★

async & await는 비동기 코드를 동기적으로 표현하여 간단하게 나타내는 것이다.

기존의 Promise 또한 코드가 장황해진다는 단점이 있었고,

이를 보완하기 위해 ES8에서 도입되었다.

function 앞에 async를 붙여서 사용하고, 해당 함수는 항상 프로미스를 반환한다.

await은 async 함수 내부에서, 프로미스 앞에서 사용해야 한다.

프로미스가 처리될 때까지 기다리다가, 그 처리 결과를 반환한다.

에러 처리는 try...catch 문을 사용할 수 있다.

"==" 와 "==="의 차이는 무엇인가요?

"=="는 비교하는 대상의 타입이 다르면 암묵적 타입 변환을 통해

타입을 일치시킨 후 같은 값인지 비교한다.

즉 두 값의 타입이 다르더라도, 형 변환된 값이 같다면 true를 리턴한다.

"==="는 일치 연산자로 동등 연산자보다 엄격하게 비교한다.

타입과 값이 모두 같을 경우에만 true를 리턴한다.

RequestAnimationFrames에 대해서 설명하세요

"화면을 업데이트하기 전에 나의 콜백을 실행해줘"

RequestAnimationFrame 큐에 콜백이 쌓인다.

브라우저에서 다음 렌더링이 발생하기 전에 콜백 함수를 실행한다.

리액트

React의 라이프사이클에 대해 설명해주세요.

React의 클래스형 컴포넌트에서 사용하는 LifeCycle API는, 컴포넌트가 DOM 위에 생성되거나 사라질 때, 혹은 업데이트될 때 호출되는 API입니다.

useEffect는 componentDidUpdate와 완전히 같지는 않다.

Virtual DOM에 대해 설명해주세요.

DOM과 유사한 객체를 메모리에 올리고, 변경사항이 생기면 메모리에 올라간 Virtual DOM을 수정하고, DOM에 대해 비교를 수행하여 변경사항에 대해서만 DOM에 반영하는 것을 말합니다. 이를 통해 반응성이 빠른 웹을 구현할 수 있습니다.

Virtual DOM은 트리가 변경되었는지 어떻게 비교를 하나요?

React의 경우, Reconciliation을 사용합니다.
React의 Reconciliation은 변경 전과 변경 후의 엘리먼트 노드에 대해
디핑(diffing) 비교 알고리즘을 수행합니다.

하지만 일반적의 경우 디핑 알고리즘은 O(n^3)의 시간복잡도를 가지고 있으며,
React에 이 알고리즘을 적용한다면 1000개의 엘리먼트 노드에 대해 알고리즘을
수행할 경우 10억 번의 비교연산을 수행해야합니다.

React는 대신 다음 두 가지 가정에 기반하여 O(n)의 시간복잡도를 가지는
휴리스틱 알고리즘을 구현했습니다.

서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다.

개발자가 key prop을 통해,

여러 렌더링 사이에서 어떤 자식 엘리먼트가

변경되지 않아야 할지 표시해줄 수 있다.

이러한 처리로, 일반 디핑 알고리즘에 비해 현저히 낮은 비용으로 비교 및 UI 렌더링이 가능합니다.

리액트 훅이란 무엇일까요?

훅은 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 하는 기능입니다. 함수형 컴포넌트에서도 컴포넌트의 상태값과 생명 주기 메소드를 이용할 수 있게 해줍니다.

추가적으로 커스텀훅을 통해 재사용성 있는 함수를 여러 컴포넌트에서

쉽게 사용할 수 있습니다. 이러한 훅은 React 버전 16.8에 추가되었습니다.

리액트에서 Key는 무엇인가요?

리액트에서 Key는 컴포넌트 배열을 렌더링했을 때, 어떤 원소에 변동이 있었는지 알아내려고 사용합니다. Key가 없을 때는 가상 DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지합니다. 하지만, key가 있다면 이 값을 사용하여 어떤 변화가 일어났는지 더욱 빠르게 알 수 있습니다.

Key를 인덱스로 해도 괜찮을까? 순서에 변화가 있다면 문제가 발생할 것.

useEffect에 대해 설명해주세요.

useEffect 함수는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 실행할 수 있도록 하는 Hook입니다. useEffect는 컴포넌트가 마운트 됐을 때, 혹은 언마운트되거나 업데이트 됐을 때, 특정 작업을 처리할 수 있습니다. 즉, 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것입니다. useEffect Hook을 사용할때는 첫 번째 인수로 실행할 콜백함수를 넣고, 두 번째 인수로 검사하고자하는 특정 값이나 빈 배열을 넣습니다.

useCallback에 대해 설명해주세요.

useCallback은 콜백 함수를 메모이제이션합니다. 이 메모이제이션은 콜백의 의존성이 변경되었을 때만 변경됩니다. useCallback은 불필요한 렌더링 방지를 위해 사용합니다. useCallback으로 감싼 함수를 자식 컴포넌트의 props로 넘겨주고, 자식 컴포넌트는 React.memo로 감싸서, props가 실제로 변경되었을 때에만 리렌더링할 때 많이 사용합니다.

useMemo에 대해 설명해주세요.

useCallback 함수와 마찬가지로 메모이제이션된 값을 반환합니다. 의존성이 변경되었을 때만 메모이제이션된 값을 다시 계산하므로, 불필요한 계산을 방지합니다.

메모이제이션에 대해 설명해주세요.

일반적으로 메모이제이션은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술입니다. 이는 리액트에서도 불필요한 계산 혹은 리렌더링의 방지를 위해 사용됩니다.

동적 프로그래밍이란 무엇인가요?

하나의 큰 문제를 여러 개의 작은 문제로 나누어서 그 결과를 저장하여 다시 큰 문제를

해결할 때 사용하는 알고리즘 설계 기법

useRef에 대해 설명해주세요.

useRef 은 .current 프로퍼티로 전달된 인자로 초기화된 변경 가능한 ref 객체를 반환하며, 이 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. 이 전 생애주기를 통한 유지란 컴포넌트가 리렌더링되어도 값이 유지된다는 뜻입니다.

Dom을 직접 가리킬 때에 사용하구요,

렌더링과는 무관하게 어떤 값을 유지하고자 할 때 사용합니다.

리액트의 에러 바운더리에 대해 아시나요?

에러 바운더리('Error Boundaries')는 하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 React 컴포넌트입니다.

함수형 컴포넌트의 장점이 무엇인가요?

클래스형 컴포넌트보다 선언이 간편하고, 코드의 양이 적습니다.

클래스형 컴포넌트보다 메모리 자원을 덜 사용합니다.

프로젝트 빌드 후 배포할 때 결과물의 파일 크기가 더 작습니다.

이전에는 상태값과 라이프사이클 API를 사용하지 못한다는 단점이 있었는데,

이제는 Hook을 통해 이러한 단점이 사라졌습니다.

useState와 useRef의 차이점에 대해서 설명해주세요

동기 VS 비동기

렌더링 VS 렌더링과 무관

Component가 unmount 될 때의 state를 딱 한번만 log 찍고 싶은데

어떻게 해야 할까요?


const ref = useRef();
const [state, setState] = useState(); 

useEffect(() => {
  ref.current = state;
}, [state]);

useEffect(() => {
  return () => {
    console.log(ref.current);
  }
}, []);

React, Vue, Angular의 차이

공통점은 SPA 기반 프론트엔드 프레임워크 및 라이브러리라는 것.

리액트는 단방향 바인딩으로 부모 컴포넌트에서 props가 자식 컴포넌트로 전달되고,

vue나 angular는 양방향 바인딩이 구현 가능하다는 차이가 있습니다.

러닝커브는 뷰가 가장 낮고, 리액트는 jsx 문법을 사용하며,

개발 생태계가 가장 잘 활성화 되어있습니다. 큰 규모의 어플리케이션 개발에 유리하다.

뷰와 앵귤러는 프레임워크이다.

앵귤러는 타입스크립트를 사용함으로써 코드의 가독성과 안정성이 좋지만 러닝커브가 크다.

프론트엔드 개발자 면접 준비 (React)

React의 클래스형 컴포넌트에서 사용하는 LifeCycle API는, 컴포넌트가 DOM 위에 생성되거나 사라질 때, 혹은 업데이트될 때 호출되는 API입니다. DOM과 유사한 객체를 메모리에 올리고, 변경사항이 생기면 메모리에 올라간 Virtual DOM을 수정하고, DOM에 대해 비교를 수행하여 변경사항에 대해서만 DOM에 반영하는 것을 말합니다. 이로 인해 더 반응성이 빠른 웹을 구현할 수 있습니다. React의 경우, Reconciliation을 사용합니다.

https://velog.io/@lucas/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EB%A9%B4%EC%A0%91-%EC%A4%80%EB%B9%84-React

리액트 컴포넌트의 리렌더링 조건

state에 변경이 있을 때

props에 변경이 있을 때

부모 컴포넌트가 리렌더링 될 때

forceUpdate가 실행될 때

shouldComponentUpdate에서 true가 반환될 때

useLayoutEffect에 대해서 알고 계시나요?

useLayoutEffect는 useEffect와 유사합니다.

단, useLayoutEffect는 브라우저 페인팅 이전에 동작하고 동기적으로 실행됩니다.

useEffect는 비동기적으로 실행되어, UI 상에서 깜빡거리는 현상이 발생할 수 있는데

이 경우에 useLayoutEffect를 사용하는 것으로 알고 있습니다.

리액트에서 상태란 무엇인가요?

리액트는 상태를 기반으로 UI를 렌더링한다.

상태가 변경되면 그에 따라 UI가 변경되도록 동기화한 것이 특징적.

역할에 따라 구분하자면,

컴포넌트 안에서 관리되는 State와

부모 컴포넌트에서 자식 컴포넌트로 전달되는 props가 있다.

범위의 측면에서는

State가 몇몇 컴포넌트에 국한되어 영향을 주는 지역 상태,

전체 컴포넌트에 영향을 줄 수 있는 전역 상태로 나눌 수 있다.

기존의 UI 상태 관리는 MVC를 써서 UI를 관리했었다.

그런데 MVC는 양방향 데이터 흐름을 가지고 있기 때문에

모델의 상태가 바뀌면 뷰가 바뀌며,

뷰에서 변경이 발생하면 모델의 상태가 바뀌어 복잡성이 증가한다는 단점.

이 MVC 패턴의 복잡도를 해결하기 위해 등장한 것이 바로 리액트. 리액트는 단방향 데이터 흐름을 가졌기 때문에 상태의 변경을 예측하기 쉽다는 장점이 있다. 단, 부모에서 자식으로 state를 넘겨주면서 props drilling 문제가 발생할 수 있다는 단점.

그래서 2년 뒤에는 FLUX 패턴을 가진 Redux가 등장. action => dispatcher => store => view => action => dispatcher => store

Redux는 리액트의 Prop Drilling 문제와 복잡해지는 상태 공유에 따른 컴포넌트간 의존성 문제를 해결 Redux는 단방향으로, 그리고 엄격하게 상태를 관리하므로 안정적. 한편, 리덕스 이후에도 다양한 상태 관리 라이브러리들이 등장.

한편, 리덕스는 다소 복잡하다는 문제가 있고 이에 대한 대안으로 등장한 것이 Context API. 경량화 버전이지만 나름의 단점이 존재. 또한, 역시 문법을 간소화하고 리액트 친화적으로 만들어진 Recoil 등이 등장.

한편, Redux는 서버의 데이터를 캐싱해서 사용하는 경우가 많은데 이 때 업데이트 등의 관리가 복잡해진다는 단점. 이에 대한 대안으로 떠오른 것이 SWR, React-query

props drilling 문제가 발생한다면, 다수의 컴포넌트간에 상태 의존성이 높아진다면 전역 상태를 사용하는 것이 좋다. 로그인한 유저, 언어, 다크모드, 테마 등 변화가 잦지 않고 서비스 전반에 걸친 상태의 경우 사용.

Redux는 의존해서 사용하는 값이 변할 때 리렌더링이 되도록 최적화 되어있지만

Context는 해당 값이 아닌, 다른 값이 변경될 때에도

리렌더링이 발생한다.

Context를 다룰 때에는 관심사에 따라 분리해서 관리하는 것이 필요하다.

그 후 이를 간소화할 수 있는 Context API가 나왔고,

서버 상태를 캐싱할 수 있는 React Query, SWR 등이

리액트 전용 상태 관리 라이브러리인 Recoil 등이 나왔다.

(리렌더링이란 리액트 컴포넌트를 만드는 함수를

호출하는 것을 의미하며, 실제 DOM에 마운트하는 것을 의미하지는 않는다)

https://www.stevy.dev/react-state-management-guide

React의 상태관리 방법에 대해서 설명하시오

리액트의 상태관리에는 context API, Redux, MobX 등의 라이브러리를 사용한 방법이 있다.

그 중 가장 많이 사용하는 Redux는 전역 상태를 생성하고 관리하며,

상태관리 라이브러리 중 가장 압도적으로 많이 사용된다.

리덕스는 컴포넌트에서 액션 크리에이터를 통해 액션을 만들고,

그 액션을 디스패치 함수로 실행시킨다.

그러면 store에서 리듀서가 매칭되는 액션이 있는지 확인하고

스토어에 저장된 상태를 변경해주는 원리로 작동한다.

리덕스는 context api와 다르게 전역 상태 관리 외에도

redux-saga, reduc-thunk 등 추가 라이브러리를 통해

비동기 작업을 쉽게 해줄 수 있는 장점이 있지만,

코드가 많고 복잡하기 때문에 이런 부가기능이 필요하지 않은

소규모 프로젝트에는 context api를 쓰는 것이 나을 수도 있다.

리덕스에 대해서 설명하세요

리덕스란 현재 가장 많이 사용되고 있는 상태관리 라이브러리다.

컴포넌트의 상태 관련 로직을 따로 분리시켜 효과적으로 관리할 수 있고,

상태를 공유할 때에도 Store를 통해 전달이 가능해서 편리하다.

그리고 미들웨어라는 기능을 제공하여 비동기 작업을 효율적으로 관리할 수 있다.

리덕스에서 데이터를 가공하기 위해선 액션이란 것을 만들어야한다.

그 액션을 디스패치를 해야만 Store내에 있는 데이터가 바뀐다.

또한 그 액션들이 어떻게 동작해야하는지 구현을 해서 저장해 두는 곳을 리듀서라고 한다.

리덕스는 데이터가 다를 때마다 액션을 하나하나 만들어야하므로 코드량이 증가한다는 단점이 있다.

vs Context API

리덕스의 3대 원칙

단일 스토어

하나의 애플리케이션 안에는 하나의 스토어

상태는 읽기전용

기존의 상태는 건드리지 않고 새로운 상태를 생성

리듀서는 순수함수

동일한 입력이라면 동일한 출력값.

입력값을 수정하거나, 사이드 이펙트를 발생시켜서는 안 된다.

고차 컴포넌트(HOC)란? 사용해본 적 있는지?

고차 컴포넌트는 컴포넌트를 전달받아 새로운 컴포넌트를 반환하는 함수입니다.

컴포넌트 로직을 재사용하기 위한 리액트 기술이고,

유저 인증 로직 처리 등에 자주 사용된다.

나는 유저 인증 로직을 처리할 때 사용해보았고, 또 커스텀 훅으로도 만들어보았다.

고차 컴포넌트는 클래스형 컴포넌트에서 많이 사용하며,

커스텀 훅은 함수형 컴포넌트에서 많이 사용한다.

고차 컴포넌트는 컴포넌트의 구조가 복잡해질 수 있다는 등의 단점이 존재한다.

이에 비해 커스텀 훅은 사용이 더 간단하고 선언적이며,

구조의 복잡성에 대한 문제로부터 상대적으로 자유롭다.

Computer Science

HTTP란 무엇인가요? ★

HTTP 1.1과 HTTP 2.0에 대해서 설명해주세요.

1.1은 하나의 연결에서 리소스의 한 번 요청, 응답만 가능

2.0은 하나의 연결에서 리소스를 여러 번 요청 및 응답할 수 있음

p.664

HTTP와 HTTPS의 차이점에 대해서 설명해주세요.

HTTP는 따로 암호화 과정을 거치지 않기 때문에 중간에 패킷을 가로챌 수 있습니다.

따라서 보안이 취약해짐을 알 수 있습니다.

이를 보완하기 위해 나온 것이 HTTPS입니다.

HTTPS는 중간에 암호화 계층(SSL)을 거쳐서 패킷을 암호화합니다.

다만, 인증서를 발급하고 유지하는데 추가 비용이 발생한다는 약간의 단점.

API란 무엇인가요?

API는 하나의 소프트웨어 또는 컴퓨터와 다른 소프트웨어의 통신을 위한 규약,

규격사항, 서비스 계약이라고 할 수 있다.

API를 통해 한쪽의 소프트웨어가 다른 소프트웨어에게 서비스를 제공한다.

API 사양은 이 제공받는 서비스들을 어떻게 사용하는지 설명한다는 것을 의미한다.

서비스를 제공받는 쪽은 내부의 구현 원리에 대해 알 필요 없이

API를 통해 해당 서비스를 이용할 수 있다. 이것이 API의 중요 목적 중 하나이다.

API는 시스템이 동작하는 방식에 관한 내부의 세세한 부분을 숨기는

것으로, 내부의 세세한 부분이 나중에 변경되더라도

프로그래머가 유용하게 사용할 수 있고 일정하게 관리할 수 있는 부분들만 노출시킨다.

서비스의 ‘구현’과 ‘사용’의 분리

https://ko.wikipedia.org/wiki/API

REST란? REST API란? ★★

REST는 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 것.

리소스 중심의 아키텍쳐.

URI를 통해 자원을 명시하고, HTTP 메소드를 통해 해당 자원에 대한 CRUD 동작을 적용한 것.

REST 구성 요소에는 3가지가 존재

자원

문서, 텍스트, 이미지 등 해당 서버가 관리하는 모든 것

모든 자원에는 고유한 ID가 존재하고, 이것이 HTTP의 URI이다.

클라이언트는 URI를 이용해서 자원을 지정하고,

해당 자원의 상태에 대한 조작을 Server에 요청한다.

행위

HTTP 프로토콜의 GET, POST, PUT, DELETE와 같은 메서드

표현

서버가 보내는 응답

하나의 자원은 JSON, XML 등 여러 형태의 표현으로서 나타낼 수 있다.

장점은 일관적인 컨벤션을 확립할 수 있다는 것.

API의 호환성 및 명확성이 높아진다는 것.

범용성이 뛰어나다는 것 등

단점은 사용할 수 있는 메소드가 4가지로 제한적이고,

구형 브라우저가 아직 지원해주지 못하는 부분이 존재한다는 것.

HTTP 표준 프로토콜을 따르는 모든 플랫폼에서 사용이 가능하다.

상태: 데이터가 요청되어지는 시점에서 자원의 상태

서버-클라이언트 구조, 무상태

REST API는 REST를 기반으로 서비스 API를 구현한 것

URI를 규칙에 맞게 잘 설계했는지의 여부

URI는 리소스를 표현하는 데 집중하고, 행위에 대한 정의는 HTTP 요청 메서드를 통해 한다.

(실제로는 리소스만으로 URI를 설계하기 어렵다. 컨트롤 URI가 필요)

[Network] REST란? REST API란? RESTful이란? - Heee's Development Blog

Step by step goes a long way.

https://gmlwjd9405.github.io/2018/09/21/rest-and-restful.html

[기술면접대비] 개발자 기술면접 대비 요약본 (4)

👉🏻 REST는 Representational State Transfer의 약자입니다. 간단히 말해서 URI와 HTTP 메소드를 이용해 객체화된 서비스에 접근하는 것입니다. REST의 요소로는 크게 리소스, 메소드, 메세지 3가지 요소로 구성됩니다. 예를 들어 "이름이 Tom인 사용자를 생성한다." 라는 호출이 있을 때 "사용자"는 생성되는 리소스, "생성한다."라는 행위는 메소드, 그리고 "이름이 Tom인 사용자"는 메세지가 됩니다.

https://wooaoe.tistory.com/51

브라우저 저장소에 대해 설명해주세요.

브라우저 저장소로는 쿠키가 있으며,

HTML5를 통해 추가된 웹스토리지(LocalStorage와 SessionStorage)가 있습니다.

브라우저에서 쿠키를 설정하면,

이후 모든 웹 요청은 쿠기정보를 포함하여 서버로 전송하게 되며,

웹스토리지의 경우에는 클라이언트에만 존재할 뿐 서버로 전송되지 않습니다.

쿠키는 웹스토리지와 다르게 단순 문자열만 저장할 수 있으며

용량이 4KB로 작고, 저장된 데이터는 영구적이지 못합니다.

웹스토리지는 LocalStorage와 SessionStorage가 있는데,

LocalStorage는 데이터를 영구적으로 저장할 수 있으나,

SessionStorage는 브라우저가 종료되면 데이터도 같이 지워지는 특성이 있습니다.

쿠키 vs 세션 vs 웹스토리지 ★★★

1. 쿠키(Cookie)

브라우저에 저장되는 키와 값의 쌍으로 된 작은 파일(4KB)이다.

서버가 클라이언트의 상태 정보를 브라우저에 저장했다가 참조한다.

클라이언트에 300개까지 쿠키 저장이 가능하다.

하나의 도메인당 20개의 값만 가질 수 있으며,

하나의 쿠키값은 4KB까지 저장이 가능하다.

Response Header에 Set-Cookie 속성을 사용하면 클라이언트에 쿠키를 만들 수 있다.

쿠키는 사용자가 따로 요청하지 않아도

브라우저가 Request 시에 Request Header에 넣어서 자동으로 서버에 전송한다.

HTTP Only 옵션을 설정하면 클라이언트에서 접근할 수 없고, XSS를 예방할 수 있다.

CSRF 공격으로부터는 위험할 수 있다.

same-site: 쿠키의 전송에 제한을 둠. 쿠키에 설정된 도메인과 같은 경우에만 전송한다.

2. 세션(Session)

세션은 사용자의 정보를 서버 측에서 저장 및 관리한다.

서버에서 클라이언트를 구분하기 위해 세션 ID를 부여하며,

브라우저를 종료할 때까지 인증 상태를 유지한다.

데이터를 서버에 두기 때문에 쿠키보다 보안에 좋지만,

사용자가 많아질수록 서버 메모리를 많이 차지하게 된다.

접속 시간에 제한을 두어 일정 시간 응답이 없다면 정보가 유지되지 않게 설정 가능하다.

2.1. 쿠키와 세션 비교

데이터 저장위치: 쿠키는 클라이언트(브라우저), 세션은 서버

보안: 저장위치 때문에 쿠키는 스니핑에 당할 우려가 있지만,

세션은 쿠키를 이용해 세션 아이디만 저장하고 서버에서 처리하므로

보안성은 세션 > 쿠키

속도는 쿠키 > 세션

라이프 사이클: 쿠키는 브라우저를 종료해도 만료기간이 남아있으면 존재,

세션은 브라우저 종료 시 만료기간에 상관없이 종료

3. 웹 스토리지

클라이언트에 데이터를 저장할 수 있도록 HTML5부터 추가된 저장소

간단한 Key-Value 스토리지 형태

쿠키와 달리 자동 전송되지 않음 (CSRF로부터 안전)

오리진(프로토콜, 호스트, 포트) 단위로 접근이 제한되는 특성

쿠키보다 큰 저장 용량 지원(모바일 2.5MB, 데스크탑 5~10MB)

서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없음

(웹 스토리지 객체 조작은 JavaScript 내에서만 수행)

오직 문자형(String) 데이터 타입만 지원

로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)가 있음

3.1. 로컬 스토리지

사용자가 데이터를 지우지 않는 이상,

브라우저나 OS를 종료해도 계속 브라우저에 남아있음 (영구성)

단, 동일한 브라우저를 사용할 때만 해당

지속적으로 필요한 데이터 저장(자동 로그인 등)

3.2. 세션 스토리지

데이터가 오리진 뿐만 아니라 브라우저 탭에도 종속되기 때문에,

윈도우나 브라우저 탭을 닫을 경우 제거됨

일시적으로 필요한 데이터 저장(일회성 로그인 정보, 입력폼 저장 등)

XSS와 CSRF에 대해서 설명하세요

사이트 간 스크립팅(XSS; Cross-Site Scripting)

해커가 웹 페이지에 악성 스크립트를 삽입하는 것.

입력 값을 제대로 검사하지 않고 사용할 경우 나타난다.

~~주로 여러 사용자가 보는 게시판에 악성 스크립트가 담긴 글을 올리는 형태로 이루어진다.~~

해커가 사용자의 정보(쿠키, 세션, 웹스토리지 등)을 탈취하거나,

비정상적인 기능을 수행하게 하거나 할 수 있다.

주로 다른 웹사이트와 정보를 교환하는 식으로 작동한다.

사이트 간 요청 위조(CSRF; Cross-Site Request Forgery)

권한을 도용당한 클라이언트가 서버에 가짜 요청을 전송하는 것.

~~사용자가 자신의 의지와는 무관하게 공격자가 의도한 행위(수정, 삭제 등)를~~

~~특정 웹사이트에 요청하게 하는 공격이다.~~

사용자가 웹사이트에 로그인한 상태에서 CSRF 공격 코드가 삽입된 페이지를 열면,

서버는 위조된 공격 명령이 믿을 수 있는 사용자로부터

발송된 것으로 판단하게 되어 공격에 노출된다.

XSS의 공격 대상은 클라이언트, CSRF의 대상은 서버

XSS는 클라이언트가 특정 웹사이트를 신용하는 점을 노린 것이고,

CSRF는 서버가 사용자의 웹 브라우저를 신용하는 점을 노린 것이다.

XSS의 목적은 쿠키나 세션 갈취, 웹사이트 변조

CSRF의 목적은 권한 도용

XSS와 CSRF

웹 애플리케이션에서 많이 나타나는 취약점의 하나로, 웹사이트 관리자가 아닌 이가 웹 페이지에 악성 스크립트를 삽입할 수 있는 취약점이다. - 이 취약점은 웹 애플리케이션이 사용자로부터 입력 받은 값을 제대로 검사하지 않고 사용할 경우 나타난다. 주로 여러 사용자가 보게 되는 전자 게시판에 악성 스크립트가 담긴 글을 올리는 형태로 이루어진다.

https://zmfflems.tistory.com/15

XSS와 CSRF 특징 및 차이

주로 크로스 사이트 스크립팅(사이트 간 스크립팅 )은 SQL injection과 함께 웹 상에서 가장 기초적인 취약점 공격 방법의 일종으로, 악의적인 사용자가 공격하려는 사이트에 스크립트를 넣는 기법을 말한다. 다른 웹사이트와 정보를 교환하는 식으로 작동하므로 사이트 간 스크립팅이라고 명칭 한다. 이 취약점은 웹 애플리케이션이 사용자로부터 입력 받은 값을 제대로 검사하지 않고 사용할 경우 나타나며, 공격에 성공하면 사이트에 접속한 사용자는 삽입된 코드를 실행하게 된다.

https://lucete1230-cyberpolice.tistory.com/23

함수형 프로그래밍에 대해서 설명해주세요

🏓

함수형 프로그래밍

주소창에 URL을 입력하면 생기는 일 ★★

사용자가 입력한 URL에서 도메인 네임을 DNS 서버에서 검색한다.

IP 주소를 찾는다.

웹 브라우저는 HTTP 프로토콜을 사용하여 HTTP 요청 메세지를 생성

TCP 프로토콜을 사용하여 해당 IP 주소의 서버와 연결한 뒤,

인터넷을 거쳐 해당 서버로 전송

웹 서버는 도착한 HTTP 요청 메세지에서 URL 정보에 해당하는 데이터를 검색

웹 서버는 HTTP 응답 메세지를 생성

TCP 프로토콜을 사용하여 인터넷을 거쳐 원래 컴퓨터로 전달

도착한 HTTP 응답 메세지를 웹 페이지 데이터로 변환

웹 브라우저에 의해 출력되어 사용자가 화면을 볼 수 있게 된다.

브라우저는 우선 캐시에서 DNS 기록을 확인한다.

3-way handshake

클라이언트와 서버가 연결 요청 및 승인 메시지를 교환하여

연결을 설정하는 3단계 프로세스

브라우저에 url을 입력하면 어떤일이 벌어질까?

해당 포스트는 What happens when you type a URL in the browser and press enter? 를 번역 & 정리한 글 입니다. "브라우저에 maps.google.com을 입력하면 어떤 일이 벌어지나요?" 기술 면접을 준비하다보면 이 질문을 한번쯤 들어본다. 간단한 질문 같지만, 인터넷이 어떻게 작동하는지 기본적인 이해를 할 수 있는 질문이다.

https://velog.io/@khy226/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%97%90-url%EC%9D%84-%EC%9E%85%EB%A0%A5%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EC%9D%BC%EC%9D%B4-%EB%B2%8C%EC%96%B4%EC%A7%88%EA%B9%8C

[면접준비] 프론트엔드 개발자 취업 면접 질문 및 답변 정리(64문)

개발자 취업을 위해 질문을 정리하다가, 취업이 되어서 취업 준비하는 개발자 분들에게 도움이 되고자 비공개로 작성했던 자료를 공개하고자 한다. 나도 여기저기서 모은 것도 있고, 내 방식대로 정리한 것도 있어서 완벽하진 않지만 도움이 필요한 사람들에게 참고가 되었으면 좋겠다. 만약 퍼간다면 꼭 나의 출처도 남겨주셨으면 좋겠다.🙄 1. 브라우저 렌더링 원리 (https://d2.naver.com/helloworld/59361) - 1.

https://amyhyemi.tistory.com/224

SSR과 CSR의 차이점에 대해서 설명해주세요 ★★

SSR은 사용자가 웹 페이지에 접근 할 때,

서버에 각각 페이지에 대해 요청하고, 서버는 즉시 렌더링 가능한 HTML 파일을 만든다.

이를 통해 화면에 즉시 보여주고,

이후 해당 페이지의 JS 파일을 다운로드 받으면 상호작용할 수 있다.

CSR은 클라이언트측에서 HTML을 받은 후에,

JS가 동작하면서 데이터만을 주고받아 클라이언트에서 렌더링을 수행하는 것이다.

초기로딩속도 측면에서,

SSR은 CSR에 비해 다운받는 파일이 많지 않아 속도가 빠른 반면,

CSR은 모든 JS 파일을 다운 받아야 하므로 초기에 오래걸린다.

(페이지 전환 속도는 CSR이 더 빠르다. 필요한 JS 파일을 이미 받았기 때문이다)

SSR은 서버와 잦은 응답을

하기 때문에 서버에 부담이 가고 UX 측면이 떨어진다(깜빡임 현상),

CSR은 데이터 요청이 있을때만 서버에 요청하기 때문에 서버에 부담이 적다.

SEO 측면에서, SSR은 HTML에 대한 정보가 포함되어 있어

데이터를 수집할 수 있기에 SEO에 유리하지만,

CSR은 맨 처음 HTML 파일이 비어있어 구글을 제외한 크롤러가 데이터를 수집할 수 없다.

(자바스크립트를 실행하지 않는다)

SSR과 CSR의 차이

CSR(Client Side Rendering)과 SSR(Server Side Rendering)은 대척 관계에 있는 방식인만큼 장단점이 서로 엇갈려 있다.따라서 서로의 장단을 정확하게 알고, 적재적소에 필요한 방식으로 구현하는 것이 중요하다. 이 글의 순서는 다음과 같다. 말 그대로 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다. 위의 사진은 SSR 의 단계를 설명한다. User가 Website 요청을 보냄.

https://proglish.tistory.com/216

바벨과 웹팩에 대해서 설명해주세요 ★

바벨은 자바스크립트 트랜스파일러이다.

바벨은 모든 실행환경에서 자바스크립트가 정상적으로 동작할 수 있도록

ES6 코드를 ES5 코드로 변환해준다.

구형 브라우저, 버전에서는

실행되지 않는 코드들을 정상적으로 동작하게 만들어준다.

웹팩은 모듈 번들러다.

자바스크립트 모듈을 비롯한 관련 리소스들을 찾은 다음

이를 브라우저에서 사용할 수 있는 번들로 묶는다.

모듈 번들러는 여러 개의 나누어져 있는 파일들을 하나로 만들어주는 라이브러리이고,

수많은 파일을 서버에 개별적으로 요청하는 것이 아닌

하나로 줄여서 요청하여 코드를 압축하고 최적화해준다.

JWT에 대해서 설명해주세요

JWT는 JSON Web Token의 약자로,

데이터가 JSON으로 이루어져 있는 토큰을 말한다.

기존의 세션인증방식은 인증 관련 정보를 서버의 DB에 저장했기 때문에

서버가 과부하 되는 문제가 발생하였다. 이를 보완하기 위해

사용자 인증에 필요한 정보를 토큰 자체에 담고 있어

별도의 저장소에 정보를 저장해 둘 필요가 없는 JWT를 사용하게 되었다.

토큰은 로그인 이후 서버가 만들어주는 문자열이고,

문자열 안에는 사용자의 로그인 정보가 들어있다.

사용자가 로그인을 하면 서버는 사용자에게 토큰을 발급하고,

사용자는 토큰과 함께 다른 API 작업을 요청한다.

서버는 토큰의 유효성 검사를 통해 요청한 것에 대한 응답을 해준다.

단, 한 번 발급된 토큰은 수정 및 폐기가 불가하다는 단점이 있고,

유효기간을 짧게 지정해주는 것이 중요하다.

[WEB] 📚 JWT 토큰 인증 이란? - 💯 이해하기 쉽게 정리

보통 서버가 클라이언트 인증을 확인하는 방식은 대표적으로 쿠키, 세션, 토큰 3가지 방식 이 있다. JWT를 배우기 앞서 우선 쿠키와 세션의 통신 방식을 복습해보고 이들의 각각 특징과 장단점 그리고 왜 토큰 인증 방식을 사용하지는에 대해 간단하게 알아보자. (주입식 암기하지말고 과정을 이해하면 머릿속에 더 오래 남을 것이다!) 쿠키는 Key-Value 형식의 문자열 덩어리이다.

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-JWTjson-web-token-%EB%9E%80-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC

[WEB] 📚 Access Token & Refresh Token 원리 (feat. JWT)

이번 포스팅에서는 기본 JWT 방식의 인증(보안) 강화 방식인 Access Token & Refresh Token 인증 방식에 대해 알아보겠다. 먼저 JWT(Json Web Token) 에 대해 잘 모르는 독자들은 다음 포스팅을 참고하길 바란다. Access Token 만을 통한 인증 방식의 문제는 만일 제 3자에게 탈취당할 경우 보안에 취약 하다는 점이다.

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-Access-Token-Refresh-Token-%EC%9B%90%EB%A6%AC-feat-JWT

[WEB] 📚 Access Token & Refresh Token 원리 (feat. JWT)

CORS에 대해서 설명해주세요

CORS는 출처(Origin)가 다른 서버의 자원을 요청할 때 생긴다.

여기서 출처란 프로토콜, 호스트, 포트 번호를 모두 합친 것으로,

서버의 위치를 찾아가기 위해 필요한 가장 기본적인 것들이라고 할 수 있다.

동일 출처 정책으로 인해 CORS같은 상황이 발생하면

외부 서버로부터 응답받은 데이터를 브라우저는 보안목적으로 차단을 한다.

해당 문제를 해결하려면 서버 측에서 response 헤더에

"Access-Control-Allow-Origin"의 값을 설정해주면 된다.

CORS는 왜 이렇게 우리를 힘들게 하는걸까?

이번 포스팅에서는 웹 개발자라면 한번쯤은 얻어맞아 봤을 법한 CORS(Cross-Origin Resource Sharing) 정책에 대한 이야기를 해보려고 한다. 사실 웹 개발을 하다보면 CORS 정책 위반으로 인해 에러가 발생하는 상황은 굉장히 흔해서 누구나 한 번 정도는 겪게 된다고 해도 과언이 아니다. 필자는 대학생 때 친구들과 토이 프로젝트를 만들던 과정에 이 이슈를 처음 겪었었다.

https://evan-moon.github.io/2020/05/21/about-cors/

(CORS 에러로 어려움을 겪는 것은 클라이언트이지만,

이를 해결할 수 있는 것은 서버다)

크로스브라우징에 대해서 설명해주세요 ★

어떤 브라우저 환경에서든 동일하게 작동하는 것을 말한다.

브라우저들은 각각의 렌더링 엔진이 다르기 때문에

동일한 코드라도 브라우저마다 화면이 다르게 보일 수 있다.

이에 다른 기종/플랫폼에 따라 달리 구현되는 기술을

비슷하게 만듬과 동시에 어느 한쪽에만 치우치지 않도록

공통요소를 사용하여 웹 페이지를 제작할 필요가 있다.

예를 들어, 크롬에서 이용할 수 있던 사이트가 오페라에서는 보이지 않아

이용할 수 없는 것을 크로스 브라우징을 이용하여

사이트를 100% 이용할 수 있게 만드는 기술이다.

내가 쓰는 css 속성을 can I use 사이트 같은 곳에서 확인하거나,

브라우져별 접두사인 벤더 프리픽스를 사용하는 것도 해결 방법이다.

HTTP 상태 코드에 대해서 설명하세요

1xx (정보)

요청을 받았으며 프로세스를 계속한다.

2xx (성공)

요청을 정상적으로 처리하였다.

3xx (리다이렉션)

요청을 완료하려면 추가 행동이 필요하다.

영구 리다이렉션, 일시 리다이렉션
PRG - POST로 주문 후, 주문 결과 화면을 GET 메서드로 리다이렉트
304(캐시로 리다이렉트)

4xx (클라이언트 오류)

클라이언트의 잘못된 문법 등으로 인해 오류가 발생.

재시도를 해도 실패한다.

401: Unauthorized
404: Not Found

5xx (서버 오류)

서버가 정상 요청을 처리하지 못함.

재시도하면 성공할 수도 있다.

HTTP 웹 기본 지식 정리2

"김영한" 님의 인프런 강의 "모든 개발자를 위한 HTTP 웹 기본 지식"을 듣고 정리한 글입니다. 1. 1xx Informational, 요청이 수신되어 처리 중 거의 사용되지 않음 2.

https://gitul0515.github.io/%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC/2022/03/29/%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC.html

HTTP의 주요 메서드에는 무엇이 있나요? ★★★

GET

리소스 조회.
서버에 전달하고 싶은 데이터는 query 파라미터를 통해서 전달.

POST

요청 데이터 처리, 주로 등록에 사용.
메시지 body를 통해 서버로 데이터 전달.
POST는 의미가 넓다.

POST 요청이 오면 데이터를 어떻게 처리할지 리소스마다 따로 정해야 한다.

PUT

리소스를 '완전히' 대체, 해당 리소스가 없으면 생성. 쉽게 말해 덮어버린다.
PUT을 요청하는 클라이언트는 리소스를 식별한다.

즉, 클라이언트가 리소스의 위치를 알고 URI를 지정한다. (POST와의 차이점)

PATCH

리소스 부분 수정
PATCH가 지원되지 않는 경우가 간혹 있음. POST를 쓰면 된다.

DELETE

리소스 삭제

HTTP 웹 기본 지식 정리1

"김영한" 님의 인프런 강의 "모든 개발자를 위한 HTTP 웹 기본 지식"을 듣고 정리한 글입니다. 1. GET 리소스 조회. 서버에 전달하고 싶은 데이터는 query 파라미터 를 통해서 전달. 메시지 body를 사용해서 데이터를 전달할 수 있으나, 권장하지 않는다. 지원하지 않는 서버가 많기 때문이다. 2. POST 요청 데이터 처리, 주로 등록에 사용.

https://gitul0515.github.io/%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC/2022/03/18/%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC.html

컴포넌트란 무엇인가요?

프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈

MVC 디자인 패턴에 대해서 설명해주세요

[개발자 면접준비]#1. MVC패턴이란

사용자가 보는 페이지, 데이터처리, 그리고 이 2가지를 중간에서 제어하는 컨트롤, 이 3가지로 구성되는 하나의 애플리케이션을 만들면 각각 맡은바에만 집중을 할 수 있게 됩니다. 공장에서도 하나의 역할들만 담당을 해서 처리를 해서 효율적이게 됩니다. 여기서도 마찬가지입니다. * 사실 저 밑에 스즈키 네는 군용 볼트를, 옆집 하루노보 네는 군용 너트를 만들고 있을 뿐이다.

https://m.blog.naver.com/jhc9639/220967034588

CSS 박스모델에 대해서 설명해주세요

block, inline, inline-block, content, padding, border, margin

content-box, border-box